@snack-uikit/attachment 0.1.28 → 0.1.29-preview-ba12ca94.0

package/dist/cjs/helperComponents/Actions/Actions.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Actions = Actions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const contexts_1 = require("../../contexts");
+const testIds_1 = require("../../testIds");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const noop = () => {};
+function Actions(_ref) {
+  let {
+    hideDelete,
+    hideDownload,
+    hideRetry
+  } = _ref;
+  const {
+    onDelete,
+    onDownload,
+    file,
+    disabled,
+    onRetry
+  } = (0, contexts_1.useAttachmentContext)();
+  const {
+    setFocused = noop
+  } = (0, contexts_1.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 (0, jsx_runtime_1.jsxs)("div", {
+    className: styles_module_scss_1.default.actions,
+    children: [showDownload && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+      disabled: disabled,
+      size: 'xs',
+      icon: (0, jsx_runtime_1.jsx)(icons_1.DownloadSVG, {}),
+      onClick: handleDownload,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-test-id": testIds_1.TEST_IDS.downloadAction
+    }), showRetry && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+      disabled: disabled,
+      size: 'xs',
+      icon: (0, jsx_runtime_1.jsx)(icons_1.UpdateSVG, {}),
+      onClick: handleRetry,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      className: styles_module_scss_1.default.retryAction,
+      "data-test-id": testIds_1.TEST_IDS.retryAction
+    }), showDelete && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+      disabled: disabled,
+      size: 'xs',
+      icon: (0, jsx_runtime_1.jsx)(icons_1.TrashSVG, {}),
+      onClick: handleDelete,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-test-id": testIds_1.TEST_IDS.deleteAction
+    })]
+  });
+}

package/dist/cjs/helperComponents/Actions/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Actions"), exports);

package/dist/cjs/helperComponents/Text/Text.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__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;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = Text;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const contexts_1 = require("../../contexts");
+function Text(_a) {
+  var {
+      text,
+      className,
+      maxLines = 1
+    } = _a,
+    rest = __rest(_a, ["text", "className", "maxLines"]);
+  const {
+    truncateVariant
+  } = (0, contexts_1.useAttachmentContext)();
+  if (!text) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: className,
+    children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, Object.assign({
+      text: text,
+      maxLines: maxLines,
+      variant: truncateVariant
+    }, (0, utils_1.extractSupportProps)(rest)))
+  });
+}

package/dist/cjs/helperComponents/Text/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Text"), exports);

package/dist/cjs/helperComponents/TextBlock/TextBlock.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextBlock = TextBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const contexts_1 = require("../../contexts");
+const testIds_1 = require("../../testIds");
+const Text_1 = require("../Text");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TextBlock(_ref) {
+  let {
+    title,
+    description,
+    error,
+    className,
+    align = 'left'
+  } = _ref;
+  const {
+    size,
+    truncate = {}
+  } = (0, contexts_1.useAttachmentContext)();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.content, className),
+    "data-size": size,
+    "data-align": align,
+    children: [(0, jsx_runtime_1.jsx)(Text_1.Text, {
+      className: styles_module_scss_1.default.title,
+      text: title,
+      "data-test-id": testIds_1.TEST_IDS.title,
+      maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.title
+    }), (0, jsx_runtime_1.jsx)(Text_1.Text, {
+      className: styles_module_scss_1.default.description,
+      text: description,
+      "data-test-id": testIds_1.TEST_IDS.description,
+      maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.description
+    }), (0, jsx_runtime_1.jsx)(Text_1.Text, {
+      className: styles_module_scss_1.default.error,
+      text: error,
+      "data-test-id": testIds_1.TEST_IDS.error,
+      maxLines: truncate === null || truncate === void 0 ? void 0 : truncate.error
+    })]
+  });
+}

package/dist/cjs/helperComponents/TextBlock/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TextBlock"), exports);

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Actions"), exports);
+__exportStar(require("./TextBlock"), exports);

package/dist/cjs/helpers.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBaseFileName = getBaseFileName;
+exports.getFileExtension = getFileExtension;
+exports.isFileImage = isFileImage;
+function getBaseFileName(fileName) {
+  if (!fileName) {
+    return fileName;
+  }
+  const parts = fileName.split('.');
+  parts.pop();
+  // Для отображения названия файлов без имени (например, .bashrc, .gitignore)
+  if (parts.length === 1 && parts[0] === '') return fileName;
+  return parts.join('.');
+}
+function getFileExtension(fileName) {
+  var _a;
+  return (_a = fileName === null || fileName === void 0 ? void 0 : fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase();
+}
+function isFileImage(file) {
+  return file.type.match(/image\/(png|jpg|jpeg|gif|webp|bmp|svg)/i);
+}

package/dist/cjs/hooks.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useImage = useImage;
+const react_1 = require("react");
+const helpers_1 = require("./helpers");
+function useImage(file) {
+  const [imageData, setImageData] = (0, react_1.useState)(undefined);
+  const [loading, setIsLoading] = (0, react_1.useState)(false);
+  (0, react_1.useEffect)(() => {
+    if (file && (0, helpers_1.isFileImage)(file)) {
+      const reader = new FileReader();
+      reader.onloadstart = () => {
+        setIsLoading(true);
+      };
+      reader.onloadend = () => {
+        setIsLoading(false);
+        const {
+          result
+        } = reader;
+        if (result) {
+          setImageData(result.toString());
+        }
+      };
+      reader.readAsDataURL(file);
+    } else {
+      setImageData(undefined);
+    }
+  }, [file]);
+  return {
+    imageData,
+    loading
+  };
+}

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/cjs/testIds.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_IDS = void 0;
+const PREFIX = 'attachment';
+exports.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/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +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, className, ...rest }: AttachmentProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/esm/components/Attachment/components/Emblem/styled.module.css

@@ -0,0 +1,15 @@
+.img{
+  overflow:hidden;
+  flex-shrink:0;
+  box-sizing:border-box;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+.img[data-size=s]{
+  width:var(--size-attachment-start-item-s, 32px);
+  height:var(--size-attachment-start-item-s, 32px);
+}
+.img[data-size=m]{
+  width:var(--size-attachment-start-item-m, 40px);
+  height:var(--size-attachment-start-item-m, 40px);
+}

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

@@ -0,0 +1 @@
+export * from './Emblem';

package/dist/esm/components/Attachment/components/index.js

@@ -0,0 +1 @@
+export * from './Emblem';

package/dist/esm/components/Attachment/index.js

@@ -0,0 +1 @@
+export * from './Attachment';

package/dist/esm/components/Attachment/styles.module.css

@@ -0,0 +1,15 @@
+.composition{
+  overflow:hidden;
+  display:flex;
+  align-items:flex-start;
+  box-sizing:border-box;
+  width:100%;
+  margin:calc(0px - var(--dimension-050m, 4px));
+  padding:var(--dimension-050m, 4px);
+}
+.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/esm/components/AttachmentSquare/AttachmentSquare.d.ts

@@ -0,0 +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, className, ...rest }: AttachmentSquareProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { AttachmentProps } from '../../../../types';
+type HoverContentProps = Pick<AttachmentProps, 'title' | 'description' | 'error' | 'className'>;
+export declare function HoverContent({ title, description, error, className }: HoverContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from './HoverContent';

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

@@ -0,0 +1 @@
+export declare function LoadingContent(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './LoadingContent';

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

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

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

@@ -0,0 +1 @@
+export * from './MainContent';

package/dist/esm/components/AttachmentSquare/components/index.js

@@ -0,0 +1,3 @@
+export * from './LoadingContent';
+export * from './HoverContent';
+export * from './MainContent';

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

@@ -0,0 +1,19 @@
+.composition{
+  gap:var(--space-attachment-composition-s-gap, 8px);
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+  align-items:center;
+  box-sizing:content-box;
+  width:100%;
+  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/esm/components/AttachmentSquare/index.js

@@ -0,0 +1 @@
+export * from './AttachmentSquare';

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

@@ -0,0 +1,28 @@
+.wrapper{
+  flex-shrink:0;
+}
+.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;
+  flex-shrink:0;
+}
+.wrapper .hover{
+  pointer-events:none;
+  height:0;
+  opacity:0;
+}
+.wrapper:hover .hover, .wrapper:focus-visible .hover, .wrapper.hasFocusedActions .hover{
+  pointer-events:unset;
+  height:unset;
+  opacity:1;
+}
+.wrapper:hover .main, .wrapper:focus-visible .main, .wrapper.hasFocusedActions .main{
+  display:none;
+}

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './AttachmentSquare';
+export * from './Attachment';

package/dist/esm/contexts.d.ts

@@ -0,0 +1,10 @@
+import { AttachmentProps } from './types';
+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/esm/helperComponents/Actions/Actions.d.ts

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

package/dist/esm/helperComponents/Actions/index.js

@@ -0,0 +1 @@
+export * from './Actions';

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

@@ -0,0 +1,13 @@
+.actions{
+  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/esm/helperComponents/Text/Text.d.ts

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

package/dist/esm/helperComponents/Text/index.js

@@ -0,0 +1 @@
+export * from './Text';

package/dist/esm/helperComponents/TextBlock/TextBlock.d.ts

@@ -0,0 +1,5 @@
+import { AttachmentProps } from '../../types';
+export type TextBlockProps = Pick<AttachmentProps, 'title' | 'description' | 'error' | 'className'> & {
+    align?: 'center' | 'left';
+};
+export declare function TextBlock({ title, description, error, className, align }: TextBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/TextBlock/index.js

@@ -0,0 +1 @@
+export * from './TextBlock';