@zag-js/file-upload - npm Package Compare versions

Comparing version 0.65.1 to 0.66.0

dist/index.d.ts

@@ -37,4 +37,5 @@ import * as _zag_js_anatomy from '@zag-js/anatomy';
 interface IntlTranslations {
-    itemPreview(file: File): string;
-    deleteFile(file: File): string;
+    dropzone?: string;
+    itemPreview?(file: File): string;
+    deleteFile?(file: File): string;
 }
@@ -112,2 +113,6 @@ interface PublicContext extends LocaleProperties, CommonProperties {
     directory?: boolean;
+    /**
+     * Whether the file input is invalid
+     */
+    invalid?: boolean;
 }
@@ -207,4 +212,4 @@ interface PrivateContext {
 
-declare const props: ("dir" | "id" | "getRootNode" | "name" | "locale" | "disabled" | "directory" | "accept" | "capture" | "required" | "ids" | "translations" | "allowDrop" | "maxFileSize" | "minFileSize" | "maxFiles" | "validate" | "onFileChange" | "onFileAccept" | "onFileReject")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "name" | "locale" | "disabled" | "directory" | "accept" | "capture" | "required" | "ids" | "translations" | "allowDrop" | "maxFileSize" | "minFileSize" | "maxFiles" | "validate" | "onFileChange" | "onFileAccept" | "onFileReject">];
+declare const props: ("dir" | "id" | "getRootNode" | "name" | "invalid" | "locale" | "disabled" | "directory" | "accept" | "capture" | "required" | "ids" | "translations" | "allowDrop" | "maxFileSize" | "minFileSize" | "maxFiles" | "validate" | "onFileChange" | "onFileAccept" | "onFileReject")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "name" | "invalid" | "locale" | "disabled" | "directory" | "accept" | "capture" | "required" | "ids" | "translations" | "allowDrop" | "maxFileSize" | "minFileSize" | "maxFiles" | "validate" | "onFileChange" | "onFileAccept" | "onFileReject">];
 declare const itemProps: "file"[];
@@ -211,0 +216,0 @@ declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, "file">];

dist/index.js

@@ -165,4 +165,5 @@ "use strict";
         tabIndex: disabled ? void 0 : 0,
+        role: "button",
+        "aria-label": translations.dropzone,
         "aria-disabled": disabled,
-        "aria-invalid": state.context.invalid,
         "data-invalid": (0, import_dom_query2.dataAttr)(state.context.invalid),
@@ -224,2 +225,3 @@ "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "data-invalid": (0, import_dom_query2.dataAttr)(state.context.invalid),
         type: "button",
@@ -310,3 +312,3 @@ onClick(event) {
         ...parts.itemPreviewImage.attrs,
-        alt: translations.itemPreview(file),
+        alt: translations.itemPreview?.(file),
         src: url,
@@ -324,3 +326,3 @@ "data-disabled": (0, import_dom_query2.dataAttr)(disabled)
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "aria-label": translations.deleteFile(file),
+        "aria-label": translations.deleteFile?.(file),
         onClick() {
@@ -349,3 +351,2 @@ if (disabled) return;
 var import_utils = require("@zag-js/utils");
-var { not } = import_core.guards;
 function machine(userContext) {
@@ -365,4 +366,4 @@ const ctx = (0, import_utils.compact)(userContext);
         rejectedFiles: (0, import_core.ref)([]),
-        invalid: false,
         translations: {
+          dropzone: "dropzone",
           itemPreview: (file) => `preview of ${file.name}`,
@@ -401,10 +402,5 @@ deleteFile: (file) => `delete file ${file.name}`,
             "DROPZONE.FOCUS": "focused",
-            "DROPZONE.DRAG_OVER": [
-              {
-                guard: not("isWithinRange"),
-                target: "dragging",
-                actions: ["setInvalid"]
-              },
-              { target: "dragging" }
-            ]
+            "DROPZONE.DRAG_OVER": {
+              target: "dragging"
+            }
           }
@@ -421,10 +417,5 @@ },
             },
-            "DROPZONE.DRAG_OVER": [
-              {
-                guard: not("isWithinRange"),
-                target: "dragging",
-                actions: ["setInvalid"]
-              },
-              { target: "dragging" }
-            ]
+            "DROPZONE.DRAG_OVER": {
+              target: "dragging"
+            }
           }
@@ -436,7 +427,6 @@ },
               target: "idle",
-              actions: ["clearInvalid", "setFilesFromEvent", "syncInputElement"]
+              actions: ["setFilesFromEvent", "syncInputElement"]
             },
             "DROPZONE.DRAG_LEAVE": {
-              target: "idle",
-              actions: ["clearInvalid"]
+              target: "idle"
             }
@@ -448,5 +438,2 @@ }
     {
-      guards: {
-        isWithinRange: (ctx2, evt) => isFilesWithinRange(ctx2, evt.count)
-      },
       actions: {
@@ -468,8 +455,2 @@ syncInputElement(ctx2) {
         },
-        setInvalid(ctx2) {
-          ctx2.invalid = true;
-        },
-        clearInvalid(ctx2) {
-          ctx2.invalid = false;
-        },
         setFilesFromEvent(ctx2, evt) {
@@ -555,2 +536,3 @@ const result = getFilesFromEvent(ctx2, evt.files);
   "name",
+  "invalid",
   "onFileAccept",
@@ -557,0 +539,0 @@ "onFileReject",

package.json

 {
   "name": "@zag-js/file-upload",
-  "version": "0.65.1",
+  "version": "0.66.0",
   "description": "Core logic for the file-upload widget implemented as a state machine",
@@ -31,9 +31,9 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "0.65.1",
-    "@zag-js/core": "0.65.1",
-    "@zag-js/dom-query": "0.65.1",
-    "@zag-js/file-utils": "0.65.1",
-    "@zag-js/i18n-utils": "0.65.1",
-    "@zag-js/utils": "0.65.1",
-    "@zag-js/types": "0.65.1"
+    "@zag-js/anatomy": "0.66.0",
+    "@zag-js/core": "0.66.0",
+    "@zag-js/dom-query": "0.66.0",
+    "@zag-js/file-utils": "0.66.0",
+    "@zag-js/i18n-utils": "0.66.0",
+    "@zag-js/utils": "0.66.0",
+    "@zag-js/types": "0.66.0"
   },
@@ -40,0 +40,0 @@ "devDependencies": {

src/file-upload.connect.ts

@@ -64,4 +64,5 @@ import { contains, dataAttr, isSelfTarget, visuallyHiddenStyle } from "@zag-js/dom-query"
         tabIndex: disabled ? undefined : 0,
+        role: "button",
+        "aria-label": translations.dropzone,
         "aria-disabled": disabled,
-        "aria-invalid": state.context.invalid,
         "data-invalid": dataAttr(state.context.invalid),
@@ -128,2 +129,3 @@ "data-disabled": dataAttr(disabled),
         "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(state.context.invalid),
         type: "button",
@@ -223,3 +225,3 @@ onClick(event) {
         ...parts.itemPreviewImage.attrs,
-        alt: translations.itemPreview(file),
+        alt: translations.itemPreview?.(file),
         src: url,
@@ -238,3 +240,3 @@ "data-disabled": dataAttr(disabled),
         "data-disabled": dataAttr(disabled),
-        "aria-label": translations.deleteFile(file),
+        "aria-label": translations.deleteFile?.(file),
         onClick() {
@@ -241,0 +243,0 @@ if (disabled) return

src/file-upload.machine.ts

@@ -1,2 +0,2 @@
-import { createMachine, guards, ref } from "@zag-js/core"
+import { createMachine, ref } from "@zag-js/core"
 import { raf } from "@zag-js/dom-query"
@@ -6,7 +6,5 @@ import { getAcceptAttrString, isFileEqual } from "@zag-js/file-utils"
 import { dom } from "./file-upload.dom"
-import type { MachineContext, MachineState, FileRejection, UserDefinedContext } from "./file-upload.types"
-import { getFilesFromEvent, isFilesWithinRange } from "./file-upload.utils"
+import type { FileRejection, MachineContext, MachineState, UserDefinedContext } from "./file-upload.types"
+import { getFilesFromEvent } from "./file-upload.utils"
 
-const { not } = guards
-
 export function machine(userContext: UserDefinedContext) {
@@ -26,4 +24,4 @@ const ctx = compact(userContext)
         rejectedFiles: ref([]),
-        invalid: false,
         translations: {
+          dropzone: "dropzone",
           itemPreview: (file) => `preview of ${file.name}`,
@@ -62,10 +60,5 @@ deleteFile: (file) => `delete file ${file.name}`,
             "DROPZONE.FOCUS": "focused",
-            "DROPZONE.DRAG_OVER": [
-              {
-                guard: not("isWithinRange"),
-                target: "dragging",
-                actions: ["setInvalid"],
-              },
-              { target: "dragging" },
-            ],
+            "DROPZONE.DRAG_OVER": {
+              target: "dragging",
+            },
           },
@@ -82,10 +75,5 @@ },
             },
-            "DROPZONE.DRAG_OVER": [
-              {
-                guard: not("isWithinRange"),
-                target: "dragging",
-                actions: ["setInvalid"],
-              },
-              { target: "dragging" },
-            ],
+            "DROPZONE.DRAG_OVER": {
+              target: "dragging",
+            },
           },
@@ -97,7 +85,6 @@ },
               target: "idle",
-              actions: ["clearInvalid", "setFilesFromEvent", "syncInputElement"],
+              actions: ["setFilesFromEvent", "syncInputElement"],
             },
             "DROPZONE.DRAG_LEAVE": {
               target: "idle",
-              actions: ["clearInvalid"],
             },
@@ -109,5 +96,2 @@ },
     {
-      guards: {
-        isWithinRange: (ctx, evt) => isFilesWithinRange(ctx, evt.count),
-      },
       actions: {
@@ -132,8 +116,2 @@ syncInputElement(ctx) {
         },
-        setInvalid(ctx) {
-          ctx.invalid = true
-        },
-        clearInvalid(ctx) {
-          ctx.invalid = false
-        },
         setFilesFromEvent(ctx, evt) {
@@ -140,0 +118,0 @@ const result = getFilesFromEvent(ctx, evt.files)

src/file-upload.props.ts

@@ -20,2 +20,3 @@ import { createProps } from "@zag-js/types"
   "name",
+  "invalid",
   "onFileAccept",
@@ -22,0 +23,0 @@ "onFileReject",

src/file-upload.types.ts

@@ -46,4 +46,5 @@ import type { Machine, StateMachine as S } from "@zag-js/core"
 export interface IntlTranslations {
-  itemPreview(file: File): string
-  deleteFile(file: File): string
+  dropzone?: string
+  itemPreview?(file: File): string
+  deleteFile?(file: File): string
 }
@@ -122,2 +123,6 @@
   directory?: boolean
+  /**
+   * Whether the file input is invalid
+   */
+  invalid?: boolean
 }
@@ -128,7 +133,2 @@
    * @internal
-   * Whether the files includes any rejection
-   */
-  invalid: boolean
-  /**
-   * @internal
    * The rejected files
@@ -135,0 +135,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

131783

decreased by-2.45%

Lines of code

1991

decreased by-2.4%

Dependency changes

• + Added@zag-js/anatomy@0.66.0(transitive)

• + Added@zag-js/core@0.66.0(transitive)

• + Added@zag-js/dom-query@0.66.0(transitive)

• + Added@zag-js/file-utils@0.66.0(transitive)

• + Added@zag-js/i18n-utils@0.66.0(transitive)

• + Added@zag-js/store@0.66.0(transitive)

• + Added@zag-js/types@0.66.0(transitive)

• + Added@zag-js/utils@0.66.0(transitive)

• - Removed@zag-js/anatomy@0.65.1(transitive)

• - Removed@zag-js/core@0.65.1(transitive)

• - Removed@zag-js/dom-query@0.65.1(transitive)

• - Removed@zag-js/file-utils@0.65.1(transitive)

• - Removed@zag-js/i18n-utils@0.65.1(transitive)

• - Removed@zag-js/store@0.65.1(transitive)

• - Removed@zag-js/types@0.65.1(transitive)

• - Removed@zag-js/utils@0.65.1(transitive)

• Updated@zag-js/anatomy@0.66.0

• Updated@zag-js/core@0.66.0

• Updated@zag-js/dom-query@0.66.0

• Updated@zag-js/file-utils@0.66.0

• Updated@zag-js/i18n-utils@0.66.0

• Updated@zag-js/types@0.66.0

• Updated@zag-js/utils@0.66.0