@salt-ds/lab 1.0.0-alpha.24 → 1.0.0-alpha.25

package/dist-es/file-drop-zone/FileDropZone.js

@@ -1,27 +1,22 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useId, Button } from '@salt-ds/core';
-import { ErrorIcon, UploadIcon } from '@salt-ds/icons';
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef } from '@salt-ds/core';
 import { clsx } from 'clsx';
-import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
-import { containsFiles, extractFiles, validateFiles } from './internal/utils.js';
+import { forwardRef, useState, useRef } from 'react';
+import { containsFiles, extractFiles } from './internal/utils.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './FileDropZone.css.js';
 
-const buttonLabel = "Browse files";
-const INVALID_DROP_TARGET = "Drop target doesn't contain any file.";
 const withBaseName = makePrefixer("saltFileDropZone");
 const FileDropZone = forwardRef(
   function FileDropZone2({
-    accept,
+    status,
     className,
     children,
-    description,
     disabled,
-    id: idProp,
-    validate,
-    onFilesAccepted,
-    onFilesRejected,
+    onDragOver,
+    onDragLeave,
+    onDrop,
     ...restProps
   }, ref) {
     const targetWindow = useWindow();
@@ -30,158 +25,63 @@ const FileDropZone = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const id = useId(idProp);
-    const iconId = `${id}-icon`;
-    const buttonId = `${id}-button`;
-    const descriptionId = `${id}-description`;
-    const [dropResult, setDropResult] = useState(null);
     const [isActive, setActive] = useState(false);
-    const [isRejected, setRejected] = useState(false);
-    const buttonRef = useRef(null);
-    const fileInputRef = useRef(null);
-    useEffect(() => {
-      if (!disabled && dropResult) {
-        const { event, files, errors } = dropResult;
-        if (errors && errors.length !== 0) {
-          setRejected(true);
-          if (!!onFilesRejected) {
-            return onFilesRejected(errors, event);
-          }
-        }
-        setRejected(false);
-        return onFilesAccepted == null ? void 0 : onFilesAccepted(files, event);
-      }
-    }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);
+    const regionRef = useRef(null);
+    const handleRef = useForkRef(ref, regionRef);
     const handleDragOver = (event) => {
       event.preventDefault();
       event.stopPropagation();
       if (disabled) {
-        event.dataTransfer && (event.dataTransfer.dropEffect = "none");
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = "none";
+        }
         return;
-      } else {
-        event.dataTransfer && (event.dataTransfer.dropEffect = "copy");
+      }
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
       }
       if (!isActive && containsFiles(event)) {
         setActive(true);
       }
+      onDragOver == null ? void 0 : onDragOver(event);
     };
-    const handleDragLeave = () => setActive(false);
-    const handleFilesDrop = (event) => {
-      if (!containsFiles(event)) {
-        return setDropResult({
-          event,
-          errors: [INVALID_DROP_TARGET]
-        });
+    const handleDragLeave = (event) => {
+      if (disabled) {
+        return;
       }
-      const files = extractFiles(event);
-      if (files.length > 0) {
-        return setDropResult({
-          event,
-          files,
-          errors: validate ? validateFiles({ files, validate }) : []
-        });
+      const region = regionRef == null ? void 0 : regionRef.current;
+      const eventTarget = event.relatedTarget;
+      if (eventTarget !== region && !(region == null ? void 0 : region.contains(eventTarget))) {
+        setActive(false);
       }
+      onDragLeave == null ? void 0 : onDragLeave(event);
     };
     const handleDrop = (event) => {
+      if (disabled) {
+        return;
+      }
       event.preventDefault();
-      event.stopPropagation();
-      handleFilesDrop(event);
+      const files = extractFiles(event);
       setActive(false);
+      onDrop == null ? void 0 : onDrop(event, files);
     };
-    const handleInputChange = (event) => {
-      event.stopPropagation();
-      handleFilesDrop(event);
-    };
-    const handleInputFocus = useCallback(
-      (event) => {
-        event.stopPropagation();
-        buttonRef.current && buttonRef.current.focus();
-      },
-      []
-    );
-    const handleInputClick = useCallback(
-      (event) => {
-        event.stopPropagation();
-        fileInputRef.current && fileInputRef.current.click();
-      },
-      []
-    );
-    const handleKeyDown = useCallback(
-      (event) => {
-        if (["Enter", "Space"].indexOf(event.key) !== -1) {
-          fileInputRef.current && fileInputRef.current.click();
-        }
-      },
-      []
-    );
-    const fileDropZoneDescription = description ? /* @__PURE__ */ jsx("div", {
-      className: "saltFileDropZone-description",
-      id: descriptionId,
-      children: description
-    }) : null;
-    const buttonLabelledBy = (isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]).join(" ");
-    return /* @__PURE__ */ jsxs("div", {
-      ...restProps,
+    return /* @__PURE__ */ jsx("div", {
       className: clsx(
         withBaseName(),
         {
-          [withBaseName("error")]: isRejected,
+          [withBaseName(status)]: status,
           [withBaseName("active")]: isActive,
           [withBaseName("disabled")]: disabled
         },
         className
       ),
+      "aria-disabled": disabled,
       onDragLeave: handleDragLeave,
       onDragOver: handleDragOver,
       onDrop: handleDrop,
-      ref,
-      children: [
-        /* @__PURE__ */ jsxs("div", {
-          "aria-live": "polite",
-          children: [
-            isRejected ? /* @__PURE__ */ jsx(ErrorIcon, {
-              "aria-label": "error!",
-              className: withBaseName("icon"),
-              size: 2
-            }) : /* @__PURE__ */ jsx(UploadIcon, {
-              className: withBaseName("icon"),
-              size: 2
-            }),
-            isRejected && fileDropZoneDescription
-          ]
-        }),
-        /* @__PURE__ */ jsx("div", {
-          className: withBaseName("title"),
-          children: children || "Drop files here or"
-        }),
-        /* @__PURE__ */ jsxs("label", {
-          className: withBaseName("inputRoot"),
-          children: [
-            /* @__PURE__ */ jsx(Button, {
-              "aria-labelledby": buttonLabelledBy,
-              ref: buttonRef,
-              className: withBaseName("inputButton"),
-              "data-testid": "file-input-button",
-              disabled,
-              onKeyDown: handleKeyDown,
-              onClick: handleInputClick,
-              children: buttonLabel.toUpperCase()
-            }),
-            /* @__PURE__ */ jsx("input", {
-              accept,
-              className: "input-hidden",
-              "data-testid": "file-input",
-              disabled,
-              multiple: true,
-              onChange: handleInputChange,
-              onFocus: handleInputFocus,
-              ref: fileInputRef,
-              type: "file"
-            })
-          ]
-        }),
-        !isRejected && fileDropZoneDescription
-      ]
+      ref: handleRef,
+      ...restProps,
+      children
     });
   }
 );

package/dist-es/file-drop-zone/FileDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  DragEvent,\n  DragEventHandler,\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n  files: ReadonlyArray<File>,\n  event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n  errors: ReadonlyArray<ErrorType>,\n  event: SyntheticEvent\n) => void;\n\n/**\n * Removed deprecated props\n *\n * - onDrop\n * - onFileTypeError\n * - showUploadButton\n */\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `accept` attribute for HTML <input>.\n   *\n   * A comma separated list of file types the user can pick from the file input dialog box.\n   */\n  accept?: string;\n\n  /**\n   * The text content of the drop area component.\n   */\n  children?: ReactNode;\n\n  /**\n   * Additional usage information.\n   */\n  description?: string;\n\n  /**\n   * If `true`, the file drop zone will be disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n\n  /**\n   * Callback on successful file drop or selection.\n   */\n  onFilesAccepted?: FilesAcceptedEventHandler;\n\n  /**\n   * @see `validate` prop\n   * Callback on drop or input in case of an error. A list of errors will be provided as input.\n   */\n  onFilesRejected?: FilesRejectedEventHandler;\n\n  /**\n   * A list of custom validation functions. Every function is provided with the entire file list as input\n   * thus can perform validations on all files. Each function needs to return one or more errors in case of\n   * a failed validation, or `undefined` in case of a successful one.\n   *\n   * All errors are collected in the end and returned as an array to `onFilesRejected`.\n   */\n  validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n  function FileDropZone(\n    {\n      accept,\n      className,\n      children,\n      description,\n      disabled,\n      id: idProp,\n      validate,\n      onFilesAccepted,\n      onFilesRejected,\n      ...restProps\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-file-drop-zone\",\n      css: fileDropZoneCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n\n    const iconId = `${id}-icon`;\n    const buttonId = `${id}-button`;\n    const descriptionId = `${id}-description`;\n\n    const [dropResult, setDropResult] = useState<null | {\n      event: SyntheticEvent;\n      files?: ReadonlyArray<File>;\n      errors: string[];\n    }>(null);\n    const [isActive, setActive] = useState(false);\n    const [isRejected, setRejected] = useState(false);\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (!disabled && dropResult) {\n        const { event, files, errors } = dropResult;\n\n        if (errors && errors.length !== 0) {\n          setRejected(true);\n          if (!!onFilesRejected) {\n            return onFilesRejected(errors, event);\n          }\n        }\n\n        setRejected(false);\n        return onFilesAccepted?.(files!, event);\n      }\n    }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\n\n    const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n      // Need to cancel the default events to allow drop\n      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n        return;\n      } else {\n        // Not using 'move', otherwise apps like Outlook will delete the item\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n      }\n\n      if (!isActive && containsFiles(event)) {\n        setActive(true);\n      }\n    };\n\n    const handleDragLeave = () => setActive(false);\n\n    const handleFilesDrop = (event: SyntheticEvent) => {\n      if (!containsFiles(event as DragEvent)) {\n        return setDropResult({\n          event,\n          errors: [INVALID_DROP_TARGET],\n        });\n      }\n\n      const files = extractFiles(event as DragEvent);\n\n      if (files.length > 0) {\n        return setDropResult({\n          event,\n          files,\n          errors: validate ? validateFiles({ files, validate }) : [],\n        });\n      }\n    };\n\n    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n      setActive(false);\n    };\n\n    const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n    };\n\n    // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n    // move focus back on the button element so that all labels can be announced correctly\n    const handleInputFocus = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n        buttonRef.current && buttonRef.current.focus();\n      },\n      []\n    );\n\n    const handleInputClick = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        fileInputRef.current && fileInputRef.current.click();\n      },\n      []\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n          fileInputRef.current && fileInputRef.current.click();\n        }\n      },\n      []\n    );\n\n    const fileDropZoneDescription = description ? (\n      <div className=\"saltFileDropZone-description\" id={descriptionId}>\n        {description}\n      </div>\n    ) : null;\n\n    const buttonLabelledBy = (\n      isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n    ).join(\" \");\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"error\")]: isRejected,\n            [withBaseName(\"active\")]: isActive,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        ref={ref}\n      >\n        {/* TODO: Check whether we want to replace this with aria announce */}\n        <div aria-live=\"polite\">\n          {/*\n           * It is an ADA requirement to always display an input button.-\n           */}\n          {isRejected ? (\n            <ErrorIcon\n              aria-label=\"error!\"\n              className={withBaseName(\"icon\")}\n              size={2}\n            />\n          ) : (\n            <UploadIcon className={withBaseName(\"icon\")} size={2} />\n          )}\n          {isRejected && fileDropZoneDescription}\n        </div>\n        <div className={withBaseName(\"title\")}>\n          {children || \"Drop files here or\"}\n        </div>\n        <label className={withBaseName(\"inputRoot\")}>\n          <Button\n            aria-labelledby={buttonLabelledBy}\n            ref={buttonRef}\n            className={withBaseName(\"inputButton\")}\n            data-testid=\"file-input-button\"\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            onClick={handleInputClick}\n          >\n            {/* TODO: expose this in props */}\n            {buttonLabel.toUpperCase()}\n          </Button>\n          <input\n            accept={accept}\n            className=\"input-hidden\"\n            data-testid=\"file-input\"\n            disabled={disabled}\n            multiple\n            onChange={handleInputChange}\n            onFocus={handleInputFocus}\n            ref={fileInputRef}\n            type=\"file\"\n          />\n        </label>\n        {!isRejected && fileDropZoneDescription}\n      </div>\n    );\n  }\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":"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"}
+{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, ValidationStatus } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  DragEventHandler,\n  forwardRef,\n  DragEvent,\n  useRef,\n  useState,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\n\nexport interface FileDropZoneProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n  /**\n   * If `true`, the file drop zone will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Status indicator to be displayed.\n   */\n  status?: Omit<ValidationStatus, \"info\" | \"warning\">;\n  /**\n   * Callback for on drop event\n   */\n  onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n  function FileDropZone(\n    {\n      status,\n      className,\n      children,\n      disabled,\n      onDragOver,\n      onDragLeave,\n      onDrop,\n      ...restProps\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-file-drop-zone\",\n      css: fileDropZoneCss,\n      window: targetWindow,\n    });\n    const [isActive, setActive] = useState(false);\n\n    const regionRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, regionRef);\n\n    const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n      // Need to cancel the default events to allow drop\n      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        if (event.dataTransfer) {\n          event.dataTransfer.dropEffect = \"none\";\n        }\n        return;\n      }\n      if (event.dataTransfer) {\n        event.dataTransfer.dropEffect = \"copy\";\n      }\n      if (!isActive && containsFiles(event)) {\n        setActive(true);\n      }\n      onDragOver?.(event);\n    };\n\n    const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        return;\n      }\n      const region = regionRef?.current;\n      const eventTarget = event.relatedTarget;\n      if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n        setActive(false);\n      }\n      onDragLeave?.(event);\n    };\n\n    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        return;\n      }\n      event.preventDefault();\n      const files = extractFiles(event);\n      setActive(false);\n      onDrop?.(event, files);\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(status as string)]: status,\n            [withBaseName(\"active\")]: isActive,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        aria-disabled={disabled}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        ref={handleRef}\n        {...restProps}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":"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"}

package/dist-es/file-drop-zone/FileDropZoneIcon.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { StatusIndicator } from '@salt-ds/core';
+import { forwardRef } from 'react';
+import { UploadIcon } from '@salt-ds/icons';
+
+const FileDropZoneIcon = forwardRef(function FileDropZoneIcon2({ status, size = 2, ...rest }, ref) {
+  const iconProps = {
+    ref,
+    size,
+    ...rest
+  };
+  return status ? /* @__PURE__ */ jsx(StatusIndicator, {
+    status,
+    ...iconProps
+  }) : /* @__PURE__ */ jsx(UploadIcon, {
+    ...iconProps
+  });
+});
+
+export { FileDropZoneIcon };
+//# sourceMappingURL=FileDropZoneIcon.js.map

package/dist-es/file-drop-zone/FileDropZoneIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropZoneIcon.js","sources":["../src/file-drop-zone/FileDropZoneIcon.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport { IconProps, UploadIcon } from \"@salt-ds/icons\";\n\nexport interface FileDropZoneIconProps extends IconProps {\n  /**\n   * Status indicator to be displayed.\n   */\n  status?: ValidationStatus;\n}\n\nexport const FileDropZoneIcon = forwardRef<\n  SVGSVGElement,\n  FileDropZoneIconProps\n>(function FileDropZoneIcon({ status, size = 2, ...rest }, ref) {\n  const iconProps = {\n    ref,\n    size,\n    ...rest,\n  };\n  return status ? (\n    <StatusIndicator status={status} {...iconProps} />\n  ) : (\n    <UploadIcon {...iconProps} />\n  );\n});\n"],"names":["FileDropZoneIcon"],"mappings":";;;;;AAWa,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBAAiB,CAAA,EAAE,QAAQ,IAAO,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AAC9D,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,GAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACA,EAAA,OAAO,yBACJ,GAAA,CAAA,eAAA,EAAA;AAAA,IAAgB,MAAA;AAAA,IAAiB,GAAG,SAAA;AAAA,GAAW,oBAE/C,GAAA,CAAA,UAAA,EAAA;AAAA,IAAY,GAAG,SAAA;AAAA,GAAW,CAAA,CAAA;AAE/B,CAAC;;;;"}

package/dist-es/file-drop-zone/FileDropZoneTrigger.js

@@ -0,0 +1,48 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useForkRef, Button } from '@salt-ds/core';
+import { forwardRef, useRef } from 'react';
+
+const FileDropZoneTrigger = forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onChange, ...rest }, ref) {
+  const buttonRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const triggerRef = useForkRef(ref, buttonRef);
+  const handleFocus = (event) => {
+    var _a;
+    event.stopPropagation();
+    (_a = buttonRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleClick = (event) => {
+    var _a;
+    event.stopPropagation();
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleChange = (event) => {
+    var _a;
+    const files = Array.from((_a = event.target.files) != null ? _a : []);
+    onChange == null ? void 0 : onChange(event, files);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(Button, {
+        onClick: handleClick,
+        disabled,
+        ref: triggerRef,
+        ...rest,
+        children: children != null ? children : "Browse files"
+      }),
+      /* @__PURE__ */ jsx("input", {
+        accept,
+        className: "input-hidden",
+        disabled,
+        multiple,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        ref: fileInputRef,
+        type: "file"
+      })
+    ]
+  });
+});
+
+export { FileDropZoneTrigger };
+//# sourceMappingURL=FileDropZoneTrigger.js.map

package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import { Button, useForkRef } from \"@salt-ds/core\";\nimport {\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\n\nexport interface FileDropZoneTriggerProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /**\n   * `accept` attribute for HTML <input>.\n   *\n   * A comma separated list of file types the user can pick from the file input dialog box.\n   */\n  accept?: string;\n  /**\n   * Disable all trigger elements.\n   */\n  disabled?: boolean;\n  /**\n   * Allows multiple files to be uploaded.\n   */\n  multiple?: boolean;\n  /**\n   * Callback for input change event\n   */\n  onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n  HTMLButtonElement,\n  FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n  { accept, children, disabled, multiple = false, onChange, ...rest },\n  ref\n) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useForkRef(ref, buttonRef);\n\n  // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n  // move focus back on the button element so that all labels can be announced correctly\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    event.stopPropagation();\n    buttonRef.current?.focus();\n  };\n\n  const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    fileInputRef.current?.click();\n  };\n\n  const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n    const files = Array.from((event.target as HTMLInputElement).files ?? []);\n    onChange?.(event, files);\n  };\n  return (\n    <>\n      <Button\n        onClick={handleClick}\n        disabled={disabled}\n        ref={triggerRef}\n        {...rest}\n      >\n        {children ?? \"Browse files\"}\n      </Button>\n      <input\n        accept={accept}\n        className=\"input-hidden\"\n        disabled={disabled}\n        multiple={multiple}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        ref={fileInputRef}\n        type=\"file\"\n      />\n    </>\n  );\n});\n"],"names":["FileDropZoneTrigger"],"mappings":";;;;AA+BO,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAU,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,EAAO,QAAa,EAAA,GAAA,IAAA,IAC7D,GACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,YAAA,GAAe,OAAyB,IAAI,CAAA,CAAA;AAClD,EAAM,MAAA,UAAA,GAAa,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAI5C,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AA5C/D,IAAA,IAAA,EAAA,CAAA;AA6CI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAjDpE,IAAA,IAAA,EAAA,CAAA;AAkDI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA4C,KAAA;AAtDpE,IAAA,IAAA,EAAA,CAAA;AAuDI,IAAM,MAAA,KAAA,GAAQ,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,OAA4B,KAAlC,KAAA,IAAA,GAAA,EAAA,GAA2C,EAAE,CAAA,CAAA;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AACA,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,OAAS,EAAA,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAY,EAAA,QAAA,IAAA,IAAA,GAAA,QAAA,GAAA,cAAA;AAAA,OACf,CAAA;AAAA,sBACC,GAAA,CAAA,OAAA,EAAA;AAAA,QACC,MAAA;AAAA,QACA,SAAU,EAAA,cAAA;AAAA,QACV,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,GAAK,EAAA,YAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,OACP,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/file-drop-zone/internal/utils.js

@@ -1,8 +1,7 @@
-const toArray = (obj) => Object.keys(obj).map((key) => obj[key]);
 const containsFiles = (e) => {
   if (!e.dataTransfer) {
     const target = e.target;
-    return target && target.files;
+    return target == null ? void 0 : target.files;
   }
   return Array.prototype.some.call(
     e.dataTransfer.types,
@@ -10,23 +9,17 @@ const containsFiles = (e) => {
   );
 };
 const extractFiles = (e) => {
+  var _a;
   if (containsFiles(e)) {
     if (e.dataTransfer) {
-      return toArray(e.dataTransfer.files);
+      return Array.from(e.dataTransfer.files);
     }
     if (e.target) {
-      return toArray(e.target.files);
+      return Array.from((_a = e.target.files) != null ? _a : []);
     }
   }
   return [];
 };
-const validateFiles = ({
-  files = [],
-  validate = []
-}) => validate.reduce(
-  (result, validator) => result.concat(validator(files)),
-  []
-).filter(Boolean);
 
-export { containsFiles, extractFiles, toArray, validateFiles };
+export { containsFiles, extractFiles };
 //# sourceMappingURL=utils.js.map

package/dist-es/file-drop-zone/internal/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\nimport { FilesValidator } from \"../validators\";\n\nexport const toArray = (obj: any) => Object.keys(obj).map((key) => obj[key]);\n\nexport const containsFiles = (e: DragEvent) => {\n  if (!e.dataTransfer) {\n    const target = e.target as HTMLInputElement;\n    return target && target.files;\n  }\n\n  return Array.prototype.some.call(\n    e.dataTransfer.types,\n    (type) => type === \"Files\"\n  );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n  if (containsFiles(e)) {\n    if (e.dataTransfer) {\n      return toArray(e.dataTransfer.files);\n    }\n\n    if (e.target) {\n      return toArray((e.target as HTMLInputElement).files);\n    }\n  }\n\n  return [];\n};\n\nexport const validateFiles = ({\n  files = [],\n  validate = [],\n}: {\n  files: ReadonlyArray<File>;\n  validate: ReadonlyArray<FilesValidator>;\n}) =>\n  validate\n    .reduce(\n      (result, validator) => result.concat(validator(files)),\n      [] as (string | undefined)[]\n    )\n    .filter(Boolean) as string[];\n"],"names":[],"mappings":"AAGa,MAAA,OAAA,GAAU,CAAC,GAAA,KAAa,MAAO,CAAA,IAAA,CAAK,GAAG,CAAA,CAAE,GAAI,CAAA,CAAC,GAAQ,KAAA,GAAA,CAAI,GAAI,CAAA,EAAA;AAE9D,MAAA,aAAA,GAAgB,CAAC,CAAiB,KAAA;AAC7C,EAAI,IAAA,CAAC,EAAE,YAAc,EAAA;AACnB,IAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,IAAA,OAAO,UAAU,MAAO,CAAA,KAAA,CAAA;AAAA,GAC1B;AAEA,EAAO,OAAA,KAAA,CAAM,UAAU,IAAK,CAAA,IAAA;AAAA,IAC1B,EAAE,YAAa,CAAA,KAAA;AAAA,IACf,CAAC,SAAS,IAAS,KAAA,OAAA;AAAA,GACrB,CAAA;AACF,EAAA;AAEa,MAAA,YAAA,GAAe,CAAC,CAAyB,KAAA;AACpD,EAAI,IAAA,aAAA,CAAc,CAAC,CAAG,EAAA;AACpB,IAAA,IAAI,EAAE,YAAc,EAAA;AAClB,MAAO,OAAA,OAAA,CAAQ,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACrC;AAEA,IAAA,IAAI,EAAE,MAAQ,EAAA;AACZ,MAAO,OAAA,OAAA,CAAS,CAAE,CAAA,MAAA,CAA4B,KAAK,CAAA,CAAA;AAAA,KACrD;AAAA,GACF;AAEA,EAAA,OAAO,EAAC,CAAA;AACV,EAAA;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAQ,EAAC;AAAA,EACT,WAAW,EAAC;AACd,CAAA,KAIE,QACG,CAAA,MAAA;AAAA,EACC,CAAC,MAAQ,EAAA,SAAA,KAAc,OAAO,MAAO,CAAA,SAAA,CAAU,KAAK,CAAC,CAAA;AAAA,EACrD,EAAC;AACH,CAAA,CACC,OAAO,OAAO;;;;"}
+{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\n\nexport const containsFiles = (e: DragEvent) => {\n  if (!e.dataTransfer) {\n    const target = e.target as HTMLInputElement;\n    return target?.files;\n  }\n\n  return Array.prototype.some.call(\n    e.dataTransfer.types,\n    (type) => type === \"Files\"\n  );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n  if (containsFiles(e)) {\n    if (e.dataTransfer) {\n      return Array.from(e.dataTransfer.files);\n    }\n\n    if (e.target) {\n      return Array.from((e.target as HTMLInputElement).files ?? []);\n    }\n  }\n\n  return [];\n};\n"],"names":[],"mappings":"AAEa,MAAA,aAAA,GAAgB,CAAC,CAAiB,KAAA;AAC7C,EAAI,IAAA,CAAC,EAAE,YAAc,EAAA;AACnB,IAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,IAAA,OAAO,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EAAO,OAAA,KAAA,CAAM,UAAU,IAAK,CAAA,IAAA;AAAA,IAC1B,EAAE,YAAa,CAAA,KAAA;AAAA,IACf,CAAC,SAAS,IAAS,KAAA,OAAA;AAAA,GACrB,CAAA;AACF,EAAA;AAEa,MAAA,YAAA,GAAe,CAAC,CAAyB,KAAA;AAdtD,EAAA,IAAA,EAAA,CAAA;AAeE,EAAI,IAAA,aAAA,CAAc,CAAC,CAAG,EAAA;AACpB,IAAA,IAAI,EAAE,YAAc,EAAA;AAClB,MAAA,OAAO,KAAM,CAAA,IAAA,CAAK,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACxC;AAEA,IAAA,IAAI,EAAE,MAAQ,EAAA;AACZ,MAAA,OAAO,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,OAA4B,KAA9B,KAAA,IAAA,GAAA,EAAA,GAAuC,EAAE,CAAA,CAAA;AAAA,KAC9D;AAAA,GACF;AAEA,EAAA,OAAO,EAAC,CAAA;AACV;;;;"}

package/dist-es/index.js

@@ -72,7 +72,8 @@ export { useDropdownBase } from './dropdown/useDropdownBase.js';
 export { DropdownNext } from './dropdown-next/DropdownNext.js';
 export { EditableLabel } from './editable-label/EditableLabel.js';
 export { FileDropZone } from './file-drop-zone/FileDropZone.js';
-export { createFileTypeValidator, createTotalSizeValidator } from './file-drop-zone/validators.js';
+export { FileDropZoneIcon } from './file-drop-zone/FileDropZoneIcon.js';
+export { FileDropZoneTrigger } from './file-drop-zone/FileDropZoneTrigger.js';
 export { FormFieldLegacy as FormField } from './form-field-legacy/FormFieldLegacy.js';
 export { FormLabel } from './form-field-legacy/FormLabel.js';
 export { FormFieldLegacyContext } from './form-field-context-legacy/FormFieldLegacyContext.js';

package/dist-es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-types/file-drop-zone/FileDropZone.d.ts

@@ -1,54 +1,17 @@
-import { HTMLAttributes, ReactNode, SyntheticEvent } from "react";
-import { FilesValidator } from "./validators";
-export declare type FilesAcceptedEventHandler = (files: ReadonlyArray<File>, event: SyntheticEvent) => void;
-export declare type FilesRejectedEventHandler<ErrorType = string> = (errors: ReadonlyArray<ErrorType>, event: SyntheticEvent) => void;
-/**
- * Removed deprecated props
- *
- * - onDrop
- * - onFileTypeError
- * - showUploadButton
- */
-export interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * `accept` attribute for HTML <input>.
-     *
-     * A comma separated list of file types the user can pick from the file input dialog box.
-     */
-    accept?: string;
-    /**
-     * The text content of the drop area component.
-     */
-    children?: ReactNode;
-    /**
-     * Additional usage information.
-     */
-    description?: string;
+import { ValidationStatus } from "@salt-ds/core";
+import { DragEvent, ComponentPropsWithoutRef } from "react";
+export interface FileDropZoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onDrop"> {
     /**
      * If `true`, the file drop zone will be disabled.
      */
     disabled?: boolean;
     /**
-     * This prop is used to help implement the accessibility logic.
-     * If you don't provide this prop. It falls back to a randomly generated id.
-     */
-    id?: string;
-    /**
-     * Callback on successful file drop or selection.
-     */
-    onFilesAccepted?: FilesAcceptedEventHandler;
-    /**
-     * @see `validate` prop
-     * Callback on drop or input in case of an error. A list of errors will be provided as input.
+     * Status indicator to be displayed.
      */
-    onFilesRejected?: FilesRejectedEventHandler;
+    status?: Omit<ValidationStatus, "info" | "warning">;
     /**
-     * A list of custom validation functions. Every function is provided with the entire file list as input
-     * thus can perform validations on all files. Each function needs to return one or more errors in case of
-     * a failed validation, or `undefined` in case of a successful one.
-     *
-     * All errors are collected in the end and returned as an array to `onFilesRejected`.
+     * Callback for on drop event
      */
-    validate?: ReadonlyArray<FilesValidator<any>>;
+    onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;
 }
 export declare const FileDropZone: import("react").ForwardRefExoticComponent<FileDropZoneProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts

@@ -0,0 +1,9 @@
+import { ValidationStatus } from "@salt-ds/core";
+import { IconProps } from "@salt-ds/icons";
+export interface FileDropZoneIconProps extends IconProps {
+    /**
+     * Status indicator to be displayed.
+     */
+    status?: ValidationStatus;
+}
+export declare const FileDropZoneIcon: import("react").ForwardRefExoticComponent<FileDropZoneIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, SyntheticEvent } from "react";
+export interface FileDropZoneTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /**
+     * `accept` attribute for HTML <input>.
+     *
+     * A comma separated list of file types the user can pick from the file input dialog box.
+     */
+    accept?: string;
+    /**
+     * Disable all trigger elements.
+     */
+    disabled?: boolean;
+    /**
+     * Allows multiple files to be uploaded.
+     */
+    multiple?: boolean;
+    /**
+     * Callback for input change event
+     */
+    onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;
+}
+export declare const FileDropZoneTrigger: import("react").ForwardRefExoticComponent<FileDropZoneTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/file-drop-zone/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./FileDropZone";
-export * from "./validators";
+export * from "./FileDropZoneIcon";
+export * from "./FileDropZoneTrigger";

package/dist-types/file-drop-zone/internal/utils.d.ts

@@ -1,9 +1,3 @@
 import { DragEvent } from "react";
-import { FilesValidator } from "../validators";
-export declare const toArray: (obj: any) => any[];
 export declare const containsFiles: (e: DragEvent) => boolean | FileList | null;
 export declare const extractFiles: (e: DragEvent) => File[];
-export declare const validateFiles: ({ files, validate, }: {
-    files: ReadonlyArray<File>;
-    validate: ReadonlyArray<FilesValidator>;
-}) => string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.24",
+  "version": "1.0.0-alpha.25",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.13.2",
+    "@salt-ds/core": "^1.13.3",
     "@salt-ds/window": "^0.1.1",
-    "@salt-ds/styles": "^0.2.0",
-    "@salt-ds/icons": "^1.9.0"
+    "@salt-ds/styles": "^0.2.1",
+    "@salt-ds/icons": "^1.9.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",

package/dist-cjs/file-drop-zone/validators.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var accepts = require('attr-accept');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var accepts__default = /*#__PURE__*/_interopDefaultLegacy(accepts);
-
-function createFileTypeValidator({
-  accept,
-  getError
-}) {
-  return (files) => {
-    const validate = (file) => {
-      if (!accepts__default["default"](file, accept)) {
-        return getError ? getError(file) : `File ${file.name} does not have an accepted type.`;
-      }
-    };
-    return files.map(validate);
-  };
-}
-function createTotalSizeValidator({
-  maxSize,
-  getError
-}) {
-  return (files) => {
-    const totalSize = files.reduce((size, file) => size + file.size, 0);
-    if (totalSize > maxSize) {
-      return getError ? getError(totalSize) : `The file/s exceed the maximum upload limit of ${maxSize} bytes.`;
-    }
-  };
-}
-
-exports.createFileTypeValidator = createFileTypeValidator;
-exports.createTotalSizeValidator = createTotalSizeValidator;
-//# sourceMappingURL=validators.js.map

package/dist-cjs/file-drop-zone/validators.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"validators.js","sources":["../src/file-drop-zone/validators.ts"],"sourcesContent":["// TODO: verify whether we still needs to this library\n// HTML5's `accept` should be ok for the browsers we want to support.\nimport accepts from \"attr-accept\";\n\nexport type FilesValidator<ErrorType = string> = (\n  files: ReadonlyArray<File>\n) =>\n  | ReadonlyArray<ErrorType | string | undefined>\n  | ErrorType\n  | string\n  | undefined;\n\n/**\n * Factory method for creating a common file type validator.\n *\n * @param {string} accept - It is the same as 'accept' attribute for HTML <input>.\n * @param {function} getError - A callback function for generating a customised user error.\n */\nexport function createFileTypeValidator<ErrorType = string>({\n  accept,\n  getError,\n}: {\n  accept: string;\n  getError?: (file: File) => ErrorType;\n}): FilesValidator<ErrorType> {\n  return (files) => {\n    const validate = (file: File) => {\n      if (!accepts(file, accept)) {\n        return getError\n          ? getError(file)\n          : `File ${file.name} does not have an accepted type.`;\n      }\n    };\n\n    return files.map(validate);\n  };\n}\n\n/**\n * Factory method for creating a common total selection size validator.\n *\n * @param {number} maxSize - Max selection size in bytes.\n * @param {function} getError - A callback function for generating a customised user error.\n */\nexport function createTotalSizeValidator<ErrorType = string>({\n  maxSize,\n  getError,\n}: {\n  maxSize: number;\n  getError?: (totalSize: number) => ErrorType;\n}): FilesValidator<ErrorType> {\n  return (files) => {\n    const totalSize = files.reduce((size, file) => size + file.size, 0);\n\n    if (totalSize > maxSize) {\n      return getError\n        ? getError(totalSize)\n        : `The file/s exceed the maximum upload limit of ${maxSize} bytes.`;\n    }\n  };\n}\n"],"names":["accepts"],"mappings":";;;;;;;;;;AAkBO,SAAS,uBAA4C,CAAA;AAAA,EAC1D,MAAA;AAAA,EACA,QAAA;AACF,CAG8B,EAAA;AAC5B,EAAA,OAAO,CAAC,KAAU,KAAA;AAChB,IAAM,MAAA,QAAA,GAAW,CAAC,IAAe,KAAA;AAC/B,MAAA,IAAI,CAACA,2BAAA,CAAQ,IAAM,EAAA,MAAM,CAAG,EAAA;AAC1B,QAAA,OAAO,QACH,GAAA,QAAA,CAAS,IAAI,CAAA,GACb,QAAQ,IAAK,CAAA,IAAA,CAAA,gCAAA,CAAA,CAAA;AAAA,OACnB;AAAA,KACF,CAAA;AAEA,IAAO,OAAA,KAAA,CAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,GAC3B,CAAA;AACF,CAAA;AAQO,SAAS,wBAA6C,CAAA;AAAA,EAC3D,OAAA;AAAA,EACA,QAAA;AACF,CAG8B,EAAA;AAC5B,EAAA,OAAO,CAAC,KAAU,KAAA;AAChB,IAAM,MAAA,SAAA,GAAY,MAAM,MAAO,CAAA,CAAC,MAAM,IAAS,KAAA,IAAA,GAAO,IAAK,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAElE,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,OAAO,QACH,GAAA,QAAA,CAAS,SAAS,CAAA,GAClB,CAAiD,8CAAA,EAAA,OAAA,CAAA,OAAA,CAAA,CAAA;AAAA,KACvD;AAAA,GACF,CAAA;AACF;;;;;"}

package/dist-es/file-drop-zone/validators.js

@@ -1,29 +0,0 @@
-import accepts from 'attr-accept';
-
-function createFileTypeValidator({
-  accept,
-  getError
-}) {
-  return (files) => {
-    const validate = (file) => {
-      if (!accepts(file, accept)) {
-        return getError ? getError(file) : `File ${file.name} does not have an accepted type.`;
-      }
-    };
-    return files.map(validate);
-  };
-}
-function createTotalSizeValidator({
-  maxSize,
-  getError
-}) {
-  return (files) => {
-    const totalSize = files.reduce((size, file) => size + file.size, 0);
-    if (totalSize > maxSize) {
-      return getError ? getError(totalSize) : `The file/s exceed the maximum upload limit of ${maxSize} bytes.`;
-    }
-  };
-}
-
-export { createFileTypeValidator, createTotalSizeValidator };
-//# sourceMappingURL=validators.js.map