@snack-uikit/attachment 0.0.1-preview-1913b436.0 → 0.0.1-preview-d3c8ef06.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
@@ -21,7 +20,8 @@
 | error | `string` | - | Сообщение об ошибке |
 | truncateVariant | "end" \| "middle" | - | Вариант обрезания строки: <br> - `End` - с конца; <br> - `Middle` - по середине |
 | loading | `boolean` | - | Управление состоянием загрузки |
-| extension2Icon | `Record<string, JSXElementConstructor<{ size?: number; className?: string; }>>` | - | Объект сопоставления расширения файла и отображаемой иконки @defaultIcon FileSVG |
+| extensionToIcon | `Record<string, JSXElementConstructor<{ size?: number; className?: string; }>>` | - | Объект сопоставления расширения файла и отображаемой иконки @defaultIcon FileSVG |
+| size | enum Size: `"s"`, `"m"` | s | Размер |
 | checked | `boolean` | - | Управление состоянием выбран/не выбран |
 | disabled | `boolean` | - | Управление состоянием интерактивности |
 | multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
@@ -39,13 +39,13 @@
 | error | `string` | - | Сообщение об ошибке |
 | truncateVariant | "end" \| "middle" | - | Вариант обрезания строки: <br> - `End` - с конца; <br> - `Middle` - по середине |
 | loading | `boolean` | - | Управление состоянием загрузки |
-| extension2Icon | `Record<string, JSXElementConstructor<{ size?: number; className?: string; }>>` | - | Объект сопоставления расширения файла и отображаемой иконки @defaultIcon FileSVG |
+| extensionToIcon | `Record<string, 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 | Размер |
 
 
 [//]: 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, extensionToIcon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick, size, ...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, 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"]);
     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: 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) })] }) }) })));
 }

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, 'extensionToIcon' | 'loading' | 'title'>;
+export declare function Emblem({ loading, extensionToIcon, imageData, title }: EmblemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,7 @@ import { Spinner } from '@snack-uikit/loaders';
 import { useAttachmentContext } from '../../../../contexts';
 import { getFileExtension } from '../../../../helpers';
 import styles from './styled.module.css';
-export function Emblem({ loading, extension2Icon, imageData, title }) {
+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]);
@@ -16,5 +16,5 @@ export function Emblem({ loading, extension2Icon, imageData, title }) {
     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: (_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: (_a = extensionToIcon === null || extensionToIcon === void 0 ? void 0 : extensionToIcon[extension]) !== null && _a !== void 0 ? _a : FileSVG, decor: true, appearance: 'neutral', shape: 'square' }));
 }

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, extensionToIcon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, multipleSelection, onDownload, onDelete, onClick, 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, 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"]);
     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: checked, multipleSelection: multipleSelection, onClick: !isLoading && !disabled ? onClick : undefined, header: _jsx(AttachmentContext.Provider, { value: { file, truncateVariant, onDelete, onDownload, 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, {})] }) }) })));
 }

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) })] }));
 }

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

@@ -1,8 +1,10 @@
 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 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: 's', icon: () => _jsx(Spinner, { size: 's' }), decor: false, appearance: 'neutral', shape: 'square' }), _jsx(Actions, { hideDownload: 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' | 'extensionToIcon' | 'className'>;
+export declare function MainContent({ title, extensionToIcon, imageData, className }: MainContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,12 +8,12 @@ import { useAttachmentContext } from '../../../../contexts';
 import { TextBlock } from '../../../../helperComponents';
 import { getFileExtension } from '../../../../helpers';
 import styles from '../styles.module.css';
-export function MainContent({ title, extension2Icon, imageData, className }) {
+export function MainContent({ title, extensionToIcon, imageData, className }) {
     var _a, _b;
-    const { file } = useAttachmentContext();
+    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 (_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: (_b = extensionToIcon === null || extensionToIcon === void 0 ? void 0 : extensionToIcon[extension]) !== null && _b !== void 0 ? _b : FileSVG, decor: true, appearance: 'neutral', shape: 'square' })] }));
 }

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

@@ -3,3 +3,9 @@ import { AttachmentProps } from './types';
 export type AttachmentContextType = Pick<AttachmentProps, 'size' | 'file' | 'truncateVariant' | 'onDownload' | 'onDelete' | 'disabled'>;
 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.js

@@ -1,20 +1,30 @@
 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 { useAttachmentContext, useAttachmentFocusActionsContext } from '../../contexts';
 import styles from './styles.module.css';
+const noop = () => { };
 export function Actions({ hideDelete, hideDownload }) {
     const { onDelete, onDownload, file, disabled } = useAttachmentContext();
+    const { setFocused = noop } = useAttachmentFocusActionsContext();
     const showDownload = onDownload && !hideDownload;
     const showDelete = onDelete && !hideDelete;
+    const handleFocus = () => {
+        setFocused(true);
+    };
+    const handleBlur = () => {
+        setFocused(false);
+    };
+    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 })), showDelete && (_jsx(ButtonFunction, { disabled: disabled, size: 'xs', icon: _jsx(TrashSVG, {}), onClick: handleDelete, onFocus: handleFocus, onBlur: handleBlur }))] }));
 }

package/dist/types.d.ts

@@ -3,7 +3,7 @@ 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 AttachmentProps = WithSupportProps<{
     /** Файл */
     file?: File;
     /** Колбек на клик по кнопке скачивания */
@@ -34,10 +34,8 @@ export type AttachmentCommonProps = WithSupportProps<{
      * Объект сопоставления расширения файла и отображаемой иконки
      * @defaultIcon FileSVG
      */
-    extension2Icon?: Record<string, IconPredefinedProps['icon']>;
-}> & Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
-export type AttachmentSquareProps = AttachmentCommonProps;
-export type AttachmentProps = AttachmentCommonProps & {
+    extensionToIcon?: Record<string, IconPredefinedProps['icon']>;
     /** Размер */
     size?: Size;
-};
+}> & Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
+export type AttachmentSquareProps = AttachmentProps;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Attachment",
-  "version": "0.0.1-preview-1913b436.0",
+  "version": "0.0.1-preview-d3c8ef06.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-d3c8ef06.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": "93ec1b7cbdd9a002297609c6e4ef3c96ca7178d7"
 }

package/src/components/Attachment/Attachment.tsx

@@ -6,13 +6,13 @@ 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,
+  extensionToIcon,
   title: titleProp,
   description: descriptionProp,
   error,
@@ -44,9 +44,9 @@ export function Attachment({
       header={
         <AttachmentContext.Provider value={{ file, truncateVariant, onDelete, onDownload, disabled, size }}>
           <div className={styles.composition} data-size={size}>
-            <Emblem title={title} loading={isLoading} extension2Icon={extension2Icon} imageData={imageData} />
+            <Emblem title={title} loading={isLoading} extensionToIcon={extensionToIcon} imageData={imageData} />
             <TextBlock title={title} description={description} error={error} />
-            <Actions hideDownload={isLoading} />
+            <Actions hideDownload={isLoading || Boolean(error)} />
           </div>
         </AttachmentContext.Provider>
       }

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

@@ -11,9 +11,9 @@ import styles from './styled.module.scss';
 
 export type EmblemProps = {
   imageData?: string;
-} & Pick<AttachmentProps, 'extension2Icon' | 'loading' | 'title'>;
+} & Pick<AttachmentProps, 'extensionToIcon' | 'loading' | 'title'>;
 
-export function Emblem({ loading, extension2Icon, imageData, title }: EmblemProps) {
+export function Emblem({ loading, extensionToIcon, imageData, title }: EmblemProps) {
   const { file, size } = useAttachmentContext();
 
   const extension = useMemo(() => getFileExtension(file?.name) ?? '', [file?.name]);
@@ -38,7 +38,7 @@ export function Emblem({ loading, extension2Icon, imageData, title }: EmblemProp
   return (
     <IconPredefined
       size={size}
-      icon={extension2Icon?.[extension] ?? FileSVG}
+      icon={extensionToIcon?.[extension] ?? FileSVG}
       decor
       appearance='neutral'
       shape='square'

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,7 +14,7 @@ import styles from './styles.module.scss';
 export function AttachmentSquare({
   file,
   loading,
-  extension2Icon,
+  extensionToIcon,
   title: titleProp,
   description: descriptionProp,
   error,
@@ -22,6 +25,7 @@ export function AttachmentSquare({
   onDownload,
   onDelete,
   onClick,
+  size = 's',
   ...rest
 }: AttachmentSquareProps) {
   const { loading: loadingImage, imageData } = useImage(file);
@@ -30,25 +34,45 @@ 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}
+      size={size}
+      className={cn(styles.wrapper, {
+        [styles.sizeS]: size === 's',
+        [styles.sizeM]: size === 'm',
+        [styles.hasFocusedActions]: hasFocusedActions,
+      })}
       checked={checked}
       multipleSelection={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, disabled, size }}>
+          <AttachmentFocusActionsContext.Provider
+            value={{
+              focused: hasFocusedActions,
+              setFocused: setHasFocusedActions,
+            }}
+          >
+            {!isLoading && !disabled && !error && (
+              <MainContent
+                title={title}
+                extensionToIcon={extensionToIcon}
+                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)} />
     </div>
   );
 }

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

@@ -1,12 +1,15 @@
 import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { Spinner } from '@snack-uikit/loaders';
 
+import { useAttachmentContext } from '../../../../contexts';
 import { Actions } from '../../../../helperComponents';
 import styles from '../styles.module.scss';
 
 export function LoadingContent() {
+  const { size } = useAttachmentContext();
+
   return (
-    <div className={styles.composition}>
+    <div className={styles.composition} data-size={size}>
       <IconPredefined size='s' icon={() => <Spinner size='s' />} decor={false} appearance='neutral' shape='square' />
       <Actions hideDownload />
     </div>

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

@@ -13,10 +13,10 @@ import styles from '../styles.module.scss';
 
 type MainContentProps = {
   imageData?: string;
-} & Pick<AttachmentProps, 'title' | 'extension2Icon' | 'className'>;
+} & Pick<AttachmentProps, 'title' | 'extensionToIcon' | 'className'>;
 
-export function MainContent({ title, extension2Icon, imageData, className }: MainContentProps) {
-  const { file } = useAttachmentContext();
+export function MainContent({ title, extensionToIcon, imageData, className }: MainContentProps) {
+  const { file, size } = useAttachmentContext();
 
   const extension = useMemo(() => getFileExtension(file?.name) ?? '', [file?.name]);
 
@@ -29,12 +29,12 @@ export function MainContent({ title, extension2Icon, imageData, className }: Mai
   }
 
   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={extensionToIcon?.[extension] ?? FileSVG}
         decor
         appearance='neutral'
         shape='square'

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

@@ -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,7 +1,9 @@
+import { MouseEvent } from 'react';
+
 import { ButtonFunction } from '@snack-uikit/button';
 import { DownloadSVG, TrashSVG } from '@snack-uikit/icons';
 
-import { useAttachmentContext } from '../../contexts';
+import { useAttachmentContext, useAttachmentFocusActionsContext } from '../../contexts';
 import styles from './styles.module.scss';
 
 type ActionsProps = {
@@ -9,12 +11,31 @@ type ActionsProps = {
   hideDelete?: boolean;
 };
 
+const noop = () => {};
+
 export function Actions({ hideDelete, hideDownload }: ActionsProps) {
   const { onDelete, onDownload, file, disabled } = useAttachmentContext();
+  const { setFocused = noop } = useAttachmentFocusActionsContext();
 
   const showDownload = onDownload && !hideDownload;
   const showDelete = onDelete && !hideDelete;
 
+  const handleFocus = () => {
+    setFocused(true);
+  };
+  const handleBlur = () => {
+    setFocused(false);
+  };
+  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 +47,9 @@ export function Actions({ hideDelete, hideDownload }: ActionsProps) {
           disabled={disabled}
           size='xs'
           icon={<DownloadSVG />}
-          onClick={e => {
-            onDownload(file);
-            e.stopPropagation();
-          }}
+          onClick={handleDownload}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
         />
       )}
       {showDelete && (
@@ -37,10 +57,9 @@ export function Actions({ hideDelete, hideDownload }: ActionsProps) {
           disabled={disabled}
           size='xs'
           icon={<TrashSVG />}
-          onClick={e => {
-            onDelete(file);
-            e.stopPropagation();
-          }}
+          onClick={handleDelete}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
         />
       )}
     </div>

package/src/types.ts

@@ -5,7 +5,7 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 export type Size = 's' | 'm';
 
-export type AttachmentCommonProps = WithSupportProps<{
+export type AttachmentProps = WithSupportProps<{
   /** Файл */
   file?: File;
   /** Колбек на клик по кнопке скачивания */
@@ -36,12 +36,10 @@ export type AttachmentCommonProps = WithSupportProps<{
    * Объект сопоставления расширения файла и отображаемой иконки
    * @defaultIcon FileSVG
    */
-  extension2Icon?: Record<string, IconPredefinedProps['icon']>;
+  extensionToIcon?: Record<string, IconPredefinedProps['icon']>;
+  /** Размер */
+  size?: Size;
 }> &
   Pick<CardProps, 'checked' | 'disabled' | 'multipleSelection' | 'onClick' | 'className'>;
 
-export type AttachmentSquareProps = AttachmentCommonProps;
-export type AttachmentProps = AttachmentCommonProps & {
-  /** Размер */
-  size?: Size;
-};
+export type AttachmentSquareProps = AttachmentProps;

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;
-    }
-  }
-}