@ozen-ui/kit 0.71.1 → 0.72.0

package/__inner__/esm/components/FileUploader/hooks/useAsFileUploaderDropZone/useAsFileUploaderDropZone.js

@@ -0,0 +1,104 @@
+import { useEventListener } from '../../../../hooks/useEventListener';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+import { useFileUploaderContext } from '../../context';
+import { mergeFiles } from '../../utils';
+export var useAsFileUploaderDropZone = function (ref, options) {
+    var _a = options !== null && options !== void 0 ? options : {}, _b = _a.isWithReactionToClick, isWithReactionToClick = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
+    var _d = useFileUploaderContext(), setDragging = _d.setDragging, setFiles = _d.setFiles, files = _d.files, status = _d.status, openUploader = _d.openUploader, calculateAllow = _d.calculateAllow, onAllowDropChange = _d.onAllowDropChange, onDrop = _d.onDrop;
+    var isActive = !disabled;
+    var isDisabledStatus = status === 'disabled';
+    var isLoadingStatus = status === 'loading';
+    var getDataTransferFiles = function (event) {
+        var _a;
+        var eventFiles = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+        if (!eventFiles) {
+            return [];
+        }
+        return Array.from(eventFiles);
+    };
+    var getDataTransferItems = function (event) {
+        var _a;
+        var eventFiles = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
+        if (!eventFiles) {
+            return [];
+        }
+        return Array.from(eventFiles);
+    };
+    var lastIsAllow = useStoredValue(false);
+    var isDraggingOver = useStoredValue(false);
+    useEventListener({
+        element: ref,
+        eventName: 'dragenter',
+        handler: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (isDraggingOver.current) {
+                return;
+            }
+            var items = getDataTransferItems(event);
+            var calculatedAllow = calculateAllow(items);
+            lastIsAllow.current = calculatedAllow.isAllow;
+            onAllowDropChange(calculatedAllow.isAllow, calculatedAllow.failed);
+            isDraggingOver.current = true;
+            if (!calculatedAllow.isAllow) {
+                return;
+            }
+            setDragging(event, true);
+        },
+        active: isActive,
+    });
+    useEventListener({
+        element: ref,
+        eventName: 'dragover',
+        handler: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        active: isActive,
+    });
+    useEventListener({
+        element: ref,
+        eventName: 'dragleave',
+        handler: function (event) {
+            var _a;
+            event.preventDefault();
+            event.stopPropagation();
+            if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
+                return;
+            }
+            setDragging(event, false);
+            onAllowDropChange(true, []);
+            isDraggingOver.current = false;
+        },
+        active: isActive,
+    });
+    useEventListener({
+        element: ref,
+        eventName: 'drop',
+        handler: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            var eventFiles = getDataTransferFiles(event);
+            onDrop(event, eventFiles);
+            setDragging(event, false);
+            isDraggingOver.current = false;
+            if (!lastIsAllow.current) {
+                onAllowDropChange(true, []);
+                return;
+            }
+            setFiles(mergeFiles(files, eventFiles));
+        },
+        active: isActive,
+    });
+    useEventListener({
+        element: ref,
+        eventName: 'click',
+        handler: function () {
+            if (isLoadingStatus || isDisabledStatus || !isWithReactionToClick) {
+                return;
+            }
+            openUploader();
+        },
+        active: isActive,
+    });
+};

package/__inner__/esm/components/FileUploader/index.d.ts

@@ -0,0 +1,10 @@
+export * from './allowPresets';
+export * from './components';
+export * from './context';
+export * from './entities';
+export * from './hooks';
+export * from './modules';
+export * from './utils';
+export * from './constants';
+export * from './FileUploader';
+export * from './types';

package/__inner__/esm/components/FileUploader/index.js

@@ -0,0 +1,10 @@
+export * from './allowPresets';
+export * from './components';
+export * from './context';
+export * from './entities';
+export * from './hooks';
+export * from './modules';
+export * from './utils';
+export * from './constants';
+export * from './FileUploader';
+export * from './types';

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/FileUploaderDrop.css

@@ -0,0 +1,161 @@
+/* stylelint-disable */
+.FileUploaderDrop {
+  --file-uploader-drop-icon-color: var(--color-content-primary);
+  --file-uploader-drop-border-type: dashed;
+  --file-uploader-drop-border-size: 1px;
+  --file-uploader-drop-label-color: var(--color-content-primary);
+  --file-uploader-drop-hint-color: var(--color-content-secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-block-size: calc(var(--file-uploader-drop-min-block-size) + var(--file-uploader-drop-block-padding) * 2 + var(--file-uploader-drop-border-size) * 2);
+  padding-block: var(--file-uploader-drop-block-padding);
+  padding-inline: var(--file-uploader-drop-inline-padding);
+  border-radius: var(--border-radius-l);
+  border: var(--file-uploader-drop-border-size) var(--file-uploader-drop-border-type);
+  border-color: var(--file-uploader-drop-border-base-color);
+  background-color: var(--file-uploader-drop-background-base-color);
+  transition: border-color var(--transition-default), background-color var(--transition-default);
+  box-sizing: border-box;
+  justify-content: center;
+}
+.FileUploaderDrop_size_s {
+    --file-uploader-drop-min-block-size: 106px;
+    --file-uploader-drop-block-padding: var(--spacing-m);
+    --file-uploader-drop-inline-padding: var(--spacing-m);
+  }
+.FileUploaderDrop_size_s .FileUploaderDrop-Label {
+      font: var(--typography-text-s_1-font);
+      letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
+      text-transform: var(--typography-text-s_1-text_transform, none);
+    }
+.FileUploaderDrop_size_s .FileUploaderDrop-Hint {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+    }
+.FileUploaderDrop_size_m {
+    --file-uploader-drop-min-block-size: 126px;
+    --file-uploader-drop-block-padding: var(--spacing-l);
+    --file-uploader-drop-inline-padding: var(--spacing-l);
+  }
+.FileUploaderDrop_size_m .FileUploaderDrop-Label {
+      font: var(--typography-text-m_1-font);
+      letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
+      text-transform: var(--typography-text-m_1-text_transform, none);
+    }
+.FileUploaderDrop_size_m .FileUploaderDrop-Hint {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+    }
+.FileUploaderDrop_size_l {
+    --file-uploader-drop-min-block-size: 138px;
+    --file-uploader-drop-block-padding: var(--spacing-l);
+    --file-uploader-drop-inline-padding: var(--spacing-l);
+  }
+.FileUploaderDrop_size_l .FileUploaderDrop-Label {
+      font: var(--typography-text-l_1-font);
+      letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
+      text-transform: var(--typography-text-l_1-text_transform, none);
+    }
+.FileUploaderDrop_size_l .FileUploaderDrop-Hint {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+    }
+.FileUploaderDrop_variant_main {
+    --file-uploader-drop-icon-background-color: var(--color-background-secondary);
+
+    /* Border */
+    --file-uploader-drop-border-base-color: var(--color-border-secondary);
+    --file-uploader-drop-border-hover-color: var(--color-border-secondary-hover);
+    --file-uploader-drop-border-pressed-color: var(--color-border-secondary-pressed);
+    --file-uploader-drop-border-drag-color: var(--color-border-action);
+
+    /* Background */
+    --file-uploader-drop-background-base-color: var(--color-background-main);
+    --file-uploader-drop-background-hover-color: var(--color-background-main-hover);
+    --file-uploader-drop-background-pressed-color: var(--color-background-main-hover);
+    --file-uploader-drop-background-drag-color: var(--color-background-main-pressed);
+  }
+.FileUploaderDrop_variant_primary {
+    --file-uploader-drop-icon-background-color: var(--color-background-tertiary);
+
+    /* Border */
+    --file-uploader-drop-border-base-color: var(--color-border-main);
+    --file-uploader-drop-border-hover-color: var(--color-border-main-hover);
+    --file-uploader-drop-border-pressed-color: var(--color-border-main-pressed);
+    --file-uploader-drop-border-drag-color: var(--color-border-action);
+
+    /* Background */
+    --file-uploader-drop-background-base-color: var(--color-background-primary);
+    --file-uploader-drop-background-hover-color: var(--color-background-primary-hover);
+    --file-uploader-drop-background-pressed-color: var(--color-background-primary-hover);
+    --file-uploader-drop-background-drag-color: var(--color-background-primary-pressed);
+  }
+.FileUploaderDrop_withReactionToClick {
+    cursor: pointer;
+  }
+.FileUploaderDrop_status_default.FileUploaderDrop:hover {
+    border-color: var(--file-uploader-drop-border-hover-color);
+    background-color: var(--file-uploader-drop-background-hover-color);
+  }
+.FileUploaderDrop_status_default.FileUploaderDrop:active {
+    border-color: var(--file-uploader-drop-border-pressed-color);
+    background-color: var(--file-uploader-drop-background-pressed-color);
+  }
+.FileUploaderDrop_dragging {
+    --file-uploader-drop-border-type: solid;
+    border-color: var(--file-uploader-drop-border-drag-color);
+    background-color: var(--file-uploader-drop-background-drag-color);
+  }
+.FileUploaderDrop_status_loading {
+    border-color: var(--file-uploader-drop-border-base-color);
+    background-color: var(--color-background-disabled);
+    cursor: wait;
+  }
+.FileUploaderDrop_status_error.FileUploaderDrop_variant_main {
+    border-color: var(--color-border-error);
+    background-color: var(--color-background-main)
+  }
+.FileUploaderDrop_status_error.FileUploaderDrop_variant_primary {
+    border-color: var(--color-border-error);
+    background-color: var(--color-background-primary)
+  }
+.FileUploaderDrop_status_disabled {
+    --file-uploader-drop-border-type: solid;
+    --file-uploader-drop-icon-color: var(--color-content-disabled);
+    --file-uploader-drop-label-color: var(--color-content-disabled);
+    --file-uploader-drop-hint-color: var(--color-content-disabled);
+    border-color: var(--color-border-disabled);
+    background-color: var(--color-background-disabled);
+    cursor: not-allowed;
+  }
+.FileUploaderDrop-Icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    border-radius: 100%;
+    padding: var(--spacing-2xs);
+    background-color: var(--file-uploader-drop-icon-background-color);
+    transition: background-color var(--transition-default);
+    color: var(--file-uploader-drop-icon-color);
+    margin-block-end: var(--spacing-2xs);
+    cursor: pointer;
+  }
+.FileUploaderDrop-Label {
+    color: var(--file-uploader-drop-label-color);
+    transition: color var(--transition-default);
+    text-align: center;
+  }
+.FileUploaderDrop-Hint {
+    margin-block-start: var(--spacing-3xs);
+    color: var(--file-uploader-drop-hint-color);
+    transition: color var(--transition-default);
+    text-align: center;
+  }
+.FileUploaderDrop-Button {
+    margin-block-start: var(--spacing-4xs);
+  }

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/FileUploaderDrop.d.ts

@@ -0,0 +1,3 @@
+import type { FileUploaderDropBaseProps } from './types';
+export declare const cnFileUploaderDrop: import("@bem-react/classname").ClassNameFormatter;
+export declare const FileUploaderDrop: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FileUploaderDropBaseProps, "div", "as">;

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/FileUploaderDrop.js

@@ -0,0 +1,53 @@
+import { __assign, __rest } from "tslib";
+import React, { useRef } from 'react';
+import { UploadIcon } from '@ozen-ui/icons';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn } from '../../../../utils/classname';
+import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import { renderContent } from '../../../../utils/renderContent';
+import { useFileUploaderContext } from '../../context';
+import { useAsFileUploaderDropZone } from '../../hooks';
+import { FileUploaderLoader } from '../FileUploaderLoader';
+import { FileUploaderUploadButton } from '../FileUploaderUploadButton';
+import { FILE_UPLOADER_DROP_DEFAULT_TAG, FILE_UPLOADER_DROP_DEFAULT_WITH_REACTION_TO_CLICK, FILE_UPLOADER_SIZE_TO_DROP_ICON_SIZE, } from './constants';
+export var cnFileUploaderDrop = cn('FileUploaderDrop');
+export var FileUploaderDrop = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'FileUploaderDrop',
+    });
+    var children = props.children, className = props.className, _a = props.as, Tag = _a === void 0 ? FILE_UPLOADER_DROP_DEFAULT_TAG : _a, label = props.label, hint = props.hint, _b = props.icon, icon = _b === void 0 ? UploadIcon : _b, button = props.button, _c = props.withReactionToClick, withReactionToClick = _c === void 0 ? FILE_UPLOADER_DROP_DEFAULT_WITH_REACTION_TO_CLICK : _c, _d = props.loader, loader = _d === void 0 ? React.createElement(FileUploaderLoader, null) : _d, other = __rest(props, ["children", "className", "as", "label", "hint", "icon", "button", "withReactionToClick", "loader"]);
+    var _e = useFileUploaderContext(), dragging = _e.dragging, size = _e.size, variant = _e.variant, status = _e.status, openUploader = _e.openUploader;
+    var internalRef = useRef(null);
+    useAsFileUploaderDropZone(internalRef, {
+        isWithReactionToClick: withReactionToClick,
+    });
+    var isLoading = status === 'loading';
+    return (React.createElement(Tag, __assign({}, other, { ref: useMultiRef([ref, internalRef]), className: cnFileUploaderDrop({
+            size: size,
+            dragging: dragging,
+            variant: variant,
+            status: status,
+            withReactionToClick: withReactionToClick,
+        }, [className]) }),
+        isLoading ? (loader) : (React.createElement(React.Fragment, null,
+            icon && (React.createElement("div", { className: cnFileUploaderDrop('Icon') }, renderContent({
+                content: icon,
+                props: {
+                    size: FILE_UPLOADER_SIZE_TO_DROP_ICON_SIZE[size],
+                    onClick: function (event) {
+                        if (withReactionToClick) {
+                            return;
+                        }
+                        event.stopPropagation();
+                        openUploader();
+                    },
+                },
+            }))),
+            React.createElement("div", { className: cnFileUploaderDrop('Label') }, label),
+            hint && React.createElement("div", { className: cnFileUploaderDrop('Hint') }, hint),
+            button && (React.createElement(FileUploaderUploadButton, { className: cnFileUploaderDrop('Button'), disableOpen: withReactionToClick }, button)))),
+        children));
+});
+FileUploaderDrop.displayName = 'FileUploaderDrop';

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/constants.d.ts

@@ -0,0 +1,5 @@
+import type { IconSize } from '@ozen-ui/icons';
+import type { FileUploaderSizeVariant } from '../../entities';
+export declare const FILE_UPLOADER_DROP_DEFAULT_TAG = "div";
+export declare const FILE_UPLOADER_DROP_DEFAULT_WITH_REACTION_TO_CLICK = true;
+export declare const FILE_UPLOADER_SIZE_TO_DROP_ICON_SIZE: Readonly<Record<FileUploaderSizeVariant, IconSize>>;

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/constants.js

@@ -0,0 +1,7 @@
+export var FILE_UPLOADER_DROP_DEFAULT_TAG = 'div';
+export var FILE_UPLOADER_DROP_DEFAULT_WITH_REACTION_TO_CLICK = true;
+export var FILE_UPLOADER_SIZE_TO_DROP_ICON_SIZE = {
+    s: 's',
+    m: 'm',
+    l: 'm',
+};

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './FileUploaderDrop';
+export * from './types';

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './FileUploaderDrop';
+export * from './types';

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/types.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentRef, ElementType, ReactNode } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
+import type { PolymorphicComponentPropsWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../../../utils/renderContent';
+import type { FILE_UPLOADER_DROP_DEFAULT_TAG } from './constants';
+export type FileUploaderDropIcon = RenderContentType<IconProps>['content'];
+export type FileUploaderDropBaseProps = {
+    /** Иконка */
+    icon?: FileUploaderDropIcon | null;
+    /** Лейбл */
+    label: ReactNode;
+    /** Hint */
+    hint?: ReactNode;
+    /** Кнопка */
+    button?: ReactNode;
+    /** Если `true` реагирует на клик */
+    withReactionToClick?: boolean;
+    /** Компонент загрузки */
+    loader?: ReactNode;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type FileUploaderDropProps<As extends ElementType = typeof FILE_UPLOADER_DROP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<FileUploaderDropBaseProps, As>;
+export type FileUploaderDropRef<As extends ElementType = typeof FILE_UPLOADER_DROP_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/FileUploader/modules/FileUploaderInput/FileUploaderInput.css

@@ -0,0 +1,3 @@
+.FileUploaderInput {
+  display: none;
+}

package/__inner__/esm/components/FileUploader/modules/FileUploaderInput/FileUploaderInput.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const cnFileUploaderInput: import("@bem-react/classname").ClassNameFormatter;
+export declare const FileUploaderInput: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange" | "type" | "multiple" | "accept"> & {
+    'data-testid'?: string;
+} & React.RefAttributes<HTMLInputElement>>;

package/__inner__/esm/components/FileUploader/modules/FileUploaderInput/FileUploaderInput.js

@@ -0,0 +1,42 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn } from '../../../../utils/classname';
+import { useFileUploaderContext } from '../../context';
+import { mergeFiles } from '../../utils';
+export var cnFileUploaderInput = cn('FileUploaderInput');
+export var FileUploaderInput = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'FileUploaderInput',
+    });
+    var className = props.className, other = __rest(props, ["className"]);
+    var internalInputRef = useRef(null);
+    var _a = useFileUploaderContext(), files = _a.files, inputRef = _a.inputRef, setFiles = _a.setFiles, accept = _a.accept, multiple = _a.multiple, calculateAllow = _a.calculateAllow, onAllowUploadChange = _a.onAllowUploadChange;
+    useEffect(function () {
+        if (!internalInputRef.current) {
+            return;
+        }
+        if (typeof DataTransfer === 'undefined') {
+            return;
+        }
+        var dataTransfer = new DataTransfer();
+        files.forEach(function (file) { return dataTransfer.items.add(file); });
+        internalInputRef.current.files = dataTransfer.files;
+    }, [files]);
+    return (React.createElement("input", __assign({}, other, { className: cnFileUploaderInput('', [className]), type: "file", accept: accept, multiple: multiple, ref: useMultiRef([internalInputRef, inputRef, ref]), onChange: function (event) {
+            var rawFiles = event.target.files;
+            if (!rawFiles) {
+                return;
+            }
+            var arrayRawFiles = Array.from(rawFiles);
+            var calculatedAllow = calculateAllow(arrayRawFiles);
+            onAllowUploadChange(calculatedAllow.isAllow, calculatedAllow.failed);
+            if (!calculatedAllow.isAllow) {
+                return;
+            }
+            setFiles(mergeFiles(files, arrayRawFiles));
+        } })));
+});
+FileUploaderInput.displayName = 'FileUploaderInput';

package/__inner__/esm/components/FileUploader/modules/FileUploaderInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FileUploaderInput';
+export * from './types';

package/__inner__/esm/components/FileUploader/modules/FileUploaderInput/index.js

@@ -0,0 +1,2 @@
+export * from './FileUploaderInput';
+export * from './types';

package/__inner__/esm/components/FileUploader/modules/FileUploaderInput/types.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type FileUploaderInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'value' | 'onChange' | 'type' | 'multiple' | 'accept'> & {
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};

package/__inner__/esm/components/FileUploader/modules/FileUploaderInput/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/FileUploaderList.css

@@ -0,0 +1,4 @@
+.FileUploaderList {
+  padding: 0;
+  margin: 0;
+}

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/FileUploaderList.d.ts

@@ -0,0 +1,3 @@
+import type { FileUploaderListBaseProps } from './types';
+export declare const cnFileUploaderList: import("@bem-react/classname").ClassNameFormatter;
+export declare const FileUploaderList: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FileUploaderListBaseProps, "ul", "as">;

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/FileUploaderList.js

@@ -0,0 +1,33 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { DeleteIcon, DownloadFileIcon } from '@ozen-ui/icons';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn } from '../../../../utils/classname';
+import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import { FileIconButton } from '../../../FileNext';
+import { Stack } from '../../../Stack';
+import { useFileUploaderContext } from '../../context';
+import { FileUploaderListItem } from '../FileUploaderListItem';
+import { FILE_UPLOADER_FILE_STATUS_TO_LIST_FILE_STATUS, FILE_UPLOADER_LIST_DEFAULT_TAG, } from './constants';
+export var cnFileUploaderList = cn('FileUploaderList');
+export var FileUploaderList = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'FileUploaderList',
+    });
+    var _a = props.as, as = _a === void 0 ? FILE_UPLOADER_LIST_DEFAULT_TAG : _a, className = props.className, renderItem = props.renderItem, other = __rest(props, ["as", "className", "renderItem"]);
+    var _b = useFileUploaderContext(), filesInfos = _b.filesInfos, deleteFile = _b.deleteFile;
+    if (filesInfos.length === 0) {
+        return null;
+    }
+    var renderItemDefault = function (info) {
+        var _a, _b;
+        return (React.createElement(FileUploaderListItem, { key: info.id, file: (_a = info.format) !== null && _a !== void 0 ? _a : React.createElement(DownloadFileIcon, null), status: FILE_UPLOADER_FILE_STATUS_TO_LIST_FILE_STATUS[info.status], hint: info.status === 'error'
+                ? (_b = info.errorMessage) !== null && _b !== void 0 ? _b : info.description
+                : info.description, trailing: React.createElement(FileIconButton, { icon: DeleteIcon, onClick: function () { return deleteFile(info); }, disabled: info.status === 'loading' }) }, info.name));
+    };
+    return (React.createElement(Stack, __assign({}, other, { as: as, className: cnFileUploaderList('', [className]), gap: "xs", direction: "column", ref: ref }), filesInfos.map(function (info) {
+        return renderItem ? renderItem(info) : renderItemDefault(info);
+    })));
+});
+FileUploaderList.displayName = 'FileUploaderList';

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/constants.d.ts

@@ -0,0 +1,4 @@
+import type { FileStatusVariant } from '../../../FileNext';
+import type { FileUploaderFileStatus } from '../../entities';
+export declare const FILE_UPLOADER_LIST_DEFAULT_TAG = "ul";
+export declare const FILE_UPLOADER_FILE_STATUS_TO_LIST_FILE_STATUS: Readonly<Record<FileUploaderFileStatus, FileStatusVariant>>;

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/constants.js

@@ -0,0 +1,6 @@
+export var FILE_UPLOADER_LIST_DEFAULT_TAG = 'ul';
+export var FILE_UPLOADER_FILE_STATUS_TO_LIST_FILE_STATUS = {
+    loaded: 'default',
+    loading: 'loading',
+    error: 'error',
+};

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/entities/index.d.ts

@@ -0,0 +1 @@
+export * from './renderItem';

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/entities/index.js

@@ -0,0 +1 @@
+export * from './renderItem';

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/entities/renderItem.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+import type { FileUploaderFileInfo } from '../../../entities';
+export type FileUploaderListRenderItem = (fileInfo: FileUploaderFileInfo) => ReactNode;

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/entities/renderItem.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/index.d.ts

@@ -0,0 +1,4 @@
+export * from './entities';
+export * from './constants';
+export * from './FileUploaderList';
+export * from './types';

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/index.js

@@ -0,0 +1,4 @@
+export * from './entities';
+export * from './constants';
+export * from './FileUploaderList';
+export * from './types';

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { FILE_UPLOADER_LIST_DEFAULT_TAG } from './constants';
+import type { FileUploaderListRenderItem } from './entities';
+export type FileUploaderListBaseProps = {
+    /** Функция для рендера элемента списка */
+    renderItem?: FileUploaderListRenderItem;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type FileUploaderListProps<As extends ElementType = typeof FILE_UPLOADER_LIST_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<FileUploaderListBaseProps, As>;
+export type FileUploaderListRef<As extends ElementType = typeof FILE_UPLOADER_LIST_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/esm/components/FileUploader/modules/FileUploaderList/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/FileUploader/modules/FileUploaderListItem/FileUploaderListItem.d.ts

@@ -0,0 +1,3 @@
+import type { FileUploaderListItemBaseProps } from './types';
+export declare const cnFileUploaderListItem: import("@bem-react/classname").ClassNameFormatter;
+export declare const FileUploaderListItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FileUploaderListItemBaseProps, "li", "as">;

package/__inner__/esm/components/FileUploader/modules/FileUploaderListItem/FileUploaderListItem.js

@@ -0,0 +1,19 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn } from '../../../../utils/classname';
+import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import { File } from '../../../FileNext';
+import { useFileUploaderContext } from '../../context';
+import { FILE_UPLOADER_LIST_ITEM_DEFAULT_TAG, FILE_UPLOADER_SIZE_TO_LIST_FILE_SIZE, } from './constants';
+export var cnFileUploaderListItem = cn('FileUploaderListItem');
+export var FileUploaderListItem = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'FileUploaderListItem',
+    });
+    var _a = props.as, as = _a === void 0 ? FILE_UPLOADER_LIST_ITEM_DEFAULT_TAG : _a, className = props.className, children = props.children, other = __rest(props, ["as", "className", "children"]);
+    var size = useFileUploaderContext().size;
+    return (React.createElement(File, __assign({}, other, { as: as, ref: ref, className: cnFileUploaderListItem('', [className]), size: FILE_UPLOADER_SIZE_TO_LIST_FILE_SIZE[size] }), children));
+});
+FileUploaderListItem.displayName = 'FileUploaderListItem';

package/__inner__/esm/components/FileUploader/modules/FileUploaderListItem/constants.d.ts

@@ -0,0 +1,4 @@
+import type { FileSizeVariant } from '../../../FileNext';
+import type { FileUploaderSizeVariant } from '../../entities';
+export declare const FILE_UPLOADER_LIST_ITEM_DEFAULT_TAG = "li";
+export declare const FILE_UPLOADER_SIZE_TO_LIST_FILE_SIZE: Readonly<Record<FileUploaderSizeVariant, FileSizeVariant>>;

package/__inner__/esm/components/FileUploader/modules/FileUploaderListItem/constants.js

@@ -0,0 +1,6 @@
+export var FILE_UPLOADER_LIST_ITEM_DEFAULT_TAG = 'li';
+export var FILE_UPLOADER_SIZE_TO_LIST_FILE_SIZE = {
+    s: 'm',
+    m: 'm',
+    l: 'l',
+};

package/__inner__/esm/components/FileUploader/modules/FileUploaderListItem/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './FileUploaderListItem';
+export * from './types';

package/__inner__/esm/components/FileUploader/modules/FileUploaderListItem/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './FileUploaderListItem';
+export * from './types';