Socket
Socket
Sign inDemoInstall

@chakra-ui/descendant

Package Overview
Dependencies
Maintainers
3
Versions
175
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chakra-ui/descendant - npm Package Compare versions

Comparing version 3.0.7 to 3.0.8

7

dist/index.cjs.js

@@ -29,3 +29,4 @@ "use strict";

// src/use-descendant.ts
var import_react_utils = require("@chakra-ui/react-utils");
var import_react_context = require("@chakra-ui/react-context");
var import_react_use_merge_refs = require("@chakra-ui/react-use-merge-refs");
var import_react2 = require("react");

@@ -178,3 +179,3 @@

}
var [DescendantsContextProvider, useDescendantsContext] = (0, import_react_utils.createContext)({
var [DescendantsContextProvider, useDescendantsContext] = (0, import_react_context.createContext)({
name: "DescendantsProvider",

@@ -207,3 +208,3 @@ errorMessage: "useDescendantsContext must be used within DescendantsProvider"

enabledIndex: descendants.enabledIndexOf(ref.current),
register: (0, import_react_utils.mergeRefs)(refCallback, ref)
register: (0, import_react_use_merge_refs.mergeRefs)(refCallback, ref)
};

@@ -210,0 +211,0 @@ }

3

dist/index.esm.js
// src/use-descendant.ts
import { createContext, mergeRefs } from "@chakra-ui/react-utils";
import { createContext } from "@chakra-ui/react-context";
import { mergeRefs } from "@chakra-ui/react-use-merge-refs";
import { useRef, useState } from "react";

@@ -4,0 +5,0 @@

12

package.json
{
"name": "@chakra-ui/descendant",
"version": "3.0.7",
"version": "3.0.8",
"description": "Register child nodes of a react element for better accessibility",

@@ -37,3 +37,4 @@ "keywords": [

"dependencies": {
"@chakra-ui/react-utils": "2.0.5"
"@chakra-ui/react-context": "2.0.3",
"@chakra-ui/react-use-merge-refs": "2.0.3"
},

@@ -44,4 +45,4 @@ "peerDependencies": {

"devDependencies": {
"@chakra-ui/hooks": "2.0.8",
"@chakra-ui/system": "2.2.6",
"@chakra-ui/hooks": "2.0.9",
"@chakra-ui/system": "2.2.7",
"react": "^18.0.0"

@@ -55,4 +56,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"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc