Revert "feat(tree-view): simplify component api"

This reverts commit 9dbb11a.
chakra-ui · Feb 10, 2024 · fd73328 · fd73328
1 parent 380f03e
commit fd73328
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 75 deletions.
diff --git a/packages/frameworks/react/src/tree-view/stories/tree-view.stories.tsx b/packages/frameworks/react/src/tree-view/stories/tree-view.stories.tsx
@@ -13,21 +13,28 @@ export const Basic = () => {
       <TreeView.Label>My Documents</TreeView.Label>
       <TreeView.Tree>
         <TreeView.Branch id="node_modules" depth={1}>
-          <TreeView.BranchControl>
-            <TreeView.BranchText>📂 node_modules</TreeView.BranchText>
+          <TreeView.BranchControl id="node_modules" depth={1}>
+            <TreeView.BranchText id="node_modules" depth={1}>
+              📂 node_modules
+            </TreeView.BranchText>
           </TreeView.BranchControl>
-          <TreeView.BranchContent>
+
+          <TreeView.BranchContent id="node_modules" depth={1}>
             <TreeView.Item id="node_modules/zag-js" depth={2}>
               📄 zag-js
             </TreeView.Item>
             <TreeView.Item id="node_modules/pandacss" depth={2}>
               📄 panda
             </TreeView.Item>
+
             <TreeView.Branch id="node_modules/@types" depth={2}>
-              <TreeView.BranchControl>
-                <TreeView.BranchText>📂 @types</TreeView.BranchText>
+              <TreeView.BranchControl id="node_modules/@types" depth={2}>
+                <TreeView.BranchText id="node_modules/@types" depth={2}>
+                  📂 @types
+                </TreeView.BranchText>
               </TreeView.BranchControl>
-              <TreeView.BranchContent>
+
+              <TreeView.BranchContent id="node_modules/@types" depth={2}>
                 <TreeView.Item id="node_modules/@types/react" depth={3}>
                   📄 react
                 </TreeView.Item>
@@ -38,11 +45,15 @@ export const Basic = () => {
             </TreeView.Branch>
           </TreeView.BranchContent>
         </TreeView.Branch>
+
         <TreeView.Branch id="src" depth={1}>
-          <TreeView.BranchControl>
-            <TreeView.BranchText>📂 src</TreeView.BranchText>
+          <TreeView.BranchControl id="src" depth={1}>
+            <TreeView.BranchText id="src" depth={1}>
+              📂 src
+            </TreeView.BranchText>
           </TreeView.BranchControl>
-          <TreeView.BranchContent>
+
+          <TreeView.BranchContent id="src" depth={1}>
             <TreeView.Item id="src/app.tsx" depth={2}>
               📄 app.tsx
             </TreeView.Item>
@@ -51,6 +62,16 @@ export const Basic = () => {
             </TreeView.Item>
           </TreeView.BranchContent>
         </TreeView.Branch>
+
+        <TreeView.Item id="panda.config" depth={1}>
+          📄 panda.config.ts
+        </TreeView.Item>
+        <TreeView.Item id="package.json" depth={1}>
+          📄 package.json
+        </TreeView.Item>
+        <TreeView.Item id="renovate.json" depth={1}>
+          📄 renovate.json
+        </TreeView.Item>
         <TreeView.Item id="readme.md" depth={1}>
           📄 README.md
         </TreeView.Item>

diff --git a/packages/frameworks/react/src/tree-view/tree-view-branch-content.tsx b/packages/frameworks/react/src/tree-view/tree-view-branch-content.tsx
@@ -1,16 +1,22 @@
+// import type { BranchProps } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
+import { createSplitProps } from '../create-split-props'
 import { ark, type HTMLArkProps } from '../factory'
-import { useTreeViewBranchContext } from './tree-view-branch-context'
-import { useTreeViewContext } from './tree-view-context'
+import type { Assign } from '../types'
+import { useTreeViewContext, type BranchProps } from './tree-view-context'
 
-export interface TreeViewBranchContentProps extends HTMLArkProps<'ul'> {}
+export interface TreeViewBranchContentProps extends Assign<HTMLArkProps<'ul'>, BranchProps> {}
 
 export const TreeViewBranchContent = forwardRef<HTMLUListElement, TreeViewBranchContentProps>(
   (props, ref) => {
+    const [branchProps, { ...localProps }] = createSplitProps<BranchProps>()(props, [
+      'depth',
+      'id',
+      'disabled',
+    ])
     const api = useTreeViewContext()
-    const branchProps = useTreeViewBranchContext()
-    const mergedProps = mergeProps(api.getBranchContentProps(branchProps), props)
+    const mergedProps = mergeProps(api.getBranchContentProps(branchProps), localProps)
 
     return <ark.ul {...mergedProps} ref={ref} />
   },

diff --git a/packages/frameworks/react/src/tree-view/tree-view-branch-context.ts b/packages/frameworks/react/src/tree-view/tree-view-branch-context.ts
diff --git a/packages/frameworks/react/src/tree-view/tree-view-branch-control.tsx b/packages/frameworks/react/src/tree-view/tree-view-branch-control.tsx
@@ -1,16 +1,22 @@
+// import type { BranchProps } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
+import { createSplitProps } from '../create-split-props'
 import { ark, type HTMLArkProps } from '../factory'
-import { useTreeViewBranchContext } from './tree-view-branch-context'
-import { useTreeViewContext } from './tree-view-context'
+import type { Assign } from '../types'
+import { useTreeViewContext, type BranchProps } from './tree-view-context'
 
-export interface TreeViewBranchControlProps extends HTMLArkProps<'div'> {}
+export interface TreeViewBranchControlProps extends Assign<HTMLArkProps<'div'>, BranchProps> {}
 
 export const TreeViewBranchControl = forwardRef<HTMLDivElement, TreeViewBranchControlProps>(
   (props, ref) => {
+    const [branchProps, { ...localProps }] = createSplitProps<BranchProps>()(props, [
+      'depth',
+      'id',
+      'disabled',
+    ])
     const api = useTreeViewContext()
-    const branchProps = useTreeViewBranchContext()
-    const mergedProps = mergeProps(api.getBranchControlProps(branchProps), props)
+    const mergedProps = mergeProps(api.getBranchControlProps(branchProps), localProps)
 
     return <ark.div {...mergedProps} ref={ref} />
   },

diff --git a/packages/frameworks/react/src/tree-view/tree-view-branch-indicator.tsx b/packages/frameworks/react/src/tree-view/tree-view-branch-indicator.tsx
@@ -1,21 +1,26 @@
+// import type { BranchProps } from '@zag-js/tree-view'
 import { treeViewAnatomy } from '@ark-ui/anatomy'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
+import { createSplitProps } from '../create-split-props'
 import { ark, type HTMLArkProps } from '../factory'
-import { useTreeViewBranchContext } from './tree-view-branch-context'
-import { useTreeViewContext } from './tree-view-context'
+import type { Assign } from '../types'
+import { useTreeViewContext, type BranchProps } from './tree-view-context'
 
-export interface TreeViewBranchIndicatorProps extends HTMLArkProps<'div'> {}
+export interface TreeViewBranchIndicatorProps extends Assign<HTMLArkProps<'div'>, BranchProps> {}
 
 export const TreeViewBranchIndicator = forwardRef<HTMLDivElement, TreeViewBranchIndicatorProps>(
   (props, ref) => {
+    const [branchProps, { ...localProps }] = createSplitProps<BranchProps>()(props, [
+      'depth',
+      'id',
+      'disabled',
+    ])
     const api = useTreeViewContext()
-    const branchProps = useTreeViewBranchContext()
-
     const mergedProps = mergeProps(
       api.getBranchProps(branchProps),
       treeViewAnatomy.build().branchIndicator.attrs as Record<string, string>,
-      props,
+      localProps,
     )
 
     return <ark.div {...mergedProps} ref={ref} />

diff --git a/packages/frameworks/react/src/tree-view/tree-view-branch-text.tsx b/packages/frameworks/react/src/tree-view/tree-view-branch-text.tsx
@@ -1,16 +1,22 @@
+// import type { BranchProps } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
+import { createSplitProps } from '../create-split-props'
 import { ark, type HTMLArkProps } from '../factory'
-import { useTreeViewBranchContext } from './tree-view-branch-context'
-import { useTreeViewContext } from './tree-view-context'
+import type { Assign } from '../types'
+import { useTreeViewContext, type BranchProps } from './tree-view-context'
 
-export interface TreeViewBranchTextProps extends HTMLArkProps<'span'> {}
+export interface TreeViewBranchTextProps extends Assign<HTMLArkProps<'span'>, BranchProps> {}
 
 export const TreeViewBranchText = forwardRef<HTMLSpanElement, TreeViewBranchTextProps>(
   (props, ref) => {
+    const [branchProps, { ...localProps }] = createSplitProps<BranchProps>()(props, [
+      'depth',
+      'id',
+      'disabled',
+    ])
     const api = useTreeViewContext()
-    const branchProps = useTreeViewBranchContext()
-    const mergedProps = mergeProps(api.getBranchTextProps(branchProps), props)
+    const mergedProps = mergeProps(api.getBranchTextProps(branchProps), localProps)
 
     return <ark.span {...mergedProps} ref={ref} />
   },

diff --git a/packages/frameworks/react/src/tree-view/tree-view-branch-trigger.tsx b/packages/frameworks/react/src/tree-view/tree-view-branch-trigger.tsx
@@ -1,16 +1,22 @@
+// import type { BranchProps } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
+import { createSplitProps } from '../create-split-props'
 import { ark, type HTMLArkProps } from '../factory'
-import { useTreeViewBranchContext } from './tree-view-branch-context'
-import { useTreeViewContext } from './tree-view-context'
+import type { Assign } from '../types'
+import { useTreeViewContext, type BranchProps } from './tree-view-context'
 
-export interface TreeViewBranchTriggerProps extends HTMLArkProps<'button'> {}
+export interface TreeViewBranchTriggerProps extends Assign<HTMLArkProps<'button'>, BranchProps> {}
 
 export const TreeViewBranchTrigger = forwardRef<HTMLButtonElement, TreeViewBranchTriggerProps>(
   (props, ref) => {
+    const [branchProps, { ...localProps }] = createSplitProps<BranchProps>()(props, [
+      'depth',
+      'id',
+      'disabled',
+    ])
     const api = useTreeViewContext()
-    const branchProps = useTreeViewBranchContext()
-    const mergedProps = mergeProps(api.getBranchTriggerProps(branchProps), props)
+    const mergedProps = mergeProps(api.getBranchTriggerProps(branchProps), localProps)
 
     return <ark.button {...mergedProps} ref={ref} />
   },

diff --git a/packages/frameworks/react/src/tree-view/tree-view-branch.tsx b/packages/frameworks/react/src/tree-view/tree-view-branch.tsx
@@ -1,39 +1,38 @@
+// import type { BranchProps, BranchState } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef, type ReactNode } from 'react'
 import { createSplitProps } from '../create-split-props'
 import { ark, type HTMLArkProps } from '../factory'
 import { runIfFn } from '../run-if-fn'
 import type { Assign } from '../types'
-import {
-  TreeViewBranchProvider,
-  type BranchProps,
-  type BranchState,
-} from './tree-view-branch-context'
-import { useTreeViewContext } from './tree-view-context'
+import { useTreeViewContext, type BranchProps, type BranchState } from './tree-view-context'
 
 export interface TreeViewBranchProps
   extends Assign<
-    Assign<HTMLArkProps<'li'>, { children?: ReactNode | ((state: BranchState) => ReactNode) }>,
+    Assign<
+      HTMLArkProps<'li'>,
+      {
+        children?: ReactNode | ((state: BranchState) => ReactNode)
+      }
+    >,
     BranchProps
   > {}
 
 export const TreeViewBranch = forwardRef<HTMLLIElement, TreeViewBranchProps>((props, ref) => {
   const [branchProps, { children, ...localProps }] = createSplitProps<BranchProps>()(props, [
     'depth',
-    'disabled',
     'id',
+    'disabled',
   ])
   const api = useTreeViewContext()
   const mergedProps = mergeProps(api.getBranchProps(branchProps), localProps)
   const branchState = api.getBranchState(branchProps)
   const view = runIfFn(children, branchState)
 
   return (
-    <TreeViewBranchProvider value={branchProps}>
-      <ark.li {...mergedProps} ref={ref}>
-        {view}
-      </ark.li>
-    </TreeViewBranchProvider>
+    <ark.li {...mergedProps} ref={ref}>
+      {view}
+    </ark.li>
   )
 })
 

diff --git a/packages/frameworks/react/src/tree-view/tree-view-item-text.tsx b/packages/frameworks/react/src/tree-view/tree-view-item-text.tsx
@@ -1,3 +1,4 @@
+// import type { ItemProps } from '@zag-js/tree-view'
 import { treeViewAnatomy } from '@ark-ui/anatomy'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
@@ -9,7 +10,11 @@ import { useTreeViewContext, type ItemProps } from './tree-view-context'
 export interface TreeViewItemTextProps extends Assign<HTMLArkProps<'span'>, ItemProps> {}
 
 export const TreeViewItemText = forwardRef<HTMLSpanElement, TreeViewItemTextProps>((props, ref) => {
-  const [itemProps, localProps] = createSplitProps<ItemProps>()(props, ['depth', 'id', 'disabled'])
+  const [itemProps, { ...localProps }] = createSplitProps<ItemProps>()(props, [
+    'depth',
+    'id',
+    'disabled',
+  ])
   const api = useTreeViewContext()
   const mergedProps = mergeProps(
     api.getItemProps(itemProps),

diff --git a/packages/frameworks/react/src/tree-view/tree-view-item.tsx b/packages/frameworks/react/src/tree-view/tree-view-item.tsx
@@ -1,3 +1,4 @@
+// import type { ItemProps, ItemState } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef, type ReactNode } from 'react'
 import { createSplitProps } from '../create-split-props'

diff --git a/packages/frameworks/react/src/tree-view/tree-view-root.tsx b/packages/frameworks/react/src/tree-view/tree-view-root.tsx
@@ -19,7 +19,7 @@ export interface TreeViewRootProps
   > {}
 
 export const TreeViewRoot = forwardRef<HTMLDivElement, TreeViewRootProps>((props, ref) => {
-  const [useTreeViewProps, { children, ...localProps }] = createSplitProps<UseTreeViewProps>()(
+  const [useTreeViewProps, { children, ...divProps }] = createSplitProps<UseTreeViewProps>()(
     props,
     [
       'defaultFocusedId',
@@ -37,7 +37,7 @@ export const TreeViewRoot = forwardRef<HTMLDivElement, TreeViewRootProps>((props
     ],
   )
   const api = useTreeView(useTreeViewProps)
-  const mergedProps = mergeProps(api.rootProps, localProps)
+  const mergedProps = mergeProps(api.rootProps, divProps)
 
   const view = runIfFn(children, api)