@salutejs/plasma-new-hope 0.336.0-canary.2227.17639708086.0 → 0.336.0-canary.2228.17672900057.0

package/es/components/Attach/Attach.css

@@ -1,16 +1,18 @@
 .IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
 
-.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_horizontal__17bf833c{-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_vertical__17bf833c{row-gap:var(--plasma-attach-vertical-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_auto__17bf833c{row-gap:var(--plasma-attach-vertical-gap);-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_withHelperText__17bf833c{row-gap:var(--plasma-attach-vertical-gap-with-helper-text);}.base_a4eelx_b1pj1390__17bf833c .base_a4eelx_suojwhg__17bf833c{font-family:var(--plasma-attach-cell-title-font-family);font-size:var(--plasma-attach-cell-title-font-size);font-style:var(--plasma-attach-cell-title-font-style);font-weight:var(--plasma-attach-cell-title-font-weight);-webkit-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);-moz-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);-ms-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);letter-spacing:var(--plasma-attach-cell-title-letter-spacing);line-height:var(--plasma-attach-cell-title-line-height);}.base_a4eelx_b1pj1390__17bf833c .base_a4eelx_sssye98__17bf833c{font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);-webkit-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-moz-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-ms-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}
+.base_1c6ezmq_b1pj1390__3539af04.base_1c6ezmq_horizontal__3539af04{-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_1c6ezmq_b1pj1390__3539af04.base_1c6ezmq_vertical__3539af04{row-gap:var(--plasma-attach-vertical-gap);}.base_1c6ezmq_b1pj1390__3539af04.base_1c6ezmq_auto__3539af04{row-gap:var(--plasma-attach-vertical-gap);-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_1c6ezmq_b1pj1390__3539af04.base_1c6ezmq_withHelperText__3539af04{row-gap:var(--plasma-attach-vertical-gap-with-helper-text);}.base_1c6ezmq_b1pj1390__3539af04 .base_1c6ezmq_sjp429d__3539af04{font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);-webkit-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-moz-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-ms-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}
 
 .base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_horizontal__83d45116{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_vertical__83d45116{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_auto__83d45116{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
 
-.base_1vgke1p_b1psfq3i__7fabfd50 .base_1vgke1p_sssye98__7fabfd50{color:var(--plasma-attach-helper-text-color);}
+.base_1tgnvl9_b1psfq3i__8ccb119d .base_1tgnvl9_sjp429d__8ccb119d{color:var(--plasma-attach-helper-text-color);}
+
+.Attach_styles_pso18d_by826kf__6f8aab6e{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.Attach_styles_pso18d_sw7vb9c__6f8aab6e{display:none;}
+.Attach_styles_pso18d_suojwhg__6f8aab6e{position:relative;}
+.Attach_styles_pso18d_sjp429d__6f8aab6e{position:absolute;margin-top:0.25rem;}
+.Attach_styles_pso18d_fssye98__6f8aab6e{display:inline-grid;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr;min-width:8ch;}
+.Attach_styles_pso18d_t1531dv__6f8aab6e{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 
-.Attach_styles_1w3ga58_by826kf__eb7ab604{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.Attach_styles_1w3ga58_sw7vb9c__eb7ab604{display:none;}
-.Attach_styles_1w3ga58_suojwhg__eb7ab604{position:absolute;visibility:hidden;white-space:nowrap;}
-.Attach_styles_1w3ga58_sjp429d__eb7ab604{position:relative;}
-.Attach_styles_1w3ga58_sssye98__eb7ab604{position:absolute;margin-top:0.25rem;}
 
 .CellTextboxLabel_styles_1x97zqi_supiagz__b05150dd{color:var(--plasma-cell-label-color);font-size:var(--plasma-cell-label-font-size);font-weight:var(--plasma-cell-label-font-weight);font-family:var(--plasma-cell-label-font-family);font-style:var(--plasma-cell-label-font-style);line-height:var(--plasma-cell-label-line-height);-webkit-letter-spacing:var(--plasma-cell-label-letter-spacing);-moz-letter-spacing:var(--plasma-cell-label-letter-spacing);-ms-letter-spacing:var(--plasma-cell-label-letter-spacing);letter-spacing:var(--plasma-cell-label-letter-spacing);}
 

package/es/components/Attach/Attach.js

@@ -1,29 +1,29 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
-import { useForkRef, useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
+import React, { forwardRef, useRef, useState } from 'react';
+import { useForkRef } from '@salutejs/plasma-core';
 import { cx } from '../../utils/index.js';
 import { base as base$3 } from './variations/_size/base.js';
 import { base as base$1 } from './variations/_view/base.js';
 import { base as base$2 } from './variations/_helperTextView/base.js';
-import { StyledHiddenInput, StyledHiddenInputHelper, StyledAttachButtonWrapper, StyledHelperText, base } from './Attach.styles.js';
-import { separator } from './utils/index.js';
+import { StyledHiddenInput, StyledAttachButtonWrapper, StyledHelperText, FilenameWrapper, TruncatedFilenamePart, FilenameExtensionPart, base } from './Attach.styles.js';
 import { classes } from './Attach.tokens.js';
 import { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles.js';
 import { extractExtension } from './utils/extractExtension.js';
-import { addSeparator } from './utils/addSeparator.js';
 import { AttachButton } from './components/AttachButton/AttachButton.js';
 import { StyledCell } from './ui/Cell/Cell.styles.js';
 import { IconCloseCircleOutline } from '../_Icon/Icons/IconCloseCircleOutline.js';
-import { getFileicon } from './utils/getFileicon.js';
+import { getFileIcon } from './utils/getFileicon.js';
 
 var _IconCloseCircleOutli;
-var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "helperText", "size", "view", "helperTextView", "className", "style", "isLoading", "disabled", "id", "name", "customIcon", "onChange", "onClear"];
+var _excluded = ["flow", "buttonType", "hideButtonOnAttach", "hasAttachment", "acceptedFileFormats", "helperText", "size", "view", "helperTextView", "className", "style", "isLoading", "disabled", "id", "name", "customIcon", "onClick", "onChange", "onClear"];
 var attachRoot = function attachRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, outerRef) {
     var _props$flow = props.flow,
       flow = _props$flow === void 0 ? 'auto' : _props$flow,
       _props$buttonType = props.buttonType,
       buttonType = _props$buttonType === void 0 ? 'button' : _props$buttonType,
+      _props$hideButtonOnAt = props.hideButtonOnAttach,
+      hideButtonOnAttach = _props$hideButtonOnAt === void 0 ? false : _props$hideButtonOnAt,
       _props$hasAttachment = props.hasAttachment,
       hasAttachment = _props$hasAttachment === void 0 ? true : _props$hasAttachment,
       acceptedFileFormats = props.acceptedFileFormats,
@@ -38,75 +38,34 @@ var attachRoot = function attachRoot(Root) {
       id = props.id,
       name = props.name,
       customIcon = props.customIcon,
+      onClick = props.onClick,
       onChange = props.onChange,
       onClear = props.onClear,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
     var inputRef = useRef(null);
-    var inputHelperRef = useRef(null);
     var cellRef = useRef(null);
     var buttonRef = useRef(null);
-    var emptyTextCellWidth = useRef(null);
     var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
       filename = _useState2[0],
       setFilename = _useState2[1];
-    var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      truncatedFilename = _useState4[0],
-      setTruncatedFilename = _useState4[1];
     var horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;
     var verticalClass = flow === 'vertical' ? classes.vertical : undefined;
     var withHelperTextClass = helperText ? classes.withHelperText : undefined;
     var autoClass = flow === 'auto' ? classes.auto : undefined;
-    var cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;
     var accept = acceptedFileFormats === null || acceptedFileFormats === void 0 ? void 0 : acceptedFileFormats.join(',');
     var extension = extractExtension(filename);
-    var cellContentLeft = customIcon || getFileicon(extension, size);
-    useEffect(function () {
-      var _cellRef$current;
-      emptyTextCellWidth.current = ((_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.offsetWidth) || 0;
-    }, []);
-    useIsomorphicLayoutEffect(function () {
-      if (!cellRef.current || !cellRef.current.parentElement || !inputHelperRef.current || !inputHelperRef.current.textContent || !emptyTextCellWidth.current || !buttonRef.current) {
-        return;
-      }
-      var textWidth = inputHelperRef.current.offsetWidth;
-      var buttonWidth = buttonRef.current.offsetWidth;
-      var _cellRef$current$pare = cellRef.current.parentElement.getBoundingClientRect(),
-        parentWidth = _cellRef$current$pare.width,
-        parentLeft = _cellRef$current$pare.left;
-      var _cellRef$current$getB = cellRef.current.getBoundingClientRect(),
-        cellLeft = _cellRef$current$getB.left;
-      var leftDiff = cellLeft - parentLeft;
-      var currentTextWidth = textWidth;
-      if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth || currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
-        setTruncatedFilename(filename);
-        return;
-      }
-      var currFilename = addSeparator(filename, separator);
-      for (var i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {
-        if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {
-          break;
-        }
-        var left = currFilename.slice(0, i);
-        var right = currFilename.slice(i + 1);
-        var newFilename = "".concat(left).concat(right);
-        inputHelperRef.current.textContent = newFilename;
-        currentTextWidth = inputHelperRef.current.offsetWidth;
-        if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
-          break;
-        }
-        currFilename = newFilename;
-      }
-      inputHelperRef.current.textContent = filename;
-      setTruncatedFilename(currFilename);
-    });
-    var handleClick = function handleClick() {
+    var filenameWithoutExtension = filename.slice(0, -1 - ((extension === null || extension === void 0 ? void 0 : extension.length) || 0));
+    var cellContentLeft = customIcon || getFileIcon(extension, size);
+    var handleClick = function handleClick(e) {
       if (!inputRef.current) {
         return;
       }
+      if (onClick) {
+        onClick(e);
+      }
       inputRef.current.click();
     };
     var handleChange = function handleChange(e) {
@@ -127,7 +86,6 @@ var attachRoot = function attachRoot(Root) {
       }
       inputRef.current.value = '';
       setFilename('');
-      setTruncatedFilename('');
     };
     return /*#__PURE__*/React.createElement(Root, {
       className: cx(horizontalClass, verticalClass, autoClass, withHelperTextClass, className),
@@ -143,20 +101,16 @@ var attachRoot = function attachRoot(Root) {
       id: id,
       name: name,
       onChange: handleChange
-    }), /*#__PURE__*/React.createElement(StyledHiddenInputHelper, {
-      ref: inputHelperRef
-    }, filename), /*#__PURE__*/React.createElement(StyledAttachButtonWrapper, null, /*#__PURE__*/React.createElement(AttachButton, _extends({
+    }), (!hideButtonOnAttach || !filename) && /*#__PURE__*/React.createElement(StyledAttachButtonWrapper, null, /*#__PURE__*/React.createElement(AttachButton, _extends({
       ref: buttonRef,
       buttonType: buttonType,
       isLoading: isLoading,
       disabled: disabled,
       onClick: handleClick
-    }, rest)), helperText && /*#__PURE__*/React.createElement(StyledHelperText, null, helperText)), hasAttachment && /*#__PURE__*/React.createElement(StyledCell, {
+    }, rest)), helperText && /*#__PURE__*/React.createElement(StyledHelperText, null, helperText)), (hasAttachment || hideButtonOnAttach) && filename && /*#__PURE__*/React.createElement(StyledCell, {
       stretching: "fixed",
-      className: cellHiddenClass,
       ref: cellRef,
       size: size,
-      title: truncatedFilename,
       contentLeft: cellContentLeft,
       contentRight: /*#__PURE__*/React.createElement(StyledIconButtonCancel, {
         onClick: handleClear
@@ -164,7 +118,7 @@ var attachRoot = function attachRoot(Root) {
         size: "xs",
         color: "inherit"
       })))
-    }));
+    }, /*#__PURE__*/React.createElement(FilenameWrapper, null, /*#__PURE__*/React.createElement(TruncatedFilenamePart, null, filenameWithoutExtension.slice(0, -1)), /*#__PURE__*/React.createElement(FilenameExtensionPart, null, filenameWithoutExtension.at(-1), ".", extension))));
   });
 };
 var attachConfig = {

package/es/components/Attach/Attach.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attach.js","sources":["../../../src/components/Attach/Attach.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { useForkRef, useIsomorphicLayoutEffect } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCloseCircleOutline } from '../_Icon';\n\nimport { AttachProps } from './Attach.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as helperTextViewCSS } from './variations/_helperTextView/base';\nimport {\n    base,\n    StyledHelperText,\n    StyledHiddenInput,\n    StyledHiddenInputHelper,\n    StyledAttachButtonWrapper,\n} from './Attach.styles';\nimport { StyledCell } from './ui/Cell/Cell';\nimport { extractExtension, getFileicon, addSeparator, separator } from './utils';\nimport { classes } from './Attach.tokens';\nimport { AttachButton } from './components/AttachButton';\nimport { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';\n\nexport const attachRoot = (Root: RootProps<HTMLDivElement, AttachProps>) =>\n    forwardRef<HTMLDivElement, AttachProps>((props, outerRef) => {\n        const {\n            flow = 'auto',\n            buttonType = 'button',\n            hasAttachment = true,\n            acceptedFileFormats,\n            helperText,\n            size,\n            view,\n            helperTextView,\n            className,\n            style,\n            isLoading,\n            disabled,\n            id,\n            name,\n            customIcon,\n            onChange,\n            onClear,\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLDivElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const inputHelperRef = useRef<HTMLDivElement | null>(null);\n        const cellRef = useRef<HTMLDivElement | null>(null);\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n        const emptyTextCellWidth = useRef<number | null>(null);\n\n        const [filename, setFilename] = useState<string>('');\n        const [truncatedFilename, setTruncatedFilename] = useState<string>('');\n\n        const horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;\n        const verticalClass = flow === 'vertical' ? classes.vertical : undefined;\n        const withHelperTextClass = helperText ? classes.withHelperText : undefined;\n        const autoClass = flow === 'auto' ? classes.auto : undefined;\n        const cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;\n\n        const accept = acceptedFileFormats?.join(',');\n        const extension = extractExtension(filename);\n        const cellContentLeft = customIcon || getFileicon(extension, size);\n\n        useEffect(() => {\n            emptyTextCellWidth.current = cellRef.current?.offsetWidth || 0;\n        }, []);\n\n        useIsomorphicLayoutEffect(() => {\n            if (\n                !cellRef.current ||\n                !cellRef.current.parentElement ||\n                !inputHelperRef.current ||\n                !inputHelperRef.current.textContent ||\n                !emptyTextCellWidth.current ||\n                !buttonRef.current\n            ) {\n                return;\n            }\n\n            const { offsetWidth: textWidth } = inputHelperRef.current;\n            const { offsetWidth: buttonWidth } = buttonRef.current;\n            const { width: parentWidth, left: parentLeft } = cellRef.current.parentElement.getBoundingClientRect();\n            const { left: cellLeft } = cellRef.current.getBoundingClientRect();\n            const leftDiff = cellLeft - parentLeft;\n            let currentTextWidth = textWidth;\n\n            if (\n                currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth ||\n                currentTextWidth + emptyTextCellWidth.current < buttonWidth\n            ) {\n                setTruncatedFilename(filename);\n                return;\n            }\n\n            let currFilename = addSeparator(filename, separator);\n            for (let i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {\n                if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {\n                    break;\n                }\n\n                const left = currFilename.slice(0, i);\n                const right = currFilename.slice(i + 1);\n                const newFilename = `${left}${right}`;\n                inputHelperRef.current.textContent = newFilename;\n                currentTextWidth = inputHelperRef.current.offsetWidth;\n\n                if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {\n                    break;\n                }\n\n                currFilename = newFilename;\n            }\n\n            inputHelperRef.current.textContent = filename;\n            setTruncatedFilename(currFilename);\n        });\n\n        const handleClick = () => {\n            if (!inputRef.current) {\n                return;\n            }\n\n            inputRef.current.click();\n        };\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (!e.target.files) {\n                return;\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n\n            setFilename(e.target.files[0].name);\n        };\n\n        const handleClear = () => {\n            if (!inputRef.current) {\n                return;\n            }\n\n            if (onClear) {\n                onClear();\n            }\n\n            inputRef.current.value = '';\n            setFilename('');\n            setTruncatedFilename('');\n        };\n\n        return (\n            <Root\n                className={cx(horizontalClass, verticalClass, autoClass, withHelperTextClass, className)}\n                style={style}\n                size={size}\n                view={view}\n                helperTextView={helperTextView}\n                ref={ref}\n            >\n                <StyledHiddenInput\n                    ref={inputRef}\n                    accept={accept}\n                    type=\"file\"\n                    id={id}\n                    name={name}\n                    onChange={handleChange}\n                />\n                <StyledHiddenInputHelper ref={inputHelperRef}>{filename}</StyledHiddenInputHelper>\n\n                <StyledAttachButtonWrapper>\n                    <AttachButton\n                        ref={buttonRef}\n                        buttonType={buttonType}\n                        isLoading={isLoading}\n                        disabled={disabled}\n                        onClick={handleClick}\n                        {...rest}\n                    />\n\n                    {helperText && <StyledHelperText>{helperText}</StyledHelperText>}\n                </StyledAttachButtonWrapper>\n\n                {hasAttachment && (\n                    <StyledCell\n                        stretching=\"fixed\"\n                        className={cellHiddenClass}\n                        ref={cellRef}\n                        size={size}\n                        title={truncatedFilename}\n                        contentLeft={cellContentLeft}\n                        contentRight={\n                            <StyledIconButtonCancel onClick={handleClear}>\n                                <IconCloseCircleOutline size=\"xs\" color=\"inherit\" />\n                            </StyledIconButtonCancel>\n                        }\n                    />\n                )}\n            </Root>\n        );\n    });\n\nexport const attachConfig = {\n    name: 'Attach',\n    tag: 'div',\n    layout: attachRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        helperTextView: {\n            css: helperTextViewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        helperTextView: 'default',\n        size: 'm',\n    },\n};\n"],"names":["attachRoot","Root","forwardRef","props","outerRef","_props$flow","flow","_props$buttonType","buttonType","_props$hasAttachment","hasAttachment","acceptedFileFormats","helperText","size","view","helperTextView","className","style","isLoading","disabled","id","name","customIcon","onChange","onClear","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","inputRef","inputHelperRef","cellRef","buttonRef","emptyTextCellWidth","_useState","useState","_useState2","_slicedToArray","filename","setFilename","_useState3","_useState4","truncatedFilename","setTruncatedFilename","horizontalClass","classes","horizontal","undefined","verticalClass","vertical","withHelperTextClass","withHelperText","autoClass","auto","cellHiddenClass","length","cellHidden","accept","join","extension","extractExtension","cellContentLeft","getFileicon","useEffect","_cellRef$current","current","offsetWidth","useIsomorphicLayoutEffect","parentElement","textContent","textWidth","buttonWidth","_cellRef$current$pare","getBoundingClientRect","parentWidth","width","parentLeft","left","_cellRef$current$getB","cellLeft","leftDiff","currentTextWidth","currFilename","addSeparator","separator","i","indexOf","slice","right","newFilename","concat","handleClick","click","handleChange","e","target","files","handleClear","value","React","createElement","cx","StyledHiddenInput","type","StyledHiddenInputHelper","StyledAttachButtonWrapper","AttachButton","_extends","onClick","StyledHelperText","StyledCell","stretching","title","contentLeft","contentRight","StyledIconButtonCancel","_IconCloseCircleOutli","IconCloseCircleOutline","color","attachConfig","tag","layout","base","variations","css","viewCSS","helperTextViewCSS","sizeCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Attach.js","sources":["../../../src/components/Attach/Attach.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useState } from 'react';\nimport type { ChangeEvent, MouseEvent } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\nimport { RootProps } from 'src/engines';\nimport { cx } from 'src/utils';\n\nimport { IconCloseCircleOutline } from '../_Icon';\n\nimport { AttachProps } from './Attach.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as helperTextViewCSS } from './variations/_helperTextView/base';\nimport {\n    base,\n    StyledHelperText,\n    StyledHiddenInput,\n    StyledAttachButtonWrapper,\n    FilenameWrapper,\n    TruncatedFilenamePart,\n    FilenameExtensionPart,\n} from './Attach.styles';\nimport { StyledCell } from './ui/Cell/Cell';\nimport { extractExtension, getFileIcon } from './utils';\nimport { classes } from './Attach.tokens';\nimport { AttachButton } from './components/AttachButton';\nimport { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';\n\nexport const attachRoot = (Root: RootProps<HTMLDivElement, AttachProps>) =>\n    forwardRef<HTMLDivElement, AttachProps>((props, outerRef) => {\n        const {\n            flow = 'auto',\n            buttonType = 'button',\n            hideButtonOnAttach = false,\n            hasAttachment = true,\n            acceptedFileFormats,\n            helperText,\n            size,\n            view,\n            helperTextView,\n            className,\n            style,\n            isLoading,\n            disabled,\n            id,\n            name,\n            customIcon,\n            onClick,\n            onChange,\n            onClear,\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLDivElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const cellRef = useRef<HTMLDivElement | null>(null);\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n        const [filename, setFilename] = useState<string>('');\n\n        const horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;\n        const verticalClass = flow === 'vertical' ? classes.vertical : undefined;\n        const withHelperTextClass = helperText ? classes.withHelperText : undefined;\n        const autoClass = flow === 'auto' ? classes.auto : undefined;\n\n        const accept = acceptedFileFormats?.join(',');\n        const extension = extractExtension(filename);\n        const filenameWithoutExtension = filename.slice(0, -1 - (extension?.length || 0));\n        const cellContentLeft = customIcon || getFileIcon(extension, size);\n\n        const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n            if (!inputRef.current) {\n                return;\n            }\n\n            if (onClick) {\n                onClick(e);\n            }\n\n            inputRef.current.click();\n        };\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (!e.target.files) {\n                return;\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n\n            setFilename(e.target.files[0].name);\n        };\n\n        const handleClear = () => {\n            if (!inputRef.current) {\n                return;\n            }\n\n            if (onClear) {\n                onClear();\n            }\n\n            inputRef.current.value = '';\n            setFilename('');\n        };\n\n        return (\n            <Root\n                className={cx(horizontalClass, verticalClass, autoClass, withHelperTextClass, className)}\n                style={style}\n                size={size}\n                view={view}\n                helperTextView={helperTextView}\n                ref={ref}\n            >\n                <StyledHiddenInput\n                    ref={inputRef}\n                    accept={accept}\n                    type=\"file\"\n                    id={id}\n                    name={name}\n                    onChange={handleChange}\n                />\n\n                {(!hideButtonOnAttach || !filename) && (\n                    <StyledAttachButtonWrapper>\n                        <AttachButton\n                            ref={buttonRef}\n                            buttonType={buttonType}\n                            isLoading={isLoading}\n                            disabled={disabled}\n                            onClick={handleClick}\n                            {...rest}\n                        />\n\n                        {helperText && <StyledHelperText>{helperText}</StyledHelperText>}\n                    </StyledAttachButtonWrapper>\n                )}\n\n                {(hasAttachment || hideButtonOnAttach) && filename && (\n                    <StyledCell\n                        stretching=\"fixed\"\n                        ref={cellRef}\n                        size={size}\n                        contentLeft={cellContentLeft}\n                        contentRight={\n                            <StyledIconButtonCancel onClick={handleClear}>\n                                <IconCloseCircleOutline size=\"xs\" color=\"inherit\" />\n                            </StyledIconButtonCancel>\n                        }\n                    >\n                        <FilenameWrapper>\n                            <TruncatedFilenamePart>{filenameWithoutExtension.slice(0, -1)}</TruncatedFilenamePart>\n                            <FilenameExtensionPart>\n                                {filenameWithoutExtension.at(-1)}.{extension}\n                            </FilenameExtensionPart>\n                        </FilenameWrapper>\n                    </StyledCell>\n                )}\n            </Root>\n        );\n    });\n\nexport const attachConfig = {\n    name: 'Attach',\n    tag: 'div',\n    layout: attachRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        helperTextView: {\n            css: helperTextViewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        helperTextView: 'default',\n        size: 'm',\n    },\n};\n"],"names":["attachRoot","Root","forwardRef","props","outerRef","_props$flow","flow","_props$buttonType","buttonType","_props$hideButtonOnAt","hideButtonOnAttach","_props$hasAttachment","hasAttachment","acceptedFileFormats","helperText","size","view","helperTextView","className","style","isLoading","disabled","id","name","customIcon","onClick","onChange","onClear","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","inputRef","cellRef","buttonRef","_useState","useState","_useState2","_slicedToArray","filename","setFilename","horizontalClass","classes","horizontal","undefined","verticalClass","vertical","withHelperTextClass","withHelperText","autoClass","auto","accept","join","extension","extractExtension","filenameWithoutExtension","slice","length","cellContentLeft","getFileIcon","handleClick","e","current","click","handleChange","target","files","handleClear","value","React","createElement","cx","StyledHiddenInput","type","StyledAttachButtonWrapper","AttachButton","_extends","StyledHelperText","StyledCell","stretching","contentLeft","contentRight","StyledIconButtonCancel","_IconCloseCircleOutli","IconCloseCircleOutline","color","FilenameWrapper","TruncatedFilenamePart","FilenameExtensionPart","at","attachConfig","tag","layout","base","variations","css","viewCSS","helperTextViewCSS","sizeCSS","defaults"],"mappings":"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"}

package/es/components/Attach/Attach.styles.js

@@ -1,4 +1,4 @@
-import './Attach.styles_1w3ga58.css';
+import './Attach.styles_pso18d.css';
 import { styled } from '@linaria/react';
 
 var base = "by826kf";
@@ -7,21 +7,31 @@ var StyledHiddenInput = /*#__PURE__*/styled('input')({
   "class": "sw7vb9c",
   propsAsIs: false
 });
-var StyledHiddenInputHelper = /*#__PURE__*/styled('div')({
-  name: "StyledHiddenInputHelper",
-  "class": "suojwhg",
-  propsAsIs: false
-});
 var StyledAttachButtonWrapper = /*#__PURE__*/styled('div')({
   name: "StyledAttachButtonWrapper",
-  "class": "sjp429d",
+  "class": "suojwhg",
   propsAsIs: false
 });
 var StyledHelperText = /*#__PURE__*/styled('div')({
   name: "StyledHelperText",
-  "class": "sssye98",
+  "class": "sjp429d",
+  propsAsIs: false
+});
+var FilenameWrapper = /*#__PURE__*/styled('div')({
+  name: "FilenameWrapper",
+  "class": "fssye98",
+  propsAsIs: false
+});
+var TruncatedFilenamePart = /*#__PURE__*/styled('span')({
+  name: "TruncatedFilenamePart",
+  "class": "t1531dv",
+  propsAsIs: false
+});
+var FilenameExtensionPart = /*#__PURE__*/styled('span')({
+  name: "FilenameExtensionPart",
+  "class": "f7plw5t",
   propsAsIs: false
 });
 
-export { StyledAttachButtonWrapper, StyledHelperText, StyledHiddenInput, StyledHiddenInputHelper, base };
+export { FilenameExtensionPart, FilenameWrapper, StyledAttachButtonWrapper, StyledHelperText, StyledHiddenInput, TruncatedFilenamePart, base };
 //# sourceMappingURL=Attach.styles.js.map

package/es/components/Attach/Attach.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attach.styles.js","sources":["../../../src/components/Attach/Attach.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nexport const base = css`\n    position: relative;\n    display: flex;\n`;\n\nexport const StyledHiddenInput = styled.input`\n    display: none;\n`;\n\nexport const StyledHiddenInputHelper = styled.div`\n    position: absolute;\n    visibility: hidden;\n    white-space: nowrap;\n`;\n\nexport const StyledAttachButtonWrapper = styled.div`\n    position: relative;\n`;\n\nexport const StyledHelperText = styled.div`\n    position: absolute;\n    margin-top: 0.25rem;\n`;\n"],"names":["base","StyledHiddenInput","styled","name","class","propsAsIs","StyledHiddenInputHelper","StyledAttachButtonWrapper","StyledHelperText"],"mappings":";;AAGO,IAAMA,IAAI,GAGhB,UAAA;AAEM,IAAMC,iBAAiB,gBAAGC,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEtC,EAAA;AAEM,IAAMC,uBAAuB,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,yBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAI5C,EAAA;AAEM,IAAME,yBAAyB,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,2BAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE9C,EAAA;AAEM,IAAMG,gBAAgB,gBAAGN,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGrC;;;;"}
+{"version":3,"file":"Attach.styles.js","sources":["../../../src/components/Attach/Attach.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\nimport { applyEllipsis } from 'src/mixins';\n\nexport const base = css`\n    position: relative;\n    display: flex;\n`;\n\nexport const StyledHiddenInput = styled.input`\n    display: none;\n`;\n\nexport const StyledAttachButtonWrapper = styled.div`\n    position: relative;\n`;\n\nexport const StyledHelperText = styled.div`\n    position: absolute;\n    margin-top: 0.25rem;\n`;\n\nexport const FilenameWrapper = styled.div`\n    display: inline-grid;\n    align-items: center;\n    grid-template-columns: auto 1fr;\n    min-width: 8ch;\n`;\n\nexport const TruncatedFilenamePart = styled.span`\n    ${applyEllipsis()}\n`;\n\nexport const FilenameExtensionPart = styled.span``;\n"],"names":["base","StyledHiddenInput","styled","name","class","propsAsIs","StyledAttachButtonWrapper","StyledHelperText","FilenameWrapper","TruncatedFilenamePart","FilenameExtensionPart"],"mappings":";;AAIO,IAAMA,IAAI,GAGhB,UAAA;AAEM,IAAMC,iBAAiB,gBAAGC,MAAM,CAAA,OAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAEtC,EAAA;AAEM,IAAMC,yBAAyB,gBAAGJ,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,2BAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE9C,EAAA;AAEM,IAAME,gBAAgB,gBAAGL,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGrC,EAAA;AAEM,IAAMG,eAAe,gBAAGN,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKpC,EAAA;AAEM,IAAMI,qBAAqB,gBAAGP,MAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,uBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE1C,EAAA;AAEM,IAAMK,qBAAqB,gBAAGR,MAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,uBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAO;;;;"}

package/es/components/Attach/Attach.styles_pso18d.css

@@ -0,0 +1,7 @@
+.by826kf{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.sw7vb9c{display:none;}
+.suojwhg{position:relative;}
+.sjp429d{position:absolute;margin-top:0.25rem;}
+.fssye98{display:inline-grid;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr;min-width:8ch;}
+.t1531dv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+

package/es/components/Attach/utils/getFileicon.js

@@ -6,7 +6,7 @@ import { IconBlankXlsOutline } from '../../_Icon/Icons/IconBlankXlsOutline.js';
 import { IconBlankDocOutline } from '../../_Icon/Icons/IconBlankDocOutline.js';
 import { IconBlankPdfOutline } from '../../_Icon/Icons/IconBlankPdfOutline.js';
 
-var getFileicon = function getFileicon(extension, size) {
+var getFileIcon = function getFileIcon(extension, size) {
   var iconSize = size === 'xs' ? 'xs' : 's';
   switch (extension) {
     case 'pdf':
@@ -52,5 +52,5 @@ var getFileicon = function getFileicon(extension, size) {
   }
 };
 
-export { getFileicon };
+export { getFileIcon };
 //# sourceMappingURL=getFileicon.js.map

package/es/components/Attach/utils/getFileicon.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFileicon.js","sources":["../../../../src/components/Attach/utils/getFileicon.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n    IconBlankCsvOutline,\n    IconBlankDocOutline,\n    IconBlankOutline,\n    IconBlankPdfOutline,\n    IconBlankTxtOutline,\n    IconBlankXlsOutline,\n} from '../../_Icon';\n\nexport const getFileicon = (extension?: string, size?: string) => {\n    const iconSize = size === 'xs' ? 'xs' : 's';\n\n    switch (extension) {\n        case 'pdf':\n            return <IconBlankPdfOutline size={iconSize} color=\"inherit\" />;\n        case 'doc':\n            return <IconBlankDocOutline size={iconSize} color=\"inherit\" />;\n        case 'docx':\n            return <IconBlankDocOutline size={iconSize} color=\"inherit\" />;\n        case 'xls':\n            return <IconBlankXlsOutline size={iconSize} color=\"inherit\" />;\n        case 'xlsx':\n            return <IconBlankXlsOutline size={iconSize} color=\"inherit\" />;\n        case 'txt':\n            return <IconBlankTxtOutline size={iconSize} color=\"inherit\" />;\n        case 'csv':\n            return <IconBlankCsvOutline size={iconSize} color=\"inherit\" />;\n        default:\n            return <IconBlankOutline size={iconSize} color=\"inherit\" />;\n    }\n};\n"],"names":["getFileicon","extension","size","iconSize","React","createElement","IconBlankPdfOutline","color","IconBlankDocOutline","IconBlankXlsOutline","IconBlankTxtOutline","IconBlankCsvOutline","IconBlankOutline"],"mappings":";;;;;;;;AAWO,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAIC,SAAkB,EAAEC,IAAa,EAAK;EAC9D,IAAMC,QAAQ,GAAGD,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,GAAG,CAAA;AAE3C,EAAA,QAAQD,SAAS;AACb,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOG,KAAA,CAAAC,aAAA,CAACC,mBAAmB,EAAA;AAACJ,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACG,mBAAmB,EAAA;AAACN,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,MAAM;AACP,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACG,mBAAmB,EAAA;AAACN,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACI,mBAAmB,EAAA;AAACP,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,MAAM;AACP,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACI,mBAAmB,EAAA;AAACP,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACK,mBAAmB,EAAA;AAACR,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACM,mBAAmB,EAAA;AAACT,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA;AACI,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACO,gBAAgB,EAAA;AAACV,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AACnE,GAAA;AACJ;;;;"}
+{"version":3,"file":"getFileicon.js","sources":["../../../../src/components/Attach/utils/getFileicon.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n    IconBlankCsvOutline,\n    IconBlankDocOutline,\n    IconBlankOutline,\n    IconBlankPdfOutline,\n    IconBlankTxtOutline,\n    IconBlankXlsOutline,\n} from '../../_Icon';\n\nexport const getFileIcon = (extension?: string, size?: string) => {\n    const iconSize = size === 'xs' ? 'xs' : 's';\n\n    switch (extension) {\n        case 'pdf':\n            return <IconBlankPdfOutline size={iconSize} color=\"inherit\" />;\n        case 'doc':\n            return <IconBlankDocOutline size={iconSize} color=\"inherit\" />;\n        case 'docx':\n            return <IconBlankDocOutline size={iconSize} color=\"inherit\" />;\n        case 'xls':\n            return <IconBlankXlsOutline size={iconSize} color=\"inherit\" />;\n        case 'xlsx':\n            return <IconBlankXlsOutline size={iconSize} color=\"inherit\" />;\n        case 'txt':\n            return <IconBlankTxtOutline size={iconSize} color=\"inherit\" />;\n        case 'csv':\n            return <IconBlankCsvOutline size={iconSize} color=\"inherit\" />;\n        default:\n            return <IconBlankOutline size={iconSize} color=\"inherit\" />;\n    }\n};\n"],"names":["getFileIcon","extension","size","iconSize","React","createElement","IconBlankPdfOutline","color","IconBlankDocOutline","IconBlankXlsOutline","IconBlankTxtOutline","IconBlankCsvOutline","IconBlankOutline"],"mappings":";;;;;;;;AAWO,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAIC,SAAkB,EAAEC,IAAa,EAAK;EAC9D,IAAMC,QAAQ,GAAGD,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,GAAG,CAAA;AAE3C,EAAA,QAAQD,SAAS;AACb,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOG,KAAA,CAAAC,aAAA,CAACC,mBAAmB,EAAA;AAACJ,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACG,mBAAmB,EAAA;AAACN,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,MAAM;AACP,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACG,mBAAmB,EAAA;AAACN,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACI,mBAAmB,EAAA;AAACP,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,MAAM;AACP,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACI,mBAAmB,EAAA;AAACP,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACK,mBAAmB,EAAA;AAACR,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACM,mBAAmB,EAAA;AAACT,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAClE,IAAA;AACI,MAAA,oBAAOH,KAAA,CAAAC,aAAA,CAACO,gBAAgB,EAAA;AAACV,QAAAA,IAAI,EAAEC,QAAS;AAACI,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AACnE,GAAA;AACJ;;;;"}

package/es/components/Attach/variations/_helperTextView/base.js

@@ -1,4 +1,4 @@
-import './base_1vgke1p.css';
+import './base_1tgnvl9.css';
 var base = "b1psfq3i";
 
 export { base };

package/es/components/Attach/variations/_helperTextView/base_1tgnvl9.css

@@ -0,0 +1 @@
+.b1psfq3i .sjp429d{color:var(--plasma-attach-helper-text-color);}

package/es/components/Attach/variations/_size/base.js

@@ -1,4 +1,4 @@
-import './base_a4eelx.css';
+import './base_1c6ezmq.css';
 var base = "b1pj1390";
 
 export { base };

package/es/components/Attach/variations/_size/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/Attach/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens, classes } from '../../Attach.tokens';\nimport { StyledHelperText, StyledHiddenInputHelper } from '../../Attach.styles';\n\nexport const base = css`\n    &.${classes.horizontal} {\n        column-gap: var(${tokens.horizontalGap});\n    }\n\n    &.${classes.vertical} {\n        row-gap: var(${tokens.verticalGap});\n    }\n\n    &.${classes.auto} {\n        row-gap: var(${tokens.verticalGap});\n        column-gap: var(${tokens.horizontalGap});\n    }\n\n    &.${classes.withHelperText} {\n        row-gap: var(${tokens.verticalGapWithHelperText});\n    }\n\n    ${StyledHiddenInputHelper} {\n        font-family: var(${tokens.cellTitleFontFamily});\n        font-size: var(${tokens.cellTitleFontSize});\n        font-style: var(${tokens.cellTitleFontStyle});\n        font-weight: var(${tokens.cellTitleFontWeight});\n        letter-spacing: var(${tokens.cellTitleLetterSpacing});\n        line-height: var(${tokens.cellTitleLineHeight});\n    }\n\n    ${StyledHelperText} {\n        font-family: var(--plasma-typo-body-xs-font-family);\n        font-size: var(--plasma-typo-body-xs-font-size);\n        font-style: var(--plasma-typo-body-xs-font-style);\n        font-weight: var(--plasma-typo-body-xs-font-weight);\n        letter-spacing: var(--plasma-typo-body-xs-letter-spacing);\n        line-height: var(--plasma-typo-body-xs-line-height);\n    }\n}\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GAoChB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../src/components/Attach/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens, classes } from '../../Attach.tokens';\nimport { StyledHelperText } from '../../Attach.styles';\n\nexport const base = css`\n    &.${classes.horizontal} {\n        column-gap: var(${tokens.horizontalGap});\n    }\n\n    &.${classes.vertical} {\n        row-gap: var(${tokens.verticalGap});\n    }\n\n    &.${classes.auto} {\n        row-gap: var(${tokens.verticalGap});\n        column-gap: var(${tokens.horizontalGap});\n    }\n\n    &.${classes.withHelperText} {\n        row-gap: var(${tokens.verticalGapWithHelperText});\n    }\n\n    ${StyledHelperText} {\n        font-family: var(--plasma-typo-body-xs-font-family);\n        font-size: var(--plasma-typo-body-xs-font-size);\n        font-style: var(--plasma-typo-body-xs-font-style);\n        font-weight: var(--plasma-typo-body-xs-font-weight);\n        letter-spacing: var(--plasma-typo-body-xs-letter-spacing);\n        line-height: var(--plasma-typo-body-xs-line-height);\n    }\n}\n`;\n"],"names":["base"],"mappings":"AAKO,IAAMA,IAAI,GA2BhB;;;;"}

package/es/components/Attach/variations/_size/base_1c6ezmq.css

@@ -0,0 +1 @@
+.b1pj1390.horizontal{-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.b1pj1390.vertical{row-gap:var(--plasma-attach-vertical-gap);}.b1pj1390.auto{row-gap:var(--plasma-attach-vertical-gap);-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.b1pj1390.with-helper-text{row-gap:var(--plasma-attach-vertical-gap-with-helper-text);}.b1pj1390 .sjp429d{font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);-webkit-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-moz-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-ms-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}

package/es/index.css

@@ -855,17 +855,19 @@
 
 .base_54y6eh_b1x5zqph__a3c52690 .base_54y6eh_e1fh2i5t__a3c52690{padding-left:var(--plasma-editable-edit-button-padding-left);}.base_54y6eh_b1x5zqph__a3c52690 .base_54y6eh_editableTextBox__a3c52690{margin-right:var(--plasma-editable-text-box-margin-right);padding-right:var(--plasma-editable-text-box-padding-right);}
 
-.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_horizontal__17bf833c{-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_vertical__17bf833c{row-gap:var(--plasma-attach-vertical-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_auto__17bf833c{row-gap:var(--plasma-attach-vertical-gap);-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_a4eelx_b1pj1390__17bf833c.base_a4eelx_withHelperText__17bf833c{row-gap:var(--plasma-attach-vertical-gap-with-helper-text);}.base_a4eelx_b1pj1390__17bf833c .base_a4eelx_suojwhg__17bf833c{font-family:var(--plasma-attach-cell-title-font-family);font-size:var(--plasma-attach-cell-title-font-size);font-style:var(--plasma-attach-cell-title-font-style);font-weight:var(--plasma-attach-cell-title-font-weight);-webkit-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);-moz-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);-ms-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);letter-spacing:var(--plasma-attach-cell-title-letter-spacing);line-height:var(--plasma-attach-cell-title-line-height);}.base_a4eelx_b1pj1390__17bf833c .base_a4eelx_sssye98__17bf833c{font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);-webkit-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-moz-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-ms-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}
+.base_1c6ezmq_b1pj1390__3539af04.base_1c6ezmq_horizontal__3539af04{-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_1c6ezmq_b1pj1390__3539af04.base_1c6ezmq_vertical__3539af04{row-gap:var(--plasma-attach-vertical-gap);}.base_1c6ezmq_b1pj1390__3539af04.base_1c6ezmq_auto__3539af04{row-gap:var(--plasma-attach-vertical-gap);-webkit-column-gap:var(--plasma-attach-horizontal-gap);column-gap:var(--plasma-attach-horizontal-gap);}.base_1c6ezmq_b1pj1390__3539af04.base_1c6ezmq_withHelperText__3539af04{row-gap:var(--plasma-attach-vertical-gap-with-helper-text);}.base_1c6ezmq_b1pj1390__3539af04 .base_1c6ezmq_sjp429d__3539af04{font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);-webkit-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-moz-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);-ms-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}
 
 .base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_horizontal__83d45116{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_vertical__83d45116{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1nvsg1b_b438e2d__83d45116.base_1nvsg1b_auto__83d45116{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
 
-.base_1vgke1p_b1psfq3i__7fabfd50 .base_1vgke1p_sssye98__7fabfd50{color:var(--plasma-attach-helper-text-color);}
+.base_1tgnvl9_b1psfq3i__8ccb119d .base_1tgnvl9_sjp429d__8ccb119d{color:var(--plasma-attach-helper-text-color);}
+
+.Attach_styles_pso18d_by826kf__6f8aab6e{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.Attach_styles_pso18d_sw7vb9c__6f8aab6e{display:none;}
+.Attach_styles_pso18d_suojwhg__6f8aab6e{position:relative;}
+.Attach_styles_pso18d_sjp429d__6f8aab6e{position:absolute;margin-top:0.25rem;}
+.Attach_styles_pso18d_fssye98__6f8aab6e{display:inline-grid;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr;min-width:8ch;}
+.Attach_styles_pso18d_t1531dv__6f8aab6e{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 
-.Attach_styles_1w3ga58_by826kf__eb7ab604{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.Attach_styles_1w3ga58_sw7vb9c__eb7ab604{display:none;}
-.Attach_styles_1w3ga58_suojwhg__eb7ab604{position:absolute;visibility:hidden;white-space:nowrap;}
-.Attach_styles_1w3ga58_sjp429d__eb7ab604{position:relative;}
-.Attach_styles_1w3ga58_sssye98__eb7ab604{position:absolute;margin-top:0.25rem;}
 
 .Cell_styles_69w962_si1k6gv__a96d6b9b{--plasma-cell-label-color:var(--plasma-attach-cell-label-color);--plasma-cell-title-color:var(--plasma-attach-cell-title-color);--plasma-cell-subtitle-color:var(--plasma-attach-cell-subtitle-color);--plasma-cell-background-color:var(--plasma-attach-cell-background-color);--plasma-cell-width:var(--plasma-attach-cell-width);--plasma-cell-padding:var(--plasma-attach-cell-padding);--plasma-cell-padding-left-content:var(--plasma-attach-cell-padding-left-content);--plasma-cell-padding-content:var(--plasma-attach-cell-padding-content);--plasma-cell-padding-right-content:var(--plasma-attach-cell-padding-right-content);--plasma-cell-textbox-gap:var(--plasma-attach-cell-textbox-gap);--plasma-cell-gap:var(--plasma-attach-cell-gap);--plasma-cell-label-font-family:var(--plasma-attach-cell-label-font-family);--plasma-cell-label-font-size:var(--plasma-attach-cell-label-font-size);--plasma-cell-label-font-style:var(--plasma-attach-cell-label-font-style);--plasma-cell-label-font-weight:var(--plasma-attach-cell-label-font-weight);--plasma-cell-label-letter-spacing:var(--plasma-attach-cell-label-letter-spacing);--plasma-cell-label-line-height:var(--plasma-attach-cell-label-line-height);--plasma-cell-title-font-family:var(--plasma-attach-cell-title-font-family);--plasma-cell-title-font-size:var(--plasma-attach-cell-title-font-size);--plasma-cell-title-font-style:var(--plasma-attach-cell-title-font-style);--plasma-cell-title-font-weight:var(--plasma-attach-cell-title-font-weight);--plasma-cell-title-letter-spacing:var(--plasma-attach-cell-title-letter-spacing);--plasma-cell-title-line-height:var(--plasma-attach-cell-title-line-height);--plasma-cell-subtitle-font-family:var(--plasma-attach-cell-subtitle-font-family);--plasma-cell-subtitle-font-size:var(--plasma-attach-cell-subtitle-font-size);--plasma-cell-subtitle-font-style:var(--plasma-attach-cell-subtitle-font-style);--plasma-cell-subtitle-font-weight:var(--plasma-attach-cell-subtitle-font-weight);--plasma-cell-subtitle-letter-spacing:var(--plasma-attach-cell-subtitle-letter-spacing);--plasma-cell-subtitle-line-height:var(--plasma-attach-cell-subtitle-line-height);white-space:nowrap;}.Cell_styles_69w962_si1k6gv__a96d6b9b.Cell_styles_69w962_cellHidden__a96d6b9b{visibility:hidden;}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.336.0-canary.2227.17639708086.0",
+  "version": "0.336.0-canary.2228.17672900057.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "64c58b5cf392597d3a0609a4d68a5be7bdaa2bea"
+  "gitHead": "86e7e96e458c37612eaf19b135f8bdf870583084"
 }

package/styled-components/cjs/components/Attach/Attach.js

@@ -173,9 +173,10 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var attachRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, outerRef) {
-        var _props_flow = props.flow, flow = _props_flow === void 0 ? 'auto' : _props_flow, _props_buttonType = props.buttonType, buttonType = _props_buttonType === void 0 ? 'button' : _props_buttonType, _props_hasAttachment = props.hasAttachment, hasAttachment = _props_hasAttachment === void 0 ? true : _props_hasAttachment, acceptedFileFormats = props.acceptedFileFormats, helperText = props.helperText, size = props.size, view = props.view, helperTextView = props.helperTextView, className = props.className, style = props.style, isLoading = props.isLoading, disabled = props.disabled, id = props.id, name = props.name, customIcon = props.customIcon, onChange = props.onChange, onClear = props.onClear, rest = _object_without_properties(props, [
+        var _props_flow = props.flow, flow = _props_flow === void 0 ? 'auto' : _props_flow, _props_buttonType = props.buttonType, buttonType = _props_buttonType === void 0 ? 'button' : _props_buttonType, _props_hideButtonOnAttach = props.hideButtonOnAttach, hideButtonOnAttach = _props_hideButtonOnAttach === void 0 ? false : _props_hideButtonOnAttach, _props_hasAttachment = props.hasAttachment, hasAttachment = _props_hasAttachment === void 0 ? true : _props_hasAttachment, acceptedFileFormats = props.acceptedFileFormats, helperText = props.helperText, size = props.size, view = props.view, helperTextView = props.helperTextView, className = props.className, style = props.style, isLoading = props.isLoading, disabled = props.disabled, id = props.id, name = props.name, customIcon = props.customIcon, onClick = props.onClick, onChange = props.onChange, onClear = props.onClear, rest = _object_without_properties(props, [
             "flow",
             "buttonType",
+            "hideButtonOnAttach",
             "hasAttachment",
             "acceptedFileFormats",
             "helperText",
@@ -189,66 +190,31 @@ var attachRoot = function(Root) {
             "id",
             "name",
             "customIcon",
+            "onClick",
             "onChange",
             "onClear"
         ]);
         var innerRef = (0, _react.useRef)(null);
         var ref = (0, _plasmacore.useForkRef)(outerRef, innerRef);
         var inputRef = (0, _react.useRef)(null);
-        var inputHelperRef = (0, _react.useRef)(null);
         var cellRef = (0, _react.useRef)(null);
         var buttonRef = (0, _react.useRef)(null);
-        var emptyTextCellWidth = (0, _react.useRef)(null);
         var _useState = _sliced_to_array((0, _react.useState)(''), 2), filename = _useState[0], setFilename = _useState[1];
-        var _useState1 = _sliced_to_array((0, _react.useState)(''), 2), truncatedFilename = _useState1[0], setTruncatedFilename = _useState1[1];
         var horizontalClass = flow === 'horizontal' ? _Attachtokens.classes.horizontal : undefined;
         var verticalClass = flow === 'vertical' ? _Attachtokens.classes.vertical : undefined;
         var withHelperTextClass = helperText ? _Attachtokens.classes.withHelperText : undefined;
         var autoClass = flow === 'auto' ? _Attachtokens.classes.auto : undefined;
-        var cellHiddenClass = truncatedFilename.length === 0 ? _Attachtokens.classes.cellHidden : undefined;
         var accept = acceptedFileFormats === null || acceptedFileFormats === void 0 ? void 0 : acceptedFileFormats.join(',');
         var extension = (0, _utils1.extractExtension)(filename);
-        var cellContentLeft = customIcon || (0, _utils1.getFileicon)(extension, size);
-        (0, _react.useEffect)(function() {
-            var _cellRef_current;
-            emptyTextCellWidth.current = ((_cellRef_current = cellRef.current) === null || _cellRef_current === void 0 ? void 0 : _cellRef_current.offsetWidth) || 0;
-        }, []);
-        (0, _plasmacore.useIsomorphicLayoutEffect)(function() {
-            if (!cellRef.current || !cellRef.current.parentElement || !inputHelperRef.current || !inputHelperRef.current.textContent || !emptyTextCellWidth.current || !buttonRef.current) {
-                return;
-            }
-            var _inputHelperRef_current = inputHelperRef.current, textWidth = _inputHelperRef_current.offsetWidth;
-            var _buttonRef_current = buttonRef.current, buttonWidth = _buttonRef_current.offsetWidth;
-            var _cellRef_current_parentElement_getBoundingClientRect = cellRef.current.parentElement.getBoundingClientRect(), parentWidth = _cellRef_current_parentElement_getBoundingClientRect.width, parentLeft = _cellRef_current_parentElement_getBoundingClientRect.left;
-            var _cellRef_current_getBoundingClientRect = cellRef.current.getBoundingClientRect(), cellLeft = _cellRef_current_getBoundingClientRect.left;
-            var leftDiff = cellLeft - parentLeft;
-            var currentTextWidth = textWidth;
-            if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth || currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
-                setTruncatedFilename(filename);
-                return;
-            }
-            var currFilename = (0, _utils1.addSeparator)(filename, _utils1.separator);
-            for(var i = currFilename.indexOf(_utils1.separator) - 1; i > 0; i -= 1){
-                if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {
-                    break;
-                }
-                var left = currFilename.slice(0, i);
-                var right = currFilename.slice(i + 1);
-                var newFilename = "".concat(left).concat(right);
-                inputHelperRef.current.textContent = newFilename;
-                currentTextWidth = inputHelperRef.current.offsetWidth;
-                if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
-                    break;
-                }
-                currFilename = newFilename;
-            }
-            inputHelperRef.current.textContent = filename;
-            setTruncatedFilename(currFilename);
-        });
-        var handleClick = function() {
+        var filenameWithoutExtension = filename.slice(0, -1 - ((extension === null || extension === void 0 ? void 0 : extension.length) || 0));
+        var cellContentLeft = customIcon || (0, _utils1.getFileIcon)(extension, size);
+        var handleClick = function(e) {
             if (!inputRef.current) {
                 return;
             }
+            if (onClick) {
+                onClick(e);
+            }
             inputRef.current.click();
         };
         var handleChange = function(e) {
@@ -269,7 +235,6 @@ var attachRoot = function(Root) {
             }
             inputRef.current.value = '';
             setFilename('');
-            setTruncatedFilename('');
         };
         return /*#__PURE__*/ _react.default.createElement(Root, {
             className: (0, _utils.cx)(horizontalClass, verticalClass, autoClass, withHelperTextClass, className),
@@ -285,20 +250,16 @@ var attachRoot = function(Root) {
             id: id,
             name: name,
             onChange: handleChange
-        }), /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHiddenInputHelper, {
-            ref: inputHelperRef
-        }, filename), /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledAttachButtonWrapper, null, /*#__PURE__*/ _react.default.createElement(_AttachButton.AttachButton, _object_spread({
+        }), (!hideButtonOnAttach || !filename) && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledAttachButtonWrapper, null, /*#__PURE__*/ _react.default.createElement(_AttachButton.AttachButton, _object_spread({
             ref: buttonRef,
             buttonType: buttonType,
             isLoading: isLoading,
             disabled: disabled,
             onClick: handleClick
-        }, rest)), helperText && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHelperText, null, helperText)), hasAttachment && /*#__PURE__*/ _react.default.createElement(_Cell.StyledCell, {
+        }, rest)), helperText && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHelperText, null, helperText)), (hasAttachment || hideButtonOnAttach) && filename && /*#__PURE__*/ _react.default.createElement(_Cell.StyledCell, {
             stretching: "fixed",
-            className: cellHiddenClass,
             ref: cellRef,
             size: size,
-            title: truncatedFilename,
             contentLeft: cellContentLeft,
             contentRight: /*#__PURE__*/ _react.default.createElement(_IconButtonstyles.StyledIconButtonCancel, {
                 onClick: handleClear
@@ -306,7 +267,7 @@ var attachRoot = function(Root) {
                 size: "xs",
                 color: "inherit"
             }))
-        }));
+        }, /*#__PURE__*/ _react.default.createElement(_Attachstyles.FilenameWrapper, null, /*#__PURE__*/ _react.default.createElement(_Attachstyles.TruncatedFilenamePart, null, filenameWithoutExtension.slice(0, -1)), /*#__PURE__*/ _react.default.createElement(_Attachstyles.FilenameExtensionPart, null, filenameWithoutExtension.at(-1), ".", extension))));
     });
 };
 var attachConfig = {