@moysklad/uikit 28.1.0

package/dist/components/FileUploader/components/FileUploaderPreview/components/FileUploaderOverlay/components/FileUploaderPreviewIcon/FileUploaderPreviewIcon.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const FileUploaderPreviewIcon = ()=>/*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "32",
+        height: "32",
+        viewBox: "0 0 32 32",
+        fill: "none",
+        children: [
+            /*#__PURE__*/ jsxs("g", {
+                clipPath: "url(#clip0_13702_76280)",
+                children: [
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M26.2857 1.14286H28.5714C29.1776 1.14286 29.759 1.38368 30.1877 1.81233C30.6163 2.24099 30.8571 2.82237 30.8571 3.42857V5.71429",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M1.14285 5.71429V3.42857C1.14285 2.82237 1.38367 2.24099 1.81232 1.81233C2.24098 1.38368 2.82236 1.14286 3.42857 1.14286H5.71428",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M12.5714 1.14286H19.4286",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M30.8571 12.5714V18.8571",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M1.14285 12.5714V19.4286",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M1.14285 26.2857V28.5714C1.14285 29.1776 1.38367 29.759 1.81232 30.1877C2.24098 30.6163 2.82236 30.8571 3.42857 30.8571H5.71428",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M12.5714 30.8571H18.8571",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M18.2857 26.2857C22.704 26.2857 26.2857 22.704 26.2857 18.2857C26.2857 13.8674 22.704 10.2857 18.2857 10.2857C13.8674 10.2857 10.2857 13.8674 10.2857 18.2857C10.2857 22.704 13.8674 26.2857 18.2857 26.2857Z",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M23.9319 23.9314L29.7148 29.7142",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("defs", {
+                children: /*#__PURE__*/ jsx("clipPath", {
+                    id: "clip0_13702_76280",
+                    children: /*#__PURE__*/ jsx("rect", {
+                        width: "32",
+                        height: "32",
+                        fill: "currentColor"
+                    })
+                })
+            })
+        ]
+    });
+export { FileUploaderPreviewIcon };

package/dist/components/FileUploader/components/FileUploaderPreview/components/FileUploaderOverlay/components/index.d.ts

@@ -0,0 +1,3 @@
+export { FileUploaderDeleteButton } from './FileUploaderDeleteButton/FileUploaderDeleteButton';
+export { FileUploaderDownloadIcon } from './FileUploaderDownloadIcon/FileUploaderDownloadIcon';
+export { FileUploaderPreviewIcon } from './FileUploaderPreviewIcon/FileUploaderPreviewIcon';

package/dist/components/FileUploader/components/FileUploaderPreview/components/FileUploaderOverlay/components/index.js

@@ -0,0 +1,3 @@
+export { FileUploaderDeleteButton } from "./FileUploaderDeleteButton/FileUploaderDeleteButton.js";
+export { FileUploaderDownloadIcon } from "./FileUploaderDownloadIcon/FileUploaderDownloadIcon.js";
+export { FileUploaderPreviewIcon } from "./FileUploaderPreviewIcon/FileUploaderPreviewIcon.js";

package/dist/components/FileUploader/components/FileUploaderPreview/components/index.d.ts

@@ -0,0 +1,4 @@
+export { FileUploaderFileIcon } from './FileUploaderFileIcon/FileUploaderFileIcon';
+export { FileUploaderFileName } from './FileUploaderFileName/FileUploaderFileName';
+export { FileUploaderDeleteButton } from './FileUploaderOverlay/components';
+export { FileUploaderOverlay } from './FileUploaderOverlay/FileUploaderOverlay';

package/dist/components/FileUploader/components/FileUploaderPreview/components/index.js

@@ -0,0 +1,4 @@
+export { FileUploaderFileIcon } from "./FileUploaderFileIcon/FileUploaderFileIcon.js";
+export { FileUploaderFileName } from "./FileUploaderFileName/FileUploaderFileName.js";
+export { FileUploaderDeleteButton } from "./FileUploaderOverlay/components/index.js";
+export { FileUploaderOverlay } from "./FileUploaderOverlay/FileUploaderOverlay.js";

package/dist/components/FileUploader/components/FileUploaderRegistryTrigger/FileUploaderRegistryTrigger.d.ts

@@ -0,0 +1,7 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+interface FileUploaderRegistryTriggerProps {
+    children: ReactNode;
+    onTrigger?: MouseEventHandler<HTMLSpanElement>;
+}
+export declare const FileUploaderRegistryTrigger: ({ children, onTrigger, }: FileUploaderRegistryTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FileUploader/components/FileUploaderRegistryTrigger/FileUploaderRegistryTrigger.js

@@ -0,0 +1,6 @@
+import { jsx } from "react/jsx-runtime";
+const FileUploaderRegistryTrigger = ({ children, onTrigger })=>/*#__PURE__*/ jsx("span", {
+        onClick: onTrigger,
+        children: children
+    });
+export { FileUploaderRegistryTrigger };

package/dist/components/FileUploader/components/FileUploaderSortableItem/FileUploaderSortableItem.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type PropsWithChildren } from 'react';
+interface Props {
+    id: string;
+}
+export declare const FileUploaderSortableItem: FC<PropsWithChildren<Props>>;
+export {};

package/dist/components/FileUploader/components/FileUploaderSortableItem/FileUploaderSortableItem.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import FileUploaderSortableItem_module from "./FileUploaderSortableItem.module.js";
+const SORTABLE_WRAPPER_FOCUS_ATTRS = [
+    'tabIndex',
+    'role',
+    "aria-roledescription",
+    'aria-describedby'
+];
+const FileUploaderSortableItem = ({ id, children })=>{
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id
+    });
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition
+    };
+    const sortableAttributesWithoutFocus = Object.fromEntries(Object.entries(attributes).filter(([key])=>!SORTABLE_WRAPPER_FOCUS_ATTRS.includes(key)));
+    return /*#__PURE__*/ jsx("div", {
+        ref: setNodeRef,
+        style: style,
+        className: isDragging ? FileUploaderSortableItem_module.sortableItemDragging : FileUploaderSortableItem_module.sortableItem,
+        ...sortableAttributesWithoutFocus,
+        ...listeners,
+        children: children
+    });
+};
+export { FileUploaderSortableItem };

package/dist/components/FileUploader/components/FileUploaderSortableItem/FileUploaderSortableItem.module.js

@@ -0,0 +1,6 @@
+import "./FileUploaderSortableItem_module.css";
+const FileUploaderSortableItem_module = {
+    sortableItem: "sortableItem-oK9n4a",
+    sortableItemDragging: "sortableItemDragging-_17Apg"
+};
+export default FileUploaderSortableItem_module;

package/dist/components/FileUploader/components/FileUploaderSortableItem/FileUploaderSortableItem_module.css

@@ -0,0 +1,9 @@
+.sortableItem-oK9n4a {
+  touch-action: none;
+}
+
+.sortableItemDragging-_17Apg {
+  visibility: hidden;
+  touch-action: none;
+}
+

package/dist/components/FileUploader/components/FileUploaderTrigger/FileUploaderTrigger.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+import type { DropzoneInputProps } from 'react-dropzone';
+export declare const FileUploaderTrigger: import("react").ForwardRefExoticComponent<DropzoneInputProps & {
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FileUploader/components/FileUploaderTrigger/FileUploaderTrigger.js

@@ -0,0 +1,14 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const FileUploaderTrigger = /*#__PURE__*/ forwardRef(({ children, ...inputProps }, ref)=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            children,
+            /*#__PURE__*/ jsx("input", {
+                ...inputProps,
+                ref: ref,
+                type: "file"
+            })
+        ]
+    }));
+FileUploaderTrigger.displayName = 'FileUploaderTrigger';
+export { FileUploaderTrigger };

package/dist/components/FileUploader/components/index.d.ts

@@ -0,0 +1,5 @@
+export { FileUploaderImagePreviewModal } from './FileUploaderImagePreviewModal/FileUploaderImagePreviewModal';
+export { FileUploaderPreview } from './FileUploaderPreview/FileUploaderPreview';
+export { FileUploaderRegistryTrigger } from './FileUploaderRegistryTrigger/FileUploaderRegistryTrigger';
+export { FileUploaderSortableItem } from './FileUploaderSortableItem/FileUploaderSortableItem';
+export { FileUploaderTrigger } from './FileUploaderTrigger/FileUploaderTrigger';

package/dist/components/FileUploader/components/index.js

@@ -0,0 +1,5 @@
+export { FileUploaderImagePreviewModal } from "./FileUploaderImagePreviewModal/FileUploaderImagePreviewModal.js";
+export { FileUploaderPreview } from "./FileUploaderPreview/FileUploaderPreview.js";
+export { FileUploaderRegistryTrigger } from "./FileUploaderRegistryTrigger/FileUploaderRegistryTrigger.js";
+export { FileUploaderSortableItem } from "./FileUploaderSortableItem/FileUploaderSortableItem.js";
+export { FileUploaderTrigger } from "./FileUploaderTrigger/FileUploaderTrigger.js";

package/dist/components/FileUploader/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useFileUploader } from './useFileUploader/useFileUploader';

package/dist/components/FileUploader/hooks/index.js

@@ -0,0 +1 @@
+export { useFileUploader } from "./useFileUploader/useFileUploader.js";

package/dist/components/FileUploader/hooks/useAutoScrollToInvalidFiles/useAutoScrollToInvalidFiles.d.ts

@@ -0,0 +1,5 @@
+interface UseAutoScrollToInvalidFilesParams {
+    invalidFilesCount: number;
+}
+export declare const useAutoScrollToInvalidFiles: ({ invalidFilesCount, }: UseAutoScrollToInvalidFilesParams) => import("react").RefObject<HTMLDivElement>;
+export {};

package/dist/components/FileUploader/hooks/useAutoScrollToInvalidFiles/useAutoScrollToInvalidFiles.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+const useAutoScrollToInvalidFiles = ({ invalidFilesCount })=>{
+    const scrollContainerRef = useRef(null);
+    const isMountedRef = useRef(false);
+    const prevInvalidFilesCountRef = useRef(invalidFilesCount);
+    useEffect(()=>{
+        const hasAddedInvalidFiles = invalidFilesCount > prevInvalidFilesCountRef.current;
+        if (isMountedRef.current && hasAddedInvalidFiles) {
+            const container = scrollContainerRef.current;
+            if (container && container.scrollWidth > container.clientWidth) if ('function' == typeof container.scrollTo) container.scrollTo({
+                left: container.scrollWidth,
+                behavior: 'smooth'
+            });
+            else container.scrollLeft = container.scrollWidth;
+        }
+        isMountedRef.current = true;
+        prevInvalidFilesCountRef.current = invalidFilesCount;
+    }, [
+        invalidFilesCount
+    ]);
+    return scrollContainerRef;
+};
+export { useAutoScrollToInvalidFiles };

package/dist/components/FileUploader/hooks/useDisplayItems/useDisplayItems.d.ts

@@ -0,0 +1,11 @@
+import type { IFile, IFileStateItem } from '../../FileUploader.types';
+interface UseDisplayItemsParams {
+    files: IFile[];
+    invalidFiles?: IFileStateItem[];
+    loadingCount: number;
+    loadingFiles?: IFile[];
+}
+export declare const useDisplayItems: ({ files, invalidFiles, loadingCount, loadingFiles, }: UseDisplayItemsParams) => {
+    displayItems: import("../../FileUploader.types").IRenderItem[];
+};
+export {};

package/dist/components/FileUploader/hooks/useDisplayItems/useDisplayItems.js

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import { buildDisplayItems, buildLoadingStateItems, buildReadyStateItems } from "../../FileUploader.helpers.js";
+const useDisplayItems = ({ files, invalidFiles, loadingCount, loadingFiles })=>{
+    const displayItems = useMemo(()=>{
+        const loadingItems = buildLoadingStateItems(loadingCount, loadingFiles);
+        const readyItems = buildReadyStateItems({
+            files,
+            invalidFiles
+        });
+        return buildDisplayItems([
+            ...loadingItems,
+            ...readyItems
+        ]);
+    }, [
+        files,
+        invalidFiles,
+        loadingCount,
+        loadingFiles
+    ]);
+    return {
+        displayItems
+    };
+};
+export { useDisplayItems };

package/dist/components/FileUploader/hooks/useDndAutoScroll/useDndAutoScroll.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+interface UseDndAutoScrollParams {
+    scrollContainerRef: RefObject<HTMLDivElement>;
+    isDragging: boolean;
+    pointerX: number | null;
+}
+export declare const useDndAutoScroll: ({ scrollContainerRef, isDragging, pointerX, }: UseDndAutoScrollParams) => void;
+export {};

package/dist/components/FileUploader/hooks/useDndAutoScroll/useDndAutoScroll.js

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+import { resolveAutoScrollDirection, resolveNextScrollPosition } from "../../FileUploader.helpers.js";
+const useDndAutoScroll = ({ scrollContainerRef, isDragging, pointerX })=>{
+    const autoScrollAnimationFrameRef = useRef(null);
+    useEffect(()=>{
+        const stopAutoScroll = ()=>{
+            if (null !== autoScrollAnimationFrameRef.current) {
+                cancelAnimationFrame(autoScrollAnimationFrameRef.current);
+                autoScrollAnimationFrameRef.current = null;
+            }
+        };
+        if (isDragging) {
+            const tick = ()=>{
+                const container = scrollContainerRef.current;
+                if (!container) return;
+                const direction = resolveAutoScrollDirection({
+                    container,
+                    pointerX
+                });
+                if ('none' === direction) return;
+                const nextScrollPosition = resolveNextScrollPosition({
+                    container,
+                    direction
+                });
+                container.scrollLeft = nextScrollPosition;
+                autoScrollAnimationFrameRef.current = requestAnimationFrame(tick);
+            };
+            autoScrollAnimationFrameRef.current = requestAnimationFrame(tick);
+        }
+        return stopAutoScroll;
+    }, [
+        scrollContainerRef,
+        isDragging,
+        pointerX
+    ]);
+};
+export { useDndAutoScroll };

package/dist/components/FileUploader/hooks/useFileUploader/useFileUploader.d.ts

@@ -0,0 +1,15 @@
+import { type IUseFileUploaderOptions, type IUseFileUploaderResult } from '../../FileUploader.types';
+/**
+ * Хук для управления состоянием FileUploader поверх API react-dropzone.
+ *
+ * `files` содержит только ready/valid файлы. Элементы с `isLoading: true`
+ * автоматически переносятся в `loadingFiles`, а невалидные файлы - в
+ * `invalidFiles`.
+ *
+ * `setFiles(...)` прогоняет входной список через ту же нормализацию и
+ * валидацию, что и добавление файлов из устройства/реестра.
+ *
+ * @param {IUseFileUploaderOptions} [options] опции react-dropzone и FileUploader
+ * @returns {IUseFileUploaderResult} API react-dropzone и состояние файлов после нормализации
+ */
+export declare const useFileUploader: (options?: IUseFileUploaderOptions) => IUseFileUploaderResult;

package/dist/components/FileUploader/hooks/useFileUploader/useFileUploader.js

@@ -0,0 +1,179 @@
+import { useCallback, useRef, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { nanoid } from "nanoid";
+import { finalizeResolvedFileState, mapRegistryItemToFile, mergeFilesWithLimits, resolveFileCandidates } from "../../FileUploader.helpers.js";
+const DEFAULT_MAX_FILE_SIZE_BYTES = 20000000;
+const resolveMaxFilesLimit = (options)=>{
+    if (options?.multiple === false) return 1;
+    if ('number' == typeof options?.maxFiles && options.maxFiles > 0) return options.maxFiles;
+};
+const resolveDropzoneMaxFiles = ({ currentFilesCount, enableMixedSourcesMode, options, resolvedMaxFiles })=>{
+    if (enableMixedSourcesMode) return Math.max(0, (resolvedMaxFiles ?? currentFilesCount) - currentFilesCount);
+    if (options?.multiple === false) return 1;
+    return options?.maxFiles;
+};
+const useFileUploader = (options)=>{
+    const [files, setFilesState] = useState([]);
+    const [invalidFiles, setInvalidFilesState] = useState([]);
+    const [loadingFiles, setLoadingFilesState] = useState([]);
+    const latestStateRef = useRef({
+        files: [],
+        invalidFiles: [],
+        loadingFiles: []
+    });
+    const latestOptionsRef = useRef({});
+    const { onDrop, maxSize: optionMaxSize, validateFile, onValidationChange, getAdditionalText, enableMixedSourcesMode, ...dropzoneOptions } = options ?? {};
+    latestOptionsRef.current = {
+        onDrop,
+        validateFile,
+        onValidationChange,
+        getAdditionalText,
+        enableMixedSourcesMode
+    };
+    const resolvedMaxSize = optionMaxSize ?? DEFAULT_MAX_FILE_SIZE_BYTES;
+    const resolvedMaxFiles = resolveMaxFilesLimit(options);
+    const currentFilesCount = files.length + invalidFiles.length + loadingFiles.length;
+    const dropzoneMaxFiles = resolveDropzoneMaxFiles({
+        currentFilesCount,
+        enableMixedSourcesMode,
+        options,
+        resolvedMaxFiles
+    });
+    const getCurrentAllFiles = useCallback(()=>[
+            ...latestStateRef.current.files,
+            ...latestStateRef.current.invalidFiles.map(({ file })=>file),
+            ...latestStateRef.current.loadingFiles
+        ], []);
+    const getCurrentFilesSnapshot = useCallback(()=>{
+        const allFiles = getCurrentAllFiles();
+        const allFileIds = new Set(allFiles.map((file)=>file.id));
+        return {
+            allFiles,
+            allFileIds
+        };
+    }, [
+        getCurrentAllFiles
+    ]);
+    const syncAllState = useCallback((nextCandidates)=>{
+        const { validateFile: latestValidateFile, onValidationChange: latestOnValidationChange, getAdditionalText: latestGetAdditionalText } = latestOptionsRef.current;
+        const nextResolvedState = resolveFileCandidates({
+            files: nextCandidates,
+            validateFile: latestValidateFile
+        });
+        const finalizedResolvedState = finalizeResolvedFileState({
+            validFiles: nextResolvedState.validFiles,
+            invalidFiles: nextResolvedState.invalidFiles,
+            loadingFiles: nextResolvedState.loadingFiles,
+            getAdditionalText: latestGetAdditionalText
+        });
+        const nextValidationResult = {
+            validFiles: finalizedResolvedState.validFiles,
+            invalidFiles: finalizedResolvedState.invalidFiles
+        };
+        latestStateRef.current = {
+            files: finalizedResolvedState.validFiles,
+            invalidFiles: finalizedResolvedState.invalidFiles,
+            loadingFiles: finalizedResolvedState.loadingFiles
+        };
+        setFilesState(finalizedResolvedState.validFiles);
+        setInvalidFilesState(finalizedResolvedState.invalidFiles);
+        setLoadingFilesState(finalizedResolvedState.loadingFiles);
+        latestOnValidationChange?.(nextValidationResult);
+        return nextValidationResult;
+    }, []);
+    const setFiles = useCallback((nextFilesOrUpdater)=>{
+        const baseFiles = getCurrentAllFiles();
+        const nextFiles = 'function' == typeof nextFilesOrUpdater ? nextFilesOrUpdater(baseFiles) : nextFilesOrUpdater;
+        syncAllState(nextFiles);
+    }, [
+        getCurrentAllFiles,
+        syncAllState
+    ]);
+    const removeFile = useCallback((targetFile)=>{
+        const baseFiles = getCurrentAllFiles();
+        const nextFiles = [
+            ...baseFiles
+        ];
+        const matchByRefIndex = nextFiles.findIndex((file)=>file === targetFile);
+        if (matchByRefIndex >= 0) {
+            nextFiles.splice(matchByRefIndex, 1);
+            syncAllState(nextFiles);
+            return;
+        }
+        const fallbackIndex = nextFiles.findIndex((file)=>file.id === targetFile.id);
+        if (fallbackIndex < 0) return;
+        nextFiles.splice(fallbackIndex, 1);
+        syncAllState(nextFiles);
+    }, [
+        getCurrentAllFiles,
+        syncAllState
+    ]);
+    const applyLimitsToAppend = useCallback((prevFiles, incomingFiles)=>mergeFilesWithLimits(prevFiles, incomingFiles, {
+            maxFiles: resolvedMaxFiles,
+            maxSize: resolvedMaxSize
+        }), [
+        resolvedMaxFiles,
+        resolvedMaxSize
+    ]);
+    const addRegistryItems = useCallback((items)=>{
+        const existingFiles = getCurrentAllFiles();
+        const nextCandidates = mergeFilesWithLimits(existingFiles, items.map(mapRegistryItemToFile), {
+            maxFiles: resolvedMaxFiles,
+            maxSize: resolvedMaxSize
+        });
+        syncAllState(nextCandidates);
+    }, [
+        getCurrentAllFiles,
+        resolvedMaxFiles,
+        resolvedMaxSize,
+        syncAllState
+    ]);
+    const appendDroppedFiles = useCallback((nextFiles)=>{
+        const { allFiles, allFileIds } = getCurrentFilesSnapshot();
+        const nextCandidates = applyLimitsToAppend(allFiles, nextFiles);
+        const nextValidationResult = syncAllState(nextCandidates);
+        return nextValidationResult.validFiles.filter((file)=>!allFileIds.has(file.id));
+    }, [
+        applyLimitsToAppend,
+        getCurrentFilesSnapshot,
+        syncAllState
+    ]);
+    const handleDrop = (acceptedFiles)=>{
+        const formattedFiles = acceptedFiles.map((f)=>Object.assign(new File([
+                f
+            ], f.name, {
+                type: f.type,
+                lastModified: f.lastModified
+            }), {
+                id: nanoid(),
+                preview: URL.createObjectURL(f),
+                isLoading: false,
+                disableDownload: true
+            }));
+        if (latestOptionsRef.current.enableMixedSourcesMode) {
+            const addedFiles = appendDroppedFiles(formattedFiles);
+            latestOptionsRef.current.onDrop?.(addedFiles);
+            return;
+        }
+        const nextValidationResult = syncAllState(formattedFiles);
+        latestOptionsRef.current.onDrop?.(nextValidationResult.validFiles);
+    };
+    const dropzone = useDropzone({
+        maxSize: resolvedMaxSize,
+        noKeyboard: true,
+        noDrag: true,
+        ...dropzoneOptions,
+        maxFiles: dropzoneMaxFiles,
+        onDrop: handleDrop
+    });
+    return {
+        ...dropzone,
+        files,
+        invalidFiles,
+        loadingFiles,
+        setFiles,
+        removeFile,
+        addRegistryItems
+    };
+};
+export { useFileUploader };

package/dist/components/FileUploader/hooks/useFileUploaderDndState/useFileUploaderDndState.d.ts

@@ -0,0 +1,19 @@
+import { type RefObject } from 'react';
+import { type DragEndEvent, type DragMoveEvent, type DragStartEvent } from '@dnd-kit/core';
+import type { IRenderItem } from '../../FileUploader.types';
+interface UseFileUploaderDndStateParams {
+    displayItems: IRenderItem[];
+    scrollContainerRef: RefObject<HTMLDivElement>;
+    onDragReorder?: (activeId: string, overId: string) => void;
+}
+export declare const useFileUploaderDndState: ({ displayItems, scrollContainerRef, onDragReorder, }: UseFileUploaderDndStateParams) => {
+    sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    sortableItemKeys: string[];
+    activeDragItem: IRenderItem | null;
+    isDragging: boolean;
+    handleDragStart: (event: DragStartEvent) => void;
+    handleDragMove: (event: DragMoveEvent) => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    handleDragCancel: () => void;
+};
+export {};

package/dist/components/FileUploader/hooks/useFileUploaderDndState/useFileUploaderDndState.js

@@ -0,0 +1,64 @@
+import { useCallback, useMemo, useState } from "react";
+import { MouseSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { isDndSortableItem } from "../../FileUploader.helpers.js";
+import { useDndAutoScroll } from "../useDndAutoScroll/useDndAutoScroll.js";
+const useFileUploaderDndState = ({ displayItems, scrollContainerRef, onDragReorder })=>{
+    const [activeDragId, setActiveDragId] = useState(null);
+    const [pointerX, setPointerX] = useState(null);
+    const sortableItemKeys = useMemo(()=>displayItems.filter(isDndSortableItem).map((item)=>item.key), [
+        displayItems
+    ]);
+    const activeDragItem = useMemo(()=>{
+        if (!activeDragId) return null;
+        return displayItems.find((item)=>item.key === activeDragId) ?? null;
+    }, [
+        activeDragId,
+        displayItems
+    ]);
+    const sensors = useSensors(useSensor(MouseSensor, {
+        activationConstraint: {
+            distance: 6
+        }
+    }));
+    useDndAutoScroll({
+        scrollContainerRef,
+        isDragging: Boolean(activeDragId),
+        pointerX
+    });
+    const handleDragStart = useCallback((event)=>{
+        setActiveDragId(String(event.active.id));
+        setPointerX(null);
+    }, []);
+    const handleDragMove = useCallback((event)=>{
+        const translatedRect = event.active.rect.current.translated;
+        if (translatedRect) return void setPointerX(translatedRect.left + translatedRect.width / 2);
+        const sourceEvent = event.activatorEvent;
+        if ('clientX' in sourceEvent && 'number' == typeof sourceEvent.clientX) setPointerX(sourceEvent.clientX);
+    }, []);
+    const resetDragState = useCallback(()=>{
+        setActiveDragId(null);
+        setPointerX(null);
+    }, []);
+    const handleDragEnd = useCallback((event)=>{
+        resetDragState();
+        if (!onDragReorder || !event.over) return;
+        const activeId = String(event.active.id);
+        const nextOverId = String(event.over.id);
+        if (nextOverId === activeId) return;
+        onDragReorder(activeId, nextOverId);
+    }, [
+        onDragReorder,
+        resetDragState
+    ]);
+    return {
+        sensors,
+        sortableItemKeys,
+        activeDragItem,
+        isDragging: Boolean(activeDragId),
+        handleDragStart,
+        handleDragMove,
+        handleDragEnd,
+        handleDragCancel: resetDragState
+    };
+};
+export { useFileUploaderDndState };

package/dist/components/FileUploader/hooks/usePreviewFlow/usePreviewFlow.d.ts

@@ -0,0 +1,16 @@
+import { type FocusEventHandler } from 'react';
+interface PreviewInteractionProps {
+    isOverlayVisible: boolean;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onFocusCapture: FocusEventHandler<HTMLDivElement>;
+    onBlurCapture: FocusEventHandler<HTMLDivElement>;
+}
+interface Result {
+    imgSrc: string;
+    handlePreviewOpen: (previewKey: string, nextImgSrc: string) => void;
+    handlePreviewClose: () => void;
+    getPreviewInteractionProps: (previewKey: string) => PreviewInteractionProps;
+}
+export declare const usePreviewFlow: () => Result;
+export {};