@chakra-ui/descendant - npm Package Compare versions

Comparing version 0.0.0-dev-20220804193815 to 0.0.0-dev-20220804194739

package.json

 {
   "name": "@chakra-ui/descendant",
-  "version": "0.0.0-dev-20220804193815",
+  "version": "0.0.0-dev-20220804194739",
   "description": "Register child nodes of a react element for better accessibility",
@@ -37,3 +37,3 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/react-utils": "0.0.0-dev-20220804193815"
+    "@chakra-ui/react-utils": "0.0.0-dev-20220804194739"
   },
@@ -44,4 +44,4 @@ "peerDependencies": {
   "devDependencies": {
-    "@chakra-ui/hooks": "0.0.0-dev-20220804193815",
-    "@chakra-ui/system": "0.0.0-dev-20220804193815",
+    "@chakra-ui/hooks": "0.0.0-dev-20220804194739",
+    "@chakra-ui/system": "0.0.0-dev-20220804194739",
     "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"
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

5793

decreased by-77.25%

Number of package files

3

decreased by-50%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@chakra-ui/react-utils@0.0.0-dev-20220804194739(transitive)

• + Added@chakra-ui/utils@0.0.0-dev-20220804194739(transitive)

• - Removed@chakra-ui/react-utils@0.0.0-dev-20220804193815(transitive)

• - Removed@chakra-ui/utils@0.0.0-dev-20220804193815(transitive)

• Updated@chakra-ui/react-utils@0.0.0-dev-20220804194739