@snack-uikit/attachment 0.0.1-preview-d3c8ef06.0 → 0.0.1-preview-bfae2d03.0

package/README.md

@@ -15,16 +15,16 @@
 | file | `File` | - | Файл |
 | onDownload | `(file?: File) => void` | - | Колбек на клик по кнопке скачивания |
 | onDelete | `(file?: File) => void` | - | Колбек на клик по кнопке удаления |
+| onRetry | `() => void` | - | Колбек на клик по кнопке повторения |
 | title | `string` | fileName | Заголовок |
 | description | `string` | fileExtension | Описание |
 | error | `string` | - | Сообщение об ошибке |
 | truncateVariant | "end" \| "middle" | - | Вариант обрезания строки: <br> - `End` - с конца; <br> - `Middle` - по середине |
 | loading | `boolean` | - | Управление состоянием загрузки |
-| extensionToIcon | `Record<string, JSXElementConstructor<{ size?: number; className?: string; }>>` | - | Объект сопоставления расширения файла и отображаемой иконки @defaultIcon FileSVG |
+| icon | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | Иконка для файла @defaultIcon FileSVG |
 | size | enum Size: `"s"`, `"m"` | s | Размер |
 | checked | `boolean` | - | Управление состоянием выбран/не выбран |
 | disabled | `boolean` | - | Управление состоянием интерактивности |
-| multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
 | onClick | `(e: MouseEvent<HTMLDivElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбек на клик по карточке |
 | className | `string` | - | CSS-класс для элемента с контентом |
 ## Attachment
@@ -34,18 +34,19 @@
 | file | `File` | - | Файл |
 | onDownload | `(file?: File) => void` | - | Колбек на клик по кнопке скачивания |
 | onDelete | `(file?: File) => void` | - | Колбек на клик по кнопке удаления |
+| onRetry | `() => void` | - | Колбек на клик по кнопке повторения |
 | title | `string` | fileName | Заголовок |
 | description | `string` | fileExtension | Описание |
 | error | `string` | - | Сообщение об ошибке |
 | truncateVariant | "end" \| "middle" | - | Вариант обрезания строки: <br> - `End` - с конца; <br> - `Middle` - по середине |
 | loading | `boolean` | - | Управление состоянием загрузки |
-| extensionToIcon | `Record<string, JSXElementConstructor<{ size?: number; className?: string; }>>` | - | Объект сопоставления расширения файла и отображаемой иконки @defaultIcon FileSVG |
+| icon | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | Иконка для файла @defaultIcon FileSVG |
 | size | enum Size: `"s"`, `"m"` | s | Размер |
 | checked | `boolean` | - | Управление состоянием выбран/не выбран |
 | disabled | `boolean` | - | Управление состоянием интерактивности |
-| multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
 | onClick | `(e: MouseEvent<HTMLDivElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбек на клик по карточке |
 | className | `string` | - | CSS-класс для элемента с контентом |
+| truncate | `{ title?: number; description?: number; error?: number; }` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Attachment/Attachment.d.ts

@@ -1,2 +1,2 @@
 import { AttachmentProps } from '../../types';
-export declare function Attachment({ file, loading, extensionToIcon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick, size, ...rest }: AttachmentProps): import("react/jsx-runtime").JSX.Element;
+export declare function Attachment({ file, loading, icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, onDownload, onDelete, onClick, onRetry, size, truncate, ...rest }: AttachmentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Attachment/Attachment.js

@@ -19,10 +19,10 @@ import { useImage } from '../../hooks';
 import { Emblem } from './components';
 import styles from './styles.module.css';
 export function Attachment(_a) {
-    var { file, loading, extensionToIcon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick, size = 's' } = _a, rest = __rest(_a, ["file", "loading", "extensionToIcon", "title", "description", "error", "disabled", "truncateVariant", "checked", "multipleSelection", "onDownload", "onDelete", "onClick", "size"]);
+    var { file, loading, icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, onDownload, onDelete, onClick, onRetry, size = 's', truncate } = _a, rest = __rest(_a, ["file", "loading", "icon", "title", "description", "error", "disabled", "truncateVariant", "checked", "onDownload", "onDelete", "onClick", "onRetry", "size", "truncate"]);
     const { loading: loadingImage, imageData } = useImage(file);
     const isLoading = loading || loadingImage;
     const title = titleProp || getBaseFileName(file === null || file === void 0 ? void 0 : file.name);
     const description = descriptionProp || getFileExtension(file === null || file === void 0 ? void 0 : file.name);
-    return (_jsx(Card, Object.assign({}, extractSupportProps(rest), { outline: true, disabled: disabled, checked: checked, multipleSelection: multipleSelection, size: size, onClick: !isLoading && !disabled ? onClick : undefined, header: _jsx(AttachmentContext.Provider, { value: { file, truncateVariant, onDelete, onDownload, disabled, size }, children: _jsxs("div", { className: styles.composition, "data-size": size, children: [_jsx(Emblem, { title: title, loading: isLoading, extensionToIcon: extensionToIcon, imageData: imageData }), _jsx(TextBlock, { title: title, description: description, error: error }), _jsx(Actions, { hideDownload: isLoading || Boolean(error) })] }) }) })));
+    return (_jsx(Card, Object.assign({}, extractSupportProps(rest), { outline: true, disabled: disabled, checked: !loading && checked, multipleSelection: true, size: size, onClick: !isLoading && !disabled ? onClick : undefined, header: _jsx(AttachmentContext.Provider, { value: { file, truncateVariant, onDelete, onDownload, onRetry, disabled, size, truncate }, children: _jsxs("div", { className: styles.composition, "data-size": size, children: [_jsx(Emblem, { title: title, loading: isLoading, icon: icon, imageData: imageData }), _jsx(TextBlock, { title: title, description: description, error: error }), _jsx(Actions, { hideDownload: isLoading || Boolean(error), hideRetry: isLoading || !Boolean(error) })] }) }) })));
 }

package/dist/components/Attachment/components/Emblem/Emblem.d.ts

@@ -1,5 +1,5 @@
 import { AttachmentProps } from '../../../../types';
 export type EmblemProps = {
     imageData?: string;
-} & Pick<AttachmentProps, 'extensionToIcon' | 'loading' | 'title'>;
-export declare function Emblem({ loading, extensionToIcon, imageData, title }: EmblemProps): import("react/jsx-runtime").JSX.Element;
+} & Pick<AttachmentProps, 'icon' | 'loading' | 'title'>;
+export declare function Emblem({ loading, icon, imageData, title }: EmblemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Attachment/components/Emblem/Emblem.js

@@ -1,20 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
 import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { FileSVG } from '@snack-uikit/icons';
 import { Spinner } from '@snack-uikit/loaders';
 import { useAttachmentContext } from '../../../../contexts';
-import { getFileExtension } from '../../../../helpers';
+import { TEST_IDS } from '../../../../testIds';
 import styles from './styled.module.css';
-export function Emblem({ loading, extensionToIcon, imageData, title }) {
-    var _a;
-    const { file, size } = useAttachmentContext();
-    const extension = useMemo(() => { var _a; return (_a = getFileExtension(file === null || file === void 0 ? void 0 : file.name)) !== null && _a !== void 0 ? _a : ''; }, [file === null || file === void 0 ? void 0 : file.name]);
+export function Emblem({ loading, icon, imageData, title }) {
+    const { size } = useAttachmentContext();
     if (loading) {
-        return (_jsx(IconPredefined, { size: size, icon: () => _jsx(Spinner, { size: 's' }), decor: false, appearance: 'neutral', shape: 'square' }));
+        return (_jsx(IconPredefined, { size: size, icon: () => _jsx(Spinner, { size: 's' }), decor: false, appearance: 'neutral', shape: 'square', "data-test-id": TEST_IDS.loading }));
     }
     if (imageData) {
-        return (_jsx(IconPredefined, { size: size, icon: () => _jsx("img", { src: imageData, alt: title, "data-size": size || undefined, className: styles.img }), decor: false, shape: 'square' }));
+        return (_jsx(IconPredefined, { size: size, icon: () => _jsx("img", { src: imageData, alt: title, "data-size": size || undefined, className: styles.img }), decor: false, shape: 'square', "data-test-id": TEST_IDS.image }));
     }
-    return (_jsx(IconPredefined, { size: size, icon: (_a = extensionToIcon === null || extensionToIcon === void 0 ? void 0 : extensionToIcon[extension]) !== null && _a !== void 0 ? _a : FileSVG, decor: true, appearance: 'neutral', shape: 'square' }));
+    return (_jsx(IconPredefined, { size: size, icon: icon !== null && icon !== void 0 ? icon : FileSVG, decor: true, appearance: 'neutral', shape: 'square', "data-test-id": TEST_IDS.icon }));
 }

package/dist/components/AttachmentSquare/AttachmentSquare.d.ts

@@ -1,2 +1,2 @@
 import { AttachmentSquareProps } from '../../types';
-export declare function AttachmentSquare({ file, loading, extensionToIcon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick, size, ...rest }: AttachmentSquareProps): import("react/jsx-runtime").JSX.Element;
+export declare function AttachmentSquare({ file, loading, icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, onDownload, onDelete, onClick, onRetry, size, ...rest }: AttachmentSquareProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AttachmentSquare/AttachmentSquare.js

@@ -20,7 +20,7 @@ import { useImage } from '../../hooks';
 import { HoverContent, LoadingContent, MainContent } from './components';
 import styles from './styles.module.css';
 export function AttachmentSquare(_a) {
-    var { file, loading, extensionToIcon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick, size = 's' } = _a, rest = __rest(_a, ["file", "loading", "extensionToIcon", "title", "description", "error", "disabled", "truncateVariant", "checked", "multipleSelection", "onDownload", "onDelete", "onClick", "size"]);
+    var { file, loading, icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, onDownload, onDelete, onClick, onRetry, size = 's' } = _a, rest = __rest(_a, ["file", "loading", "icon", "title", "description", "error", "disabled", "truncateVariant", "checked", "onDownload", "onDelete", "onClick", "onRetry", "size"]);
     const { loading: loadingImage, imageData } = useImage(file);
     const isLoading = loading || loadingImage;
     const title = titleProp || getBaseFileName(file === null || file === void 0 ? void 0 : file.name);
@@ -30,8 +30,8 @@ export function AttachmentSquare(_a) {
             [styles.sizeS]: size === 's',
             [styles.sizeM]: size === 'm',
             [styles.hasFocusedActions]: hasFocusedActions,
-        }), checked: checked, multipleSelection: multipleSelection, onClick: !isLoading && !disabled ? onClick : undefined, header: _jsx(AttachmentContext.Provider, { value: { file, truncateVariant, onDelete, onDownload, disabled, size }, children: _jsxs(AttachmentFocusActionsContext.Provider, { value: {
+        }), checked: !loading && checked, multipleSelection: true, onClick: !isLoading && !disabled ? onClick : undefined, header: _jsx(AttachmentContext.Provider, { value: { file, truncateVariant, onDelete, onDownload, onRetry, disabled, size }, children: _jsxs(AttachmentFocusActionsContext.Provider, { value: {
                     focused: hasFocusedActions,
                     setFocused: setHasFocusedActions,
-                }, children: [!isLoading && !disabled && !error && (_jsx(MainContent, { title: title, extensionToIcon: extensionToIcon, imageData: imageData, className: styles.main })), !isLoading && (_jsx(HoverContent, { title: title, description: description, error: error, className: styles.hover })), isLoading && _jsx(LoadingContent, {})] }) }) })));
+                }, children: [!isLoading && !disabled && !error && (_jsx(MainContent, { title: title, icon: icon, imageData: imageData, className: styles.main })), !isLoading && (_jsx(HoverContent, { title: title, description: description, error: error, className: styles.hover })), isLoading && _jsx(LoadingContent, {})] }) }) })));
 }

package/dist/components/AttachmentSquare/components/HoverContent/HoverContent.js

@@ -7,5 +7,5 @@ export function HoverContent({ title, description, error, className = '' }) {
     const { disabled, size } = useAttachmentContext();
     return (_jsxs("div", { className: cn(styles.composition, {
             [className]: !disabled && !error,
-        }), "data-size": size, children: [_jsx(TextBlock, { title: title, error: error, description: !error ? description : undefined, align: 'center' }), _jsx(Actions, { hideDownload: Boolean(error) })] }));
+        }), "data-size": size, children: [_jsx(TextBlock, { title: title, error: error, description: !error ? description : undefined, align: 'center' }), _jsx(Actions, { hideDownload: Boolean(error), hideRetry: !Boolean(error) })] }));
 }

package/dist/components/AttachmentSquare/components/LoadingContent/LoadingContent.js

@@ -3,8 +3,9 @@ import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { Spinner } from '@snack-uikit/loaders';
 import { useAttachmentContext } from '../../../../contexts';
 import { Actions } from '../../../../helperComponents';
+import { TEST_IDS } from '../../../../testIds';
 import styles from '../styles.module.css';
 export function LoadingContent() {
     const { size } = useAttachmentContext();
-    return (_jsxs("div", { className: styles.composition, "data-size": size, children: [_jsx(IconPredefined, { size: 's', icon: () => _jsx(Spinner, { size: 's' }), decor: false, appearance: 'neutral', shape: 'square' }), _jsx(Actions, { hideDownload: true })] }));
+    return (_jsxs("div", { className: styles.composition, "data-size": size, children: [_jsx(IconPredefined, { size: size, icon: () => _jsx(Spinner, { size: 's' }), decor: false, appearance: 'neutral', shape: 'square', "data-test-id": TEST_IDS.loading }), _jsx(Actions, { hideDownload: true, hideRetry: true })] }));
 }

package/dist/components/AttachmentSquare/components/MainContent/MainContent.d.ts

@@ -1,6 +1,6 @@
 import { AttachmentProps } from '../../../../types';
 type MainContentProps = {
     imageData?: string;
-} & Pick<AttachmentProps, 'title' | 'extensionToIcon' | 'className'>;
-export declare function MainContent({ title, extensionToIcon, imageData, className }: MainContentProps): import("react/jsx-runtime").JSX.Element;
+} & Pick<AttachmentProps, 'title' | 'icon' | 'className'>;
+export declare function MainContent({ title, icon, imageData, className }: MainContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/AttachmentSquare/components/MainContent/MainContent.js

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useMemo } from 'react';
 import { Card } from '@snack-uikit/card';
 import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { FileSVG } from '@snack-uikit/icons';
 import { useAttachmentContext } from '../../../../contexts';
 import { TextBlock } from '../../../../helperComponents';
-import { getFileExtension } from '../../../../helpers';
+import { TEST_IDS } from '../../../../testIds';
 import styles from '../styles.module.css';
-export function MainContent({ title, extensionToIcon, imageData, className }) {
-    var _a, _b;
+export function MainContent({ title, icon, imageData, className }) {
+    var _a;
     const { file, size } = useAttachmentContext();
-    const extension = useMemo(() => { var _a; return (_a = getFileExtension(file === null || file === void 0 ? void 0 : file.name)) !== null && _a !== void 0 ? _a : ''; }, [file === null || file === void 0 ? void 0 : file.name]);
     if (imageData) {
-        return (_jsx("div", { className: cn(styles.composition, className), children: _jsx(Card.Image, { src: imageData, alt: (_a = file === null || file === void 0 ? void 0 : file.name) !== null && _a !== void 0 ? _a : 'file', mode: 'background', hideFading: true }) }));
+        return (_jsx("div", { className: cn(styles.composition, className), children: _jsx(Card.Image, { src: imageData, alt: (_a = file === null || file === void 0 ? void 0 : file.name) !== null && _a !== void 0 ? _a : 'file', mode: 'background', hideFading: true, "data-test-id": TEST_IDS.image }) }));
     }
-    return (_jsxs("div", { className: cn(styles.composition, className), "data-size": size, children: [_jsx(TextBlock, { title: title, align: 'center' }), _jsx(IconPredefined, { size: size, icon: (_b = extensionToIcon === null || extensionToIcon === void 0 ? void 0 : extensionToIcon[extension]) !== null && _b !== void 0 ? _b : FileSVG, decor: true, appearance: 'neutral', shape: 'square' })] }));
+    return (_jsxs("div", { className: cn(styles.composition, className), "data-size": size, children: [_jsx(TextBlock, { title: title, align: 'center' }), _jsx(IconPredefined, { size: size, icon: icon !== null && icon !== void 0 ? icon : FileSVG, decor: true, appearance: 'neutral', shape: 'square', "data-test-id": TEST_IDS.icon })] }));
 }

package/dist/contexts.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AttachmentProps } from './types';
-export type AttachmentContextType = Pick<AttachmentProps, 'size' | 'file' | 'truncateVariant' | 'onDownload' | 'onDelete' | 'disabled'>;
+export type AttachmentContextType = Pick<AttachmentProps, 'size' | 'file' | 'truncateVariant' | 'onDownload' | 'onDelete' | 'onRetry' | 'disabled' | 'truncate'>;
 export declare const AttachmentContext: import("react").Context<AttachmentContextType>;
 export declare function useAttachmentContext(): AttachmentContextType;
 export type AttachmentFocusActionsContextType = {

package/dist/helperComponents/Actions/Actions.d.ts

@@ -1,6 +1,7 @@
 type ActionsProps = {
     hideDownload?: boolean;
     hideDelete?: boolean;
+    hideRetry?: boolean;
 };
-export declare function Actions({ hideDelete, hideDownload }: ActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Actions({ hideDelete, hideDownload, hideRetry }: ActionsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/helperComponents/Actions/Actions.js

@@ -1,20 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonFunction } from '@snack-uikit/button';
-import { DownloadSVG, TrashSVG } from '@snack-uikit/icons';
+import { DownloadSVG, TrashSVG, UpdateSVG } from '@snack-uikit/icons';
 import { useAttachmentContext, useAttachmentFocusActionsContext } from '../../contexts';
+import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
 const noop = () => { };
-export function Actions({ hideDelete, hideDownload }) {
-    const { onDelete, onDownload, file, disabled } = useAttachmentContext();
+export function Actions({ hideDelete, hideDownload, hideRetry }) {
+    const { onDelete, onDownload, file, disabled, onRetry } = useAttachmentContext();
     const { setFocused = noop } = useAttachmentFocusActionsContext();
     const showDownload = onDownload && !hideDownload;
     const showDelete = onDelete && !hideDelete;
+    const showRetry = onRetry && !hideRetry;
     const handleFocus = () => {
         setFocused(true);
     };
     const handleBlur = () => {
         setFocused(false);
     };
+    const handleRetry = (e) => {
+        onRetry === null || onRetry === void 0 ? void 0 : onRetry();
+        e.stopPropagation();
+    };
     const handleDownload = (e) => {
         onDownload === null || onDownload === void 0 ? void 0 : onDownload(file);
         e.stopPropagation();
@@ -26,5 +32,5 @@ export function Actions({ hideDelete, hideDownload }) {
     if (!showDownload && !showDelete) {
         return null;
     }
-    return (_jsxs("div", { className: styles.actions, children: [showDownload && (_jsx(ButtonFunction, { disabled: disabled, size: 'xs', icon: _jsx(DownloadSVG, {}), onClick: handleDownload, onFocus: handleFocus, onBlur: handleBlur })), showDelete && (_jsx(ButtonFunction, { disabled: disabled, size: 'xs', icon: _jsx(TrashSVG, {}), onClick: handleDelete, onFocus: handleFocus, onBlur: handleBlur }))] }));
+    return (_jsxs("div", { className: styles.actions, children: [showDownload && (_jsx(ButtonFunction, { disabled: disabled, size: 'xs', icon: _jsx(DownloadSVG, {}), onClick: handleDownload, onFocus: handleFocus, onBlur: handleBlur, "data-test-id": TEST_IDS.downloadAction })), showRetry && (_jsx(ButtonFunction, { disabled: disabled, size: 'xs', icon: _jsx(UpdateSVG, {}), onClick: handleRetry, onFocus: handleFocus, onBlur: handleBlur, className: styles.retryAction, "data-test-id": TEST_IDS.retryAction })), showDelete && (_jsx(ButtonFunction, { disabled: disabled, size: 'xs', icon: _jsx(TrashSVG, {}), onClick: handleDelete, onFocus: handleFocus, onBlur: handleBlur, "data-test-id": TEST_IDS.deleteAction }))] }));
 }

package/dist/helperComponents/Actions/styles.module.css

@@ -2,4 +2,12 @@
   gap:var(--space-attachment-composition-end-item-gap, 4px);
   display:flex;
   flex-shrink:0;
+}
+.actions :not([data-disabled]).retryAction svg{
+  transform:rotate(360deg);
+  transition:transform 0.5s;
+}
+.actions :not([data-disabled]).retryAction:active svg{
+  transform:rotate(0deg);
+  transition-duration:0s;
 }

package/dist/helperComponents/Text/Text.d.ts

@@ -1,5 +1,7 @@
 export type TextProps = {
     text?: string;
     className: string;
+    maxLines?: number;
+    'data-test-id'?: string;
 };
-export declare function Text({ text, className }: TextProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Text({ text, className, maxLines, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/Text/Text.js

@@ -1,10 +1,23 @@
+var __rest = (this && this.__rest) || function (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;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
 import { useAttachmentContext } from '../../contexts';
-export function Text({ text, className }) {
+export function Text(_a) {
+    var { text, className, maxLines = 1 } = _a, rest = __rest(_a, ["text", "className", "maxLines"]);
     const { truncateVariant } = useAttachmentContext();
     if (!text) {
         return null;
     }
-    return (_jsx("div", { className: className, children: _jsx(TruncateString, { text: text, maxLines: 1, variant: truncateVariant }) }));
+    return (_jsx("div", { className: className, children: _jsx(TruncateString, Object.assign({ text: text, maxLines: maxLines, variant: truncateVariant }, extractSupportProps(rest))) }));
 }

package/dist/helperComponents/TextBlock/TextBlock.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useAttachmentContext } from '../../contexts';
+import { TEST_IDS } from '../../testIds';
 import { Text } from '../Text';
 import styles from './styles.module.css';
 export function TextBlock({ title, description, error, className, align = 'left' }) {
-    const { size } = useAttachmentContext();
-    return (_jsxs("div", { className: cn(styles.content, className), "data-size": size, "data-align": align, children: [_jsx(Text, { className: styles.title, text: title }), _jsx(Text, { className: styles.description, text: description }), _jsx(Text, { className: styles.error, text: error })] }));
+    const { size, truncate = {} } = useAttachmentContext();
+    return (_jsxs("div", { className: cn(styles.content, className), "data-size": size, "data-align": align, children: [_jsx(Text, { className: styles.title, text: title, "data-test-id": TEST_IDS.title, maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.title }), _jsx(Text, { className: styles.description, text: description, "data-test-id": TEST_IDS.description, maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.description }), _jsx(Text, { className: styles.error, text: error, "data-test-id": TEST_IDS.error, maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.error })] }));
 }

package/dist/testIds.d.ts

@@ -0,0 +1,11 @@
+export declare const TEST_IDS: {
+    icon: string;
+    image: string;
+    loading: string;
+    retryAction: string;
+    deleteAction: string;
+    downloadAction: string;
+    title: string;
+    description: string;
+    error: string;
+};

package/dist/testIds.js

@@ -0,0 +1,12 @@
+const PREFIX = 'attachment';
+export const TEST_IDS = {
+    icon: `${PREFIX}__icon`,
+    image: `${PREFIX}__image`,
+    loading: `${PREFIX}__loading`,
+    retryAction: `${PREFIX}__retry-action`,
+    deleteAction: `${PREFIX}__delete-action`,
+    downloadAction: `${PREFIX}__download-action`,
+    title: `${PREFIX}__title`,
+    description: `${PREFIX}__description`,
+    error: `${PREFIX}__error`,
+};

package/dist/types.d.ts

@@ -3,13 +3,15 @@ import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
 import { TruncateStringProps } from '@snack-uikit/truncate-string';
 import { WithSupportProps } from '@snack-uikit/utils';
 export type Size = 's' | 'm';
-export type AttachmentProps = WithSupportProps<{
+export type AttachmentSquareProps = WithSupportProps<{
     /** Файл */
     file?: File;
     /** Колбек на клик по кнопке скачивания */
     onDownload?(file?: File | undefined): void;
     /** Колбек на клик по кнопке удаления */
     onDelete?(file?: File | undefined): void;
+    /** Колбек на клик по кнопке повторения */
+    onRetry?(): void;
     /**
      * Заголовок
      * @default fileName
@@ -31,11 +33,29 @@ export type AttachmentProps = WithSupportProps<{
     /** Управление состоянием загрузки */
     loading?: boolean;
     /**
-     * Объект сопоставления расширения файла и отображаемой иконки
+     * Иконка для файла
      * @defaultIcon FileSVG
      */
-    extensionToIcon?: Record<string, IconPredefinedProps['icon']>;
+    icon?: IconPredefinedProps['icon'];
     /** Размер */
     size?: Size;
-}> & Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
-export type AttachmentSquareProps = AttachmentProps;
+}> & Pick<CardProps, 'checked' | 'disabled' | 'onClick' | 'className'>;
+export type AttachmentProps = AttachmentSquareProps & {
+    truncate?: {
+        /**
+         * Максимальное кол-во строк заголовка
+         * @default 1
+         */
+        title?: number;
+        /**
+         * Максимальное кол-во строк описания
+         * @default 1
+         */
+        description?: number;
+        /**
+         * Максимальное кол-во строк ошибки
+         * @default 1
+         */
+        error?: number;
+    };
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Attachment",
-  "version": "0.0.1-preview-d3c8ef06.0",
+  "version": "0.0.1-preview-bfae2d03.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,7 +33,7 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/card": "0.12.14-preview-d3c8ef06.0",
+    "@snack-uikit/card": "0.12.14-preview-bfae2d03.0",
     "@snack-uikit/icon-predefined": "0.5.1",
     "@snack-uikit/icons": "0.21.0",
     "@snack-uikit/loaders": "0.5.2",
@@ -41,5 +41,5 @@
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "93ec1b7cbdd9a002297609c6e4ef3c96ca7178d7"
+  "gitHead": "7b2a733a770a8bdd14adb9951c8fc552ad192578"
 }

package/src/components/Attachment/Attachment.tsx

@@ -12,18 +12,19 @@ import styles from './styles.module.scss';
 export function Attachment({
   file,
   loading,
-  extensionToIcon,
+  icon,
   title: titleProp,
   description: descriptionProp,
   error,
   disabled,
   truncateVariant,
   checked,
-  multipleSelection,
   onDownload,
   onDelete,
   onClick,
+  onRetry,
   size = 's',
+  truncate,
   ...rest
 }: AttachmentProps) {
   const { loading: loadingImage, imageData } = useImage(file);
@@ -37,16 +38,18 @@ export function Attachment({
       {...extractSupportProps(rest)}
       outline
       disabled={disabled}
-      checked={checked}
-      multipleSelection={multipleSelection}
+      checked={!loading && checked}
+      multipleSelection
       size={size}
       onClick={!isLoading && !disabled ? onClick : undefined}
       header={
-        <AttachmentContext.Provider value={{ file, truncateVariant, onDelete, onDownload, disabled, size }}>
+        <AttachmentContext.Provider
+          value={{ file, truncateVariant, onDelete, onDownload, onRetry, disabled, size, truncate }}
+        >
           <div className={styles.composition} data-size={size}>
-            <Emblem title={title} loading={isLoading} extensionToIcon={extensionToIcon} imageData={imageData} />
+            <Emblem title={title} loading={isLoading} icon={icon} imageData={imageData} />
             <TextBlock title={title} description={description} error={error} />
-            <Actions hideDownload={isLoading || Boolean(error)} />
+            <Actions hideDownload={isLoading || Boolean(error)} hideRetry={isLoading || !Boolean(error)} />
           </div>
         </AttachmentContext.Provider>
       }

package/src/components/Attachment/components/Emblem/Emblem.tsx

@@ -1,26 +1,29 @@
-import { useMemo } from 'react';
-
 import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { FileSVG } from '@snack-uikit/icons';
 import { Spinner } from '@snack-uikit/loaders';
 
 import { useAttachmentContext } from '../../../../contexts';
-import { getFileExtension } from '../../../../helpers';
+import { TEST_IDS } from '../../../../testIds';
 import { AttachmentProps } from '../../../../types';
 import styles from './styled.module.scss';
 
 export type EmblemProps = {
   imageData?: string;
-} & Pick<AttachmentProps, 'extensionToIcon' | 'loading' | 'title'>;
-
-export function Emblem({ loading, extensionToIcon, imageData, title }: EmblemProps) {
-  const { file, size } = useAttachmentContext();
+} & Pick<AttachmentProps, 'icon' | 'loading' | 'title'>;
 
-  const extension = useMemo(() => getFileExtension(file?.name) ?? '', [file?.name]);
+export function Emblem({ loading, icon, imageData, title }: EmblemProps) {
+  const { size } = useAttachmentContext();
 
   if (loading) {
     return (
-      <IconPredefined size={size} icon={() => <Spinner size='s' />} decor={false} appearance='neutral' shape='square' />
+      <IconPredefined
+        size={size}
+        icon={() => <Spinner size='s' />}
+        decor={false}
+        appearance='neutral'
+        shape='square'
+        data-test-id={TEST_IDS.loading}
+      />
     );
   }
 
@@ -31,6 +34,7 @@ export function Emblem({ loading, extensionToIcon, imageData, title }: EmblemPro
         icon={() => <img src={imageData} alt={title} data-size={size || undefined} className={styles.img} />}
         decor={false}
         shape='square'
+        data-test-id={TEST_IDS.image}
       />
     );
   }
@@ -38,10 +42,11 @@ export function Emblem({ loading, extensionToIcon, imageData, title }: EmblemPro
   return (
     <IconPredefined
       size={size}
-      icon={extensionToIcon?.[extension] ?? FileSVG}
+      icon={icon ?? FileSVG}
       decor
       appearance='neutral'
       shape='square'
+      data-test-id={TEST_IDS.icon}
     />
   );
 }

package/src/components/AttachmentSquare/AttachmentSquare.tsx

@@ -14,17 +14,17 @@ import styles from './styles.module.scss';
 export function AttachmentSquare({
   file,
   loading,
-  extensionToIcon,
+  icon,
   title: titleProp,
   description: descriptionProp,
   error,
   disabled,
   truncateVariant,
   checked,
-  multipleSelection,
   onDownload,
   onDelete,
   onClick,
+  onRetry,
   size = 's',
   ...rest
 }: AttachmentSquareProps) {
@@ -47,11 +47,11 @@ export function AttachmentSquare({
         [styles.sizeM]: size === 'm',
         [styles.hasFocusedActions]: hasFocusedActions,
       })}
-      checked={checked}
-      multipleSelection={multipleSelection}
+      checked={!loading && checked}
+      multipleSelection
       onClick={!isLoading && !disabled ? onClick : undefined}
       header={
-        <AttachmentContext.Provider value={{ file, truncateVariant, onDelete, onDownload, disabled, size }}>
+        <AttachmentContext.Provider value={{ file, truncateVariant, onDelete, onDownload, onRetry, disabled, size }}>
           <AttachmentFocusActionsContext.Provider
             value={{
               focused: hasFocusedActions,
@@ -59,12 +59,7 @@ export function AttachmentSquare({
             }}
           >
             {!isLoading && !disabled && !error && (
-              <MainContent
-                title={title}
-                extensionToIcon={extensionToIcon}
-                imageData={imageData}
-                className={styles.main}
-              />
+              <MainContent title={title} icon={icon} imageData={imageData} className={styles.main} />
             )}
 
             {!isLoading && (

package/src/components/AttachmentSquare/components/HoverContent/HoverContent.tsx

@@ -19,7 +19,7 @@ export function HoverContent({ title, description, error, className = '' }: Hove
     >
       <TextBlock title={title} error={error} description={!error ? description : undefined} align='center' />
 
-      <Actions hideDownload={Boolean(error)} />
+      <Actions hideDownload={Boolean(error)} hideRetry={!Boolean(error)} />
     </div>
   );
 }

package/src/components/AttachmentSquare/components/LoadingContent/LoadingContent.tsx

@@ -3,6 +3,7 @@ import { Spinner } from '@snack-uikit/loaders';
 
 import { useAttachmentContext } from '../../../../contexts';
 import { Actions } from '../../../../helperComponents';
+import { TEST_IDS } from '../../../../testIds';
 import styles from '../styles.module.scss';
 
 export function LoadingContent() {
@@ -10,8 +11,15 @@ export function LoadingContent() {
 
   return (
     <div className={styles.composition} data-size={size}>
-      <IconPredefined size='s' icon={() => <Spinner size='s' />} decor={false} appearance='neutral' shape='square' />
-      <Actions hideDownload />
+      <IconPredefined
+        size={size}
+        icon={() => <Spinner size='s' />}
+        decor={false}
+        appearance='neutral'
+        shape='square'
+        data-test-id={TEST_IDS.loading}
+      />
+      <Actions hideDownload hideRetry />
     </div>
   );
 }

package/src/components/AttachmentSquare/components/MainContent/MainContent.tsx

@@ -1,5 +1,4 @@
 import cn from 'classnames';
-import { useMemo } from 'react';
 
 import { Card } from '@snack-uikit/card';
 import { IconPredefined } from '@snack-uikit/icon-predefined';
@@ -7,23 +6,27 @@ import { FileSVG } from '@snack-uikit/icons';
 
 import { useAttachmentContext } from '../../../../contexts';
 import { TextBlock } from '../../../../helperComponents';
-import { getFileExtension } from '../../../../helpers';
+import { TEST_IDS } from '../../../../testIds';
 import { AttachmentProps } from '../../../../types';
 import styles from '../styles.module.scss';
 
 type MainContentProps = {
   imageData?: string;
-} & Pick<AttachmentProps, 'title' | 'extensionToIcon' | 'className'>;
+} & Pick<AttachmentProps, 'title' | 'icon' | 'className'>;
 
-export function MainContent({ title, extensionToIcon, imageData, className }: MainContentProps) {
+export function MainContent({ title, icon, imageData, className }: MainContentProps) {
   const { file, size } = useAttachmentContext();
 
-  const extension = useMemo(() => getFileExtension(file?.name) ?? '', [file?.name]);
-
   if (imageData) {
     return (
       <div className={cn(styles.composition, className)}>
-        <Card.Image src={imageData} alt={file?.name ?? 'file'} mode='background' hideFading />
+        <Card.Image
+          src={imageData}
+          alt={file?.name ?? 'file'}
+          mode='background'
+          hideFading
+          data-test-id={TEST_IDS.image}
+        />
       </div>
     );
   }
@@ -34,10 +37,11 @@ export function MainContent({ title, extensionToIcon, imageData, className }: Ma
 
       <IconPredefined
         size={size}
-        icon={extensionToIcon?.[extension] ?? FileSVG}
+        icon={icon ?? FileSVG}
         decor
         appearance='neutral'
         shape='square'
+        data-test-id={TEST_IDS.icon}
       />
     </div>
   );

package/src/contexts.ts

@@ -4,7 +4,7 @@ import { AttachmentProps } from './types';
 
 export type AttachmentContextType = Pick<
   AttachmentProps,
-  'size' | 'file' | 'truncateVariant' | 'onDownload' | 'onDelete' | 'disabled'
+  'size' | 'file' | 'truncateVariant' | 'onDownload' | 'onDelete' | 'onRetry' | 'disabled' | 'truncate'
 >;
 
 export const AttachmentContext = createContext<AttachmentContextType>({});

package/src/helperComponents/Actions/Actions.tsx

@@ -1,24 +1,27 @@
 import { MouseEvent } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
-import { DownloadSVG, TrashSVG } from '@snack-uikit/icons';
+import { DownloadSVG, TrashSVG, UpdateSVG } from '@snack-uikit/icons';
 
 import { useAttachmentContext, useAttachmentFocusActionsContext } from '../../contexts';
+import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.scss';
 
 type ActionsProps = {
   hideDownload?: boolean;
   hideDelete?: boolean;
+  hideRetry?: boolean;
 };
 
 const noop = () => {};
 
-export function Actions({ hideDelete, hideDownload }: ActionsProps) {
-  const { onDelete, onDownload, file, disabled } = useAttachmentContext();
+export function Actions({ hideDelete, hideDownload, hideRetry }: ActionsProps) {
+  const { onDelete, onDownload, file, disabled, onRetry } = useAttachmentContext();
   const { setFocused = noop } = useAttachmentFocusActionsContext();
 
   const showDownload = onDownload && !hideDownload;
   const showDelete = onDelete && !hideDelete;
+  const showRetry = onRetry && !hideRetry;
 
   const handleFocus = () => {
     setFocused(true);
@@ -26,6 +29,12 @@ export function Actions({ hideDelete, hideDownload }: ActionsProps) {
   const handleBlur = () => {
     setFocused(false);
   };
+
+  const handleRetry = (e: MouseEvent<HTMLButtonElement>) => {
+    onRetry?.();
+    e.stopPropagation();
+  };
+
   const handleDownload = (e: MouseEvent<HTMLButtonElement>) => {
     onDownload?.(file);
     e.stopPropagation();
@@ -50,6 +59,19 @@ export function Actions({ hideDelete, hideDownload }: ActionsProps) {
           onClick={handleDownload}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          data-test-id={TEST_IDS.downloadAction}
+        />
+      )}
+      {showRetry && (
+        <ButtonFunction
+          disabled={disabled}
+          size='xs'
+          icon={<UpdateSVG />}
+          onClick={handleRetry}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className={styles.retryAction}
+          data-test-id={TEST_IDS.retryAction}
         />
       )}
       {showDelete && (
@@ -60,6 +82,7 @@ export function Actions({ hideDelete, hideDownload }: ActionsProps) {
           onClick={handleDelete}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          data-test-id={TEST_IDS.deleteAction}
         />
       )}
     </div>

package/src/helperComponents/Actions/styles.module.scss

@@ -5,4 +5,18 @@
 
   display: flex;
   flex-shrink: 0;
+
+  :not([data-disabled]).retryAction {
+    svg {
+      transform: rotate(360deg);
+      transition: transform 0.5s;
+    }
+
+    &:active {
+      svg {
+        transform: rotate(0deg);
+        transition-duration: 0s;
+      }
+    }
+  }
 }

package/src/helperComponents/Text/Text.tsx

@@ -1,13 +1,16 @@
 import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
 
 import { useAttachmentContext } from '../../contexts';
 
 export type TextProps = {
   text?: string;
   className: string;
+  maxLines?: number;
+  'data-test-id'?: string;
 };
 
-export function Text({ text, className }: TextProps) {
+export function Text({ text, className, maxLines = 1, ...rest }: TextProps) {
   const { truncateVariant } = useAttachmentContext();
 
   if (!text) {
@@ -16,7 +19,7 @@ export function Text({ text, className }: TextProps) {
 
   return (
     <div className={className}>
-      <TruncateString text={text} maxLines={1} variant={truncateVariant} />
+      <TruncateString text={text} maxLines={maxLines} variant={truncateVariant} {...extractSupportProps(rest)} />
     </div>
   );
 }

package/src/helperComponents/TextBlock/TextBlock.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 
 import { useAttachmentContext } from '../../contexts';
+import { TEST_IDS } from '../../testIds';
 import { AttachmentProps } from '../../types';
 import { Text } from '../Text';
 import styles from './styles.module.scss';
@@ -10,13 +11,18 @@ export type TextBlockProps = Pick<AttachmentProps, 'title' | 'description' | 'er
 };
 
 export function TextBlock({ title, description, error, className, align = 'left' }: TextBlockProps) {
-  const { size } = useAttachmentContext();
+  const { size, truncate = {} } = useAttachmentContext();
 
   return (
     <div className={cn(styles.content, className)} data-size={size} data-align={align}>
-      <Text className={styles.title} text={title} />
-      <Text className={styles.description} text={description} />
-      <Text className={styles.error} text={error} />
+      <Text className={styles.title} text={title} data-test-id={TEST_IDS.title} maxLines={truncate?.title} />
+      <Text
+        className={styles.description}
+        text={description}
+        data-test-id={TEST_IDS.description}
+        maxLines={truncate?.description}
+      />
+      <Text className={styles.error} text={error} data-test-id={TEST_IDS.error} maxLines={truncate?.error} />
     </div>
   );
 }

package/src/testIds.ts

@@ -0,0 +1,13 @@
+const PREFIX = 'attachment';
+
+export const TEST_IDS = {
+  icon: `${PREFIX}__icon`,
+  image: `${PREFIX}__image`,
+  loading: `${PREFIX}__loading`,
+  retryAction: `${PREFIX}__retry-action`,
+  deleteAction: `${PREFIX}__delete-action`,
+  downloadAction: `${PREFIX}__download-action`,
+  title: `${PREFIX}__title`,
+  description: `${PREFIX}__description`,
+  error: `${PREFIX}__error`,
+};

package/src/types.ts

@@ -5,13 +5,15 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 export type Size = 's' | 'm';
 
-export type AttachmentProps = WithSupportProps<{
+export type AttachmentSquareProps = WithSupportProps<{
   /** Файл */
   file?: File;
   /** Колбек на клик по кнопке скачивания */
   onDownload?(file?: File | undefined): void;
   /** Колбек на клик по кнопке удаления */
   onDelete?(file?: File | undefined): void;
+  /** Колбек на клик по кнопке повторения */
+  onRetry?(): void;
   /**
    * Заголовок
    * @default fileName
@@ -30,16 +32,35 @@ export type AttachmentProps = WithSupportProps<{
    * <br> - `Middle` - по середине
    * */
   truncateVariant?: TruncateStringProps['variant'];
+
   /** Управление состоянием загрузки */
   loading?: boolean;
   /**
-   * Объект сопоставления расширения файла и отображаемой иконки
+   * Иконка для файла
    * @defaultIcon FileSVG
    */
-  extensionToIcon?: Record<string, IconPredefinedProps['icon']>;
+  icon?: IconPredefinedProps['icon'];
   /** Размер */
   size?: Size;
 }> &
-  Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
+  Pick<CardProps, 'checked' | 'disabled' | 'onClick' | 'className'>;
 
-export type AttachmentSquareProps = AttachmentProps;
+export type AttachmentProps = AttachmentSquareProps & {
+  truncate?: {
+    /**
+     * Максимальное кол-во строк заголовка
+     * @default 1
+     */
+    title?: number;
+    /**
+     * Максимальное кол-во строк описания
+     * @default 1
+     */
+    description?: number;
+    /**
+     * Максимальное кол-во строк ошибки
+     * @default 1
+     */
+    error?: number;
+  };
+};