@zayne-labs/ui-react 0.10.46 → 0.10.47

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

@@ -1,16 +1,16 @@
 "use client";
 
-import { t as __exportAll } from "../../chunk-CpZCTQkd.js";
-import { n as SlotRoot } from "../../slot-aKEvaEWn.js";
-import { n as For } from "../../for-BeCRb3k2.js";
-import { t as Presence } from "../../presence-BTPyxGeW.js";
-import { t as cnMerge } from "../../cn-Dnsqr-G7.js";
+import { t as __exportAll } from "../../chunk-BN_g-Awi.js";
+import { n as SlotRoot } from "../../slot-C56gqKvk.js";
+import { t as cnMerge } from "../../cn-pbJoeyH6.js";
+import { n as For } from "../../for-IenHovla.js";
+import { t as Presence } from "../../presence-BbOLyzEd.js";
 import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
 import { isBoolean, isFile, isFunction, isNumber, isObject, isString } from "@zayne-labs/toolkit-type-helpers";
 import { useCallback, useMemo, useRef } from "react";
-import { createCustomContext, useCallbackRef, useCompareSelector, useCompareValue, useConstant, useStore, useUnmountEffect } from "@zayne-labs/toolkit-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createFileURL, createStore, dataAttr, formatBytes, generateFileID, handleFileValidationAsync, toArray } from "@zayne-labs/toolkit-core";
+import { createCustomContext, useCallbackRef, useCompareSelector, useCompareValue, useStore, useUnmountEffect } from "@zayne-labs/toolkit-react";
 import { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
 
 //#region src/components/ui/drop-zone/drop-zone-context.ts
@@ -220,8 +220,8 @@ const getErrorContext = (error) => {
 
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone-store.ts
-const createDropZoneStore = (initStoreValues) => {
-	const { allowedFileTypes, disablePreviewGenForNonImageFiles, initialFiles, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onValidationError, onValidationSuccess, rejectDuplicateFiles, validator } = initStoreValues;
+const createDropZoneStore = (storeContext) => {
+	const { allowedFileTypes, disablePreviewGenForNonImageFiles, initialFiles, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onValidationError, onValidationSuccess, rejectDuplicateFiles, validator } = storeContext;
 	const inputRef = { current: null };
 	const initialFileArray = toArray(initialFiles).filter(Boolean);
 	const clearInputValue = () => {
@@ -247,10 +247,10 @@ const createDropZoneStore = (initStoreValues) => {
 					console.warn("No file selected!");
 					return;
 				}
-				const { actions, fileStateArray } = get();
+				const { actions, fileStateArray: existingFileStateArray } = get();
 				const resolvedNewFiles = !multiple ? [files[0]] : files;
 				const { errors, validFiles } = await handleFileValidationAsync({
-					existingFiles: fileStateArray.map((fileWithPreview) => fileWithPreview.file),
+					existingFiles: existingFileStateArray.map((fileWithPreview) => fileWithPreview.file),
 					hooks: {
 						onErrorEach: onValidationError,
 						onSuccessBatch: onValidationSuccess
@@ -280,7 +280,7 @@ const createDropZoneStore = (initStoreValues) => {
 				}));
 				set({
 					errors,
-					fileStateArray: !multiple ? newFileStateArray : [...fileStateArray, ...newFileStateArray],
+					fileStateArray: !multiple ? newFileStateArray : [...existingFileStateArray, ...newFileStateArray],
 					isDraggingOver: false
 				}, { shouldNotifySync: true });
 				await actions.handleFileUpload({ newFileStateArray });
@@ -419,19 +419,21 @@ const createDropZoneStore = (initStoreValues) => {
 				const { fileStateOrID, ...updatedFileState } = ctx;
 				const { fileStateArray } = get();
 				set({ fileStateArray: fileStateArray.map((fileState) => {
-					if (isMatchingFile({
+					if (!isMatchingFile({
 						fileState,
 						fileStateOrID
-					})) return {
+					})) return fileState;
+					return {
 						...fileState,
 						...updatedFileState
 					};
-					return fileState;
 				}) }, { shouldNotifySync: true });
 			}
 		}
 	}));
-	store.subscribe.withSelector((state) => state.fileStateArray, (fileStateArray) => onFilesChange?.({ fileStateArray }));
+	store.subscribe.withSelector((state) => state.fileStateArray, (fileStateArray) => {
+		onFilesChange?.({ fileStateArray });
+	});
 	store.subscribe.withSelector((state) => state.errors, (errors) => {
 		if (errors.length === 0) return;
 		store.setState({ isInvalid: true });
@@ -443,21 +445,21 @@ const createDropZoneStore = (initStoreValues) => {
 //#endregion
 //#region src/components/ui/drop-zone/use-drop-zone.ts
 const useDropZone = (props) => {
-	const { allowedFileTypes, disabled = false, disableFilePickerOpenOnAreaClick = false, disableInternalStateSubscription = false, disablePreviewGenForNonImageFiles = true, initialFiles, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onValidationError, onValidationSuccess, rejectDuplicateFiles = true, validator } = props ?? {};
+	const { allowedFileTypes, disabled = false, disableFilePickerOpenOnAreaClick = false, disableInternalStateSubscription = false, disablePreviewGenForNonImageFiles = true, initialFiles, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onValidationError, onValidationSuccess, rejectDuplicateFiles = true, unstyled: globalUnstyled = false, validator } = props ?? {};
 	const inputRef = useRef(null);
 	const stableOnFilesChange = useCallbackRef(onFilesChange);
 	const stableOnUpload = useCallbackRef(onUpload);
 	const stableOnUploadError = useCallbackRef(onValidationError);
 	const stableOnUploadSuccess = useCallbackRef(onValidationSuccess);
 	const stableValidator = useCallbackRef(validator);
-	const constantInitialFiles = useConstant(() => initialFiles);
+	const shallowComparedInitialFiles = useCompareValue(initialFiles);
 	const shallowComparedMaxFileSize = useCompareValue(maxFileSize);
 	const shallowComparedAllowedFileTypes = useCompareValue(allowedFileTypes);
 	const storeApi = useMemo(() => {
 		return createDropZoneStore({
 			allowedFileTypes: shallowComparedAllowedFileTypes,
 			disablePreviewGenForNonImageFiles,
-			initialFiles: constantInitialFiles,
+			initialFiles: shallowComparedInitialFiles,
 			maxFileCount,
 			maxFileSize: shallowComparedMaxFileSize,
 			multiple,
@@ -471,7 +473,7 @@ const useDropZone = (props) => {
 	}, [
 		shallowComparedAllowedFileTypes,
 		disablePreviewGenForNonImageFiles,
-		constantInitialFiles,
+		shallowComparedInitialFiles,
 		maxFileCount,
 		shallowComparedMaxFileSize,
 		multiple,
@@ -490,9 +492,9 @@ const useDropZone = (props) => {
 		return useStore(storeApi, selector);
 	};
 	const isDraggingOver = useDropZoneStore((state) => !disableInternalStateSubscription ? state.isDraggingOver : null);
-	const hasFiles = useDropZoneStore((state) => !disableInternalStateSubscription ? state.fileStateArray.length > 0 : null);
 	const isInvalid = useDropZoneStore((state) => !disableInternalStateSubscription ? state.isInvalid : null);
 	const getContainerProps = useCallback((innerProps) => {
+		const { unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		const isDisabled = disabled;
 		const onFileDrop = !isDisabled ? actions.handleDrop : void 0;
 		const onFilePaste = !isDisabled ? actions.handlePaste : void 0;
@@ -506,11 +508,8 @@ const useDropZone = (props) => {
 				"data-drag-over": dataAttr(isDraggingOver),
 				"data-invalid": dataAttr(isInvalid)
 			},
-			...innerProps,
-			className: cnMerge(`relative flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed
-					p-6 transition-colors duration-250 ease-out outline-none select-none
-					focus-visible:border-zu-ring/50`, `data-disabled:pointer-events-none data-drag-over:opacity-60
-					data-invalid:border-zu-destructive data-invalid:ring-zu-destructive/20`, innerProps.className),
+			...restOfInnerProps,
+			...!unstyled && { className: cnMerge(`relative flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 transition-colors duration-250 ease-out outline-none select-none focus-visible:border-zu-ring/50`, `data-disabled:pointer-events-none data-drag-over:opacity-60 data-invalid:border-zu-destructive data-invalid:ring-zu-destructive/20`, innerProps.className) },
 			"data-disabled": dataAttr(isDisabled),
 			onClick: composeTwoEventHandlers(onAreaClick, innerProps.onClick),
 			onDragEnter: composeTwoEventHandlers(actions.handleDragEnter, innerProps.onDragEnter),
@@ -522,18 +521,19 @@ const useDropZone = (props) => {
 			tabIndex
 		};
 	}, [
-		actions.handleDragEnter,
-		actions.handleDragLeave,
-		actions.handleDragOver,
+		globalUnstyled,
+		disabled,
 		actions.handleDrop,
-		actions.handleKeyDown,
 		actions.handlePaste,
 		actions.openFilePicker,
+		actions.handleKeyDown,
+		actions.handleDragEnter,
+		actions.handleDragLeave,
+		actions.handleDragOver,
+		disableFilePickerOpenOnAreaClick,
 		disableInternalStateSubscription,
-		disabled,
 		isDraggingOver,
-		isInvalid,
-		disableFilePickerOpenOnAreaClick
+		isInvalid
 	]);
 	const refCallback = useCallbackRef((node) => {
 		inputRef.current = node;
@@ -576,32 +576,31 @@ const useDropZone = (props) => {
 		};
 	}, [actions.openFilePicker, disabled]);
 	const getFileListProps = useCallback((innerProps) => {
-		const { orientation = "vertical", ...restOfInnerProps } = innerProps;
+		const { orientation = "vertical", unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		return {
 			...getScopeAttrs("file-list"),
 			"data-orientation": orientation,
-			...!disableInternalStateSubscription && { "data-state": hasFiles ? "active" : "inactive" },
 			...restOfInnerProps,
-			className: cnMerge("flex flex-col gap-2 data-[state=active]:animate-files-in", orientation === "horizontal" && "flex-row overflow-x-auto p-1.5", innerProps.className)
+			...!unstyled && { className: cnMerge("flex flex-col gap-2", orientation === "horizontal" && "flex-row overflow-x-auto p-1.5", innerProps.className) }
 		};
-	}, [disableInternalStateSubscription, hasFiles]);
-	const getFileItemProps = useCallbackRef((innerProps) => {
+	}, [globalUnstyled]);
+	const getFileItemProps = useCallback((innerProps) => {
+		const { unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		return {
 			...getScopeAttrs("file-item"),
-			...innerProps,
-			className: cnMerge("relative flex items-center gap-2.5 rounded-md border p-2", innerProps.className)
+			...restOfInnerProps,
+			...!unstyled && { className: cnMerge("relative flex animate-files-in items-center gap-2.5 rounded-md border p-2", innerProps.className) }
 		};
-	});
-	const getFileItemProgressProps = useCallbackRef((innerProps) => {
-		const { variant = "linear", ...restOfInnerProps } = innerProps;
+	}, [globalUnstyled]);
+	const getFileItemProgressProps = useCallback((innerProps) => {
+		const { unstyled = globalUnstyled, variant = "linear", ...restOfInnerProps } = innerProps;
 		return {
 			...getScopeAttrs("file-item-progress"),
 			role: "progressbar",
 			...restOfInnerProps,
-			className: cnMerge("inline-flex", variant === "circular" && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", variant === "fill" && `absolute inset-0 bg-zu-primary/50 transition-[clip-path] duration-300 ease-linear
-						[clip-path:var(--clip-path)]`, variant === "linear" && "relative h-1.5 w-full overflow-hidden rounded-full bg-zu-primary/20", restOfInnerProps.className)
+			...!unstyled && { className: cnMerge("inline-flex", variant === "circular" && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", variant === "fill" && `absolute inset-0 bg-zu-primary/50 transition-[clip-path] duration-300 ease-linear [clip-path:var(--clip-path)]`, variant === "linear" && "relative h-1.5 w-full overflow-hidden rounded-full bg-zu-primary/20", restOfInnerProps.className) }
 		};
-	});
+	}, [globalUnstyled]);
 	const getFileItemDeleteProps = useCallback((innerProps) => {
 		const { fileStateOrID, ...restOfInnerProps } = innerProps;
 		const isDisabled = innerProps.disabled ?? disabled;
@@ -615,21 +614,22 @@ const useDropZone = (props) => {
 			onClick: composeTwoEventHandlers(onRemoveFile, restOfInnerProps.onClick)
 		};
 	}, [actions, disabled]);
-	const getFileItemPreviewProps = useCallbackRef((innerProps) => {
+	const getFileItemPreviewProps = useCallback((innerProps) => {
+		const { unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		return {
 			...getScopeAttrs("file-item-preview"),
-			...innerProps,
-			className: cnMerge(`relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md
-					bg-zu-accent/50 [&>svg]:size-10`, innerProps.className)
+			...restOfInnerProps,
+			...!unstyled && { className: cnMerge(`relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-zu-accent/50 [&>svg]:size-10`, innerProps.className) }
 		};
-	});
-	const getFileItemMetadataProps = useCallbackRef((innerProps) => {
+	}, [globalUnstyled]);
+	const getFileItemMetadataProps = useCallback((innerProps) => {
+		const { unstyled = globalUnstyled, ...restOfInnerProps } = innerProps;
 		return {
 			...getScopeAttrs("file-item-metadata"),
-			...innerProps,
-			className: cnMerge("flex min-w-0 grow flex-col", innerProps.className)
+			...restOfInnerProps,
+			...!unstyled && { className: cnMerge("flex min-w-0 grow flex-col", innerProps.className) }
 		};
-	});
+	}, [globalUnstyled]);
 	const getFileItemClearProps = useCallback((innerProps) => {
 		const isDisabled = innerProps.disabled ?? disabled;
 		return {
@@ -792,19 +792,19 @@ function DropZoneFileList(props) {
 function DropZoneFileItem(props) {
 	const { as: Element = "li", asChild, fileState, ...restOfProps } = props;
 	const { propGetters } = useDropZoneRootContext();
-	const Component$1 = asChild ? SlotRoot : Element;
+	const Component = asChild ? SlotRoot : Element;
 	return /* @__PURE__ */ jsx(FileItemContextProvider, {
 		value: useMemo(() => ({ fileState }), [fileState]),
-		children: /* @__PURE__ */ jsx(Component$1, { ...propGetters.getFileItemProps(restOfProps) })
+		children: /* @__PURE__ */ jsx(Component, { ...propGetters.getFileItemProps(restOfProps) })
 	});
 }
 function DropZoneFileItemDelete(props) {
 	const { asChild, fileStateOrID, ...restOfProps } = props;
 	const { propGetters } = useDropZoneRootContext();
 	const fileItemContextValue = useFileItemContext();
-	const Component$1 = asChild ? SlotRoot : "button";
+	const Component = asChild ? SlotRoot : "button";
 	const resolvedFileStateOrID = fileStateOrID ?? fileItemContextValue?.fileState;
-	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getFileItemDeleteProps({
+	return /* @__PURE__ */ jsx(Component, { ...propGetters.getFileItemDeleteProps({
 		fileStateOrID: resolvedFileStateOrID,
 		...restOfProps
 	}) });
@@ -816,7 +816,7 @@ function DropZoneFileItemProgress(props) {
 	if (!fileState) return null;
 	const currentProgress = fileState.progress;
 	if (!(forceMount || fileState.progress !== 100)) return null;
-	const Component$1 = asChild ? SlotRoot : Element;
+	const Component = asChild ? SlotRoot : Element;
 	const componentProps = propGetters.getFileItemProgressProps({
 		variant,
 		...restOfProps
@@ -825,7 +825,7 @@ function DropZoneFileItemProgress(props) {
 		case "circular": {
 			const circumference = 2 * Math.PI * ((size - 4) / 2);
 			const strokeDashoffset = circumference - currentProgress / 100 * circumference;
-			return /* @__PURE__ */ jsx(Component$1, {
+			return /* @__PURE__ */ jsx(Component, {
 				...componentProps,
 				children: /* @__PURE__ */ jsxs("svg", {
 					className: "-rotate-90",
@@ -855,12 +855,12 @@ function DropZoneFileItemProgress(props) {
 		}
 		case "fill": {
 			const topInset = 100 - currentProgress;
-			return /* @__PURE__ */ jsx(Component$1, {
+			return /* @__PURE__ */ jsx(Component, {
 				...componentProps,
 				style: { "--clip-path": `inset(${topInset}% 0% 0% 0%)` }
 			});
 		}
-		case "linear": return /* @__PURE__ */ jsx(Component$1, {
+		case "linear": return /* @__PURE__ */ jsx(Component, {
 			...componentProps,
 			children: /* @__PURE__ */ jsx("span", {
 				className: "inline-block size-full grow translate-x-(--translate-distance) bg-zu-primary transition-transform duration-300 ease-linear",
@@ -878,7 +878,7 @@ function DropZoneFileItemPreview(props) {
 	if (!fileState) return null;
 	const fileType = fileState.file.type ?? "";
 	const fileExtension = fileState.file.name?.split(".").pop()?.toLowerCase() ?? "";
-	const Component$1 = asChild ? SlotRoot : Element;
+	const Component = asChild ? SlotRoot : Element;
 	const fallbackPreview = () => getFilePreviewOrIcon({
 		fileExtension,
 		fileState,
@@ -891,7 +891,7 @@ function DropZoneFileItemPreview(props) {
 		fileState,
 		fileType
 	}) : children;
-	return /* @__PURE__ */ jsxs(Component$1, {
+	return /* @__PURE__ */ jsxs(Component, {
 		...propGetters.getFileItemPreviewProps(restOfProps),
 		children: [renderPreview && fallbackPreview(), resolvedChildren]
 	});
@@ -967,7 +967,7 @@ function DropZoneFileItemMetadata(props) {
 	const { propGetters } = useDropZoneRootContext();
 	const fileState = fileStateProp ?? fileItemContextValue?.fileState;
 	if (!fileState) return null;
-	const Component$1 = asChild ? SlotRoot : "div";
+	const Component = asChild ? SlotRoot : "div";
 	const resolvedChildren = isFunction(children) ? children({ fileState }) : children;
 	const getDefaultMetadataChildren = () => {
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -985,7 +985,7 @@ function DropZoneFileItemMetadata(props) {
 			})
 		] });
 	};
-	return /* @__PURE__ */ jsx(Component$1, {
+	return /* @__PURE__ */ jsx(Component, {
 		...propGetters.getFileItemMetadataProps(restOfProps),
 		children: resolvedChildren ?? getDefaultMetadataChildren()
 	});