@zayne-labs/ui-react 0.10.44 → 0.10.46

package/dist/esm/ui/drop-zone/index.d.ts

@@ -1,17 +1,15 @@
 import { InferProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
 import * as _zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
 import { Awaitable, SelectorFn } from "@zayne-labs/toolkit-type-helpers";
-import * as react35 from "react";
+import * as react0 from "react";
 import "@zayne-labs/toolkit-react";
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import * as _zayne_labs_toolkit_core1 from "@zayne-labs/toolkit-core";
 import { FileMeta, FileOrFileMeta, FileValidationErrorContextEach, FileValidationHooksAsync, FileValidationSettingsAsync } from "@zayne-labs/toolkit-core";
 
 //#region src/components/ui/drop-zone/drop-zone-store.d.ts
 type RequiredUseDropZoneProps = { [Key in keyof Required<UseDropZoneProps>]: UseDropZoneProps[Key] | undefined };
-type InitStoreValues = Omit<RequiredUseDropZoneProps, "disabled" | "disableFilePickerOpenOnAreaClick" | "disableInternalStateSubscription" | "extraProps"> & {
-  inputRef: React.RefObject<HTMLInputElement | null>;
-};
+type InitStoreValues = Omit<RequiredUseDropZoneProps, "disabled" | "disableFilePickerOpenOnAreaClick" | "disableInternalStateSubscription" | "extraProps">;
 declare const createDropZoneStore: (initStoreValues: InitStoreValues) => _zayne_labs_toolkit_core1.StoreApi<DropZoneStore>;
 //#endregion
 //#region src/components/ui/drop-zone/utils.d.ts
@@ -31,31 +29,31 @@ type FileErrorContext = Omit<FileValidationErrorContextEach, "code"> & {
 };
 interface FileState {
   /**
-   *  Validation errors for the file
-   *
-   */
+       *  Validation errors for the file
+       *
+       */
   error?: FileErrorContext;
   /**
-   *  File object or file metadata
-   */
+       *  File object or file metadata
+       */
   file: FileOrFileMeta;
   /**
-   *  Unique ID for the file
-   */
+       *  Unique ID for the file
+       */
   id: string;
   /**
-   *  Preview URL for the file
-   *  - Will be null if `disallowPreviewForNonImageFiles` is set to `true` and the file is not an image
-   *  - Can also be null if `URL.createObjectURL` fails
-   */
+       *  Preview URL for the file
+       *  - Will be null if `disallowPreviewForNonImageFiles` is set to `true` and the file is not an image
+       *  - Can also be null if `URL.createObjectURL` fails
+       */
   preview: string | undefined;
   /**
-   *  Progress of the file upload
-   */
+       *  Progress of the file upload
+       */
   progress: number;
   /**
-   *  Status of the file upload
-   */
+       *  Status of the file upload
+       */
   status: "error" | "idle" | "success" | "uploading";
 }
 type FileStateOrIDProp = {
@@ -112,20 +110,20 @@ type DropZonePropGetters = { [Key in keyof PartProps as `get${Capitalize<Key>}Pr
 type PartInputProps = { [Key in keyof PartProps]: PartProps[Key]["input"] };
 type DropZoneState = {
   /**
-   *  List of validation errors
-   */
+       *  List of validation errors
+       */
   errors: FileErrorContext[];
   /**
-   *  List of files with their preview URLs and unique IDs
-   */
+       *  List of files with their preview URLs and unique IDs
+       */
   fileStateArray: FileState[];
   /**
-   *  Whether or not a file is currently being dragged over the drop zone
-   */
+       *  Whether or not a file is currently being dragged over the drop zone
+       */
   isDraggingOver: boolean;
   /**
-   *  Whether or not any of the files are invalid
-   */
+       *  Whether or not any of the files are invalid
+       */
   isInvalid: boolean;
 };
 type DropZoneActions = {
@@ -146,6 +144,7 @@ type DropZoneActions = {
     handlePaste: (event: React.ClipboardEvent<HTMLElement>) => Awaitable<void>;
     openFilePicker: () => void;
     removeFile: (ctx: FileStateOrIDProp) => void;
+    setInputRef: (element: HTMLInputElement | null) => void;
     updateFileState: (ctx: FileStateOrIDProp & Partial<Omit<FileState, "file" | "id" | "preview">>) => void;
   };
 };
@@ -158,41 +157,41 @@ interface UseDropZoneResult extends Pick<Required<UseDropZoneProps>, "disabled"
 }
 interface UseDropZoneProps extends FileValidationSettingsAsync {
   /**
-   * Whether or not the drop zone is disabled
-   */
+       * Whether or not the drop zone is disabled
+       */
   disabled?: boolean;
   /**
-   * Whether clicking the drop zone area will open the default file picker or not
-   *
-   * @default false
-   */
+       * Whether clicking the drop zone area will open the default file picker or not
+       *
+       * @default false
+       */
   disableFilePickerOpenOnAreaClick?: boolean;
   /**
-   *  Whether to disable the internal state subscription such as drag over state etc for setting things like data attributes
-   *  - This is useful if you want to subscribe to the state yourself
-   *  @default false
-   */
+       *  Whether to disable the internal state subscription such as drag over state etc for setting things like data attributes
+       *  - This is useful if you want to subscribe to the state yourself
+       *  @default false
+       */
   disableInternalStateSubscription?: boolean;
   /**
-   * Whether to disallow preview generation for non-image files
-   * @default true
-   */
+       * Whether to disallow preview generation for non-image files
+       * @default true
+       */
   disablePreviewGenForNonImageFiles?: boolean;
   /**
-   * Initial files to populate the drop zone
-   */
+       * Initial files to populate the drop zone
+       */
   initialFiles?: FileMeta | FileMeta[] | null;
   /**
-   * Whether to allow multiple files to be uploaded
-   */
+       * Whether to allow multiple files to be uploaded
+       */
   multiple?: boolean;
   /**
-   * Callback function to be called when internal files state changes
-   */
+       * Callback function to be called when internal files state changes
+       */
   onFilesChange?: (context: Pick<DropZoneState, "fileStateArray">) => void;
   /**
-   * Callback function to be called when new files are uploaded
-   */
+       * Callback function to be called when new files are uploaded
+       */
   onUpload?: (context: Pick<DropZoneState, "fileStateArray"> & {
     onError: (ctx: FileStateOrIDProp & {
       error: DropZoneError;
@@ -203,19 +202,19 @@ interface UseDropZoneProps extends FileValidationSettingsAsync {
     onSuccess: (ctx: FileStateOrIDProp) => void;
   }) => Awaitable<void>;
   /**
-   * Callback function to be called on each file validation error as they occur
-   */
+       * Callback function to be called on each file validation error as they occur
+       */
   onValidationError?: FileValidationHooksAsync["onErrorEach"];
   /**
-   * Callback function to be called once after all files have been successfully validated
-   */
+       * Callback function to be called once after all files have been successfully validated
+       */
   onValidationSuccess?: FileValidationHooksAsync["onSuccessBatch"];
   /**
-   * Custom validation function.
-   *
-   * If the function returns false, the file will be rejected
-   *
-   */
+       * Custom validation function.
+       *
+       * If the function returns false, the file will be rejected
+       *
+       */
   validator?: FileValidationSettingsAsync["validator"];
 }
 //#endregion
@@ -223,7 +222,7 @@ interface UseDropZoneProps extends FileValidationSettingsAsync {
 declare const DropZoneStoreContextProvider: (props: {
     children: React.ReactNode;
     store: _zayne_labs_toolkit_core1.StoreApi<DropZoneStore>;
-  }) => react35.FunctionComponentElement<react35.ProviderProps<_zayne_labs_toolkit_core1.StoreApi<DropZoneStore>>>, useDropZoneStoreContext: <TResult = DropZoneStore>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DropZoneStore, TResult> | undefined) => TResult;
+  }) => react0.FunctionComponentElement<react0.ProviderProps<_zayne_labs_toolkit_core1.StoreApi<DropZoneStore>>>, useDropZoneStoreContext: <TResult = DropZoneStore>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DropZoneStore, TResult> | undefined) => TResult;
 type FileItemContextType = {
   fileState: FileState;
 };
@@ -232,29 +231,29 @@ type FileItemContextType = {
 type DropZoneRootProps = UseDropZoneProps & {
   children: React.ReactNode;
 };
-declare function DropZoneRoot(props: DropZoneRootProps): react_jsx_runtime38.JSX.Element;
+declare function DropZoneRoot(props: DropZoneRootProps): react_jsx_runtime7.JSX.Element;
 type DropZoneContextProps<TSlice> = {
   children: React.ReactNode | ((context: TSlice) => React.ReactNode);
   selector?: SelectorFn<DropZoneStore, TSlice>;
 };
-declare function DropZoneContext<TSlice = DropZoneStore>(props: DropZoneContextProps<TSlice>): react35.ReactNode;
+declare function DropZoneContext<TSlice = DropZoneStore>(props: DropZoneContextProps<TSlice>): react0.ReactNode;
 type DropZoneContainerProps = PartInputProps["container"] & {
   asChild?: boolean;
 };
-declare function DropZoneContainer<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DropZoneContainerProps>): react_jsx_runtime38.JSX.Element;
+declare function DropZoneContainer<TElement extends React.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DropZoneContainerProps>): react_jsx_runtime7.JSX.Element;
 type DropZoneInputProps = PartInputProps["input"] & {
   asChild?: boolean;
 };
-declare function DropZoneInput(props: DropZoneInputProps): react_jsx_runtime38.JSX.Element;
+declare function DropZoneInput(props: DropZoneInputProps): react_jsx_runtime7.JSX.Element;
 type DropZoneAreaProps<TSlice> = DropZoneContextProps<TSlice> & PartInputProps["container"] & {
   classNames?: Partial<Record<Extract<keyof PartInputProps, "container" | "input">, string>>;
   extraProps?: Partial<Pick<PartInputProps, "container" | "input">>;
 };
-declare function DropZoneArea<TSlice = DropZoneStore>(props: DropZoneAreaProps<TSlice>): react_jsx_runtime38.JSX.Element;
+declare function DropZoneArea<TSlice = DropZoneStore>(props: DropZoneAreaProps<TSlice>): react_jsx_runtime7.JSX.Element;
 type DropZoneTriggerProps = PartInputProps["trigger"] & {
   asChild?: boolean;
 };
-declare function DropZoneTrigger(props: DropZoneTriggerProps): react_jsx_runtime38.JSX.Element;
+declare function DropZoneTrigger(props: DropZoneTriggerProps): react_jsx_runtime7.JSX.Element;
 type ListPerItemContext = Pick<DropZoneStore, "actions"> & {
   array: DropZoneStore["fileStateArray"];
   fileState: DropZoneStore["fileStateArray"][number];
@@ -273,21 +272,21 @@ type DropZoneFileListProps = Omit<PartInputProps["fileList"], "children"> & {
   asChild?: boolean;
   forceMount?: boolean;
 } & (FileListManualListVariant | FileListPerItemVariant);
-declare function DropZoneFileList<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DropZoneFileListProps>): react_jsx_runtime38.JSX.Element;
+declare function DropZoneFileList<TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DropZoneFileListProps>): react_jsx_runtime7.JSX.Element;
 type DropZoneFileItemProps = FileItemContextType & PartInputProps["fileItem"] & {
   asChild?: boolean;
 };
-declare function DropZoneFileItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProps>): react_jsx_runtime38.JSX.Element;
+declare function DropZoneFileItem<TElement extends React.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProps>): react_jsx_runtime7.JSX.Element;
 type DropZoneFileItemDeleteProps = PartInputProps["fileItemDelete"] & {
   asChild?: boolean;
 };
-declare function DropZoneFileItemDelete(props: DropZoneFileItemDeleteProps): react_jsx_runtime38.JSX.Element;
+declare function DropZoneFileItemDelete(props: DropZoneFileItemDeleteProps): react_jsx_runtime7.JSX.Element;
 type DropZoneFileItemProgressProps = PartInputProps["fileItemProgress"] & {
   asChild?: boolean;
   forceMount?: boolean;
   size?: number;
 };
-declare function DropZoneFileItemProgress<TElement extends React.ElementType = "span">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProgressProps>): react_jsx_runtime38.JSX.Element | null;
+declare function DropZoneFileItemProgress<TElement extends React.ElementType = "span">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProgressProps>): react_jsx_runtime7.JSX.Element | null;
 type RenderPreviewDetails<TElement extends React.ElementType = "svg"> = {
   node?: React.ReactNode;
 } & {
@@ -316,7 +315,7 @@ type DropZoneFileItemPreviewProps = Omit<PartInputProps["fileItemPreview"], "chi
   }) => React.ReactNode);
   renderPreview?: boolean | RenderPreview;
 };
-declare function DropZoneFileItemPreview<TElement extends React.ElementType>(props: PolymorphicPropsStrict<TElement, DropZoneFileItemPreviewProps>): react_jsx_runtime38.JSX.Element | null;
+declare function DropZoneFileItemPreview<TElement extends React.ElementType>(props: PolymorphicPropsStrict<TElement, DropZoneFileItemPreviewProps>): react_jsx_runtime7.JSX.Element | null;
 type DropZoneFileItemMetadataProps = Omit<PartInputProps["fileItemMetadata"], "children"> & Partial<Pick<FileItemContextType, "fileState">> & {
   asChild?: boolean;
   children?: React.ReactNode | ((context: Pick<FileItemContextType, "fileState">) => React.ReactNode);
@@ -326,12 +325,12 @@ type DropZoneFileItemMetadataProps = Omit<PartInputProps["fileItemMetadata"], "c
   };
   size?: "default" | "sm";
 };
-declare function DropZoneFileItemMetadata(props: DropZoneFileItemMetadataProps): react_jsx_runtime38.JSX.Element | null;
+declare function DropZoneFileItemMetadata(props: DropZoneFileItemMetadataProps): react_jsx_runtime7.JSX.Element | null;
 type DropZoneFileClearProps = PartInputProps["fileItemClear"] & {
   asChild?: boolean;
   forceMount?: boolean;
 };
-declare function DropZoneFileClear(props: DropZoneFileClearProps): react_jsx_runtime38.JSX.Element | null;
+declare function DropZoneFileClear(props: DropZoneFileClearProps): react_jsx_runtime7.JSX.Element | null;
 declare namespace drop_zone_parts_d_exports {
   export { DropZoneArea as Area, DropZoneContainer as Container, DropZoneContext as Context, DropZoneFileClear as FileClear, DropZoneFileItem as FileItem, DropZoneFileItemDelete as FileItemDelete, DropZoneFileItemMetadata as FileItemMetadata, DropZoneFileItemPreview as FileItemPreview, DropZoneFileItemProgress as FileItemProgress, DropZoneFileList as FileList, DropZoneInput as Input, DropZoneRoot as Root, DropZoneTrigger as Trigger };
 }

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

@@ -1,14 +1,14 @@
 "use client";
 
-import { t as __export } from "../../chunk-BL-4obUL.js";
-import { n as SlotRoot } from "../../slot-CURylbjq.js";
+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-Ctp-Trws.js";
+import { t as Presence } from "../../presence-BTPyxGeW.js";
 import { t as cnMerge } from "../../cn-Dnsqr-G7.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, useConstant, useShallowCompSelector, useShallowCompValue, useStore, useUnmountEffect } from "@zayne-labs/toolkit-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 { createReactStoreContext } from "@zayne-labs/toolkit-react/zustand";
@@ -221,7 +221,8 @@ const getErrorContext = (error) => {
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone-store.ts
 const createDropZoneStore = (initStoreValues) => {
-	const { allowedFileTypes, disablePreviewGenForNonImageFiles, initialFiles, inputRef, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onValidationError, onValidationSuccess, rejectDuplicateFiles, validator } = initStoreValues;
+	const { allowedFileTypes, disablePreviewGenForNonImageFiles, initialFiles, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onValidationError, onValidationSuccess, rejectDuplicateFiles, validator } = initStoreValues;
+	const inputRef = { current: null };
 	const initialFileArray = toArray(initialFiles).filter(Boolean);
 	const clearInputValue = () => {
 		if (!inputRef.current) return;
@@ -411,6 +412,9 @@ const createDropZoneStore = (initStoreValues) => {
 					})
 				});
 			},
+			setInputRef: (element) => {
+				inputRef.current = element;
+			},
 			updateFileState: (ctx) => {
 				const { fileStateOrID, ...updatedFileState } = ctx;
 				const { fileStateArray } = get();
@@ -447,14 +451,13 @@ const useDropZone = (props) => {
 	const stableOnUploadSuccess = useCallbackRef(onValidationSuccess);
 	const stableValidator = useCallbackRef(validator);
 	const constantInitialFiles = useConstant(() => initialFiles);
-	const shallowComparedMaxFileSize = useShallowCompValue(maxFileSize);
-	const shallowComparedAllowedFileTypes = useShallowCompValue(allowedFileTypes);
+	const shallowComparedMaxFileSize = useCompareValue(maxFileSize);
+	const shallowComparedAllowedFileTypes = useCompareValue(allowedFileTypes);
 	const storeApi = useMemo(() => {
 		return createDropZoneStore({
 			allowedFileTypes: shallowComparedAllowedFileTypes,
 			disablePreviewGenForNonImageFiles,
 			initialFiles: constantInitialFiles,
-			inputRef,
 			maxFileCount,
 			maxFileSize: shallowComparedMaxFileSize,
 			multiple,
@@ -532,6 +535,10 @@ const useDropZone = (props) => {
 		isInvalid,
 		disableFilePickerOpenOnAreaClick
 	]);
+	const refCallback = useCallbackRef((node) => {
+		inputRef.current = node;
+		actions.setInputRef(node);
+	});
 	const getInputProps = useCallback((innerProps) => {
 		const isDisabled = innerProps.disabled ?? disabled;
 		const onFileChange = !isDisabled ? actions.handleChange : void 0;
@@ -545,7 +552,7 @@ const useDropZone = (props) => {
 			disabled: isDisabled,
 			multiple: multiple ?? innerProps.multiple,
 			onChange: composeTwoEventHandlers(onFileChange, innerProps.onChange),
-			ref: composeRefs(inputRef, innerProps.ref),
+			ref: composeRefs(refCallback, innerProps.ref),
 			type: "file"
 		};
 	}, [
@@ -554,7 +561,8 @@ const useDropZone = (props) => {
 		disableInternalStateSubscription,
 		disabled,
 		isDraggingOver,
-		multiple
+		multiple,
+		refCallback
 	]);
 	const getTriggerProps = useCallback((innerProps) => {
 		const isDisabled = innerProps.disabled ?? disabled;
@@ -656,20 +664,20 @@ const useDropZone = (props) => {
 		getInputProps,
 		getTriggerProps
 	]);
-	const savedUseDropZoneStore = useCallbackRef(useDropZoneStore);
+	const stableUseDropZoneStore = useCallbackRef(useDropZoneStore);
 	return useMemo(() => ({
 		disabled,
 		disableInternalStateSubscription,
 		inputRef,
 		propGetters,
 		storeApi,
-		useDropZoneStore: savedUseDropZoneStore
+		useDropZoneStore: stableUseDropZoneStore
 	}), [
 		disabled,
 		disableInternalStateSubscription,
 		propGetters,
 		storeApi,
-		savedUseDropZoneStore
+		stableUseDropZoneStore
 	]);
 };
 
@@ -698,7 +706,7 @@ function DropZoneRoot(props) {
 }
 function DropZoneContext(props) {
 	const { children, selector } = props;
-	const dropZoneCtx = useDropZoneStoreContext(useShallowCompSelector(selector));
+	const dropZoneCtx = useDropZoneStoreContext(useCompareSelector(selector));
 	return isFunction(children) ? children(dropZoneCtx) : children;
 }
 function DropZoneContainer(props) {
@@ -992,7 +1000,7 @@ function DropZoneFileClear(props) {
 
 //#endregion
 //#region src/components/ui/drop-zone/drop-zone-parts.ts
-var drop_zone_parts_exports = /* @__PURE__ */ __export({
+var drop_zone_parts_exports = /* @__PURE__ */ __exportAll({
 	Area: () => DropZoneArea,
 	Container: () => DropZoneContainer,
 	Context: () => DropZoneContext,