fix: updated zag file upload

saas-js · Mar 11, 2024 · 8279132 · 8279132
1 parent 4bfb5a3
commit 8279132
Show file tree

Hide file tree

Showing 7 changed files with 679 additions and 665 deletions.
diff --git a/.changeset/late-feet-add.md b/.changeset/late-feet-add.md
@@ -0,0 +1,5 @@
+---
+'@saas-ui/file-upload': patch
+---
+
+Updated zag.js
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -16,7 +16,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@ark-ui/react": "^1.3.0",
+    "@ark-ui/react": "^2.2.3",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/next-js": "^2.2.0",
     "@chakra-ui/props-docs": "^2.2.1",

diff --git a/package.json b/package.json
@@ -119,7 +119,9 @@
     "react": "18.2.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@zag-js/store": "^0.30.0"
+    "@zag-js/core": "^0.38.1",
+    "@zag-js/store": "^0.38.1",
+    "@zag-js/file-upload": "^0.38.1"
   },
   "packageManager": "yarn@4.1.0"
 }
diff --git a/packages/saas-ui-file-upload/package.json b/packages/saas-ui-file-upload/package.json
@@ -62,8 +62,8 @@
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@chakra-ui/utils": "^2.0.15",
-    "@zag-js/file-upload": "^0.38.0",
-    "@zag-js/react": "^0.38.0"
+    "@zag-js/file-upload": "^0.38.1",
+    "@zag-js/react": "^0.38.1"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=2.4.6",

diff --git a/packages/saas-ui-file-upload/src/file-upload-context.ts b/packages/saas-ui-file-upload/src/file-upload-context.ts
@@ -39,19 +39,19 @@ export type FileUploadRenderContext = Pick<
 export const useFileUpload = (props: FileUploadOptions) => {
   const { isDisabled, ...rest } = props
 
-  const [state, send] = useMachine(
-    fileUpload.machine({
-      id: useId(),
-      disabled: isDisabled,
-      ...rest,
-    })
-  )
+  const initialContext: fileUpload.Context = {
+    id: useId(),
+    disabled: isDisabled,
+    ...rest,
+  }
+
+  const [state, send] = useMachine(fileUpload.machine(initialContext), {
+    context: {
+      ...initialContext,
+    },
+  })
 
   const api = fileUpload.connect(state, send, normalizeProps)
-  // @todo temporary workaround
-  api.clearFiles = () => {
-    api.files?.forEach((file) => api.deleteFile(file))
-  }
 
   api.dropzoneProps = omit(api.dropzoneProps, ['onClick'])
 

diff --git a/packages/saas-ui-file-upload/stories/file-upload.stories.tsx b/packages/saas-ui-file-upload/stories/file-upload.stories.tsx
@@ -85,7 +85,7 @@ export const OnFileAccept = {
     return (
       <FileUpload
         maxFileSize={1024}
-        maxFiles={10}
+        maxFiles={1}
         accept="image/*"
         onFileAccept={(details) => {
           console.log('accept', details)