@zayne-labs/ui-react 0.7.5 → 0.8.0

package/dist/esm/ui/drop-zone/index.js

@@ -1,140 +1,279 @@
+import { dataAttr } from '../../chunk-DNYM6XGW.js';
 import { cnMerge } from '../../chunk-OHG7GB7O.js';
-import '../../chunk-PZ5AY32C.js';
+import { __export } from '../../chunk-PZ5AY32C.js';
 import * as React from 'react';
-import { useRef, useState } from 'react';
-import { handleFileValidation } from '@zayne-labs/toolkit-core';
-import { useToggle, useCallbackRef } from '@zayne-labs/toolkit-react';
-import { mergeTwoProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
-import { isFunction } from '@zayne-labs/toolkit-type-helpers';
+import { isValidElement, Fragment, useRef, useState, useCallback } from 'react';
+import { withSlotNameAndSymbol, getSlotMap, mergeTwoProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
+import { isArray, isFile, isFunction } from '@zayne-labs/toolkit-type-helpers';
+import { toArray, handleFileValidation, createImagePreview } from '@zayne-labs/toolkit-core';
+import { useCallbackRef } from '@zayne-labs/toolkit-react';
 
+var generateUniqueId = (file) => {
+  if (!isFile(file)) {
+    return file.id;
+  }
+  return `${file.name}-(${Math.round(performance.now())})-${crypto.randomUUID().slice(0, 8)}`;
+};
+var clearObjectURL = (fileObject) => {
+  const shouldClearObjectURL = isFile(fileObject?.file) && fileObject.file.type.startsWith("image/");
+  if (fileObject?.preview && shouldClearObjectURL) {
+    URL.revokeObjectURL(fileObject.preview);
+  }
+};
+
+// src/components/ui/drop-zone/use-drop-zone.ts
 var useDropZone = (props) => {
-  const inputRef = useRef(null);
   const {
     allowedFileTypes,
     children,
     classNames,
     disallowDuplicates = true,
-    existingFiles,
     extraInputProps,
     extraRootProps,
-    fileLimit,
+    initialFiles,
+    maxFileCount,
     maxFileSize,
+    multiple,
+    onFilesChange,
     onUpload,
     onUploadError,
+    onUploadErrors,
     onUploadSuccess,
     render,
     validator
-    // eslint-disable-next-line ts-eslint/no-unnecessary-condition -- Can be undefined
   } = props ?? {};
-  const [isDragging, toggleIsDragging] = useToggle(false);
-  const [acceptedFiles, setAcceptedFiles] = useState([]);
-  const handleFileUpload = useCallbackRef(
-    (event) => {
-      if (event.defaultPrevented) return;
-      if (event.type === "drop") {
-        event.preventDefault();
-        toggleIsDragging(false);
-      }
-      const fileList = event.type === "drop" ? event.dataTransfer.files : event.target.files;
-      if (fileList === null) {
-        console.warn("No file selected");
-        return;
-      }
-      const validFilesArray = handleFileValidation({
-        existingFileArray: existingFiles,
-        newFileList: fileList,
-        onError: onUploadError,
-        onSuccess: onUploadSuccess,
-        validationSettings: {
-          allowedFileTypes,
-          disallowDuplicates,
-          fileLimit,
-          maxFileSize
-        },
-        validator
-      });
-      if (validFilesArray.length === 0) return;
-      setAcceptedFiles(validFilesArray);
-      onUpload?.({ acceptedFiles: validFilesArray, event });
+  const inputRef = useRef(null);
+  const initialFileArray = toArray(initialFiles).filter(Boolean);
+  const [dropZoneState, setDropZoneState] = useState({
+    errors: [],
+    filesWithPreview: initialFileArray.map((fileMeta) => ({
+      file: fileMeta,
+      id: fileMeta.id,
+      preview: fileMeta.url
+    })),
+    isDragging: false
+  });
+  const toggleIsDragging = (value) => {
+    setDropZoneState((prevState) => ({ ...prevState, isDragging: value }));
+  };
+  const addFiles = useCallbackRef((fileList, event) => {
+    if (!fileList || fileList.length === 0) {
+      console.warn("No file selected!");
+      return;
     }
-  );
-  const handleDragOver = (event) => {
+    clearErrors();
+    if (!multiple) {
+      clearFiles();
+    }
+    const { errors, validFiles } = handleFileValidation({
+      existingFiles: dropZoneState.filesWithPreview.map((fileWithPreview) => fileWithPreview.file),
+      newFiles: fileList,
+      onError: onUploadError,
+      onErrors: onUploadErrors,
+      onSuccess: onUploadSuccess,
+      validationSettings: { allowedFileTypes, disallowDuplicates, maxFileCount, maxFileSize },
+      validator
+    });
+    if (validFiles.length === 0) {
+      setDropZoneState((prevState) => ({ ...prevState, errors }));
+      return;
+    }
+    const filesWithPreview = validFiles.map((file) => ({
+      file,
+      id: generateUniqueId(file),
+      preview: createImagePreview({ file })
+    }));
+    if (event) {
+      onUpload?.({ event, filesWithPreview });
+    }
+    const newFileUploadState = {
+      ...dropZoneState,
+      errors,
+      ...event?.type === "drop" && { isDragging: false },
+      filesWithPreview: multiple ? [...dropZoneState.filesWithPreview, ...filesWithPreview] : filesWithPreview
+    };
+    onFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });
+    setDropZoneState(newFileUploadState);
+    inputRef.current && (inputRef.current.value = "");
+  });
+  const clearFiles = useCallbackRef(() => {
+    dropZoneState.filesWithPreview.forEach((fileObject) => clearObjectURL(fileObject));
+    const newFileUploadState = {
+      ...dropZoneState,
+      errors: [],
+      filesWithPreview: []
+    };
+    onFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });
+    setDropZoneState(newFileUploadState);
+    inputRef.current && (inputRef.current.value = "");
+  });
+  const removeFile = useCallbackRef((id) => {
+    const fileToRemove = dropZoneState.filesWithPreview.find((fileObject) => fileObject.id === id);
+    clearObjectURL(fileToRemove);
+    const newFilesWithPreview = dropZoneState.filesWithPreview.filter((file) => file.id !== id);
+    onFilesChange?.({ filesWithPreview: newFilesWithPreview });
+    setDropZoneState({
+      ...dropZoneState,
+      errors: [],
+      filesWithPreview: newFilesWithPreview
+    });
+  });
+  const clearErrors = useCallbackRef(() => {
+    setDropZoneState((prevState) => ({ ...prevState, errors: [] }));
+  });
+  const handleFileUpload = useCallbackRef((event) => {
+    if (event.defaultPrevented) return;
+    if (inputRef.current?.disabled) return;
+    if (event.type === "drop") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    const fileList = event.type === "drop" ? event.dataTransfer.files : event.target.files;
+    if (!multiple) {
+      const firstFile = fileList?.[0];
+      firstFile && addFiles([firstFile], event);
+      return;
+    }
+    addFiles(fileList, event);
+  });
+  const handleDragEnter = useCallbackRef((event) => {
     event.preventDefault();
+    event.stopPropagation();
     toggleIsDragging(true);
-  };
-  const handleDragLeave = (event) => {
+  });
+  const handleDragOver = useCallbackRef((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    toggleIsDragging(true);
+  });
+  const handleDragLeave = useCallbackRef((event) => {
     event.preventDefault();
+    event.stopPropagation();
     toggleIsDragging(false);
-  };
-  const getRenderProps = () => ({
-    acceptedFiles,
-    inputRef,
-    isDragging,
-    openFilePicker: () => inputRef.current?.click()
   });
-  const computedChildren = children ?? render;
-  const getChildren = () => isFunction(computedChildren) ? computedChildren(getRenderProps()) : computedChildren;
-  const getRootProps = (rootProps) => {
-    const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
-    return {
-      ...mergedRootProps,
-      className: cnMerge(
-        "relative isolate flex flex-col",
-        mergedRootProps.className,
-        classNames?.base,
-        isDragging && ["opacity-60", classNames?.activeDrag, rootProps?.classNames?.activeDrag]
-      ),
-      "data-active-drag": isDragging,
-      "data-part": "root",
-      "data-scope": "dropzone",
-      onDragEnter: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDragOver: handleDragOver,
-      onDrop: handleFileUpload
-    };
-  };
-  const getInputProps = (inputProps) => {
-    const mergedInputProps = mergeTwoProps(extraInputProps, inputProps);
-    return {
-      ...mergedInputProps,
-      accept: allowedFileTypes ? allowedFileTypes.join(", ") : mergedInputProps.accept,
-      className: cnMerge(
-        "absolute inset-0 z-[100] cursor-pointer opacity-0",
-        classNames?.input,
-        mergedInputProps.className
-      ),
-      "data-active-drag": isDragging,
-      "data-part": "input",
-      "data-scope": "dropzone",
-      onChange: (event) => {
-        mergedInputProps.onChange?.(event);
-        handleFileUpload(event);
-      },
-      ref: composeRefs([inputRef, mergedInputProps.ref]),
-      type: "file"
-    };
-  };
-  return {
-    acceptedFiles,
-    computedChildren,
-    getChildren,
+  const openFilePicker = useCallbackRef(() => {
+    inputRef.current?.click();
+  });
+  const getRootProps = useCallback(
+    (rootProps) => {
+      const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
+      return {
+        ...mergedRootProps,
+        className: cnMerge(
+          "relative isolate flex flex-col",
+          mergedRootProps.className,
+          classNames?.base,
+          dropZoneState.isDragging && [
+            "opacity-60",
+            classNames?.isDragging,
+            rootProps?.classNames?.isDragging
+          ]
+        ),
+        "data-dragging": dataAttr(dropZoneState.isDragging),
+        "data-scope": "dropzone",
+        // eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first
+        "data-part": "root",
+        "data-slot": "dropzone-root",
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleFileUpload
+      };
+    },
+    [
+      classNames?.base,
+      classNames?.isDragging,
+      extraRootProps,
+      dropZoneState.isDragging,
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleFileUpload
+    ]
+  );
+  const getInputProps = useCallback(
+    (inputProps) => {
+      const mergedInputProps = mergeTwoProps(extraInputProps, inputProps);
+      return {
+        ...mergedInputProps,
+        accept: allowedFileTypes ? allowedFileTypes.join(", ") : mergedInputProps.accept,
+        className: cnMerge(
+          "absolute inset-0 z-[100] cursor-pointer opacity-0",
+          classNames?.input,
+          mergedInputProps.className
+        ),
+        "data-dragging": dataAttr(dropZoneState.isDragging),
+        "data-scope": "dropzone",
+        // eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first
+        "data-part": "input",
+        "data-slot": "dropzone-input",
+        multiple: multiple ?? mergedInputProps.multiple,
+        onChange: (event) => {
+          mergedInputProps.onChange?.(event);
+          handleFileUpload(event);
+        },
+        ref: composeRefs([inputRef, mergedInputProps.ref]),
+        type: "file"
+      };
+    },
+    [
+      allowedFileTypes,
+      classNames?.input,
+      extraInputProps,
+      dropZoneState.isDragging,
+      handleFileUpload,
+      multiple
+    ]
+  );
+  const renderProps = {
+    addFiles,
+    clearErrors,
+    clearFiles,
+    dropZoneState,
     getInputProps,
-    getRenderProps,
     getRootProps,
+    handleDragEnter,
     handleDragLeave,
     handleDragOver,
     handleFileUpload,
     inputRef,
-    isDragging
+    openFilePicker,
+    removeFile
+  };
+  const selectedChildren = children ?? render;
+  const getResolvedChildren = () => {
+    return isFunction(selectedChildren) ? selectedChildren(renderProps) : selectedChildren;
+  };
+  return {
+    ...renderProps,
+    getResolvedChildren
   };
 };
 
 // src/components/ui/drop-zone/drop-zone.tsx
-function DropZone(props) {
-  const api = useDropZone(props);
-  return /* @__PURE__ */ React.createElement("div", { ...api.getRootProps() }, /* @__PURE__ */ React.createElement("input", { ...api.getInputProps() }), api.getChildren());
+function DropZoneRoot(props) {
+  const { withInternalElements = true, ...restOfProps } = props;
+  const api = useDropZone(restOfProps);
+  const RootComponent = withInternalElements ? "div" : Fragment;
+  const InputComponent = withInternalElements ? "input" : Fragment;
+  const rootComponentProps = RootComponent === "div" && api.getRootProps();
+  const inputComponentProps = InputComponent === "input" && api.getInputProps();
+  const resolvedChildren = api.getResolvedChildren();
+  const couldChildrenContainSlots = isArray(resolvedChildren) || isValidElement(resolvedChildren) && resolvedChildren.type === Fragment;
+  const slots = getSlotMap(resolvedChildren, {
+    condition: withInternalElements && couldChildrenContainSlots
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RootComponent, { ...rootComponentProps }, /* @__PURE__ */ React.createElement(InputComponent, { ...inputComponentProps }), slots.default), slots.preview);
 }
+var DropZoneImagePreview = withSlotNameAndSymbol("preview");
+
+// src/components/ui/drop-zone/drop-zone-parts.ts
+var drop_zone_parts_exports = {};
+__export(drop_zone_parts_exports, {
+  ImagePreview: () => DropZoneImagePreview,
+  Root: () => DropZoneRoot
+});
 
-export { DropZone, useDropZone };
+export { drop_zone_parts_exports as DropZone, DropZoneImagePreview, DropZoneRoot, useDropZone };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/drop-zone/use-drop-zone.ts","../../../../src/components/ui/drop-zone/drop-zone.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\n\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport { type FileValidationOptions, handleFileValidation } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useToggle } from \"@zayne-labs/toolkit-react\";\nimport {\n\ttype DiscriminatedRenderProps,\n\ttype InferProps,\n\tcomposeRefs,\n\tmergeTwoProps,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useRef, useState } from \"react\";\n\ntype RenderProps = {\n\tacceptedFiles: File[];\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n\tisDragging: boolean;\n\topenFilePicker: () => void;\n};\n\nexport type RootProps = InferProps<\"div\"> & {\n\tclassNames?: {\n\t\tactiveDrag?: string;\n\t\tbase?: string;\n\t};\n};\n\nexport type InputProps = InferProps<\"input\">;\n\ntype DropZoneRenderProps = DiscriminatedRenderProps<\n\tReact.ReactNode | ((props: RenderProps) => React.ReactNode)\n>;\n\nexport type UseDropZoneProps = DropZoneRenderProps & {\n\t/**\n\t * Allowed file types to be uploaded.\n\t */\n\tallowedFileTypes?: string[];\n\n\tclassNames?: { activeDrag?: string; base?: string; input?: string };\n\t/**\n\t * Whether to disallow duplicate files\n\t * @default true\n\t */\n\tdisallowDuplicates?: boolean;\n\n\t/**\n\t * Existing files to be uploaded\n\t */\n\texistingFiles?: File[];\n\n\t/**\n\t * Extra props to pass to the input element\n\t */\n\textraInputProps?: InputProps;\n\n\t/**\n\t * Extra props to pass to the root element\n\t */\n\textraRootProps?: RootProps;\n\n\t/**\n\t * Maximum number of files that can be uploaded.\n\t */\n\tfileLimit?: number;\n\n\t/**\n\t * Maximum file size in MB\n\t */\n\tmaxFileSize?: number;\n\n\t/**\n\t * Callback function to handle file upload\n\t */\n\tonUpload?: (details: {\n\t\tacceptedFiles: File[];\n\t\tevent: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>;\n\t}) => void;\n\n\t/**\n\t * Callback function to handle file upload errors\n\t */\n\tonUploadError?: FileValidationOptions[\"onError\"];\n\n\t/**\n\t * Callback function to handle file upload success\n\t */\n\tonUploadSuccess?: FileValidationOptions[\"onSuccess\"];\n\n\t/**\n\t * Custom validator function to handle file validation\n\t */\n\tvalidator?: (context: { existingFileArray: File[] | undefined; newFileList: FileList }) => File[];\n};\n\nexport const useDropZone = (props: UseDropZoneProps) => {\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst {\n\t\tallowedFileTypes,\n\t\tchildren,\n\t\tclassNames,\n\t\tdisallowDuplicates = true,\n\t\texistingFiles,\n\t\textraInputProps,\n\t\textraRootProps,\n\t\tfileLimit,\n\t\tmaxFileSize,\n\t\tonUpload,\n\t\tonUploadError,\n\t\tonUploadSuccess,\n\t\trender,\n\t\tvalidator,\n\t\t// eslint-disable-next-line ts-eslint/no-unnecessary-condition -- Can be undefined\n\t} = props ?? {};\n\n\tconst [isDragging, toggleIsDragging] = useToggle(false);\n\n\tconst [acceptedFiles, setAcceptedFiles] = useState<File[]>([]);\n\n\tconst handleFileUpload = useCallbackRef(\n\t\t(event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) => {\n\t\t\tif (event.defaultPrevented) return;\n\n\t\t\tif (event.type === \"drop\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttoggleIsDragging(false);\n\t\t\t}\n\n\t\t\tconst fileList =\n\t\t\t\tevent.type === \"drop\"\n\t\t\t\t\t? (event as React.DragEvent).dataTransfer.files\n\t\t\t\t\t: (event as React.ChangeEvent<HTMLInputElement>).target.files;\n\n\t\t\tif (fileList === null) {\n\t\t\t\tconsole.warn(\"No file selected\");\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst validFilesArray = handleFileValidation({\n\t\t\t\texistingFileArray: existingFiles,\n\t\t\t\tnewFileList: fileList,\n\t\t\t\tonError: onUploadError,\n\t\t\t\tonSuccess: onUploadSuccess,\n\t\t\t\tvalidationSettings: {\n\t\t\t\t\tallowedFileTypes,\n\t\t\t\t\tdisallowDuplicates,\n\t\t\t\t\tfileLimit,\n\t\t\t\t\tmaxFileSize,\n\t\t\t\t},\n\t\t\t\tvalidator,\n\t\t\t});\n\n\t\t\tif (validFilesArray.length === 0) return;\n\n\t\t\tsetAcceptedFiles(validFilesArray);\n\n\t\t\tonUpload?.({ acceptedFiles: validFilesArray, event });\n\t\t}\n\t);\n\n\tconst handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tevent.preventDefault();\n\t\ttoggleIsDragging(true);\n\t};\n\n\tconst handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tevent.preventDefault();\n\t\ttoggleIsDragging(false);\n\t};\n\n\tconst getRenderProps = () =>\n\t\t({\n\t\t\tacceptedFiles,\n\t\t\tinputRef,\n\t\t\tisDragging,\n\t\t\topenFilePicker: () => inputRef.current?.click(),\n\t\t}) satisfies RenderProps;\n\n\tconst computedChildren = children ?? render;\n\n\tconst getChildren = () =>\n\t\tisFunction(computedChildren) ? computedChildren(getRenderProps()) : computedChildren;\n\n\tconst getRootProps = (rootProps?: RootProps) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\tmergedRootProps.className,\n\t\t\t\tclassNames?.base,\n\t\t\t\tisDragging && [\"opacity-60\", classNames?.activeDrag, rootProps?.classNames?.activeDrag]\n\t\t\t),\n\t\t\t\"data-active-drag\": isDragging,\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"dropzone\",\n\t\t\tonDragEnter: handleDragOver,\n\t\t\tonDragLeave: handleDragLeave,\n\t\t\tonDragOver: handleDragOver,\n\t\t\tonDrop: handleFileUpload,\n\t\t};\n\t};\n\n\tconst getInputProps = (inputProps?: InputProps) => {\n\t\tconst mergedInputProps = mergeTwoProps(extraInputProps, inputProps);\n\n\t\treturn {\n\t\t\t...mergedInputProps,\n\t\t\taccept: allowedFileTypes ? allowedFileTypes.join(\", \") : mergedInputProps.accept,\n\t\t\tclassName: cnMerge(\n\t\t\t\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\",\n\t\t\t\tclassNames?.input,\n\t\t\t\tmergedInputProps.className\n\t\t\t),\n\t\t\t\"data-active-drag\": isDragging,\n\t\t\t\"data-part\": \"input\",\n\t\t\t\"data-scope\": \"dropzone\",\n\t\t\tonChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tmergedInputProps.onChange?.(event);\n\t\t\t\thandleFileUpload(event);\n\t\t\t},\n\t\t\tref: composeRefs([inputRef, mergedInputProps.ref]),\n\t\t\ttype: \"file\",\n\t\t};\n\t};\n\n\treturn {\n\t\tacceptedFiles,\n\t\tcomputedChildren,\n\t\tgetChildren,\n\t\tgetInputProps,\n\t\tgetRenderProps,\n\t\tgetRootProps,\n\t\thandleDragLeave,\n\t\thandleDragOver,\n\t\thandleFileUpload,\n\t\tinputRef,\n\t\tisDragging,\n\t};\n};\n","import * as React from \"react\";\n\nimport { type UseDropZoneProps, useDropZone } from \"./use-drop-zone\";\n\nfunction DropZone(props: UseDropZoneProps) {\n\tconst api = useDropZone(props);\n\n\treturn (\n\t\t<div {...api.getRootProps()}>\n\t\t\t<input {...api.getInputProps()} />\n\n\t\t\t{api.getChildren()}\n\t\t</div>\n\t);\n}\n\nexport { DropZone };\n"]}
+{"version":3,"sources":["../../../../src/components/ui/drop-zone/utils.ts","../../../../src/components/ui/drop-zone/use-drop-zone.ts","../../../../src/components/ui/drop-zone/drop-zone.tsx","../../../../src/components/ui/drop-zone/drop-zone-parts.ts"],"names":["ReactFragment"],"mappings":"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","file":"index.js","sourcesContent":["import type { FileMeta } from \"@zayne-labs/toolkit-core\";\nimport { isFile } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { FileWithPreview } from \"./use-drop-zone\";\n\nexport const generateUniqueId = (file: File | FileMeta): string => {\n\tif (!isFile(file)) {\n\t\treturn file.id;\n\t}\n\n\treturn `${file.name}-(${Math.round(performance.now())})-${crypto.randomUUID().slice(0, 8)}`;\n};\n\nexport const clearObjectURL = (fileObject: FileWithPreview | undefined) => {\n\tconst shouldClearObjectURL = isFile(fileObject?.file) && fileObject.file.type.startsWith(\"image/\");\n\n\tif (fileObject?.preview && shouldClearObjectURL) {\n\t\tURL.revokeObjectURL(fileObject.preview);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { dataAttr } from \"@/lib/utils/common\";\nimport { toArray } from \"@zayne-labs/toolkit-core\";\nimport {\n\ttype FileMeta,\n\ttype FileValidationErrorContext,\n\ttype FileValidationOptions,\n\tcreateImagePreview,\n\thandleFileValidation,\n} from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport {\n\ttype DiscriminatedRenderProps,\n\ttype InferProps,\n\tcomposeRefs,\n\tmergeTwoProps,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { type Prettify, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { clearObjectURL, generateUniqueId } from \"./utils\";\n\nexport type RootProps = InferProps<HTMLElement> & {\n\tclassNames?: {\n\t\tbase?: string;\n\t\tisDragging?: string;\n\t};\n};\n\nexport type InputProps = InferProps<\"input\">;\n\nexport type FileWithPreview = {\n\tfile: File | FileMeta;\n\tid: string;\n\tpreview?: string;\n};\n\nexport type FileUploadState = {\n\terrors: FileValidationErrorContext[];\n\tfilesWithPreview: FileWithPreview[];\n\tisDragging: boolean;\n};\n\ntype ChangeOrDragEvent = React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>;\n\ntype UseDropZoneResult = {\n\taddFiles: (fileList: File[] | FileList | null, event?: ChangeOrDragEvent) => void;\n\tclearErrors: () => void;\n\tclearFiles: () => void;\n\tdropZoneState: FileUploadState;\n\tgetInputProps: (inputProps?: InputProps) => InputProps;\n\tgetResolvedChildren: () => React.ReactNode;\n\tgetRootProps: (rootProps?: RootProps) => RootProps;\n\thandleDragEnter: (event: React.DragEvent<HTMLElement>) => void;\n\thandleDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n\thandleDragOver: (event: React.DragEvent<HTMLElement>) => void;\n\thandleFileUpload: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>) => void;\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n\topenFilePicker: () => void;\n\tremoveFile: (id: string) => void;\n};\n\ntype RenderProps = Omit<UseDropZoneResult, \"getResolvedChildren\">;\n\ntype DropZoneRenderProps = DiscriminatedRenderProps<\n\tReact.ReactNode | ((props: RenderProps) => React.ReactNode)\n>;\n\nexport type UseDropZoneProps = DropZoneRenderProps & {\n\t/**\n\t * Allowed file types to be uploaded.\n\t */\n\tallowedFileTypes?: string[];\n\n\t/**\n\t * CSS classes to apply to the various parts of the drop zone\n\t */\n\tclassNames?: Prettify<RootProps[\"classNames\"] & { input?: string }>;\n\n\t/**\n\t * Whether to disallow duplicate files\n\t * @default true\n\t */\n\tdisallowDuplicates?: boolean;\n\n\t/**\n\t * Extra props to pass to the input element\n\t */\n\textraInputProps?: InputProps;\n\n\t/**\n\t * Extra props to pass to the root element\n\t */\n\textraRootProps?: RootProps;\n\n\t/**\n\t * Initial files to populate the drop zone\n\t */\n\tinitialFiles?: FileMeta | FileMeta[] | null;\n\n\t/**\n\t * Maximum number of files that can be uploaded.\n\t */\n\tmaxFileCount?: number;\n\n\t/**\n\t * Maximum file size in MB\n\t */\n\tmaxFileSize?: number;\n\n\t/**\n\t * Whether to allow multiple files to be uploaded\n\t */\n\tmultiple?: boolean;\n\n\t/**\n\t * Callback function to be called when internal files state changes\n\t */\n\tonFilesChange?: (context: { filesWithPreview: FileWithPreview[] }) => void;\n\n\t/**\n\t * Callback function to be called when new files are uploaded\n\t */\n\tonUpload?: (context: { event: ChangeOrDragEvent; filesWithPreview: FileWithPreview[] }) => void;\n\n\t/**\n\t * Callback function to be called on each file upload as they occur\n\t */\n\tonUploadError?: FileValidationOptions[\"onError\"];\n\n\t/**\n\t * Callback function to be called once after all file upload errors have occurred\n\t */\n\tonUploadErrors?: FileValidationOptions[\"onErrors\"];\n\n\t/**\n\t * Callback function to be called on file upload success\n\t */\n\tonUploadSuccess?: FileValidationOptions[\"onSuccess\"];\n\n\t/**\n\t * Custom validator function to handle file validation\n\t */\n\tvalidator?: FileValidationOptions[\"validator\"];\n};\n\nexport const useDropZone = (props?: UseDropZoneProps): UseDropZoneResult => {\n\tconst {\n\t\tallowedFileTypes,\n\t\tchildren,\n\t\tclassNames,\n\t\tdisallowDuplicates = true,\n\t\textraInputProps,\n\t\textraRootProps,\n\t\tinitialFiles,\n\t\tmaxFileCount,\n\t\tmaxFileSize,\n\t\tmultiple,\n\t\tonFilesChange,\n\t\tonUpload,\n\t\tonUploadError,\n\t\tonUploadErrors,\n\t\tonUploadSuccess,\n\t\trender,\n\t\tvalidator,\n\t} = props ?? {};\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst initialFileArray = toArray(initialFiles).filter(Boolean);\n\n\tconst [dropZoneState, setDropZoneState] = useState<FileUploadState>({\n\t\terrors: [],\n\t\tfilesWithPreview: initialFileArray.map((fileMeta) => ({\n\t\t\tfile: fileMeta,\n\t\t\tid: fileMeta.id,\n\t\t\tpreview: fileMeta.url,\n\t\t})),\n\t\tisDragging: false,\n\t});\n\n\tconst toggleIsDragging = (value: boolean) => {\n\t\tsetDropZoneState((prevState) => ({ ...prevState, isDragging: value }));\n\t};\n\n\tconst addFiles: UseDropZoneResult[\"addFiles\"] = useCallbackRef((fileList, event) => {\n\t\tif (!fileList || fileList.length === 0) {\n\t\t\tconsole.warn(\"No file selected!\");\n\t\t\treturn;\n\t\t}\n\n\t\t// Clear existing errors when new files are uploaded\n\t\tclearErrors();\n\n\t\t// In single file mode, clear existing files first\n\t\tif (!multiple) {\n\t\t\tclearFiles();\n\t\t}\n\n\t\tconst { errors, validFiles } = handleFileValidation({\n\t\t\texistingFiles: dropZoneState.filesWithPreview.map((fileWithPreview) => fileWithPreview.file),\n\t\t\tnewFiles: fileList,\n\t\t\tonError: onUploadError,\n\t\t\tonErrors: onUploadErrors,\n\t\t\tonSuccess: onUploadSuccess,\n\t\t\tvalidationSettings: { allowedFileTypes, disallowDuplicates, maxFileCount, maxFileSize },\n\t\t\tvalidator,\n\t\t});\n\n\t\tif (validFiles.length === 0) {\n\t\t\tsetDropZoneState((prevState) => ({ ...prevState, errors }));\n\t\t\treturn;\n\t\t}\n\n\t\tconst filesWithPreview: FileWithPreview[] = validFiles.map((file) => ({\n\t\t\tfile,\n\t\t\tid: generateUniqueId(file),\n\t\t\tpreview: createImagePreview({ file }),\n\t\t}));\n\n\t\t// == Only call onUpload callback if event is provided, which indicates that new files were uploaded from an event handler\n\n\t\tif (event) {\n\t\t\tonUpload?.({ event, filesWithPreview });\n\t\t}\n\n\t\tconst newFileUploadState = {\n\t\t\t...dropZoneState,\n\t\t\terrors,\n\t\t\t...(event?.type === \"drop\" && { isDragging: false }),\n\t\t\tfilesWithPreview: multiple\n\t\t\t\t? [...dropZoneState.filesWithPreview, ...filesWithPreview]\n\t\t\t\t: filesWithPreview,\n\t\t} satisfies FileUploadState;\n\n\t\tonFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });\n\n\t\tsetDropZoneState(newFileUploadState);\n\n\t\t// == Reset input value after adding files\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t});\n\n\tconst clearFiles: UseDropZoneResult[\"clearFiles\"] = useCallbackRef(() => {\n\t\t// == Clean up object URLs if any\n\t\tdropZoneState.filesWithPreview.forEach((fileObject) => clearObjectURL(fileObject));\n\n\t\tconst newFileUploadState = {\n\t\t\t...dropZoneState,\n\t\t\terrors: [],\n\t\t\tfilesWithPreview: [],\n\t\t} satisfies FileUploadState;\n\n\t\tonFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });\n\n\t\tsetDropZoneState(newFileUploadState);\n\n\t\t// == Reset input value after clearing files\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t});\n\n\tconst removeFile: UseDropZoneResult[\"removeFile\"] = useCallbackRef((id) => {\n\t\tconst fileToRemove = dropZoneState.filesWithPreview.find((fileObject) => fileObject.id === id);\n\n\t\tclearObjectURL(fileToRemove);\n\n\t\tconst newFilesWithPreview = dropZoneState.filesWithPreview.filter((file) => file.id !== id);\n\n\t\tonFilesChange?.({ filesWithPreview: newFilesWithPreview });\n\n\t\tsetDropZoneState({\n\t\t\t...dropZoneState,\n\t\t\terrors: [],\n\t\t\tfilesWithPreview: newFilesWithPreview,\n\t\t});\n\t});\n\n\tconst clearErrors: UseDropZoneResult[\"clearErrors\"] = useCallbackRef(() => {\n\t\tsetDropZoneState((prevState) => ({ ...prevState, errors: [] }));\n\t});\n\n\tconst handleFileUpload: UseDropZoneResult[\"handleFileUpload\"] = useCallbackRef((event) => {\n\t\tif (event.defaultPrevented) return;\n\n\t\tif (inputRef.current?.disabled) return;\n\n\t\tif (event.type === \"drop\") {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tconst fileList =\n\t\t\tevent.type === \"drop\"\n\t\t\t\t? (event as React.DragEvent).dataTransfer.files\n\t\t\t\t: (event as React.ChangeEvent<HTMLInputElement>).target.files;\n\n\t\t// == In single file mode, only use the first file\n\t\tif (!multiple) {\n\t\t\tconst firstFile = fileList?.[0];\n\n\t\t\tfirstFile && addFiles([firstFile], event);\n\n\t\t\treturn;\n\t\t}\n\n\t\taddFiles(fileList, event);\n\t});\n\n\tconst handleDragEnter: UseDropZoneResult[\"handleDragEnter\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(true);\n\t});\n\n\tconst handleDragOver: UseDropZoneResult[\"handleDragOver\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(true);\n\t});\n\n\tconst handleDragLeave: UseDropZoneResult[\"handleDragLeave\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(false);\n\t});\n\n\tconst openFilePicker: UseDropZoneResult[\"openFilePicker\"] = useCallbackRef(() => {\n\t\tinputRef.current?.click();\n\t});\n\n\tconst getRootProps: UseDropZoneResult[\"getRootProps\"] = useCallback(\n\t\t(rootProps) => {\n\t\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedRootProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\t\tmergedRootProps.className,\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tdropZoneState.isDragging && [\n\t\t\t\t\t\t\"opacity-60\",\n\t\t\t\t\t\tclassNames?.isDragging,\n\t\t\t\t\t\trootProps?.classNames?.isDragging,\n\t\t\t\t\t]\n\t\t\t\t),\n\t\t\t\t\"data-dragging\": dataAttr(dropZoneState.isDragging),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"root\",\n\t\t\t\t\"data-slot\": \"dropzone-root\",\n\t\t\t\tonDragEnter: handleDragEnter,\n\t\t\t\tonDragLeave: handleDragLeave,\n\t\t\t\tonDragOver: handleDragOver,\n\t\t\t\tonDrop: handleFileUpload,\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tclassNames?.base,\n\t\t\tclassNames?.isDragging,\n\t\t\textraRootProps,\n\t\t\tdropZoneState.isDragging,\n\t\t\thandleDragEnter,\n\t\t\thandleDragLeave,\n\t\t\thandleDragOver,\n\t\t\thandleFileUpload,\n\t\t]\n\t);\n\n\tconst getInputProps: UseDropZoneResult[\"getInputProps\"] = useCallback(\n\t\t(inputProps) => {\n\t\t\tconst mergedInputProps = mergeTwoProps(extraInputProps, inputProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedInputProps,\n\t\t\t\taccept: allowedFileTypes ? allowedFileTypes.join(\", \") : mergedInputProps.accept,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\",\n\t\t\t\t\tclassNames?.input,\n\t\t\t\t\tmergedInputProps.className\n\t\t\t\t),\n\t\t\t\t\"data-dragging\": dataAttr(dropZoneState.isDragging),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"input\",\n\t\t\t\t\"data-slot\": \"dropzone-input\",\n\t\t\t\tmultiple: multiple ?? mergedInputProps.multiple,\n\t\t\t\tonChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\t\tmergedInputProps.onChange?.(event);\n\t\t\t\t\thandleFileUpload(event);\n\t\t\t\t},\n\t\t\t\tref: composeRefs([inputRef, mergedInputProps.ref]),\n\t\t\t\ttype: \"file\",\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tallowedFileTypes,\n\t\t\tclassNames?.input,\n\t\t\textraInputProps,\n\t\t\tdropZoneState.isDragging,\n\t\t\thandleFileUpload,\n\t\t\tmultiple,\n\t\t]\n\t);\n\n\tconst renderProps = {\n\t\taddFiles,\n\t\tclearErrors,\n\t\tclearFiles,\n\t\tdropZoneState,\n\t\tgetInputProps,\n\t\tgetRootProps,\n\t\thandleDragEnter,\n\t\thandleDragLeave,\n\t\thandleDragOver,\n\t\thandleFileUpload,\n\t\tinputRef,\n\t\topenFilePicker,\n\t\tremoveFile,\n\t} satisfies RenderProps;\n\n\tconst selectedChildren = children ?? render;\n\n\tconst getResolvedChildren = () => {\n\t\treturn isFunction(selectedChildren) ? selectedChildren(renderProps) : selectedChildren;\n\t};\n\n\treturn {\n\t\t...renderProps,\n\t\tgetResolvedChildren,\n\t};\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n\ttype GetSlotComponentProps,\n\tgetSlotMap,\n\twithSlotNameAndSymbol,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Fragment as ReactFragment, isValidElement } from \"react\";\nimport { type UseDropZoneProps, useDropZone } from \"./use-drop-zone\";\n\ntype DropZoneProps = UseDropZoneProps & {\n\t/**\n\t * Controls whether to include internal elements (root and input) or not.\n\t */\n\twithInternalElements?: boolean;\n};\n\nexport function DropZoneRoot(props: DropZoneProps) {\n\tconst { withInternalElements = true, ...restOfProps } = props;\n\n\tconst api = useDropZone(restOfProps);\n\n\tconst RootComponent = withInternalElements ? \"div\" : ReactFragment;\n\tconst InputComponent = withInternalElements ? \"input\" : ReactFragment;\n\n\tconst rootComponentProps = RootComponent === \"div\" && api.getRootProps();\n\tconst inputComponentProps = InputComponent === \"input\" && api.getInputProps();\n\n\tconst resolvedChildren = api.getResolvedChildren();\n\n\t/**\n\t * Whether the children could contain slots.\n\t */\n\tconst couldChildrenContainSlots =\n\t\tisArray(resolvedChildren)\n\t\t|| (isValidElement(resolvedChildren) && resolvedChildren.type === ReactFragment);\n\n\tconst slots = getSlotMap<SlotComponentProps>(resolvedChildren, {\n\t\tcondition: withInternalElements && couldChildrenContainSlots,\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<RootComponent {...rootComponentProps}>\n\t\t\t\t<InputComponent {...inputComponentProps} />\n\n\t\t\t\t{slots.default}\n\t\t\t</RootComponent>\n\n\t\t\t{slots.preview}\n\t\t</>\n\t);\n}\n\ntype SlotComponentProps = GetSlotComponentProps<\"preview\">;\n\nexport const DropZoneImagePreview = withSlotNameAndSymbol<SlotComponentProps>(\"preview\");\n","export { DropZoneRoot as Root, DropZoneImagePreview as ImagePreview } from \"./drop-zone\";\n"]}

package/dist/esm/ui/form/index.d.ts

@@ -127,8 +127,9 @@ declare function FormDescription(props: InferProps<"p">): react.JSX.Element;
 type ErrorMessageRenderProps = {
     className: string;
     "data-index": number;
-    "data-part": string;
-    "data-scope": string;
+    "data-part": "error-message";
+    "data-scope": "form";
+    "data-slot": "form-error-message";
     id: string | undefined;
     onAnimationEnd?: react.ReactEventHandler<HTMLElement>;
 };
@@ -149,7 +150,8 @@ type FormErrorMessagePrimitiveProps<TFieldValues extends FieldValues> = Discrimi
         errorMessageAnimation?: string;
     };
     control?: Control<TFieldValues>;
-    withAnimationOnInvalid?: boolean;
+    disableErrorAnimation?: boolean;
+    disableScrollToErrorField?: boolean;
 } & ({
     errorField: FieldPath<TFieldValues>;
     type?: "regular";