refactor(v3): remove usage of descendants (#8245)

* feat: migrate accordion * feat: remove from menu * feat: migrate pin * feat: migrate tabs * fix: remove node * feat: removed descendant * fix: remove exports * fix: query selector issue * chore: fix tests * fix: refactor * chore: fix stories and tests * fix: escape value * fix: use menu item id if supplied * chore: update docs * chore: rewrite * fix: tab syltes
chakra-ui · Feb 28, 2024 · c7a4722 · c7a4722
1 parent 88706a0
commit c7a4722
Show file tree

Hide file tree

Showing 43 changed files with 808 additions and 1,171 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -43,6 +43,7 @@
     "@chakra-ui/utils": "workspace:*",
     "@popperjs/core": "^2.11.8",
     "@zag-js/focus-visible": "^0.31.1",
+    "@zag-js/dom-utils": "^0.2.4",
     "aria-hidden": "^1.2.3",
     "react-fast-compare": "3.2.2",
     "react-focus-lock": "^2.9.6",
@@ -320,17 +321,6 @@
         "default": "./dist/cjs/css-reset/index.cjs"
       }
     },
-    "./descendant": {
-      "source": "./src/descendant/index.ts",
-      "import": {
-        "types": "./dist/types/descendant/index.d.mts",
-        "default": "./dist/esm/descendant/index.mjs"
-      },
-      "require": {
-        "types": "./dist/types/descendant/index.d.ts",
-        "default": "./dist/cjs/descendant/index.cjs"
-      }
-    },
     "./dialog": {
       "source": "./src/dialog/index.ts",
       "import": {

diff --git a/packages/components/src/accordion/accordion-context.ts b/packages/components/src/accordion/accordion-context.ts
@@ -1,6 +1,5 @@
 import { SystemStyleObject } from "@chakra-ui/styled-system"
 import { createContext } from "@chakra-ui/utils/context"
-import { createDescendantContext } from "../descendant"
 import { UseAccordionItemReturn, UseAccordionReturn } from "./use-accordion"
 
 export const [AccordionStylesProvider, useAccordionStyles] = createContext<
@@ -31,10 +30,3 @@ export const [AccordionItemContextProvider, useAccordionItemContext] =
     hookName: "useAccordionItemContext",
     providerName: "<Accordion.Item />",
   })
-
-export const [
-  AccordionDescendantsProvider,
-  useAccordionDescendantsContext,
-  useAccordionDescendants,
-  useAccordionDescendant,
-] = createDescendantContext<HTMLButtonElement>()
diff --git a/packages/components/src/accordion/accordion-props.ts b/packages/components/src/accordion/accordion-props.ts
@@ -5,15 +5,17 @@ const accordionItemProps = createProps<UseAccordionItemProps>()([
   "isDisabled",
   "id",
   "isFocusable",
+  "value",
 ])
 
 export const splitAccordionItemProps =
   createSplitProps<UseAccordionItemProps>(accordionItemProps)
 
 const accordionProps = createProps<UseAccordionProps>()([
+  "id",
   "multiple",
-  "defaultIndex",
-  "index",
+  "defaultValue",
+  "value",
   "onChange",
   "collapsible",
 ])

diff --git a/packages/components/src/accordion/accordion-root.tsx b/packages/components/src/accordion/accordion-root.tsx
@@ -1,18 +1,17 @@
 import { omitThemingProps, ThemingProps } from "@chakra-ui/styled-system"
-import { cx } from "@chakra-ui/utils"
-import { useMemo } from "react"
 import {
   chakra,
   forwardRef,
   HTMLChakraProps,
   useMultiStyleConfig,
 } from "../system"
+import { cx } from "@chakra-ui/utils/cx"
+import { useMergeRefs } from "@chakra-ui/hooks/use-merge-refs"
+import { useMemo } from "react"
 import {
   AccordionContextProvider,
-  AccordionDescendantsProvider,
   AccordionStylesProvider,
 } from "./accordion-context"
-import { splitAccordionProps } from "./accordion-props"
 import { useAccordion, UseAccordionProps } from "./use-accordion"
 
 export interface AccordionRootProps
@@ -36,37 +35,32 @@ export interface AccordionRootProps
  * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
  */
 export const AccordionRoot = forwardRef<AccordionRootProps, "div">(
-  function Accordion({ children, reduceMotion, ...props }, ref) {
-    const ownProps = omitThemingProps(props)
-
+  function AccordionRoot({ children, reduceMotion, ...props }, ref) {
     const styles = useMultiStyleConfig("Accordion", props)
+    const ownProps = omitThemingProps(props)
 
-    const [accordionProps, localProps] = splitAccordionProps(ownProps)
-
-    const { descendants, ...context } = useAccordion(accordionProps)
+    const { htmlProps, ...context } = useAccordion(ownProps)
 
     const ctx = useMemo(
       () => ({ ...context, reduceMotion: !!reduceMotion }),
       [context, reduceMotion],
     )
 
     return (
-      <AccordionDescendantsProvider value={descendants}>
-        <AccordionContextProvider value={ctx}>
-          <AccordionStylesProvider value={styles}>
-            <chakra.div
-              ref={ref}
-              {...localProps}
-              className={cx("chakra-accordion", props.className)}
-              __css={styles.root}
-            >
-              {children}
-            </chakra.div>
-          </AccordionStylesProvider>
-        </AccordionContextProvider>
-      </AccordionDescendantsProvider>
+      <AccordionContextProvider value={ctx}>
+        <AccordionStylesProvider value={styles}>
+          <chakra.div
+            ref={useMergeRefs(ref, context.rootRef)}
+            {...htmlProps}
+            className={cx("chakra-accordion", props.className)}
+            __css={styles.root}
+          >
+            {children}
+          </chakra.div>
+        </AccordionStylesProvider>
+      </AccordionContextProvider>
     )
   },
 )
 
-AccordionRoot.displayName = "Accordion"
+AccordionRoot.displayName = "AccordionRoot"
diff --git a/packages/components/src/accordion/accordion.stories.tsx b/packages/components/src/accordion/accordion.stories.tsx
@@ -1,5 +1,5 @@
 import { useDisclosure } from "@chakra-ui/hooks/use-disclosure"
-import * as React from "react"
+import { useRef, useState, useEffect } from "react"
 import { Accordion, Box, Button, Container, Drawer, chakra } from ".."
 
 export default {
@@ -132,6 +132,46 @@ export const stylingExpanded = () => (
   </Accordion.Root>
 )
 
+export const Controlled = () => {
+  const [value, setValue] = useState(["1"])
+  return (
+    <Accordion.Root value={value} onChange={setValue}>
+      <Accordion.Item value="1">
+        <h2>
+          <Accordion.Trigger>
+            <chakra.div flex="1" textAlign="left">
+              Item 1
+            </chakra.div>
+            <Accordion.Icon />
+          </Accordion.Trigger>
+        </h2>
+        <Accordion.Content>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="2">
+        <h2>
+          <Accordion.Trigger>
+            <chakra.div flex="1" textAlign="left">
+              Item 2
+            </chakra.div>
+            <Accordion.Icon />
+          </Accordion.Trigger>
+        </h2>
+        <Accordion.Content>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  )
+}
+
 const data = [
   { title: "First Item", text: "Some value 1..." },
   { title: "Second Item", text: "Some value 2..." },
@@ -143,12 +183,12 @@ const data = [
 ]
 
 export function WithSearchFilter() {
-  const inputRef = React.useRef<HTMLInputElement>(null)
-  const [displayData, setDisplayData] = React.useState(data)
-  const [filter, setFilter] = React.useState("")
-  const [index, setIndex] = React.useState(-1)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [displayData, setDisplayData] = useState(data)
+  const [filter, setFilter] = useState("")
+  const [value, setValue] = useState<string[]>([])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!filter || filter === "") {
       setDisplayData(data)
     }
@@ -159,13 +199,13 @@ export function WithSearchFilter() {
     setDisplayData(filteredData)
   }, [filter])
 
-  React.useEffect(() => {
+  useEffect(() => {
     inputRef.current?.focus()
   }, [displayData])
 
   function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     setFilter(e.target.value)
-    setIndex(-1)
+    setValue([])
   }
 
   return (
@@ -179,15 +219,7 @@ export function WithSearchFilter() {
         />
       </chakra.div>
       {displayData.length > 0 && (
-        <Accordion.Root
-          collapsible
-          index={index}
-          onChange={(index) => {
-            if (!Array.isArray(index)) {
-              setIndex(index)
-            }
-          }}
-        >
+        <Accordion.Root collapsible value={value} onChange={setValue}>
           {displayData.map((item, i) => (
             <Accordion.Item key={`accordion-item-${i}`}>
               <h2>
@@ -285,24 +317,24 @@ export const FocusBug = () => {
 
 export const WithDisabledItem = () => {
   return (
-    <Accordion.Root index={1}>
-      <Accordion.Item isDisabled>
+    <Accordion.Root value={["1"]}>
+      <Accordion.Item value="1" isDisabled>
         <Accordion.Trigger>Button 1</Accordion.Trigger>
         <Accordion.Content>One Content</Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item isDisabled>
+      <Accordion.Item value="2" isDisabled>
         <Accordion.Trigger>Button 2</Accordion.Trigger>
         <Accordion.Content>Two Content</Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item>
+      <Accordion.Item value="3">
         <Accordion.Trigger>Button 3</Accordion.Trigger>
         <Accordion.Content>Three Content</Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item isDisabled>
+      <Accordion.Item value="4" isDisabled>
         <Accordion.Trigger>Button 4</Accordion.Trigger>
         <Accordion.Content>Four Content</Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item>
+      <Accordion.Item value="5">
         <Accordion.Trigger>Button 5</Accordion.Trigger>
         <Accordion.Content>Five Content</Accordion.Content>
       </Accordion.Item>

diff --git a/packages/components/src/accordion/accordion.test.tsx b/packages/components/src/accordion/accordion.test.tsx
@@ -16,8 +16,8 @@ test("passes a11y test", async () => {
 
 test("uncontrolled: It opens the accordion panel", async () => {
   render(
-    <Accordion.Root defaultIndex={0}>
-      <Accordion.Item>
+    <Accordion.Root defaultValue={["panel-1"]}>
+      <Accordion.Item value="panel-1">
         <h2>
           <Accordion.Trigger data-testid="button">
             Section 1 title
@@ -287,14 +287,14 @@ test("aria-controls for button is same as id for panel", async () => {
 // test that aria-expanded is true/false when accordion is open/closed
 test("aria-expanded is true/false when accordion is open/closed", async () => {
   render(
-    <Accordion.Root defaultIndex={0}>
-      <Accordion.Item>
+    <Accordion.Root defaultValue={["1"]}>
+      <Accordion.Item value="1">
         <h2>
           <Accordion.Trigger>Section 1 title</Accordion.Trigger>
         </h2>
         <Accordion.Content>Panel 1</Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item>
+      <Accordion.Item value="2">
         <h2>
           <Accordion.Trigger>Section 2 title</Accordion.Trigger>
         </h2>