@alfalab/core-components 1.18.0 → 2.0.0-beta.3

package/attach/modern/Component.d.ts

@@ -1,48 +1,8 @@
 /// <reference types="react" />
 import React from 'react';
-import { InputHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes } from "react";
-type ComponentProps = {
-    /**
-     * Тип кнопки
-     */
-    view?: "primary" | "secondary" | "outlined" | "link" | "ghost";
-    /**
-     * Слот слева
-     */
-    leftAddons?: React.ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: React.ReactNode;
-    /**
-     * Размер компонента
-     */
-    size?: "xs" | "s" | "m" | "l";
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Выводит ссылку в виде кнопки
-     */
-    href?: AnchorHTMLAttributes<HTMLAnchorElement>["href"];
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * Показать лоадер
-     */
-    loading?: boolean;
-};
-type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps>;
-type AttachProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value'> & {
+import { InputHTMLAttributes, ButtonHTMLAttributes, ChangeEvent, MouseEvent } from "react";
+import { ButtonProps } from "../../button";
+type AttachProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'multiple'> & {
     /**
      * Содержимое кнопки для выбора файла
      */
@@ -55,6 +15,14 @@ type AttachProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' |
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для блока с файлами
+     */
+    fileClassName?: string;
+    /**
+     * Дополнительный класс для блока с подсказкой, когда файл не загружен
+     */
+    noFileClassName?: string;
     /**
      * Число символов, после которого имя файла будет обрезаться
      */
@@ -72,15 +40,33 @@ type AttachProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' |
      */
     size?: 'xs' | 's' | 'm' | 'l';
     /**
-     * Содержимое поля ввода, указанное по умолчанию. Принимает массив объектов типа File или null.
+     * Возможность прикрепления нескольких файлов
+     */
+    multiple?: boolean;
+    /**
+     * Содержимое поля ввода. Принимает массив объектов типа File или null.
      */
     value?: File[] | null;
+    /**
+     * Содержимое поля ввода, указанное по умолчанию. Принимает массив объектов типа File или null.
+     */
+    defaultValue?: File[] | null;
+    /**
+     * Обработчик поля ввода
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        files: File[];
+    }) => void;
+    /**
+     * Обработчик нажатия на кнопку очистки
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
 };
-declare const Attach: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "className" | "form" | "slot" | "style" | "title" | "pattern" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width"> & {
+declare const Attach: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "className" | "form" | "slot" | "style" | "title" | "pattern" | "children" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src" | "width"> & {
     /**
      * Содержимое кнопки для выбора файла
      */
@@ -88,11 +74,19 @@ declare const Attach: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttrib
     /**
      * Свойства для кнопки
      */
-    buttonProps?: (Partial<ComponentProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.ButtonHTMLAttributes<HTMLButtonElement>) | (Partial<ComponentProps & React.ButtonHTMLAttributes<HTMLButtonElement>> & React.ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
+    buttonProps?: (Partial<import("../../button").ComponentProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.ButtonHTMLAttributes<HTMLButtonElement>) | (Partial<import("../../button").ComponentProps & React.ButtonHTMLAttributes<HTMLButtonElement>> & React.ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
     /**
      * Дополнительный класс
      */
     className?: string | undefined;
+    /**
+     * Дополнительный класс для блока с файлами
+     */
+    fileClassName?: string | undefined;
+    /**
+     * Дополнительный класс для блока с подсказкой, когда файл не загружен
+     */
+    noFileClassName?: string | undefined;
     /**
      * Число символов, после которого имя файла будет обрезаться
      */
@@ -110,9 +104,27 @@ declare const Attach: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttrib
      */
     size?: "s" | "xs" | "m" | "l" | undefined;
     /**
-     * Содержимое поля ввода, указанное по умолчанию. Принимает массив объектов типа File или null.
+     * Возможность прикрепления нескольких файлов
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Содержимое поля ввода. Принимает массив объектов типа File или null.
      */
     value?: File[] | null | undefined;
+    /**
+     * Содержимое поля ввода, указанное по умолчанию. Принимает массив объектов типа File или null.
+     */
+    defaultValue?: File[] | null | undefined;
+    /**
+     * Обработчик поля ввода
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        files: File[];
+    }) => void) | undefined;
+    /**
+     * Обработчик нажатия на кнопку очистки
+     */
+    onClear?: ((event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void) | undefined;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/attach/modern/Component.js

@@ -1,30 +1,33 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
+import { AttachmentSBlackIcon } from '@alfalab/icons-classic/AttachmentSBlackIcon';
+import { AttachmentMBlackIcon } from '@alfalab/icons-classic/AttachmentMBlackIcon';
+import { pluralize } from '@alfalab/utils';
 import { Button } from '../../button/modern';
 import { ProgressBar } from '../../progress-bar/modern';
 import { KeyboardFocusable } from '../../keyboard-focusable/modern';
-import { AttachmentSBlackIcon, AttachmentMBlackIcon } from '@alfalab/icons-classic';
-import { pluralize } from '@alfalab/utils';
 import { truncateFilename } from './utils/index.js';
 
-var styles = {"component":"attach__component_18qyy","label":"attach__label_18qyy","control":"attach__control_18qyy","xs":"attach__xs_18qyy","file":"attach__file_18qyy","noFile":"attach__noFile_18qyy","s":"attach__s_18qyy","m":"attach__m_18qyy","l":"attach__l_18qyy","clear":"attach__clear_18qyy","progressBar":"attach__progressBar_18qyy","disabled":"attach__disabled_18qyy","icon":"attach__icon_18qyy","focused":"attach__focused_18qyy"};
+var styles = {"component":"attach__component_kpt0e","label":"attach__label_kpt0e","control":"attach__control_kpt0e","xs":"attach__xs_kpt0e","file":"attach__file_kpt0e","noFile":"attach__noFile_kpt0e","s":"attach__s_kpt0e","m":"attach__m_kpt0e","l":"attach__l_kpt0e","clear":"attach__clear_kpt0e","progressBar":"attach__progressBar_kpt0e","disabled":"attach__disabled_kpt0e","icon":"attach__icon_kpt0e","focused":"attach__focused_kpt0e"};
 require('./index.css');
 
 const MULTIPLE_TEXTS = ['файл', 'файла', 'файлов'];
-const Attach = React.forwardRef(({ size = 's', accept, buttonContent = 'Выберите файл', buttonProps = {}, className, disabled, dataTestId, id, maxFilenameLength, multiple, noFileText = 'Нет файла', progressBarPercent, value, onChange, ...restProps }, ref) => {
-    const [files, setFiles] = useState(value || []);
+const Attach = React.forwardRef(({ size = 's', accept, buttonContent = 'Выберите файл', buttonProps = {}, className, fileClassName, noFileClassName, disabled, dataTestId, id, maxFilenameLength, multiple, noFileText = 'Нет файла', progressBarPercent, defaultValue, value, onChange, onClear, ...restProps }, ref) => {
+    const uncontrolled = value === undefined;
+    const [files, setFiles] = useState(defaultValue || []);
     const inputRef = useRef(null);
     const labelRef = useRef(null);
     const buttonRef = useRef(null);
     const handleInputChange = useCallback((event) => {
-        if (event.target.files) {
-            setFiles(Array.from(event.target.files));
-        }
+        const filesArray = event.target.files ? Array.from(event.target.files) : [];
         if (onChange) {
-            onChange(event);
+            onChange(event, { files: filesArray });
+        }
+        if (uncontrolled && event.target.files) {
+            setFiles(filesArray);
         }
-    }, [onChange]);
+    }, [onChange, uncontrolled]);
     const handleButtonClick = useCallback(event => {
         if (labelRef.current) {
             labelRef.current.click();
@@ -36,30 +39,40 @@ const Attach = React.forwardRef(({ size = 's', accept, buttonContent = 'Выбе
             buttonProps.onClick(event);
         }
     }, [buttonProps]);
-    const handleClearClick = useCallback(() => {
+    const handleClearClick = useCallback(ev => {
         if (inputRef.current) {
             inputRef.current.value = '';
         }
-        setFiles([]);
-    }, []);
+        if (uncontrolled) {
+            setFiles([]);
+        }
+        if (onClear) {
+            onClear(ev);
+        }
+    }, [onClear, uncontrolled]);
     const Icon = size === 'xs' ? AttachmentSBlackIcon : AttachmentMBlackIcon;
     const statusTextContent = files.length === 1 ? (truncateFilename(files[0].name, maxFilenameLength)) : (React.createElement("abbr", { title: files.map(file => file.name).join() },
         files.length,
         " ",
         pluralize(files.length, ...MULTIPLE_TEXTS)));
-    return (React.createElement("div", { className: cn(cn(styles.component, styles[size], {
+    useEffect(() => {
+        if (!uncontrolled) {
+            setFiles(value || []);
+        }
+    }, [uncontrolled, value]);
+    return (React.createElement("div", { className: cn(styles.component, styles[size], {
             [styles.disabled]: disabled,
-        }, className)) },
-        React.createElement(Button, Object.assign({}, buttonProps, { size: size, disabled: disabled, view: (buttonProps && buttonProps.view) || 'outlined', leftAddons: (buttonProps && buttonProps.leftAddons) || (React.createElement(Icon, { className: cn(styles.icon) })), onClick: handleButtonClick, ref: buttonRef }),
+        }, className) },
+        React.createElement(Button, Object.assign({}, buttonProps, { size: size, disabled: disabled, view: (buttonProps && buttonProps.view) || 'tertiary', leftAddons: (buttonProps && buttonProps.leftAddons) || React.createElement(Icon, { className: styles.icon }), onClick: handleButtonClick, ref: buttonRef }),
             React.createElement("span", null, buttonContent)),
-        React.createElement("label", { className: cn(styles.label), htmlFor: id, ref: labelRef },
-            React.createElement("input", Object.assign({}, restProps, { className: cn(styles.control), accept: accept, disabled: disabled, id: id, multiple: multiple, tabIndex: -1, type: 'file', onChange: handleInputChange, ref: mergeRefs([ref, inputRef]), "data-test-id": dataTestId }))),
-        files && files.length > 0 ? (React.createElement("div", { className: cn(styles.file) },
+        React.createElement("label", { className: styles.label, htmlFor: id, ref: labelRef },
+            React.createElement("input", Object.assign({}, restProps, { className: styles.control, accept: accept, disabled: disabled, id: id, multiple: multiple, tabIndex: -1, type: 'file', onChange: handleInputChange, ref: mergeRefs([ref, inputRef]), "data-test-id": dataTestId }))),
+        files && files.length > 0 ? (React.createElement("div", { className: cn(styles.file, fileClassName) },
             React.createElement("span", null, statusTextContent),
-            React.createElement(KeyboardFocusable, null, (ref, focused) => (React.createElement("button", { "aria-label": '\u043E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', type: 'button', className: cn(styles.clear, {
+            React.createElement(KeyboardFocusable, null, (targetRef, focused) => (React.createElement("button", { "aria-label": '\u043E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', type: 'button', className: cn(styles.clear, {
                     [styles.focused]: focused,
-                }), onClick: handleClearClick, ref: ref }))),
-            progressBarPercent && (React.createElement(ProgressBar, { className: cn(styles.progressBar), value: progressBarPercent, view: 'positive' })))) : (React.createElement("div", { className: cn(styles.noFile) }, noFileText))));
+                }), onClick: handleClearClick, ref: targetRef }))),
+            progressBarPercent && (React.createElement(ProgressBar, { className: styles.progressBar, value: progressBarPercent, view: 'positive' })))) : (React.createElement("div", { className: cn(styles.noFile, noFileClassName) }, noFileText))));
 });
 /**
  * Для отображения в сторибуке

package/attach/modern/index.css

@@ -1,13 +1,22 @@
+/* hash: 1stnz */
 :root {
-    --color-blue-link-web: #0f62fe;
+    --color-light-border-link: #007aff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
 }
 :root {
     --gap-2xs: 4px;
 }
 :root {
-    --focus-color: var(--color-blue-link-web);
+    --focus-color: var(--color-light-border-link);
 }
-.attach__component_18qyy {
+.attach__component_kpt0e {
     display: inline-flex;
     align-items: center;
     position: relative;
@@ -17,7 +26,7 @@
         box-sizing: border-box;
     }
 }
-.attach__label_18qyy {
+.attach__label_kpt0e {
     position: absolute;
     top: 0;
     left: 0;
@@ -27,45 +36,45 @@
     width: 0;
     height: 0;
 }
-.attach__control_18qyy {
+.attach__control_kpt0e {
     opacity: 0;
     cursor: inherit
 }
-.attach__control_18qyy::-webkit-file-upload-button {
+.attach__control_kpt0e::-webkit-file-upload-button {
         cursor: inherit;
     }
 /* TODO обновить типографику на новую, когда ее зарелизят */
-.attach__xs_18qyy .attach__file_18qyy,
-.attach__xs_18qyy .attach__noFile_18qyy {
+.attach__xs_kpt0e .attach__file_kpt0e,
+.attach__xs_kpt0e .attach__noFile_kpt0e {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
 }
-.attach__s_18qyy .attach__file_18qyy,
-.attach__s_18qyy .attach__noFile_18qyy {
+.attach__s_kpt0e .attach__file_kpt0e,
+.attach__s_kpt0e .attach__noFile_kpt0e {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
 }
-.attach__m_18qyy .attach__file_18qyy,
-.attach__m_18qyy .attach__noFile_18qyy {
+.attach__m_kpt0e .attach__file_kpt0e,
+.attach__m_kpt0e .attach__noFile_kpt0e {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
 }
-.attach__l_18qyy .attach__file_18qyy,
-.attach__l_18qyy .attach__noFile_18qyy {
+.attach__l_kpt0e .attach__file_kpt0e,
+.attach__l_kpt0e .attach__noFile_kpt0e {
     font-size: 18px;
     line-height: 22px;
     font-weight: 400;
 }
-.attach__file_18qyy,
-.attach__noFile_18qyy {
+.attach__file_kpt0e,
+.attach__noFile_kpt0e {
     display: inline-block;
     margin-left: 0.5em;
     text-align: center;
 }
-.attach__clear_18qyy {
+.attach__clear_kpt0e {
     margin: 0 0 0 5px;
     padding: 0;
     cursor: pointer;
@@ -77,21 +86,21 @@
     background: none;
     border: none
 }
-.attach__clear_18qyy:before {
+.attach__clear_kpt0e:before {
         content: '\D7';
     }
-.attach__progressBar_18qyy {
+.attach__progressBar_kpt0e {
     margin-top: var(--gap-2xs);
 }
-.attach__disabled_18qyy .attach__noFile_18qyy,
-.attach__disabled_18qyy .attach__file_18qyy,
-.attach__disabled_18qyy .attach__icon_18qyy {
+.attach__disabled_kpt0e .attach__noFile_kpt0e,
+.attach__disabled_kpt0e .attach__file_kpt0e,
+.attach__disabled_kpt0e .attach__icon_kpt0e {
     opacity: 0.3;
 }
-.attach__disabled_18qyy .attach__clear_18qyy {
+.attach__disabled_kpt0e .attach__clear_kpt0e {
     display: none;
 }
-.attach__focused_18qyy {
+.attach__focused_kpt0e {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/attach/modern/index.js

@@ -1,10 +1,11 @@
 import 'react';
 import 'classnames';
 import 'react-merge-refs';
+import '@alfalab/icons-classic/AttachmentSBlackIcon';
+import '@alfalab/icons-classic/AttachmentMBlackIcon';
+import '@alfalab/utils';
 import '../../button/modern';
 import '../../progress-bar/modern';
 import '../../keyboard-focusable/modern';
-import '@alfalab/icons-classic';
-import '@alfalab/utils';
 import './utils/index.js';
 export { Attach } from './Component.js';

package/attach/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "./esm/index.js"
+}

package/attach/send-stats.js

@@ -0,0 +1,82 @@
+const http = require('http');
+const fs = require('fs');
+const { promisify } = require('util');
+const path = require('path');
+
+const readFile = promisify(fs.readFile);
+
+async function main() {
+    const remoteHost = process.env.NIS_HOST || 'digital';
+    const remotePort = process.env.NIS_PORT || 80;
+    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
+
+    try {
+        const [_, node, os, arch] =
+            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
+        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+
+        let ownPackageJson, packageJson;
+
+        try {
+            const result = await Promise.all([
+                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
+                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
+            ]);
+
+            ownPackageJson = JSON.parse(result[0]);
+            packageJson = JSON.parse(result[1]);
+        } catch (err) {
+            ownPackageJson = '';
+            packageJson = '';
+        }
+
+        const data = {
+            node,
+            npm,
+            yarn,
+            os,
+            arch,
+            ownPackageJson: JSON.stringify(ownPackageJson),
+            packageJson: JSON.stringify(packageJson),
+        };
+
+        const body = JSON.stringify(data);
+
+        const options = {
+            host: remoteHost,
+            port: remotePort,
+            path: remotePath,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': body.length,
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            const req = http.request(options, res => {
+                res.on('end', () => {
+                    resolve();
+                });
+            });
+
+            req.on('error', () => {
+                reject();
+            });
+
+            req.write(body);
+            req.end();
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+main()
+    .then(() => {
+        process.exit(0);
+    })
+    .catch(() => {
+        process.exit(0);
+    });

package/backdrop/Component.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent } from "react";
+import { TransitionProps } from 'react-transition-group/Transition';
+import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
+type BackdropProps = Partial<TransitionProps> & {
+    /**
+     * Прозрачный бэкдроп
+     */
+    invisible?: boolean;
+    /**
+     * Управляет видимостью компонента
+     */
+    open: boolean;
+    /**
+     * Обработчик клика по бэкдропу
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Классы анимации
+     *
+     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Backdrop: React.FC<BackdropProps>;
+export { BackdropProps, Backdrop };

package/backdrop/Component.js

@@ -0,0 +1,63 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var reactTransitionGroup = require('react-transition-group');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var styles = {"backdrop":"backdrop__backdrop_1y8i1","appear":"backdrop__appear_1y8i1","enter":"backdrop__enter_1y8i1","appearActive":"backdrop__appearActive_1y8i1","enterActive":"backdrop__enterActive_1y8i1","appearDone":"backdrop__appearDone_1y8i1","enterDone":"backdrop__enterDone_1y8i1","exit":"backdrop__exit_1y8i1","exitActive":"backdrop__exitActive_1y8i1","exitDone":"backdrop__exitDone_1y8i1","invisible":"backdrop__invisible_1y8i1"};
+require('./index.css');
+
+var Backdrop = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.open, open = _c === void 0 ? false : _c, _d = _a.invisible, invisible = _d === void 0 ? false : _d, _e = _a.timeout, timeout = _e === void 0 ? 200 : _e, children = _a.children, onClose = _a.onClose, dataTestId = _a.dataTestId, _f = _a.transitionClassNames, transitionClassNames = _f === void 0 ? styles : _f, restProps = __rest(_a, ["className", "open", "invisible", "timeout", "children", "onClose", "dataTestId", "transitionClassNames"]);
+    return (React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ timeout: timeout, unmountOnExit: true, classNames: transitionClassNames, in: open, appear: true }, restProps),
+        React__default['default'].createElement("div", { "aria-hidden": true, onClick: onClose, "data-test-id": dataTestId, className: cn__default['default'](styles.backdrop, className, (_b = {},
+                _b[styles.invisible] = invisible,
+                _b)) }, children)));
+};
+
+exports.Backdrop = Backdrop;

package/backdrop/cssm/Component.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent } from "react";
+import { TransitionProps } from 'react-transition-group/Transition';
+import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
+type BackdropProps = Partial<TransitionProps> & {
+    /**
+     * Прозрачный бэкдроп
+     */
+    invisible?: boolean;
+    /**
+     * Управляет видимостью компонента
+     */
+    open: boolean;
+    /**
+     * Обработчик клика по бэкдропу
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Классы анимации
+     *
+     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Backdrop: React.FC<BackdropProps>;
+export { BackdropProps, Backdrop };