@chakra-ui/descendant - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

package.json

		{
		"name": "@chakra-ui/descendant",
		"version": "3.0.5",
		"version": "3.0.6",
		"description": "Register child nodes of a react element for better accessibility",
		@@ -37,3 +37,3 @@ "keywords": [
		"dependencies": {
		"@chakra-ui/react-utils": "2.0.3"
		"@chakra-ui/react-utils": "2.0.4"
		},
		@@ -44,4 +44,4 @@ "peerDependencies": {
		"devDependencies": {
		"@chakra-ui/hooks": "2.0.6",
		"@chakra-ui/system": "2.2.4",
		"@chakra-ui/hooks": "2.0.7",
		"@chakra-ui/system": "2.2.5",
		"react": "^18.0.0"
		@@ -55,4 +55,3 @@ },
		"build:fast": "tsup src/index.ts"
		},
		"readme": "# Descendant\n\nKeep track of descendant components and their relative indices.\n\nA descendant index solution for better accessibility support in compound\ncomponents.\n\n> Note 🚨: This package is primarily intended for internal use by the Chakra\n> UI library. You should not use it directly in your production projects.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/descendant\n\n# or\n\nnpm i @chakra-ui/descendant\n```\n\n## Motivation\n\nDescendants observer is a utility hook for keeping track of descendant elements\nand their relative indices.\n\nIn short, this package allows each item in a list to know its relative index and\nthe parent of the list can keep track of each child, without needing to render\nin a loop and pass each component an index.\n\nThis enables component composition:\n\n```jsx\n<List>\n <Item /> // I'm index 0\n <Item /> // I'm index 1<div>\n <div>\n <Item /> // I'm arbitrarily nested, but still know that I'm index 2\n </div>\n </div>\n</List>\n```\n\n### Usage\n\n```jsx\nimport { createDescendantContext } from \"@chakra-ui/descendant\"\nimport * as React from \"react\"\n\nconst [\n DescendantsProvider,\n useDescendantsContext,\n useDescendants,\n useDescendant,\n] = createDescendantContext()\n\nconst MenuContext = React.createContext({})\n\nfunction Menu({ children }) {\n // 1. Call the `useDescendants` hook\n const descendants = useDescendants()\n\n const [selected, setSelected] = React.useState(1)\n const context = React.useMemo(() => ({ selected, setSelected }), [selected])\n\n return (\n // 2. Add the descendants context\n <DescendantsProvider value={descendants}>\n <MenuContext.Provider value={context}>\n <div role=\"menu\" style={{ maxWidth: 320 }}>\n <button\n onClick={() => {\n const prev = descendants.prev(selected)\n prev.node.focus()\n setSelected(prev.index)\n }}\n >\n Prev\n </button>\n <button\n onClick={() => {\n const next = descendants.next(selected)\n next.node.focus()\n setSelected(next.index)\n }}\n >\n Next\n </button>\n {children}\n </div>\n </MenuContext.Provider>\n </DescendantsProvider>\n )\n}\n\nconst MenuItem = ({ children }) => {\n const { selected, setSelected } = React.useContext(MenuContext)\n\n // 3. Read from descendant context\n const { index, register } = useDescendant()\n\n const isSelected = index === selected\n\n return (\n <div\n role=\"menuitem\"\n ref={register}\n aria-selected={isSelected}\n onMouseMove={() => setSelected(index)}\n style={{ color: isSelected ? \"red\" : \"black\" }}\n >\n {children} - {index}\n </div>\n )\n}\n\nconst Example = () => {\n const [show, setShow] = React.useState(false)\n const [show2, setShow2] = React.useState(false)\n\n const toggle = () => {\n setShow(!show)\n if (!show === true) {\n setTimeout(() => {\n setShow2(true)\n }, 1000)\n }\n }\n\n return (\n <div>\n <button onClick={toggle}>Toggle</button>\n <Menu>\n <MenuItem>One</MenuItem>\n {show && <MenuItem>Two</MenuItem>}\n <MenuItem>Three</MenuItem>\n <MenuItem>Four</MenuItem>\n <div>\n {show2 && <MenuItem>Testing 🌟</MenuItem>}\n <MenuItem>Five</MenuItem>\n </div>\n </Menu>\n </div>\n )\n}\n```\n"
		}
		}

dist/index.cjs.js

dist/index.d.ts

dist/index.esm.js

@chakra-ui/descendant - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics

Dependency changes