feat(*): integrate zag v0.50.0 (#2469)

chakra-ui · May 15, 2024 · 4912863 · 4912863
1 parent eaeb94b
commit 4912863
Show file tree

Hide file tree

Showing 138 changed files with 806 additions and 314 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/anatomy/package.json b/packages/anatomy/package.json
@@ -392,41 +392,41 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@zag-js/accordion": "0.49.0",
-    "@zag-js/anatomy": "0.49.0",
-    "@zag-js/avatar": "0.49.0",
-    "@zag-js/carousel": "0.49.0",
-    "@zag-js/checkbox": "0.49.0",
-    "@zag-js/clipboard": "0.49.0",
-    "@zag-js/collapsible": "0.49.0",
-    "@zag-js/color-picker": "0.49.0",
-    "@zag-js/color-utils": "0.49.0",
-    "@zag-js/combobox": "0.49.0",
-    "@zag-js/date-picker": "0.49.0",
-    "@zag-js/date-utils": "0.49.0",
-    "@zag-js/dialog": "0.49.0",
-    "@zag-js/editable": "0.49.0",
-    "@zag-js/file-upload": "0.49.0",
-    "@zag-js/hover-card": "0.49.0",
-    "@zag-js/menu": "0.49.0",
-    "@zag-js/number-input": "0.49.0",
-    "@zag-js/pagination": "0.49.0",
-    "@zag-js/pin-input": "0.49.0",
-    "@zag-js/popover": "0.49.0",
-    "@zag-js/presence": "0.49.0",
-    "@zag-js/progress": "0.49.0",
-    "@zag-js/radio-group": "0.49.0",
-    "@zag-js/rating-group": "0.49.0",
-    "@zag-js/select": "0.49.0",
-    "@zag-js/slider": "0.49.0",
-    "@zag-js/splitter": "0.49.0",
-    "@zag-js/switch": "0.49.0",
-    "@zag-js/tabs": "0.49.0",
-    "@zag-js/tags-input": "0.49.0",
-    "@zag-js/toast": "0.49.0",
-    "@zag-js/toggle-group": "0.49.0",
-    "@zag-js/tooltip": "0.49.0",
-    "@zag-js/tree-view": "0.49.0"
+    "@zag-js/accordion": "0.50.0",
+    "@zag-js/anatomy": "0.50.0",
+    "@zag-js/avatar": "0.50.0",
+    "@zag-js/carousel": "0.50.0",
+    "@zag-js/checkbox": "0.50.0",
+    "@zag-js/clipboard": "0.50.0",
+    "@zag-js/collapsible": "0.50.0",
+    "@zag-js/color-picker": "0.50.0",
+    "@zag-js/color-utils": "0.50.0",
+    "@zag-js/combobox": "0.50.0",
+    "@zag-js/date-picker": "0.50.0",
+    "@zag-js/date-utils": "0.50.0",
+    "@zag-js/dialog": "0.50.0",
+    "@zag-js/editable": "0.50.0",
+    "@zag-js/file-upload": "0.50.0",
+    "@zag-js/hover-card": "0.50.0",
+    "@zag-js/menu": "0.50.0",
+    "@zag-js/number-input": "0.50.0",
+    "@zag-js/pagination": "0.50.0",
+    "@zag-js/pin-input": "0.50.0",
+    "@zag-js/popover": "0.50.0",
+    "@zag-js/presence": "0.50.0",
+    "@zag-js/progress": "0.50.0",
+    "@zag-js/radio-group": "0.50.0",
+    "@zag-js/rating-group": "0.50.0",
+    "@zag-js/select": "0.50.0",
+    "@zag-js/slider": "0.50.0",
+    "@zag-js/splitter": "0.50.0",
+    "@zag-js/switch": "0.50.0",
+    "@zag-js/tabs": "0.50.0",
+    "@zag-js/tags-input": "0.50.0",
+    "@zag-js/toast": "0.50.0",
+    "@zag-js/toggle-group": "0.50.0",
+    "@zag-js/tooltip": "0.50.0",
+    "@zag-js/tree-view": "0.50.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -498,46 +498,46 @@
   "sideEffects": false,
   "dependencies": {
     "@ark-ui/anatomy": "workspace:*",
-    "@zag-js/accordion": "0.49.0",
-    "@zag-js/avatar": "0.49.0",
-    "@zag-js/carousel": "0.49.0",
-    "@zag-js/checkbox": "0.49.0",
-    "@zag-js/clipboard": "0.49.0",
-    "@zag-js/collapsible": "0.49.0",
-    "@zag-js/color-picker": "0.49.0",
-    "@zag-js/color-utils": "0.49.0",
-    "@zag-js/combobox": "0.49.0",
-    "@zag-js/core": "0.49.0",
-    "@zag-js/date-picker": "0.49.0",
-    "@zag-js/date-utils": "0.49.0",
-    "@zag-js/dom-query": "0.49.0",
-    "@zag-js/dialog": "0.49.0",
-    "@zag-js/editable": "0.49.0",
-    "@zag-js/file-upload": "0.49.0",
-    "@zag-js/file-utils": "0.49.0",
-    "@zag-js/hover-card": "0.49.0",
-    "@zag-js/i18n-utils": "0.49.0",
-    "@zag-js/menu": "0.49.0",
-    "@zag-js/number-input": "0.49.0",
-    "@zag-js/pagination": "0.49.0",
-    "@zag-js/pin-input": "0.49.0",
-    "@zag-js/popover": "0.49.0",
-    "@zag-js/presence": "0.49.0",
-    "@zag-js/progress": "0.49.0",
-    "@zag-js/radio-group": "0.49.0",
-    "@zag-js/rating-group": "0.49.0",
-    "@zag-js/react": "0.49.0",
-    "@zag-js/select": "0.49.0",
-    "@zag-js/slider": "0.49.0",
-    "@zag-js/splitter": "0.49.0",
-    "@zag-js/switch": "0.49.0",
-    "@zag-js/tabs": "0.49.0",
-    "@zag-js/tags-input": "0.49.0",
-    "@zag-js/toast": "0.49.0",
-    "@zag-js/toggle-group": "0.49.0",
-    "@zag-js/tooltip": "0.49.0",
-    "@zag-js/tree-view": "0.49.0",
-    "@zag-js/types": "0.49.0"
+    "@zag-js/accordion": "0.50.0",
+    "@zag-js/avatar": "0.50.0",
+    "@zag-js/carousel": "0.50.0",
+    "@zag-js/checkbox": "0.50.0",
+    "@zag-js/clipboard": "0.50.0",
+    "@zag-js/collapsible": "0.50.0",
+    "@zag-js/color-picker": "0.50.0",
+    "@zag-js/color-utils": "0.50.0",
+    "@zag-js/combobox": "0.50.0",
+    "@zag-js/core": "0.50.0",
+    "@zag-js/date-picker": "0.50.0",
+    "@zag-js/date-utils": "0.50.0",
+    "@zag-js/dom-query": "0.50.0",
+    "@zag-js/dialog": "0.50.0",
+    "@zag-js/editable": "0.50.0",
+    "@zag-js/file-upload": "0.50.0",
+    "@zag-js/file-utils": "0.50.0",
+    "@zag-js/hover-card": "0.50.0",
+    "@zag-js/i18n-utils": "0.50.0",
+    "@zag-js/menu": "0.50.0",
+    "@zag-js/number-input": "0.50.0",
+    "@zag-js/pagination": "0.50.0",
+    "@zag-js/pin-input": "0.50.0",
+    "@zag-js/popover": "0.50.0",
+    "@zag-js/presence": "0.50.0",
+    "@zag-js/progress": "0.50.0",
+    "@zag-js/radio-group": "0.50.0",
+    "@zag-js/rating-group": "0.50.0",
+    "@zag-js/react": "0.50.0",
+    "@zag-js/select": "0.50.0",
+    "@zag-js/slider": "0.50.0",
+    "@zag-js/splitter": "0.50.0",
+    "@zag-js/switch": "0.50.0",
+    "@zag-js/tabs": "0.50.0",
+    "@zag-js/tags-input": "0.50.0",
+    "@zag-js/toast": "0.50.0",
+    "@zag-js/toggle-group": "0.50.0",
+    "@zag-js/tooltip": "0.50.0",
+    "@zag-js/tree-view": "0.50.0",
+    "@zag-js/types": "0.50.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.7.3",

diff --git a/packages/react/src/components/combobox/combobox-root.tsx b/packages/react/src/components/combobox/combobox-root.tsx
@@ -25,10 +25,11 @@ const ComboboxImpl = <T extends CollectionItem>(
     'allowCustomValue',
     'autoFocus',
     'closeOnSelect',
+    'composite',
     'defaultOpen',
     'defaultValue',
     'disabled',
-    'dismissable',
+    'disableLayer',
     'form',
     'getSelectionValue',
     'highlightedValue',
@@ -57,7 +58,6 @@ const ComboboxImpl = <T extends CollectionItem>(
     'openOnClick',
     'openOnKeyPress',
     'placeholder',
-    'popup',
     'positioning',
     'readOnly',
     'scrollToIndexFn',

diff --git a/packages/react/src/components/combobox/combobox-trigger.tsx b/packages/react/src/components/combobox/combobox-trigger.tsx
@@ -1,13 +1,15 @@
+import type { TriggerProps } from '@zag-js/combobox'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
+import type { Assign } from '../../types'
 import { type HTMLArkProps, ark } from '../factory'
 import { useComboboxContext } from './use-combobox-context'
 
-export interface ComboboxTriggerProps extends HTMLArkProps<'button'> {}
+export interface ComboboxTriggerProps extends Assign<HTMLArkProps<'button'>, TriggerProps> {}
 
 export const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>((props, ref) => {
   const combobox = useComboboxContext()
-  const mergedProps = mergeProps(combobox.triggerProps, props)
+  const mergedProps = mergeProps(combobox.getTriggerProps(), props)
 
   return <ark.button {...mergedProps} ref={ref} />
 })

diff --git a/packages/react/src/components/menu/menu-root.tsx b/packages/react/src/components/menu/menu-root.tsx
@@ -23,6 +23,7 @@ export const MenuRoot = (props: MenuRootProps) => {
     'anchorPoint',
     'aria-label',
     'closeOnSelect',
+    'composite',
     'defaultOpen',
     'highlightedValue',
     'id',

diff --git a/packages/react/src/components/popover/examples/close-behavior.tsx b/packages/react/src/components/popover/examples/close-behavior.tsx
@@ -1,7 +1,7 @@
 import { Popover } from '../..'
 
 export const CloseBehavior = () => (
-  <Popover.Root closeOnEsc={false} closeOnInteractOutside={false}>
+  <Popover.Root closeOnEscape closeOnInteractOutside>
     <Popover.Trigger>Click Me</Popover.Trigger>
     <Popover.Positioner>
       <Popover.Content>

diff --git a/packages/react/src/components/select/select-item.tsx b/packages/react/src/components/select/select-item.tsx
@@ -11,7 +11,7 @@ import { SelectItemPropsProvider } from './use-select-item-props-context'
 export interface SelectItemProps extends Assign<HTMLArkProps<'div'>, ItemProps> {}
 
 export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>((props, ref) => {
-  const [itemProps, localProps] = createSplitProps<ItemProps>()(props, ['item'])
+  const [itemProps, localProps] = createSplitProps<ItemProps>()(props, ['item', 'persistFocus'])
   const select = useSelectContext()
   const mergedProps = mergeProps(select.getItemProps(itemProps), localProps)
   const itemState = select.getItemState(itemProps)

diff --git a/packages/react/src/components/select/select-root.tsx b/packages/react/src/components/select/select-root.tsx
@@ -23,6 +23,7 @@ const SelectImpl = <T extends CollectionItem>(
   const [presenceProps, selectProps] = splitPresenceProps(props)
   const [useSelectProps, localProps] = createSplitProps<UseSelectProps<T>>()(selectProps, [
     'closeOnSelect',
+    'composite',
     'defaultOpen',
     'defaultValue',
     'disabled',

diff --git a/packages/react/src/components/tabs/tabs-root.tsx b/packages/react/src/components/tabs/tabs-root.tsx
@@ -19,6 +19,7 @@ export const TabsRoot = forwardRef<HTMLDivElement, TabsRootProps>((props, ref) =
   const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props)
   const [useTabsProps, localprops] = createSplitProps<UseTabsProps>()(tabsProps, [
     'activationMode',
+    'composite',
     'defaultValue',
     'id',
     'ids',

diff --git a/packages/react/src/components/tooltip/tests/tooltip.test.tsx b/packages/react/src/components/tooltip/tests/tooltip.test.tsx
@@ -52,7 +52,7 @@ describe('Tooltip', () => {
   })
 
   it('should hide the tooltip when escape is pressed', async () => {
-    render(<ComponentUnderTest closeOnEsc />)
+    render(<ComponentUnderTest closeOnEscape />)
 
     const tooltipTrigger = screen.getByText('hover me')
     await user.hover(tooltipTrigger)
@@ -67,7 +67,7 @@ describe('Tooltip', () => {
   })
 
   it('should not hide the tooltip when escape is pressed if closeOnEsc is set to false', async () => {
-    render(<ComponentUnderTest closeOnEsc={false} />)
+    render(<ComponentUnderTest closeOnEscape={false} />)
 
     const tooltipTrigger = screen.getByText('hover me')
     await user.hover(tooltipTrigger)

diff --git a/packages/react/src/components/tree-view/tree-view-root.tsx b/packages/react/src/components/tree-view/tree-view-root.tsx
@@ -13,13 +13,13 @@ export const TreeViewRoot = forwardRef<HTMLDivElement, TreeViewRootProps>((props
     'defaultExpandedValue',
     'defaultSelectedValue',
     'expandedValue',
+    'expandOnClick',
     'focusedValue',
     'id',
     'ids',
     'onExpandedChange',
     'onFocusChange',
     'onSelectionChange',
-    'openOnClick',
     'selectedValue',
     'selectionMode',
     'typeahead',

diff --git a/packages/solid/package.json b/packages/solid/package.json
@@ -79,43 +79,43 @@
   "sideEffects": false,
   "dependencies": {
     "@ark-ui/anatomy": "3.0.0",
-    "@zag-js/accordion": "0.49.0",
-    "@zag-js/avatar": "0.49.0",
-    "@zag-js/carousel": "0.49.0",
-    "@zag-js/checkbox": "0.49.0",
-    "@zag-js/clipboard": "0.49.0",
-    "@zag-js/collapsible": "0.49.0",
-    "@zag-js/color-picker": "0.49.0",
-    "@zag-js/combobox": "0.49.0",
-    "@zag-js/date-picker": "0.49.0",
-    "@zag-js/dialog": "0.49.0",
-    "@zag-js/dom-query": "0.49.0",
-    "@zag-js/editable": "0.49.0",
-    "@zag-js/file-upload": "0.49.0",
-    "@zag-js/hover-card": "0.49.0",
-    "@zag-js/file-utils": "0.49.0",
-    "@zag-js/i18n-utils": "0.49.0",
-    "@zag-js/menu": "0.49.0",
-    "@zag-js/number-input": "0.49.0",
-    "@zag-js/pagination": "0.49.0",
-    "@zag-js/pin-input": "0.49.0",
-    "@zag-js/popover": "0.49.0",
-    "@zag-js/presence": "0.49.0",
-    "@zag-js/progress": "0.49.0",
-    "@zag-js/radio-group": "0.49.0",
-    "@zag-js/rating-group": "0.49.0",
-    "@zag-js/select": "0.49.0",
-    "@zag-js/slider": "0.49.0",
-    "@zag-js/solid": "0.49.0",
-    "@zag-js/splitter": "0.49.0",
-    "@zag-js/switch": "0.49.0",
-    "@zag-js/tabs": "0.49.0",
-    "@zag-js/tags-input": "0.49.0",
-    "@zag-js/toast": "0.49.0",
-    "@zag-js/toggle-group": "0.49.0",
-    "@zag-js/tooltip": "0.49.0",
-    "@zag-js/tree-view": "0.49.0",
-    "@zag-js/types": "0.49.0"
+    "@zag-js/accordion": "0.50.0",
+    "@zag-js/avatar": "0.50.0",
+    "@zag-js/carousel": "0.50.0",
+    "@zag-js/checkbox": "0.50.0",
+    "@zag-js/clipboard": "0.50.0",
+    "@zag-js/collapsible": "0.50.0",
+    "@zag-js/color-picker": "0.50.0",
+    "@zag-js/combobox": "0.50.0",
+    "@zag-js/date-picker": "0.50.0",
+    "@zag-js/dialog": "0.50.0",
+    "@zag-js/dom-query": "0.50.0",
+    "@zag-js/editable": "0.50.0",
+    "@zag-js/file-upload": "0.50.0",
+    "@zag-js/hover-card": "0.50.0",
+    "@zag-js/file-utils": "0.50.0",
+    "@zag-js/i18n-utils": "0.50.0",
+    "@zag-js/menu": "0.50.0",
+    "@zag-js/number-input": "0.50.0",
+    "@zag-js/pagination": "0.50.0",
+    "@zag-js/pin-input": "0.50.0",
+    "@zag-js/popover": "0.50.0",
+    "@zag-js/presence": "0.50.0",
+    "@zag-js/progress": "0.50.0",
+    "@zag-js/radio-group": "0.50.0",
+    "@zag-js/rating-group": "0.50.0",
+    "@zag-js/select": "0.50.0",
+    "@zag-js/slider": "0.50.0",
+    "@zag-js/solid": "0.50.0",
+    "@zag-js/splitter": "0.50.0",
+    "@zag-js/switch": "0.50.0",
+    "@zag-js/tabs": "0.50.0",
+    "@zag-js/tags-input": "0.50.0",
+    "@zag-js/toast": "0.50.0",
+    "@zag-js/toggle-group": "0.50.0",
+    "@zag-js/tooltip": "0.50.0",
+    "@zag-js/tree-view": "0.50.0",
+    "@zag-js/types": "0.50.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.7.3",

diff --git a/packages/solid/src/components/avatar/use-avatar.ts b/packages/solid/src/components/avatar/use-avatar.ts
@@ -13,7 +13,7 @@ export const useAvatar = (props: UseAvatarProps): UseAvatarReturn => {
   const environment = useEnvironmentContext()
   const id = createUniqueId()
 
-  const context = createMemo(() => ({
+  const context = createMemo<avatar.Context>(() => ({
     id,
     dir: locale().dir,
     getRootNode: environment().getRootNode,

diff --git a/packages/solid/src/components/combobox/combobox-root.tsx b/packages/solid/src/components/combobox/combobox-root.tsx
@@ -21,10 +21,11 @@ export const ComboboxRoot = <T extends CollectionItem>(props: ComboboxRootProps<
     'allowCustomValue',
     'autoFocus',
     'closeOnSelect',
+    'composite',
     'defaultOpen',
     'defaultValue',
     'disabled',
-    'dismissable',
+    'disableLayer',
     'form',
     'getSelectionValue',
     'highlightedValue',
@@ -53,7 +54,6 @@ export const ComboboxRoot = <T extends CollectionItem>(props: ComboboxRootProps<
     'openOnClick',
     'openOnKeyPress',
     'placeholder',
-    'popup',
     'positioning',
     'readOnly',
     'scrollToIndexFn',