chore: integrate zag-66

chakra-ui · Sep 5, 2024 · 8f08a88 · 8f08a88
1 parent e3fe79d
commit 8f08a88
Show file tree

Hide file tree

Showing 22 changed files with 389 additions and 189 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/anatomy/package.json b/packages/anatomy/package.json
@@ -458,45 +458,45 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@zag-js/accordion": "0.65.1",
-    "@zag-js/anatomy": "0.65.1",
-    "@zag-js/avatar": "0.65.1",
-    "@zag-js/carousel": "0.65.1",
-    "@zag-js/checkbox": "0.65.1",
-    "@zag-js/clipboard": "0.65.1",
-    "@zag-js/collapsible": "0.65.1",
-    "@zag-js/color-picker": "0.65.1",
-    "@zag-js/color-utils": "0.65.1",
-    "@zag-js/combobox": "0.65.1",
-    "@zag-js/date-picker": "0.65.1",
-    "@zag-js/date-utils": "0.65.1",
-    "@zag-js/dialog": "0.65.1",
-    "@zag-js/editable": "0.65.1",
-    "@zag-js/file-upload": "0.65.1",
-    "@zag-js/hover-card": "0.65.1",
-    "@zag-js/menu": "0.65.1",
-    "@zag-js/number-input": "0.65.1",
-    "@zag-js/pagination": "0.65.1",
-    "@zag-js/pin-input": "0.65.1",
-    "@zag-js/popover": "0.65.1",
-    "@zag-js/presence": "0.65.1",
-    "@zag-js/progress": "0.65.1",
-    "@zag-js/qr-code": "0.65.1",
-    "@zag-js/radio-group": "0.65.1",
-    "@zag-js/rating-group": "0.65.1",
-    "@zag-js/select": "0.65.1",
-    "@zag-js/signature-pad": "0.65.1",
-    "@zag-js/slider": "0.65.1",
-    "@zag-js/splitter": "0.65.1",
-    "@zag-js/switch": "0.65.1",
-    "@zag-js/tabs": "0.65.1",
-    "@zag-js/tags-input": "0.65.1",
-    "@zag-js/time-picker": "0.65.1",
-    "@zag-js/timer": "0.65.1",
-    "@zag-js/toast": "0.65.1",
-    "@zag-js/toggle-group": "0.65.1",
-    "@zag-js/tooltip": "0.65.1",
-    "@zag-js/tree-view": "0.65.1"
+    "@zag-js/accordion": "0.66.0",
+    "@zag-js/anatomy": "0.66.0",
+    "@zag-js/avatar": "0.66.0",
+    "@zag-js/carousel": "0.66.0",
+    "@zag-js/checkbox": "0.66.0",
+    "@zag-js/clipboard": "0.66.0",
+    "@zag-js/collapsible": "0.66.0",
+    "@zag-js/color-picker": "0.66.0",
+    "@zag-js/color-utils": "0.66.0",
+    "@zag-js/combobox": "0.66.0",
+    "@zag-js/date-picker": "0.66.0",
+    "@zag-js/date-utils": "0.66.0",
+    "@zag-js/dialog": "0.66.0",
+    "@zag-js/editable": "0.66.0",
+    "@zag-js/file-upload": "0.66.0",
+    "@zag-js/hover-card": "0.66.0",
+    "@zag-js/menu": "0.66.0",
+    "@zag-js/number-input": "0.66.0",
+    "@zag-js/pagination": "0.66.0",
+    "@zag-js/pin-input": "0.66.0",
+    "@zag-js/popover": "0.66.0",
+    "@zag-js/presence": "0.66.0",
+    "@zag-js/progress": "0.66.0",
+    "@zag-js/qr-code": "0.66.0",
+    "@zag-js/radio-group": "0.66.0",
+    "@zag-js/rating-group": "0.66.0",
+    "@zag-js/select": "0.66.0",
+    "@zag-js/signature-pad": "0.66.0",
+    "@zag-js/slider": "0.66.0",
+    "@zag-js/splitter": "0.66.0",
+    "@zag-js/switch": "0.66.0",
+    "@zag-js/tabs": "0.66.0",
+    "@zag-js/tags-input": "0.66.0",
+    "@zag-js/time-picker": "0.66.0",
+    "@zag-js/timer": "0.66.0",
+    "@zag-js/toast": "0.66.0",
+    "@zag-js/toggle-group": "0.66.0",
+    "@zag-js/tooltip": "0.66.0",
+    "@zag-js/tree-view": "0.66.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -6,6 +6,52 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Fixed
+
+- **Floating Components**: Fixed issue where clicking outside of a dialog on mobile passed click
+  events through.
+
+- **Popover**: Fixed issue where popover did not restore focus when open state was changed
+  programmatically
+
+- **Avatar**: Fixed issue where avatar could throw when the fallback inner text changed
+
+- **Steps**: Improved accessibility of tablist semantics by using `aria-owns`
+
+### Added
+
+- **FileUpload**: Add support for more file types in file upload `accept` intellisense
+
+- **Toast**: Add support for `action` property when creating toasts, giving you the ability to add a
+  `action.label` and `action.onClick`. The `onClick` function will be called when the user clicks
+  the action trigger.
+
+```ts
+toaster.create({
+  title: 'Uploaded successfully',
+  type: 'success',
+  action: {
+    label: 'Undo',
+    onClick: () => {
+      console.log('undo')
+    },
+  },
+})
+```
+
+- **File Upload**: Added support for `invalid` prop in file upload to explicitly mark upload
+  operation as invalid. This could be paired with the `rejectedFiles` to show an error message.
+
+### Changed
+
+- **Floating Components**: Refactored `boundary` to only support function that returns an element.
+
+- **Select**
+
+  - Refactored opening and selection to be based on click events rather than pointerdown/up cycles.
+  - Improved usability and accessibility of the select component.
+  - Fixed issue where controlled multiple selects open state behaved unexpectedly.
+
 ## [3.10.0] - 2024-09-02
 
 ### Fixed

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -129,52 +129,52 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.5.5",
-    "@zag-js/accordion": "0.65.1",
-    "@zag-js/anatomy": "0.65.1",
-    "@zag-js/avatar": "0.65.1",
-    "@zag-js/carousel": "0.65.1",
-    "@zag-js/checkbox": "0.65.1",
-    "@zag-js/clipboard": "0.65.1",
-    "@zag-js/collapsible": "0.65.1",
-    "@zag-js/color-picker": "0.65.1",
-    "@zag-js/color-utils": "0.65.1",
-    "@zag-js/combobox": "0.65.1",
-    "@zag-js/core": "0.65.1",
-    "@zag-js/date-picker": "0.65.1",
-    "@zag-js/date-utils": "0.65.1",
-    "@zag-js/dialog": "0.65.1",
-    "@zag-js/dom-query": "0.65.1",
-    "@zag-js/editable": "0.65.1",
-    "@zag-js/file-upload": "0.65.1",
-    "@zag-js/file-utils": "0.65.1",
-    "@zag-js/hover-card": "0.65.1",
-    "@zag-js/i18n-utils": "0.65.1",
-    "@zag-js/menu": "0.65.1",
-    "@zag-js/number-input": "0.65.1",
-    "@zag-js/pagination": "0.65.1",
-    "@zag-js/pin-input": "0.65.1",
-    "@zag-js/popover": "0.65.1",
-    "@zag-js/presence": "0.65.1",
-    "@zag-js/progress": "0.65.1",
-    "@zag-js/qr-code": "0.65.1",
-    "@zag-js/radio-group": "0.65.1",
-    "@zag-js/rating-group": "0.65.1",
-    "@zag-js/react": "0.65.1",
-    "@zag-js/select": "0.65.1",
-    "@zag-js/signature-pad": "0.65.1",
-    "@zag-js/slider": "0.65.1",
-    "@zag-js/splitter": "0.65.1",
-    "@zag-js/steps": "0.65.1",
-    "@zag-js/switch": "0.65.1",
-    "@zag-js/tabs": "0.65.1",
-    "@zag-js/tags-input": "0.65.1",
-    "@zag-js/time-picker": "0.65.1",
-    "@zag-js/timer": "0.65.1",
-    "@zag-js/toast": "0.65.1",
-    "@zag-js/toggle-group": "0.65.1",
-    "@zag-js/tooltip": "0.65.1",
-    "@zag-js/tree-view": "0.65.1",
-    "@zag-js/types": "0.65.1"
+    "@zag-js/accordion": "0.66.0",
+    "@zag-js/anatomy": "0.66.0",
+    "@zag-js/avatar": "0.66.0",
+    "@zag-js/carousel": "0.66.0",
+    "@zag-js/checkbox": "0.66.0",
+    "@zag-js/clipboard": "0.66.0",
+    "@zag-js/collapsible": "0.66.0",
+    "@zag-js/color-picker": "0.66.0",
+    "@zag-js/color-utils": "0.66.0",
+    "@zag-js/combobox": "0.66.0",
+    "@zag-js/core": "0.66.0",
+    "@zag-js/date-picker": "0.66.0",
+    "@zag-js/date-utils": "0.66.0",
+    "@zag-js/dialog": "0.66.0",
+    "@zag-js/dom-query": "0.66.0",
+    "@zag-js/editable": "0.66.0",
+    "@zag-js/file-upload": "0.66.0",
+    "@zag-js/file-utils": "0.66.0",
+    "@zag-js/hover-card": "0.66.0",
+    "@zag-js/i18n-utils": "0.66.0",
+    "@zag-js/menu": "0.66.0",
+    "@zag-js/number-input": "0.66.0",
+    "@zag-js/pagination": "0.66.0",
+    "@zag-js/pin-input": "0.66.0",
+    "@zag-js/popover": "0.66.0",
+    "@zag-js/presence": "0.66.0",
+    "@zag-js/progress": "0.66.0",
+    "@zag-js/qr-code": "0.66.0",
+    "@zag-js/radio-group": "0.66.0",
+    "@zag-js/rating-group": "0.66.0",
+    "@zag-js/react": "0.66.0",
+    "@zag-js/select": "0.66.0",
+    "@zag-js/signature-pad": "0.66.0",
+    "@zag-js/slider": "0.66.0",
+    "@zag-js/splitter": "0.66.0",
+    "@zag-js/steps": "0.66.0",
+    "@zag-js/switch": "0.66.0",
+    "@zag-js/tabs": "0.66.0",
+    "@zag-js/tags-input": "0.66.0",
+    "@zag-js/time-picker": "0.66.0",
+    "@zag-js/timer": "0.66.0",
+    "@zag-js/toast": "0.66.0",
+    "@zag-js/toggle-group": "0.66.0",
+    "@zag-js/tooltip": "0.66.0",
+    "@zag-js/tree-view": "0.66.0",
+    "@zag-js/types": "0.66.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
@@ -184,14 +184,14 @@
     "@storybook/react-vite": "8.2.9",
     "@storybook/react": "8.2.9",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.4.8",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.3.1",
-    "@zag-js/stringify-state": "0.65.1",
+    "@zag-js/stringify-state": "0.66.0",
     "globby": "14.0.2",
     "jsdom": "25.0.0",
     "lucide-react": "0.438.0",

diff --git a/packages/react/src/components/file-upload/file-upload-root.tsx b/packages/react/src/components/file-upload/file-upload-root.tsx
@@ -17,6 +17,7 @@ export const FileUploadRoot = forwardRef<HTMLDivElement, FileUploadRootProps>((p
     'disabled',
     'id',
     'ids',
+    'invalid',
     'locale',
     'maxFiles',
     'maxFileSize',

diff --git a/packages/react/src/components/file-upload/use-file-upload.ts b/packages/react/src/components/file-upload/use-file-upload.ts
@@ -24,6 +24,7 @@ export const useFileUpload = (props: UseFileUploadProps = {}): UseFileUploadRetu
     dir,
     disabled: field?.disabled,
     required: field?.required,
+    invalid: field?.invalid,
     getRootNode,
     ...props,
   }

diff --git a/packages/react/src/components/toast/examples/action.tsx b/packages/react/src/components/toast/examples/action.tsx
@@ -0,0 +1,52 @@
+import { Toast, Toaster, createToaster } from '../..'
+
+const toaster = createToaster({
+  placement: 'bottom-end',
+  gap: 24,
+})
+
+export const Action = () => {
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() =>
+          toaster.create({
+            title: 'Toast Title',
+            description: 'Toast Description',
+            type: 'info',
+            action: {
+              label: 'Subscribe',
+              onClick: () => {
+                console.log('Subscribe')
+              },
+            },
+          })
+        }
+      >
+        Add Toast
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          toaster.create({
+            title: 'Toast Title',
+            description: 'Toast Description',
+            type: 'info',
+          })
+        }
+      >
+        Toast Plain
+      </button>
+      <Toaster toaster={toaster}>
+        {(toast) => (
+          <Toast.Root key={toast.id}>
+            <Toast.Title>{toast.title}</Toast.Title>
+            <Toast.Description>{toast.description}</Toast.Description>
+            {toast.action && <Toast.ActionTrigger>{toast.action?.label}</Toast.ActionTrigger>}
+          </Toast.Root>
+        )}
+      </Toaster>
+    </div>
+  )
+}
diff --git a/packages/react/src/components/toast/examples/basic.tsx b/packages/react/src/components/toast/examples/basic.tsx
@@ -27,7 +27,6 @@ export const Basic = () => {
           <Toast.Root key={toast.id}>
             <Toast.Title>{toast.title}</Toast.Title>
             <Toast.Description>{toast.description}</Toast.Description>
-            <Toast.ActionTrigger>Do Action</Toast.ActionTrigger>
             <Toast.CloseTrigger>
               <XIcon />
             </Toast.CloseTrigger>

diff --git a/packages/react/src/components/toast/examples/update.tsx b/packages/react/src/components/toast/examples/update.tsx
@@ -1,4 +1,3 @@
-import { XIcon } from 'lucide-react'
 import { useRef } from 'react'
 import { Toast, Toaster, createToaster } from '../..'
 
@@ -43,9 +42,6 @@ export const Update = () => {
             <Toast.Title>{toast.title}</Toast.Title>
             <Toast.Description>{toast.description}</Toast.Description>
             <Toast.ActionTrigger>Do Action</Toast.ActionTrigger>
-            <Toast.CloseTrigger>
-              <XIcon />
-            </Toast.CloseTrigger>
           </Toast.Root>
         )}
       </Toaster>

diff --git a/packages/react/src/components/toast/toast.stories.tsx b/packages/react/src/components/toast/toast.stories.tsx
@@ -6,5 +6,6 @@ const meta: Meta = {
 
 export default meta
 
+export { Action } from './examples/action'
 export { Basic } from './examples/basic'
 export { Update } from './examples/update'