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

package/README.md

@@ -1,12 +1,11 @@
 # Attachment
 
 ## Installation
+
 `npm i @snack-uikit/attachment`
 
 [Changelog](./CHANGELOG.md)
 
-
-
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
 ## AttachmentSquare
@@ -16,15 +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` | - | Управление состоянием загрузки |
-| extension2Icon | `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` | - | Управление состоянием загрузки |
-| extension2Icon | `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-класс для элемента с контентом |
-| size | enum Size: `"s"`, `"m"` | s | Размер |
+| 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, extension2Icon, 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

@@ -16,13 +16,13 @@ import { AttachmentContext } from '../../contexts';
 import { Actions, TextBlock } from '../../helperComponents';
 import { getBaseFileName, getFileExtension } from '../../helpers';
 import { useImage } from '../../hooks';
-import { Emblem } from './components/Emblem';
+import { Emblem } from './components';
 import styles from './styles.module.css';
 export function Attachment(_a) {
-    var { file, loading, extension2Icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick, size = 's' } = _a, rest = __rest(_a, ["file", "loading", "extension2Icon", "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, extension2Icon: extension2Icon, imageData: imageData }), _jsx(TextBlock, { title: title, description: description, error: error }), _jsx(Actions, { hideDownload: isLoading })] }) }) })));
+    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, 'extension2Icon' | 'loading' | 'title'>;
-export declare function Emblem({ loading, extension2Icon, 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, extension2Icon, 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 = extension2Icon === null || extension2Icon === void 0 ? void 0 : extension2Icon[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, extension2Icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick, ...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

@@ -10,18 +10,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useState } from 'react';
 import { Card } from '@snack-uikit/card';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { AttachmentContext } from '../../contexts';
+import { AttachmentContext, AttachmentFocusActionsContext } from '../../contexts';
 import { getBaseFileName, getFileExtension } from '../../helpers';
 import { useImage } from '../../hooks';
 import { HoverContent, LoadingContent, MainContent } from './components';
 import styles from './styles.module.css';
 export function AttachmentSquare(_a) {
-    var { file, loading, extension2Icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick } = _a, rest = __rest(_a, ["file", "loading", "extension2Icon", "title", "description", "error", "disabled", "truncateVariant", "checked", "multipleSelection", "onDownload", "onDelete", "onClick"]);
+    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);
     const description = descriptionProp || getFileExtension(file === null || file === void 0 ? void 0 : file.name);
-    return (_jsx(Card, Object.assign({}, extractSupportProps(rest), { outline: true, disabled: disabled, size: 's', className: styles.wrapper, checked: checked, multipleSelection: multipleSelection, onClick: !isLoading && !disabled ? onClick : undefined, header: _jsxs(AttachmentContext.Provider, { value: { file, truncateVariant, onDelete, onDownload, disabled, size: 's' }, children: [!isLoading && !disabled && (_jsx(MainContent, { title: title, extension2Icon: extension2Icon, imageData: imageData, className: styles.main })), !isLoading && (_jsx(HoverContent, { title: title, description: description, error: error, className: styles.hover })), isLoading && _jsx(LoadingContent, {})] }) })));
+    const [hasFocusedActions, setHasFocusedActions] = useState(false);
+    return (_jsx(Card, Object.assign({}, extractSupportProps(rest), { outline: true, disabled: disabled, size: size, className: cn(styles.wrapper, {
+            [styles.sizeS]: size === 's',
+            [styles.sizeM]: size === 'm',
+            [styles.hasFocusedActions]: hasFocusedActions,
+        }), 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, 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

@@ -4,8 +4,8 @@ import { useAttachmentContext } from '../../../../contexts';
 import { Actions, TextBlock } from '../../../../helperComponents';
 import styles from '../styles.module.css';
 export function HoverContent({ title, description, error, className = '' }) {
-    const { disabled } = useAttachmentContext();
+    const { disabled, size } = useAttachmentContext();
     return (_jsxs("div", { className: cn(styles.composition, {
-            [className]: !disabled,
-        }), children: [_jsx(TextBlock, { title: title, error: error, description: !error ? description : undefined, align: 'center' }), _jsx(Actions, {})] }));
+            [className]: !disabled && !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

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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() {
-    return (_jsxs("div", { className: styles.composition, children: [_jsx(IconPredefined, { size: 's', icon: () => _jsx(Spinner, { size: 's' }), decor: false, appearance: 'neutral', shape: 'square' }), _jsx(Actions, { hideDownload: true })] }));
+    const { size } = useAttachmentContext();
+    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' | 'extension2Icon' | 'className'>;
-export declare function MainContent({ title, extension2Icon, 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, extension2Icon, imageData, className }) {
-    var _a, _b;
-    const { file } = 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 MainContent({ title, icon, imageData, className }) {
+    var _a;
+    const { file, size } = useAttachmentContext();
     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), children: [_jsx(TextBlock, { title: title, align: 'center' }), _jsx(IconPredefined, { size: 's', icon: (_b = extension2Icon === null || extension2Icon === void 0 ? void 0 : extension2Icon[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/components/AttachmentSquare/components/styles.module.css

@@ -9,4 +9,10 @@
   margin:calc(0px - var(--dimension-050m, 4px));
   padding:var(--dimension-050m, 4px);
   text-align:center;
+}
+.composition[data-size=s]{
+  gap:var(--space-attachment-composition-s-gap, 8px);
+}
+.composition[data-size=m]{
+  gap:var(--space-attachment-composition-m-gap, 12px);
 }

package/dist/components/AttachmentSquare/styles.module.css

@@ -1,16 +1,24 @@
-.wrapper{
-  width:var(--size-attachment-container-square, 80px);
-  height:var(--size-attachment-container-square, 80px);
+.wrapper.sizeS{
+  width:var(--size-attachment-container-square-s, 80px);
+  height:var(--size-attachment-container-square-s, 80px);
+}
+.wrapper.sizeM{
+  width:var(--size-attachment-container-square-m, 108px);
+  height:var(--size-attachment-container-square-m, 108px);
 }
 .wrapper .main{
   display:flex;
 }
 .wrapper .hover{
-  display:none;
+  pointer-events:none;
+  height:0;
+  opacity:0;
 }
-.wrapper:hover .hover, .wrapper:focus-within .hover, .wrapper:focus-visible .hover{
-  display:flex;
+.wrapper:hover .hover, .wrapper:focus-visible .hover, .wrapper.hasFocusedActions .hover{
+  pointer-events:unset;
+  height:unset;
+  opacity:1;
 }
-.wrapper:hover .main, .wrapper:focus-within .main, .wrapper:focus-visible .main{
+.wrapper:hover .main, .wrapper:focus-visible .main, .wrapper.hasFocusedActions .main{
   display:none;
 }

package/dist/contexts.d.ts

@@ -1,5 +1,11 @@
 /// <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 = {
+    focused: boolean;
+    setFocused(focused: boolean): void;
+};
+export declare const AttachmentFocusActionsContext: import("react").Context<AttachmentFocusActionsContextType>;
+export declare function useAttachmentFocusActionsContext(): AttachmentFocusActionsContextType;

package/dist/contexts.js

@@ -3,3 +3,10 @@ export const AttachmentContext = createContext({});
 export function useAttachmentContext() {
     return useContext(AttachmentContext);
 }
+export const AttachmentFocusActionsContext = createContext({
+    focused: false,
+    setFocused: () => { },
+});
+export function useAttachmentFocusActionsContext() {
+    return useContext(AttachmentFocusActionsContext);
+}

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,36 @@
 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 { useAttachmentContext } from '../../contexts';
+import { DownloadSVG, TrashSVG, UpdateSVG } from '@snack-uikit/icons';
+import { useAttachmentContext, useAttachmentFocusActionsContext } from '../../contexts';
+import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
-export function Actions({ hideDelete, hideDownload }) {
-    const { onDelete, onDownload, file, disabled } = useAttachmentContext();
+const noop = () => { };
+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();
+    };
+    const handleDelete = (e) => {
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete(file);
+        e.stopPropagation();
+    };
     if (!showDownload && !showDelete) {
         return null;
     }
-    return (_jsxs("div", { className: styles.actions, children: [showDownload && (_jsx(ButtonFunction, { disabled: disabled, size: 'xs', icon: _jsx(DownloadSVG, {}), onClick: e => {
-                    onDownload(file);
-                    e.stopPropagation();
-                } })), showDelete && (_jsx(ButtonFunction, { disabled: disabled, size: 'xs', icon: _jsx(TrashSVG, {}), onClick: e => {
-                    onDelete(file);
-                    e.stopPropagation();
-                } }))] }));
+    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 AttachmentCommonProps = WithSupportProps<{
+export type AttachmentSquareProps = WithSupportProps<{
     /** Файл */
     file?: File;
     /** Колбек на клик по кнопке скачивания */
     onDownload?(file?: File | undefined): void;
     /** Колбек на клик по кнопке удаления */
     onDelete?(file?: File | undefined): void;
+    /** Колбек на клик по кнопке повторения */
+    onRetry?(): void;
     /**
      * Заголовок
      * @default fileName
@@ -31,13 +33,29 @@ export type AttachmentCommonProps = WithSupportProps<{
     /** Управление состоянием загрузки */
     loading?: boolean;
     /**
-     * Объект сопоставления расширения файла и отображаемой иконки
+     * Иконка для файла
      * @defaultIcon FileSVG
      */
-    extension2Icon?: Record<string, IconPredefinedProps['icon']>;
-}> & Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
-export type AttachmentSquareProps = AttachmentCommonProps;
-export type AttachmentProps = AttachmentCommonProps & {
+    icon?: IconPredefinedProps['icon'];
     /** Размер */
     size?: Size;
+}> & 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-1913b436.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.13",
+    "@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": "4052d521d291e1987c85162369886d8e49b3ef49"
+  "gitHead": "7b2a733a770a8bdd14adb9951c8fc552ad192578"
 }

package/src/components/Attachment/Attachment.tsx

@@ -6,24 +6,25 @@ import { Actions, TextBlock } from '../../helperComponents';
 import { getBaseFileName, getFileExtension } from '../../helpers';
 import { useImage } from '../../hooks';
 import { AttachmentProps } from '../../types';
-import { Emblem } from './components/Emblem';
+import { Emblem } from './components';
 import styles from './styles.module.scss';
 
 export function Attachment({
   file,
   loading,
-  extension2Icon,
+  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} extension2Icon={extension2Icon} imageData={imageData} />
+            <Emblem title={title} loading={isLoading} icon={icon} imageData={imageData} />
             <TextBlock title={title} description={description} error={error} />
-            <Actions hideDownload={isLoading} />
+            <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, 'extension2Icon' | 'loading' | 'title'>;
-
-export function Emblem({ loading, extension2Icon, 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, extension2Icon, imageData, title }: EmblemProp
         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, extension2Icon, imageData, title }: EmblemProp
   return (
     <IconPredefined
       size={size}
-      icon={extension2Icon?.[extension] ?? FileSVG}
+      icon={icon ?? FileSVG}
       decor
       appearance='neutral'
       shape='square'
+      data-test-id={TEST_IDS.icon}
     />
   );
 }

package/src/components/AttachmentSquare/AttachmentSquare.tsx

@@ -1,7 +1,10 @@
+import cn from 'classnames';
+import { useState } from 'react';
+
 import { Card } from '@snack-uikit/card';
 import { extractSupportProps } from '@snack-uikit/utils';
 
-import { AttachmentContext } from '../../contexts';
+import { AttachmentContext, AttachmentFocusActionsContext } from '../../contexts';
 import { getBaseFileName, getFileExtension } from '../../helpers';
 import { useImage } from '../../hooks';
 import { AttachmentSquareProps } from '../../types';
@@ -11,17 +14,18 @@ import styles from './styles.module.scss';
 export function AttachmentSquare({
   file,
   loading,
-  extension2Icon,
+  icon,
   title: titleProp,
   description: descriptionProp,
   error,
   disabled,
   truncateVariant,
   checked,
-  multipleSelection,
   onDownload,
   onDelete,
   onClick,
+  onRetry,
+  size = 's',
   ...rest
 }: AttachmentSquareProps) {
   const { loading: loadingImage, imageData } = useImage(file);
@@ -30,25 +34,40 @@ export function AttachmentSquare({
   const title = titleProp || getBaseFileName(file?.name);
   const description = descriptionProp || getFileExtension(file?.name);
 
+  const [hasFocusedActions, setHasFocusedActions] = useState<boolean>(false);
+
   return (
     <Card
       {...extractSupportProps(rest)}
       outline
       disabled={disabled}
-      size='s'
-      className={styles.wrapper}
-      checked={checked}
-      multipleSelection={multipleSelection}
+      size={size}
+      className={cn(styles.wrapper, {
+        [styles.sizeS]: size === 's',
+        [styles.sizeM]: size === 'm',
+        [styles.hasFocusedActions]: hasFocusedActions,
+      })}
+      checked={!loading && checked}
+      multipleSelection
       onClick={!isLoading && !disabled ? onClick : undefined}
       header={
-        <AttachmentContext.Provider value={{ file, truncateVariant, onDelete, onDownload, disabled, size: 's' }}>
-          {!isLoading && !disabled && (
-            <MainContent title={title} extension2Icon={extension2Icon} imageData={imageData} className={styles.main} />
-          )}
-          {!isLoading && (
-            <HoverContent title={title} description={description} error={error} className={styles.hover} />
-          )}
-          {isLoading && <LoadingContent />}
+        <AttachmentContext.Provider value={{ file, truncateVariant, onDelete, onDownload, onRetry, disabled, size }}>
+          <AttachmentFocusActionsContext.Provider
+            value={{
+              focused: hasFocusedActions,
+              setFocused: setHasFocusedActions,
+            }}
+          >
+            {!isLoading && !disabled && !error && (
+              <MainContent title={title} icon={icon} imageData={imageData} className={styles.main} />
+            )}
+
+            {!isLoading && (
+              <HoverContent title={title} description={description} error={error} className={styles.hover} />
+            )}
+
+            {isLoading && <LoadingContent />}
+          </AttachmentFocusActionsContext.Provider>
         </AttachmentContext.Provider>
       }
     />

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

@@ -8,17 +8,18 @@ import styles from '../styles.module.scss';
 type HoverContentProps = Pick<AttachmentProps, 'title' | 'description' | 'error' | 'className'>;
 
 export function HoverContent({ title, description, error, className = '' }: HoverContentProps) {
-  const { disabled } = useAttachmentContext();
+  const { disabled, size } = useAttachmentContext();
 
   return (
     <div
       className={cn(styles.composition, {
-        [className]: !disabled,
+        [className]: !disabled && !error,
       })}
+      data-size={size}
     >
       <TextBlock title={title} error={error} description={!error ? description : undefined} align='center' />
 
-      <Actions />
+      <Actions hideDownload={Boolean(error)} hideRetry={!Boolean(error)} />
     </div>
   );
 }

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

@@ -1,14 +1,25 @@
 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.scss';
 
 export function LoadingContent() {
+  const { size } = useAttachmentContext();
+
   return (
-    <div className={styles.composition}>
-      <IconPredefined size='s' icon={() => <Spinner size='s' />} decor={false} appearance='neutral' shape='square' />
-      <Actions hideDownload />
+    <div className={styles.composition} data-size={size}>
+      <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,37 +6,42 @@ 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' | 'extension2Icon' | 'className'>;
+} & Pick<AttachmentProps, 'title' | 'icon' | 'className'>;
 
-export function MainContent({ title, extension2Icon, imageData, className }: MainContentProps) {
-  const { file } = useAttachmentContext();
-
-  const extension = useMemo(() => getFileExtension(file?.name) ?? '', [file?.name]);
+export function MainContent({ title, icon, imageData, className }: MainContentProps) {
+  const { file, size } = useAttachmentContext();
 
   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>
     );
   }
 
   return (
-    <div className={cn(styles.composition, className)}>
+    <div className={cn(styles.composition, className)} data-size={size}>
       <TextBlock title={title} align='center' />
 
       <IconPredefined
-        size='s'
-        icon={extension2Icon?.[extension] ?? FileSVG}
+        size={size}
+        icon={icon ?? FileSVG}
         decor
         appearance='neutral'
         shape='square'
+        data-test-id={TEST_IDS.icon}
       />
     </div>
   );

package/src/components/AttachmentSquare/components/styles.module.scss

@@ -1,5 +1,7 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
 
+$sizes: 's', 'm';
+
 .composition {
   @include composite-var($attachment-composition-s);
 
@@ -14,4 +16,10 @@
   padding: $dimension-050m;
 
   text-align: center;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($attachment, 'composition', $size);
+    }
+  }
 }

package/src/components/AttachmentSquare/styles.module.scss

@@ -1,21 +1,31 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
 
 .wrapper {
-  @include composite-var($attachment-container-square);
+  &.sizeS {
+    @include composite-var($attachment-container-square-s);
+  }
+
+  &.sizeM {
+    @include composite-var($attachment-container-square-m);
+  }
 
   .main {
     display: flex;
   }
 
   .hover {
-    display: none;
+    pointer-events: none;
+    height: 0;
+    opacity: 0;
   }
 
   &:hover,
-  &:focus-within,
-  &:focus-visible {
+  &:focus-visible,
+  &.hasFocusedActions {
     .hover {
-      display: flex;
+      pointer-events: unset;
+      height: unset;
+      opacity: 1;
     }
 
     .main {

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>({});
@@ -12,3 +12,17 @@ export const AttachmentContext = createContext<AttachmentContextType>({});
 export function useAttachmentContext() {
   return useContext(AttachmentContext);
 }
+
+export type AttachmentFocusActionsContextType = {
+  focused: boolean;
+  setFocused(focused: boolean): void;
+};
+
+export const AttachmentFocusActionsContext = createContext<AttachmentFocusActionsContextType>({
+  focused: false,
+  setFocused: () => {},
+});
+
+export function useAttachmentFocusActionsContext() {
+  return useContext(AttachmentFocusActionsContext);
+}

package/src/helperComponents/Actions/Actions.tsx

@@ -1,19 +1,49 @@
+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 } from '../../contexts';
+import { useAttachmentContext, useAttachmentFocusActionsContext } from '../../contexts';
+import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.scss';
 
 type ActionsProps = {
   hideDownload?: boolean;
   hideDelete?: boolean;
+  hideRetry?: boolean;
 };
 
-export function Actions({ hideDelete, hideDownload }: ActionsProps) {
-  const { onDelete, onDownload, file, disabled } = useAttachmentContext();
+const noop = () => {};
+
+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);
+  };
+  const handleBlur = () => {
+    setFocused(false);
+  };
+
+  const handleRetry = (e: MouseEvent<HTMLButtonElement>) => {
+    onRetry?.();
+    e.stopPropagation();
+  };
+
+  const handleDownload = (e: MouseEvent<HTMLButtonElement>) => {
+    onDownload?.(file);
+    e.stopPropagation();
+  };
+
+  const handleDelete = (e: MouseEvent<HTMLButtonElement>) => {
+    onDelete?.(file);
+    e.stopPropagation();
+  };
 
   if (!showDownload && !showDelete) {
     return null;
@@ -26,10 +56,22 @@ export function Actions({ hideDelete, hideDownload }: ActionsProps) {
           disabled={disabled}
           size='xs'
           icon={<DownloadSVG />}
-          onClick={e => {
-            onDownload(file);
-            e.stopPropagation();
-          }}
+          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 && (
@@ -37,10 +79,10 @@ export function Actions({ hideDelete, hideDownload }: ActionsProps) {
           disabled={disabled}
           size='xs'
           icon={<TrashSVG />}
-          onClick={e => {
-            onDelete(file);
-            e.stopPropagation();
-          }}
+          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 AttachmentCommonProps = WithSupportProps<{
+export type AttachmentSquareProps = WithSupportProps<{
   /** Файл */
   file?: File;
   /** Колбек на клик по кнопке скачивания */
   onDownload?(file?: File | undefined): void;
   /** Колбек на клик по кнопке удаления */
   onDelete?(file?: File | undefined): void;
+  /** Колбек на клик по кнопке повторения */
+  onRetry?(): void;
   /**
    * Заголовок
    * @default fileName
@@ -30,18 +32,35 @@ export type AttachmentCommonProps = WithSupportProps<{
    * <br> - `Middle` - по середине
    * */
   truncateVariant?: TruncateStringProps['variant'];
+
   /** Управление состоянием загрузки */
   loading?: boolean;
   /**
-   * Объект сопоставления расширения файла и отображаемой иконки
+   * Иконка для файла
    * @defaultIcon FileSVG
    */
-  extension2Icon?: Record<string, IconPredefinedProps['icon']>;
-}> &
-  Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
-
-export type AttachmentSquareProps = AttachmentCommonProps;
-export type AttachmentProps = AttachmentCommonProps & {
+  icon?: IconPredefinedProps['icon'];
   /** Размер */
   size?: Size;
+}> &
+  Pick<CardProps, 'checked' | 'disabled' | 'onClick' | 'className'>;
+
+export type AttachmentProps = AttachmentSquareProps & {
+  truncate?: {
+    /**
+     * Максимальное кол-во строк заголовка
+     * @default 1
+     */
+    title?: number;
+    /**
+     * Максимальное кол-во строк описания
+     * @default 1
+     */
+    description?: number;
+    /**
+     * Максимальное кол-во строк ошибки
+     * @default 1
+     */
+    error?: number;
+  };
 };

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

@@ -1,16 +0,0 @@
-.wrapper{
-  width:var(--size-attachment-container-square, 80px);
-  height:var(--size-attachment-container-square, 80px);
-}
-.wrapper .main{
-  display:flex;
-}
-.wrapper .hover{
-  display:none;
-}
-.wrapper:hover .hover, .wrapper:focus-visible .hover{
-  display:flex;
-}
-.wrapper:hover .main, .wrapper:focus-visible .main{
-  display:none;
-}

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

@@ -1,24 +0,0 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
-
-.wrapper {
-  @include composite-var($attachment-container-square);
-
-  .main {
-    display: flex;
-  }
-
-  .hover {
-    display: none;
-  }
-
-  &:hover,
-  &:focus-visible {
-    .hover {
-      display: flex;
-    }
-
-    .main {
-      display: none;
-    }
-  }
-}