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

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2024-05-17)
+
+
+### Features
+
+* **PDS-172:** add attachment ([fecc3a2](https://github.com/cloud-ru-tech/snack-uikit/commit/fecc3a2aa922d06827f115a8a020da8615985a16))
+
+
+
+
+
 ## CHANGELOG
 
 ### v0.0.0

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

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

package/dist/components/Attachment/Attachment.js

@@ -19,10 +19,10 @@ import { useImage } from '../../hooks';
 import { Emblem } from './components';
 import styles from './styles.module.css';
 export function Attachment(_a) {
-    var { file, loading, 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"]);
+    var { file, loading, icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, onDownload, onDelete, onClick, onRetry, size = 's', truncate, className } = _a, rest = __rest(_a, ["file", "loading", "icon", "title", "description", "error", "disabled", "truncateVariant", "checked", "onDownload", "onDelete", "onClick", "onRetry", "size", "truncate", "className"]);
     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: !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) })] }) }) })));
+    return (_jsx(Card, Object.assign({}, extractSupportProps(rest), { outline: true, disabled: !loading && disabled, checked: !loading && checked, multipleSelection: true, className: className, 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/AttachmentSquare/AttachmentSquare.d.ts

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

package/dist/components/AttachmentSquare/AttachmentSquare.js

@@ -20,13 +20,13 @@ import { useImage } from '../../hooks';
 import { HoverContent, LoadingContent, MainContent } from './components';
 import styles from './styles.module.css';
 export function AttachmentSquare(_a) {
-    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"]);
+    var { file, loading, icon, title: titleProp, description: descriptionProp, error, disabled, truncateVariant, checked, onDownload, onDelete, onClick, onRetry, size = 's', className } = _a, rest = __rest(_a, ["file", "loading", "icon", "title", "description", "error", "disabled", "truncateVariant", "checked", "onDownload", "onDelete", "onClick", "onRetry", "size", "className"]);
     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);
     const [hasFocusedActions, setHasFocusedActions] = useState(false);
-    return (_jsx(Card, Object.assign({}, extractSupportProps(rest), { outline: true, disabled: disabled, size: size, className: cn(styles.wrapper, {
+    return (_jsx(Card, Object.assign({}, extractSupportProps(rest), { outline: true, disabled: !loading && disabled, size: size, className: cn(className, styles.wrapper, {
             [styles.sizeS]: size === 's',
             [styles.sizeM]: size === 'm',
             [styles.hasFocusedActions]: hasFocusedActions,

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

@@ -3,6 +3,7 @@
   overflow:hidden;
   display:flex;
   flex-direction:column;
+  flex-shrink:0;
   align-items:center;
   box-sizing:content-box;
   width:100%;

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

@@ -1,3 +1,6 @@
+.wrapper{
+  flex-shrink:0;
+}
 .wrapper.sizeS{
   width:var(--size-attachment-container-square-s, 80px);
   height:var(--size-attachment-container-square-s, 80px);
@@ -8,6 +11,7 @@
 }
 .wrapper .main{
   display:flex;
+  flex-shrink:0;
 }
 .wrapper .hover{
   pointer-events:none;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Attachment",
-  "version": "0.0.1-preview-bfae2d03.0",
+  "version": "0.1.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,7 +33,7 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/card": "0.12.14-preview-bfae2d03.0",
+    "@snack-uikit/card": "0.12.14",
     "@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": "7b2a733a770a8bdd14adb9951c8fc552ad192578"
+  "gitHead": "616e36de014b8451e203bcb195f0996ed4af75d6"
 }

package/src/components/Attachment/Attachment.tsx

@@ -25,6 +25,7 @@ export function Attachment({
   onRetry,
   size = 's',
   truncate,
+  className,
   ...rest
 }: AttachmentProps) {
   const { loading: loadingImage, imageData } = useImage(file);
@@ -37,9 +38,10 @@ export function Attachment({
     <Card
       {...extractSupportProps(rest)}
       outline
-      disabled={disabled}
+      disabled={!loading && disabled}
       checked={!loading && checked}
       multipleSelection
+      className={className}
       size={size}
       onClick={!isLoading && !disabled ? onClick : undefined}
       header={

package/src/components/AttachmentSquare/AttachmentSquare.tsx

@@ -26,6 +26,7 @@ export function AttachmentSquare({
   onClick,
   onRetry,
   size = 's',
+  className,
   ...rest
 }: AttachmentSquareProps) {
   const { loading: loadingImage, imageData } = useImage(file);
@@ -40,9 +41,9 @@ export function AttachmentSquare({
     <Card
       {...extractSupportProps(rest)}
       outline
-      disabled={disabled}
+      disabled={!loading && disabled}
       size={size}
-      className={cn(styles.wrapper, {
+      className={cn(className, styles.wrapper, {
         [styles.sizeS]: size === 's',
         [styles.sizeM]: size === 'm',
         [styles.hasFocusedActions]: hasFocusedActions,

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

@@ -8,6 +8,7 @@ $sizes: 's', 'm';
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
   align-items: center;
 
   box-sizing: content-box;

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

@@ -1,6 +1,8 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-attachment';
 
 .wrapper {
+  flex-shrink: 0;
+
   &.sizeS {
     @include composite-var($attachment-container-square-s);
   }
@@ -11,6 +13,7 @@
 
   .main {
     display: flex;
+    flex-shrink: 0;
   }
 
   .hover {