@skbkontur/react-ui 1.12.1 → 2.0.0-beta.4

package/components/FileUploader/FileUploaderFile.js

@@ -0,0 +1,217 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { formatBytes } from '../../lib/utils.js';
+import { TextWidthHelper } from '../../internal/TextWidthHelper/TextWidthHelper.js';
+import { truncate } from '../../lib/stringUtils.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { useKeyListener } from '../../lib/events/keyListener.js';
+import { isKeyEnter } from '../../lib/events/keyboard/identifiers.js';
+import { Hint } from '../Hint/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { getDOMRect } from '../../lib/dom/getDOMRect.js';
+import { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';
+import { useFileUploaderSize } from './hooks/useFileUploaderSize.js';
+import { FileUploaderFileStatus, getFileUploaderTypeIcon } from './fileUtils.js';
+import { FileUploaderFileStatusIcon } from './FileUploaderFileStatusIcon.js';
+import { FileUploaderFileTypeIcon } from './FileUploaderFileTypeIcon.js';
+import { getJsRowStyles, getJsStyles, getJsTileStyles } from './FileUploaderFile.styles.js';
+var splitFileNameAndExtension = function (filename) {
+    var lastDotIndex = filename.lastIndexOf('.');
+    if (lastDotIndex === -1) {
+        return { name: filename, extension: '' };
+    }
+    var name = filename.substring(0, lastDotIndex);
+    var extension = filename.substring(lastDotIndex + 1);
+    return { name: name, extension: extension };
+};
+var getTruncatedName = function (fileNameWidth, fileNameElementWidth, name, isTileView) {
+    if (isTileView === void 0) { isTileView = false; }
+    if (!fileNameWidth && !fileNameElementWidth) {
+        return null;
+    }
+    if (fileNameWidth <= fileNameElementWidth) {
+        return name;
+    }
+    var charWidth = Math.ceil(fileNameWidth / name.length);
+    var maxCharsCountInSpan = Math.ceil(fileNameElementWidth / charWidth);
+    if (isTileView) {
+        var splitFileName = splitFileNameAndExtension(name);
+        return "".concat(truncate(splitFileName.name, maxCharsCountInSpan), ".").concat(splitFileName.extension);
+    }
+    return truncate(name, maxCharsCountInSpan);
+};
+var calcTruncatedName = function (textHelperRef, fileNameElementRef, name, isTileView) {
+    var _a;
+    if (isTileView === void 0) { isTileView = false; }
+    var fileNameWidth = ((_a = textHelperRef.current) === null || _a === void 0 ? void 0 : _a.getTextWidth()) || 0;
+    var fileNameElementWidth = isTileView
+        ? // даем возможность занять 2 строки с погрешностью в 50%
+            getDOMRect(fileNameElementRef.current).width * 1.5
+        : getDOMRect(fileNameElementRef.current).width;
+    return getTruncatedName(fileNameWidth, fileNameElementWidth, name, isTileView);
+};
+export var FileUploaderFileDataTids = {
+    file: 'FileUploader__file',
+    fileTooltip: 'FileUploader__fileTooltip',
+    fileName: 'FileUploader__fileName',
+    fileSize: 'FileUploader__fileSize',
+    fileIcon: 'FileUploader__fileIcon',
+    fileTypeIcon: 'FileUploader__fileTypeIcon',
+};
+/**
+ * Компонент файла `FileUploaderFile` из FileUploader для отрисовки загруженного файла.
+ */
+export var FileUploaderFile = forwardRefAndName('FileUploaderFile', function (props, ref) {
+    var _a, _b, _c;
+    var file = props.file, _d = props.showSize, showSize = _d === void 0 ? false : _d, previewImg = props.previewImg, error = props.error, warning = props.warning, multiple = props.multiple, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.hovered, hovered = _f === void 0 ? false : _f, _g = props.focused, focused = _g === void 0 ? false : _g, size = props.size, _h = props.view, view = _h === void 0 ? 'row' : _h, withValidationTooltip = props.withValidationTooltip, validationTooltipPosition = props.validationTooltipPosition, withWarningIcon = props.withWarningIcon, onRemove = props.onRemove, _j = props.showFilenameHint, showFullFilename = _j === void 0 ? true : _j, fileTypeIcon = props.fileTypeIcon, rest = __rest(props, ["file", "showSize", "previewImg", "error", "warning", "multiple", "disabled", "hovered", "focused", "size", "view", "withValidationTooltip", "validationTooltipPosition", "withWarningIcon", "onRemove", "showFilenameHint", "fileTypeIcon"]);
+    var id = file.id, originalFile = file.originalFile, status = file.status, validationResult = file.validationResult;
+    var name = originalFile.name, fileSize = originalFile.size;
+    var _k = useState(hovered || false), hoveredFile = _k[0], setHoveredFile = _k[1];
+    var _l = useState(focused || false), focusedByTab = _l[0], setFocusedByTab = _l[1];
+    var _m = useState(null), truncatedFileName = _m[0], setTruncatedFileName = _m[1];
+    var textHelperRef = useRef(null);
+    var fileNameElementRef = useRef(null);
+    var theme = useContext(ThemeContext);
+    var globalObject = useGlobal();
+    var cx = useEmotion().cx;
+    var keyListener = useKeyListener();
+    var jsStyles = useStyles(getJsStyles);
+    var jsRowStyles = useStyles(getJsRowStyles);
+    var jsTileStyles = useStyles(getJsTileStyles);
+    var isLoading = status === FileUploaderFileStatus.Loading;
+    var isTileView = view === 'tile';
+    var jsViewStyles = isTileView ? jsTileStyles : jsRowStyles;
+    var validationTooltipPositionByView = validationTooltipPosition || (isTileView ? 'top center' : 'top left');
+    var formattedSize = useMemo(function () { return formatBytes(fileSize, 1); }, [fileSize]);
+    useEffect(function () {
+        var truncatedName = calcTruncatedName(textHelperRef, fileNameElementRef, name, isTileView);
+        setTruncatedFileName(truncatedName);
+    });
+    var handleRemove = useCallback(function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        onRemove(id);
+    }, [id, onRemove]);
+    var isValid = validationResult.isValid, message = validationResult.message;
+    var isError = file.status === FileUploaderFileStatus.Error || error;
+    var isWarning = file.status === FileUploaderFileStatus.Warning || warning;
+    var isInvalid = isError || !isValid;
+    var sizeIconClass = useFileUploaderSize(size, {
+        small: jsViewStyles.iconSmall(theme),
+        medium: jsViewStyles.iconMedium(theme),
+        large: jsViewStyles.iconLarge(theme),
+    });
+    var renderTooltipContent = useCallback(function () {
+        return !isValid && !error && message ? message : null;
+    }, [isValid, error, message]);
+    var sizeNameBlockClass = useFileUploaderSize(size, {
+        small: jsStyles.contentSmall(theme),
+        medium: jsStyles.contentMedium(theme),
+        large: jsStyles.contentLarge(theme),
+    });
+    var sizeViewNameBlockClass = useFileUploaderSize(size, {
+        small: jsViewStyles.contentSmall(theme),
+        medium: jsViewStyles.contentMedium(theme),
+        large: jsViewStyles.contentLarge(theme),
+    });
+    var validationTextClassName = cx((_a = {},
+        _a[jsStyles.validationTextWarning(theme)] = isWarning,
+        _a[jsStyles.validationTextError(theme)] = isError,
+        _a));
+    var contentClassNames = cx(jsStyles.content(), jsViewStyles.content());
+    var nameTextClassNames = cx(jsViewStyles.name(), isTileView && !disabled && validationTextClassName);
+    var handleMouseEnter = useCallback(function () {
+        setHoveredFile(true);
+    }, []);
+    var handleMouseLeave = useCallback(function () {
+        setHoveredFile(false);
+    }, []);
+    var handleFocus = useCallback(function () {
+        var _a;
+        // focus event fires before keyDown eventlistener
+        // so we should check tabPressed in async way
+        (_a = globalObject.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(globalObject, function () {
+            if (keyListener.isTabPressed) {
+                setFocusedByTab(true);
+            }
+        });
+    }, []);
+    var handleBlur = useCallback(function () {
+        setFocusedByTab(false);
+    }, []);
+    var handleIconKeyDown = useCallback(function (e) {
+        if (isKeyEnter(e)) {
+            onRemove(id);
+        }
+    }, [onRemove, id]);
+    var iconClassNames = cx(jsStyles.icon(theme), (_b = {},
+        _b[sizeIconClass] = true,
+        _b[jsTileStyles.iconAction(theme)] = isTileView,
+        _b[jsTileStyles.iconActionShow()] = isTileView && !disabled && (hovered || hoveredFile || focused || focusedByTab),
+        _b));
+    var sizeClassName = useFileUploaderSize(size, {
+        small: jsStyles.sizeSmall(theme),
+        medium: jsStyles.sizeMedium(theme),
+        large: jsStyles.sizeLarge(theme),
+    });
+    var sizeClassNames = cx(jsStyles.size(theme), sizeClassName, jsViewStyles.size(theme), isTileView && disabled && jsTileStyles.sizeDisabled(theme));
+    var sizeFileTypeIconClass = useFileUploaderSize(size, {
+        small: jsViewStyles.fileTypeIconSmall(theme),
+        medium: jsViewStyles.fileTypeIconMedium(theme),
+        large: jsViewStyles.fileTypeIconLarge(theme),
+    });
+    var isTruncated = truncatedFileName !== name;
+    var fileTypeIconClassName = cx(sizeFileTypeIconClass, disabled && jsStyles.disabledFileTypeIconSvg(theme), isTileView && (_c = {},
+        _c[jsTileStyles.fileTypeIcon(theme)] = true,
+        _c[jsTileStyles.fileTypeIconPreview()] = !!previewImg,
+        _c[jsTileStyles.disabledFileTypeIcon(theme)] = disabled,
+        _c[jsTileStyles.warningFileTypeIcon(theme)] = isWarning,
+        _c[jsTileStyles.errorFileTypeIcon(theme)] = isError,
+        _c), multiple && jsStyles.fileTypeIconMultiple());
+    var nameBlockClassNames = cx(sizeNameBlockClass, sizeViewNameBlockClass, jsStyles.nameBlock(), disabled && jsViewStyles.disabled(theme), jsViewStyles.nameBlock());
+    var fileType = getFileUploaderTypeIcon(file.originalFile, isError, isWarning && !!withWarningIcon);
+    var icon = isTileView && isLoading ? (React.createElement(LoadingIcon, { size: size })) : (fileTypeIcon !== null && fileTypeIcon !== void 0 ? fileTypeIcon : React.createElement(FileUploaderFileTypeIcon, { type: fileType, size: size, view: view }));
+    var splitTruncatedFileName = truncatedFileName && splitFileNameAndExtension(truncatedFileName);
+    return (React.createElement(CommonWrapper, __assign({}, rest),
+        React.createElement("div", { "data-tid": FileUploaderFileDataTids.file, className: jsStyles.root(), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: ref },
+            React.createElement(Tooltip, { "data-tid": FileUploaderFileDataTids.fileTooltip, pos: validationTooltipPositionByView, render: function () { return (withValidationTooltip || isTileView ? renderTooltipContent() : null); } },
+                React.createElement("div", { className: contentClassNames },
+                    React.createElement("div", { "data-tid": FileUploaderFileDataTids.fileTypeIcon, className: fileTypeIconClassName, style: previewImg ? { backgroundImage: "url(".concat(previewImg, ")") } : undefined }, (!isTileView || !previewImg) && icon),
+                    React.createElement("div", { className: nameBlockClassNames },
+                        React.createElement(TextWidthHelper, { ref: textHelperRef, text: name }),
+                        React.createElement(Hint, { maxWidth: '100%', text: showFullFilename && isTruncated ? name : null },
+                            React.createElement("span", { "data-tid": FileUploaderFileDataTids.fileName, ref: fileNameElementRef, className: nameTextClassNames }, splitTruncatedFileName && (React.createElement(React.Fragment, null,
+                                splitTruncatedFileName.name,
+                                splitTruncatedFileName.extension && React.createElement("span", null,
+                                    ".",
+                                    splitTruncatedFileName.extension))))),
+                        !(withValidationTooltip || isTileView) && (React.createElement("span", { className: validationTextClassName }, renderTooltipContent()))),
+                    showSize && formattedSize && (React.createElement("span", { "data-tid": FileUploaderFileDataTids.fileSize, className: sizeClassNames }, formattedSize)),
+                    React.createElement("div", { className: iconClassNames, "data-tid": FileUploaderFileDataTids.fileIcon, tabIndex: 0, onClick: handleRemove, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleIconKeyDown },
+                        React.createElement(FileUploaderFileStatusIcon, { isTileView: isTileView, status: status, disabled: disabled, hovered: hovered || hoveredFile, focusedByTab: focused || focusedByTab, isInvalid: isInvalid, hasValidation: isError || isWarning, size: size })))))));
+});
+//# sourceMappingURL=FileUploaderFile.js.map

package/components/FileUploader/FileUploaderFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploaderFile.js","sourceRoot":"","sources":["../../../components/FileUploader/FileUploaderFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { formatBytes } from '../../lib/utils.js';\nimport { TextWidthHelper } from '../../internal/TextWidthHelper/TextWidthHelper.js';\nimport { truncate } from '../../lib/stringUtils.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { isKeyEnter } from '../../lib/events/keyboard/identifiers.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { Hint } from '../Hint/index.js';\nimport { Tooltip } from '../Tooltip/index.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';\n\nimport { useFileUploaderSize } from './hooks/useFileUploaderSize.js';\nimport { FileUploaderFileStatus, getFileUploaderTypeIcon } from './fileUtils.js';\nimport type { FileUploaderAttachedFile, FileUploaderIconType, FileUploaderView } from './fileUtils.js';\nimport { FileUploaderFileStatusIcon } from './FileUploaderFileStatusIcon.js';\nimport { FileUploaderFileTypeIcon } from './FileUploaderFileTypeIcon.js';\nimport { getJsRowStyles, getJsStyles, getJsTileStyles } from './FileUploaderFile.styles.js';\n\nexport interface FileUploaderFileProps extends CommonProps {\n  file: FileUploaderAttachedFile;\n  showSize?: boolean;\n  previewImg?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  hovered?: boolean;\n  focused?: boolean;\n  size: SizeProp;\n  /** Вид контрола\n   *  - `row` — стандартное отображение в виде инпута\n   *  - `tile` — вид карточки/плитки\n   *  @default row\n   */\n  view?: FileUploaderView;\n  /** Состояние ошибки контрола файла */\n  error?: boolean;\n  /** Состояние предупреждения контрола файла */\n  warning?: boolean;\n  /** Валидация с тултипом */\n  withValidationTooltip?: boolean;\n  /** Задает приоритетное расположение подсказки относительно контрола */\n  validationTooltipPosition?: ShortPopupPositionsType | PopupPositionsType;\n  /** Использовать иконку для ворнинга (восклицательный знак)*/\n  withWarningIcon?: boolean;\n  onRemove(id: string): void;\n  /**\n   * Добавляет иконку типа файла\n   */\n  fileTypeIcon?: React.ReactElement;\n  /**\n   * Задаёт показ подсказки с полным именем файла\n   * @default true\n   */\n  showFilenameHint?: boolean;\n}\n\nconst splitFileNameAndExtension = (filename: string): { name: string; extension: string } => {\n  const lastDotIndex = filename.lastIndexOf('.');\n  if (lastDotIndex === -1) {\n    return { name: filename, extension: '' };\n  }\n  const name = filename.substring(0, lastDotIndex);\n  const extension = filename.substring(lastDotIndex + 1);\n  return { name, extension };\n};\n\nconst getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, name: string, isTileView = false) => {\n  if (!fileNameWidth && !fileNameElementWidth) {\n    return null;\n  }\n\n  if (fileNameWidth <= fileNameElementWidth) {\n    return name;\n  }\n\n  const charWidth = Math.ceil(fileNameWidth / name.length);\n  const maxCharsCountInSpan = Math.ceil(fileNameElementWidth / charWidth);\n\n  if (isTileView) {\n    const splitFileName = splitFileNameAndExtension(name);\n    return `${truncate(splitFileName.name, maxCharsCountInSpan)}.${splitFileName.extension}`;\n  }\n\n  return truncate(name, maxCharsCountInSpan);\n};\n\nconst calcTruncatedName = (\n  textHelperRef: React.RefObject<TextWidthHelper | null>,\n  fileNameElementRef: React.RefObject<HTMLSpanElement | null>,\n  name: string,\n  isTileView = false,\n) => {\n  const fileNameWidth = textHelperRef.current?.getTextWidth() || 0;\n  const fileNameElementWidth = isTileView\n    ? // даем возможность занять 2 строки с погрешностью в 50%\n      getDOMRect(fileNameElementRef.current).width * 1.5\n    : getDOMRect(fileNameElementRef.current).width;\n\n  return getTruncatedName(fileNameWidth, fileNameElementWidth, name, isTileView);\n};\n\nexport const FileUploaderFileDataTids = {\n  file: 'FileUploader__file',\n  fileTooltip: 'FileUploader__fileTooltip',\n  fileName: 'FileUploader__fileName',\n  fileSize: 'FileUploader__fileSize',\n  fileIcon: 'FileUploader__fileIcon',\n  fileTypeIcon: 'FileUploader__fileTypeIcon',\n} as const;\n\n/**\n * Компонент файла `FileUploaderFile` из FileUploader для отрисовки загруженного файла.\n */\nexport const FileUploaderFile = forwardRefAndName<HTMLDivElement, FileUploaderFileProps>(\n  'FileUploaderFile',\n  (props, ref) => {\n    const {\n      file,\n      showSize = false,\n      previewImg,\n      error,\n      warning,\n      multiple,\n      disabled = false,\n      hovered = false,\n      focused = false,\n      size,\n      view = 'row',\n      withValidationTooltip,\n      validationTooltipPosition,\n      withWarningIcon,\n      onRemove,\n      showFilenameHint: showFullFilename = true,\n      fileTypeIcon,\n      ...rest\n    } = props;\n    const { id, originalFile, status, validationResult } = file;\n    const { name, size: fileSize } = originalFile;\n\n    const [hoveredFile, setHoveredFile] = useState<boolean>(hovered || false);\n    const [focusedByTab, setFocusedByTab] = useState(focused || false);\n    const [truncatedFileName, setTruncatedFileName] = useState<Nullable<string>>(null);\n\n    const textHelperRef = useRef<TextWidthHelper>(null);\n    const fileNameElementRef = useRef<HTMLSpanElement>(null);\n\n    const theme = useContext(ThemeContext);\n    const globalObject = useGlobal();\n\n    const { cx } = useEmotion();\n    const keyListener = useKeyListener();\n    const jsStyles = useStyles(getJsStyles);\n    const jsRowStyles = useStyles(getJsRowStyles);\n    const jsTileStyles = useStyles(getJsTileStyles);\n\n    const isLoading = status === FileUploaderFileStatus.Loading;\n    const isTileView = view === 'tile';\n    const jsViewStyles = isTileView ? jsTileStyles : jsRowStyles;\n    const validationTooltipPositionByView = validationTooltipPosition || (isTileView ? 'top center' : 'top left');\n\n    const formattedSize = useMemo(() => formatBytes(fileSize, 1), [fileSize]);\n\n    useEffect(() => {\n      const truncatedName = calcTruncatedName(textHelperRef, fileNameElementRef, name, isTileView);\n\n      setTruncatedFileName(truncatedName);\n    });\n\n    const handleRemove = useCallback(\n      (event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n        onRemove(id);\n      },\n      [id, onRemove],\n    );\n\n    const { isValid, message } = validationResult;\n\n    const isError = file.status === FileUploaderFileStatus.Error || error;\n    const isWarning = file.status === FileUploaderFileStatus.Warning || warning;\n    const isInvalid = isError || !isValid;\n\n    const sizeIconClass = useFileUploaderSize(size, {\n      small: jsViewStyles.iconSmall(theme),\n      medium: jsViewStyles.iconMedium(theme),\n      large: jsViewStyles.iconLarge(theme),\n    });\n\n    const renderTooltipContent = useCallback((): ReactNode => {\n      return !isValid && !error && message ? message : null;\n    }, [isValid, error, message]);\n\n    const sizeNameBlockClass = useFileUploaderSize(size, {\n      small: jsStyles.contentSmall(theme),\n      medium: jsStyles.contentMedium(theme),\n      large: jsStyles.contentLarge(theme),\n    });\n\n    const sizeViewNameBlockClass = useFileUploaderSize(size, {\n      small: jsViewStyles.contentSmall(theme),\n      medium: jsViewStyles.contentMedium(theme),\n      large: jsViewStyles.contentLarge(theme),\n    });\n\n    const validationTextClassName = cx({\n      [jsStyles.validationTextWarning(theme)]: isWarning,\n      [jsStyles.validationTextError(theme)]: isError,\n    });\n\n    const contentClassNames = cx(jsStyles.content(), jsViewStyles.content());\n    const nameTextClassNames = cx(jsViewStyles.name(), isTileView && !disabled && validationTextClassName);\n\n    const handleMouseEnter = useCallback(() => {\n      setHoveredFile(true);\n    }, []);\n\n    const handleMouseLeave = useCallback(() => {\n      setHoveredFile(false);\n    }, []);\n\n    const handleFocus = useCallback(() => {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.requestAnimationFrame?.(() => {\n        if (keyListener.isTabPressed) {\n          setFocusedByTab(true);\n        }\n      });\n    }, []);\n\n    const handleBlur = useCallback(() => {\n      setFocusedByTab(false);\n    }, []);\n\n    const handleIconKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLElement>) => {\n        if (isKeyEnter(e)) {\n          onRemove(id);\n        }\n      },\n      [onRemove, id],\n    );\n\n    const iconClassNames = cx(jsStyles.icon(theme), {\n      [sizeIconClass]: true,\n      [jsTileStyles.iconAction(theme)]: isTileView,\n      [jsTileStyles.iconActionShow()]: isTileView && !disabled && (hovered || hoveredFile || focused || focusedByTab),\n    });\n\n    const sizeClassName = useFileUploaderSize(size, {\n      small: jsStyles.sizeSmall(theme),\n      medium: jsStyles.sizeMedium(theme),\n      large: jsStyles.sizeLarge(theme),\n    });\n\n    const sizeClassNames = cx(\n      jsStyles.size(theme),\n      sizeClassName,\n      jsViewStyles.size(theme),\n      isTileView && disabled && jsTileStyles.sizeDisabled(theme),\n    );\n\n    const sizeFileTypeIconClass = useFileUploaderSize(size, {\n      small: jsViewStyles.fileTypeIconSmall(theme),\n      medium: jsViewStyles.fileTypeIconMedium(theme),\n      large: jsViewStyles.fileTypeIconLarge(theme),\n    });\n\n    const isTruncated = truncatedFileName !== name;\n\n    const fileTypeIconClassName = cx(\n      sizeFileTypeIconClass,\n      disabled && jsStyles.disabledFileTypeIconSvg(theme),\n      isTileView && {\n        [jsTileStyles.fileTypeIcon(theme)]: true,\n        [jsTileStyles.fileTypeIconPreview()]: !!previewImg,\n        [jsTileStyles.disabledFileTypeIcon(theme)]: disabled,\n        [jsTileStyles.warningFileTypeIcon(theme)]: isWarning,\n        [jsTileStyles.errorFileTypeIcon(theme)]: isError,\n      },\n      multiple && jsStyles.fileTypeIconMultiple(),\n    );\n\n    const nameBlockClassNames = cx(\n      sizeNameBlockClass,\n      sizeViewNameBlockClass,\n      jsStyles.nameBlock(),\n      disabled && jsViewStyles.disabled(theme),\n      jsViewStyles.nameBlock(),\n    );\n\n    const fileType: FileUploaderIconType = getFileUploaderTypeIcon(\n      file.originalFile,\n      isError,\n      isWarning && !!withWarningIcon,\n    );\n    const icon =\n      isTileView && isLoading ? (\n        <LoadingIcon size={size} />\n      ) : (\n        fileTypeIcon ?? <FileUploaderFileTypeIcon type={fileType} size={size} view={view} />\n      );\n\n    const splitTruncatedFileName = truncatedFileName && splitFileNameAndExtension(truncatedFileName);\n\n    return (\n      <CommonWrapper {...rest}>\n        <div\n          data-tid={FileUploaderFileDataTids.file}\n          className={jsStyles.root()}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n          ref={ref}\n        >\n          <Tooltip\n            data-tid={FileUploaderFileDataTids.fileTooltip}\n            pos={validationTooltipPositionByView}\n            render={() => (withValidationTooltip || isTileView ? renderTooltipContent() : null)}\n          >\n            <div className={contentClassNames}>\n              {\n                <div\n                  data-tid={FileUploaderFileDataTids.fileTypeIcon}\n                  className={fileTypeIconClassName}\n                  style={previewImg ? { backgroundImage: `url(${previewImg})` } : undefined}\n                >\n                  {(!isTileView || !previewImg) && icon}\n                </div>\n              }\n              <div className={nameBlockClassNames}>\n                <TextWidthHelper ref={textHelperRef} text={name} />\n                <Hint maxWidth={'100%'} text={showFullFilename && isTruncated ? name : null}>\n                  <span\n                    data-tid={FileUploaderFileDataTids.fileName}\n                    ref={fileNameElementRef}\n                    className={nameTextClassNames}\n                  >\n                    {splitTruncatedFileName && (\n                      <>\n                        {splitTruncatedFileName.name}\n                        {splitTruncatedFileName.extension && <span>.{splitTruncatedFileName.extension}</span>}\n                      </>\n                    )}\n                  </span>\n                </Hint>\n                {!(withValidationTooltip || isTileView) && (\n                  <span className={validationTextClassName}>{renderTooltipContent()}</span>\n                )}\n              </div>\n              {showSize && formattedSize && (\n                <span data-tid={FileUploaderFileDataTids.fileSize} className={sizeClassNames}>\n                  {formattedSize}\n                </span>\n              )}\n              <div\n                className={iconClassNames}\n                data-tid={FileUploaderFileDataTids.fileIcon}\n                tabIndex={0}\n                onClick={handleRemove}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onKeyDown={handleIconKeyDown}\n              >\n                <FileUploaderFileStatusIcon\n                  isTileView={isTileView}\n                  status={status}\n                  disabled={disabled}\n                  hovered={hovered || hoveredFile}\n                  focusedByTab={focused || focusedByTab}\n                  isInvalid={isInvalid}\n                  hasValidation={isError || isWarning}\n                  size={size}\n                />\n              </div>\n            </div>\n          </Tooltip>\n        </div>\n      </CommonWrapper>\n    );\n  },\n);\n"]}

package/components/FileUploader/FileUploaderFile.styles.d.ts

@@ -0,0 +1,60 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getJsStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    content(): string;
+    validationTextError(t: Theme): string;
+    validationTextWarning(t: Theme): string;
+    nameBlock(): string;
+    size(t: Theme): string;
+    sizeSmall(t: Theme): string;
+    sizeMedium(t: Theme): string;
+    sizeLarge(t: Theme): string;
+    icon(t: Theme): string;
+    disabledFileTypeIconSvg(t: Theme): string;
+    fileTypeIconMultiple(): string;
+    contentSmall(t: Theme): string;
+    contentMedium(t: Theme): string;
+    contentLarge(t: Theme): string;
+}>;
+export declare const getJsRowStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    content(): string;
+    contentSmall(t: Theme): string;
+    contentMedium(t: Theme): string;
+    contentLarge(t: Theme): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
+    fileTypeIconSmall(t: Theme): string;
+    fileTypeIconMedium(t: Theme): string;
+    fileTypeIconLarge(t: Theme): string;
+    iconColor(t: Theme): string;
+    size(t: Theme): string;
+    name(): string;
+    nameBlock(): string;
+    disabled(t: Theme): string;
+}>;
+export declare const getJsTileStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    content(): string;
+    iconAction(t: Theme): string;
+    iconActionShow(): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
+    fileTypeIcon(t: Theme): string;
+    fileTypeIconPreview(): string;
+    fileTypeIconSmall(t: Theme): string;
+    fileTypeIconMedium(t: Theme): string;
+    fileTypeIconLarge(t: Theme): string;
+    disabledFileTypeIcon(t: Theme): string;
+    sizeDisabled(t: Theme): string;
+    errorFileTypeIcon(t: Theme): string;
+    warningFileTypeIcon(t: Theme): string;
+    iconColor(t: Theme): string;
+    size(t: Theme): string;
+    name(): string;
+    nameBlock(): string;
+    contentSmall(t: Theme): string;
+    contentMedium(t: Theme): string;
+    contentLarge(t: Theme): string;
+    disabled(t: Theme): string;
+}>;

package/components/FileUploader/FileUploaderFile.styles.js

@@ -0,0 +1,184 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getJsStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 100%;\n      height: inherit;\n    "], ["\n      width: 100%;\n      height: inherit;\n    "])));
+        },
+        content: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: flex;\n      width: 100%;\n      align-items: baseline;\n    "], ["\n      display: flex;\n      width: 100%;\n      align-items: baseline;\n    "])));
+        },
+        validationTextError: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.fileUploaderErrorTextColor);
+        },
+        validationTextWarning: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.fileUploaderWarningTextColor);
+        },
+        nameBlock: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      flex-wrap: wrap;\n      flex: 1 1 100%;\n      width: 100%;\n    "], ["\n      display: flex;\n      flex-wrap: wrap;\n      flex: 1 1 100%;\n      width: 100%;\n    "])));
+        },
+        size: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-left: ", ";\n      flex: 1 0 auto;\n    "], ["\n      margin-left: ", ";\n      flex: 1 0 auto;\n    "])), t.fileUploaderFileSizeMarginLeft);
+        },
+        sizeSmall: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      width: ", ";\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      width: ", ";\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.fileUploaderFileSizeWidthSmall, t.fileUploaderFileSizeMarginSmall, t.fileUploaderFontSizeSmall, t.fileUploaderLineHeightSmall);
+        },
+        sizeMedium: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      width: ", ";\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      width: ", ";\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.fileUploaderFileSizeWidthMedium, t.fileUploaderFileSizeMarginMedium, t.fileUploaderFontSizeMedium, t.fileUploaderLineHeightMedium);
+        },
+        sizeLarge: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      width: ", ";\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      width: ", ";\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.fileUploaderFileSizeWidthLarge, t.fileUploaderFileSizeMarginLarge, t.fileUploaderFontSizeLarge, t.fileUploaderLineHeightLarge);
+        },
+        icon: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      position: absolute;\n      top: ", ";\n      right: ", ";\n      display: flex;\n      flex: 1 0 auto;\n      align-items: center;\n      justify-content: center;\n      width: ", ";\n      border-radius: ", ";\n      cursor: pointer;\n      text-align: center;\n      outline: none;\n      &:hover {\n        background: ", ";\n      }\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      position: absolute;\n      top: ", ";\n      right: ", ";\n      display: flex;\n      flex: 1 0 auto;\n      align-items: center;\n      justify-content: center;\n      width: ", ";\n      border-radius: ", ";\n      cursor: pointer;\n      text-align: center;\n      outline: none;\n      &:hover {\n        background: ", ";\n      }\n      &:active {\n        background: ", ";\n      }\n    "])), t.fileUploaderIconGapSmall, t.fileUploaderIconGapSmall, t.fileUploaderTileIconSizeSmall, t.fileUploaderBorderRadius, t.fileUploaderHoveredBg, t.fileUploaderActiveBg);
+        },
+        disabledFileTypeIconSvg: function (t) {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      svg {\n        fill: ", " !important;\n      }\n    "], ["\n      svg {\n        fill: ", " !important;\n      }\n    "])), t.fileUploaderDisabledFileTypeIcon);
+        },
+        fileTypeIconMultiple: function () {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      margin-left: 0;\n    "], ["\n      margin-left: 0;\n    "])));
+        },
+        contentSmall: function (t) {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.fileUploaderFontSizeSmall, t.fileUploaderLineHeightSmall);
+        },
+        contentMedium: function (t) {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.fileUploaderFontSizeMedium, t.fileUploaderLineHeightMedium);
+        },
+        contentLarge: function (t) {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.fileUploaderFontSizeLarge, t.fileUploaderLineHeightLarge);
+        },
+    });
+});
+export var getJsRowStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return {
+        content: function () {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n        flex-direction: row;\n      "], ["\n        flex-direction: row;\n      "])));
+        },
+        contentSmall: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n        margin-right: ", ";\n      "], ["\n        margin-right: ", ";\n      "])), t.fileUploaderFileIconSizeSmall);
+        },
+        contentMedium: function (t) {
+            return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n        margin-right: ", ";\n      "], ["\n        margin-right: ", ";\n      "])), t.fileUploaderFileIconSizeMedium);
+        },
+        contentLarge: function (t) {
+            return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n        margin-right: ", ";\n      "], ["\n        margin-right: ", ";\n      "])), t.fileUploaderFileIconSizeMedium);
+        },
+        iconSmall: function (t) {
+            return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n        height: ", ";\n        width: ", ";\n      "], ["\n        height: ", ";\n        width: ", ";\n      "])), t.fileUploaderFileIconSizeSmall, t.fileUploaderFileIconSizeSmall);
+        },
+        iconMedium: function (t) {
+            return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n        height: ", ";\n        width: ", ";\n      "], ["\n        height: ", ";\n        width: ", ";\n      "])), t.fileUploaderFileIconSizeMedium, t.fileUploaderFileIconSizeMedium);
+        },
+        iconLarge: function (t) {
+            return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n        height: ", ";\n        width: ", ";\n      "], ["\n        height: ", ";\n        width: ", ";\n      "])), t.fileUploaderFileIconSizeLarge, t.fileUploaderFileIconSizeLarge);
+        },
+        fileTypeIconSmall: function (t) {
+            return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n        margin-right: ", ";\n      "], ["\n        margin-right: ", ";\n      "])), t.fileUploaderIconGapSmall);
+        },
+        fileTypeIconMedium: function (t) {
+            return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n        margin-right: ", ";\n      "], ["\n        margin-right: ", ";\n      "])), t.fileUploaderIconGapMedium);
+        },
+        fileTypeIconLarge: function (t) {
+            return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n        margin-right: ", ";\n      "], ["\n        margin-right: ", ";\n      "])), t.fileUploaderIconGapLarge);
+        },
+        iconColor: function (t) {
+            return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n        color: ", ";\n        &:hover {\n          color: ", ";\n        }\n      "], ["\n        color: ", ";\n        &:hover {\n          color: ", ";\n        }\n      "])), t.fileUploaderIconColor, t.fileUploaderIconHoverColor);
+        },
+        size: function (t) {
+            return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n        margin-left: ", ";\n        color: ", ";\n      "], ["\n        margin-left: ", ";\n        color: ", ";\n      "])), t.fileUploaderIconGapSmall, t.fileUploaderDisabledColor);
+        },
+        name: function () {
+            return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n        flex: 1 1 100%;\n        overflow: hidden;\n      "], ["\n        flex: 1 1 100%;\n        overflow: hidden;\n      "])));
+        },
+        nameBlock: function () {
+            return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n        flex: 1 1 100%;\n      "], ["\n        flex: 1 1 100%;\n      "])));
+        },
+        disabled: function (t) {
+            return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n        cursor: default;\n        color: ", ";\n      "], ["\n        cursor: default;\n        color: ", ";\n      "])), t.fileUploaderDisabledTextColor);
+        },
+    };
+});
+export var getJsTileStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return {
+        content: function () {
+            return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n        flex-direction: column;\n        align-items: center;\n        height: inherit;\n      "], ["\n        flex-direction: column;\n        align-items: center;\n        height: inherit;\n      "])));
+        },
+        iconAction: function (t) {
+            return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n        border-radius: ", ";\n        opacity: 0;\n        background: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &:active {\n          background: ", ";\n        }\n      "], ["\n        border-radius: ", ";\n        opacity: 0;\n        background: ", ";\n\n        &:hover {\n          background: ", ";\n        }\n\n        &:active {\n          background: ", ";\n        }\n      "])), t.fileUploaderBorderRadius, t.fileUploaderTileIconColorBg, t.fileUploaderTileIconHoverColorBg, t.fileUploaderTileIconActiveColorBg);
+        },
+        iconActionShow: function () {
+            return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n        opacity: 1;\n      "], ["\n        opacity: 1;\n      "])));
+        },
+        iconSmall: function (t) {
+            return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n        width: ", ";\n        height: ", ";\n        padding: ", ";\n        top: ", ";\n        right: ", ";\n      "], ["\n        width: ", ";\n        height: ", ";\n        padding: ", ";\n        top: ", ";\n        right: ", ";\n      "])), t.fileUploaderTileIconSizeSmall, t.fileUploaderTileIconSizeSmall, t.fileUploaderTileIconActionPaddingSmall, t.fileUploaderTileIconActionPositionSmall, t.fileUploaderTileIconActionPositionSmall);
+        },
+        iconMedium: function (t) {
+            return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n        width: ", ";\n        height: ", ";\n        padding: ", ";\n        top: ", ";\n        right: ", ";\n      "], ["\n        width: ", ";\n        height: ", ";\n        padding: ", ";\n        top: ", ";\n        right: ", ";\n      "])), t.fileUploaderTileIconSizeMedium, t.fileUploaderTileIconSizeMedium, t.fileUploaderTileIconActionPaddingMedium, t.fileUploaderTileIconActionPositionMedium, t.fileUploaderTileIconActionPositionMedium);
+        },
+        iconLarge: function (t) {
+            return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n        width: ", ";\n        height: ", ";\n        padding: ", ";\n        top: ", ";\n        right: ", ";\n      "], ["\n        width: ", ";\n        height: ", ";\n        padding: ", ";\n        top: ", ";\n        right: ", ";\n      "])), t.fileUploaderTileIconSizeLarge, t.fileUploaderTileIconSizeLarge, t.fileUploaderTileIconActionPaddingLarge, t.fileUploaderTileIconActionPositionLarge, t.fileUploaderTileIconActionPositionLarge);
+        },
+        fileTypeIcon: function (t) {
+            return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n        width: 100%;\n        border: 1px solid ", ";\n        border-radius: ", ";\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      "], ["\n        width: 100%;\n        border: 1px solid ", ";\n        border-radius: ", ";\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      "])), t.fileUploaderDisabledBorderColor, t.fileUploaderBorderRadius);
+        },
+        fileTypeIconPreview: function () {
+            return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n        background-position: top;\n        background-size: cover;\n        background-repeat: no-repeat;\n      "], ["\n        background-position: top;\n        background-size: cover;\n        background-repeat: no-repeat;\n      "])));
+        },
+        fileTypeIconSmall: function (t) {
+            return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n        margin-bottom: ", ";\n        height: ", ";\n      "], ["\n        margin-bottom: ", ";\n        height: ", ";\n      "])), t.fileUploaderIconGapSmall, t.fileUploaderTileTypeIconHeightSmall);
+        },
+        fileTypeIconMedium: function (t) {
+            return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n        margin-bottom: ", ";\n        height: ", ";\n      "], ["\n        margin-bottom: ", ";\n        height: ", ";\n      "])), t.fileUploaderIconGapMedium, t.fileUploaderTileTypeIconHeightMedium);
+        },
+        fileTypeIconLarge: function (t) {
+            return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n        margin-bottom: ", ";\n        height: ", ";\n      "], ["\n        margin-bottom: ", ";\n        height: ", ";\n      "])), t.fileUploaderIconGapLarge, t.fileUploaderTileTypeIconHeightLarge);
+        },
+        disabledFileTypeIcon: function (t) {
+            return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n        box-shadow: none;\n        background: ", ";\n      "], ["\n        box-shadow: none;\n        background: ", ";\n      "])), t.fileUploaderDisabledBg);
+        },
+        sizeDisabled: function (t) {
+            return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.fileUploaderDisabledIconColor);
+        },
+        errorFileTypeIcon: function (t) {
+            return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n        background: ", ";\n        border: 1px solid ", ";\n      "], ["\n        background: ", ";\n        border: 1px solid ", ";\n      "])), t.fileUploaderErrorBgColor, t.fileUploaderErrorBgColor);
+        },
+        warningFileTypeIcon: function (t) {
+            return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n        background: ", ";\n        border: 1px solid ", ";\n      "], ["\n        background: ", ";\n        border: 1px solid ", ";\n      "])), t.fileUploaderWarningBgColor, t.fileUploaderWarningBgColor);
+        },
+        iconColor: function (t) {
+            return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n        color: ", ";\n        &:hover {\n          color: ", ";\n        }\n      "], ["\n        color: ", ";\n        &:hover {\n          color: ", ";\n        }\n      "])), t.fileUploaderTileIconColor, t.fileUploaderTileIconHoverColor);
+        },
+        size: function (t) {
+            return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n        width: 100%;\n        margin: ", " 0 0;\n        overflow: hidden;\n        text-align: center;\n        color: ", ";\n      "], ["\n        width: 100%;\n        margin: ", " 0 0;\n        overflow: hidden;\n        text-align: center;\n        color: ", ";\n      "])), t.fileUploaderIconGapSmall, t.clearCrossIconColor);
+        },
+        name: function () {
+            return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n        flex: 1 1 100%;\n        word-break: break-all;\n        height: 100%;\n\n        span {\n          word-break: break-word;\n        }\n      "], ["\n        flex: 1 1 100%;\n        word-break: break-all;\n        height: 100%;\n\n        span {\n          word-break: break-word;\n        }\n      "])));
+        },
+        nameBlock: function () {
+            return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n        flex: 0;\n        text-align: center;\n      "], ["\n        flex: 0;\n        text-align: center;\n      "])));
+        },
+        contentSmall: function (t) {
+            var maxHeight = parseInt(t.fileUploaderLineHeightSmall) * 2;
+            return css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n        max-height: ", "px;\n      "], ["\n        max-height: ", "px;\n      "])), maxHeight);
+        },
+        contentMedium: function (t) {
+            var maxHeight = parseInt(t.fileUploaderLineHeightMedium) * 2;
+            return css(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n        max-height: ", "px;\n      "], ["\n        max-height: ", "px;\n      "])), maxHeight);
+        },
+        contentLarge: function (t) {
+            var maxHeight = parseInt(t.fileUploaderLineHeightLarge) * 2;
+            return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n        max-height: ", "px;\n      "], ["\n        max-height: ", "px;\n      "])), maxHeight);
+        },
+        disabled: function (t) {
+            return css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n        cursor: default;\n        color: ", ";\n      "], ["\n        cursor: default;\n        color: ", ";\n      "])), t.fileUploaderDisabledIconColor);
+        },
+    };
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53;
+//# sourceMappingURL=FileUploaderFile.styles.js.map

package/components/FileUploader/FileUploaderFile.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploaderFile.styles.js","sourceRoot":"","sources":["../../../components/FileUploader/FileUploaderFile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      width: 100%;\n      height: inherit;\n    `;\n  },\n\n  content() {\n    return css`\n      display: flex;\n      width: 100%;\n      align-items: baseline;\n    `;\n  },\n\n  validationTextError(t: Theme) {\n    return css`\n      color: ${t.fileUploaderErrorTextColor};\n    `;\n  },\n\n  validationTextWarning(t: Theme) {\n    return css`\n      color: ${t.fileUploaderWarningTextColor};\n    `;\n  },\n\n  nameBlock() {\n    return css`\n      display: flex;\n      flex-wrap: wrap;\n      flex: 1 1 100%;\n      width: 100%;\n    `;\n  },\n\n  size(t: Theme) {\n    return css`\n      margin-left: ${t.fileUploaderFileSizeMarginLeft};\n      flex: 1 0 auto;\n    `;\n  },\n\n  sizeSmall(t: Theme) {\n    return css`\n      width: ${t.fileUploaderFileSizeWidthSmall};\n      margin-right: ${t.fileUploaderFileSizeMarginSmall};\n      font-size: ${t.fileUploaderFontSizeSmall};\n      line-height: ${t.fileUploaderLineHeightSmall};\n    `;\n  },\n\n  sizeMedium(t: Theme) {\n    return css`\n      width: ${t.fileUploaderFileSizeWidthMedium};\n      margin-right: ${t.fileUploaderFileSizeMarginMedium};\n      font-size: ${t.fileUploaderFontSizeMedium};\n      line-height: ${t.fileUploaderLineHeightMedium};\n    `;\n  },\n\n  sizeLarge(t: Theme) {\n    return css`\n      width: ${t.fileUploaderFileSizeWidthLarge};\n      margin-right: ${t.fileUploaderFileSizeMarginLarge};\n      font-size: ${t.fileUploaderFontSizeLarge};\n      line-height: ${t.fileUploaderLineHeightLarge};\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      position: absolute;\n      top: ${t.fileUploaderIconGapSmall};\n      right: ${t.fileUploaderIconGapSmall};\n      display: flex;\n      flex: 1 0 auto;\n      align-items: center;\n      justify-content: center;\n      width: ${t.fileUploaderTileIconSizeSmall};\n      border-radius: ${t.fileUploaderBorderRadius};\n      cursor: pointer;\n      text-align: center;\n      outline: none;\n      &:hover {\n        background: ${t.fileUploaderHoveredBg};\n      }\n      &:active {\n        background: ${t.fileUploaderActiveBg};\n      }\n    `;\n  },\n\n  disabledFileTypeIconSvg(t: Theme) {\n    return css`\n      svg {\n        fill: ${t.fileUploaderDisabledFileTypeIcon} !important;\n      }\n    `;\n  },\n\n  fileTypeIconMultiple() {\n    return css`\n      margin-left: 0;\n    `;\n  },\n\n  contentSmall(t: Theme) {\n    return css`\n      font-size: ${t.fileUploaderFontSizeSmall};\n      line-height: ${t.fileUploaderLineHeightSmall};\n    `;\n  },\n\n  contentMedium(t: Theme) {\n    return css`\n      font-size: ${t.fileUploaderFontSizeMedium};\n      line-height: ${t.fileUploaderLineHeightMedium};\n    `;\n  },\n\n  contentLarge(t: Theme) {\n    return css`\n      font-size: ${t.fileUploaderFontSizeLarge};\n      line-height: ${t.fileUploaderLineHeightLarge};\n    `;\n  },\n}));\n\nexport const getJsRowStyles = memoizeGetStyles(({ css }: Emotion) => {\n  return {\n    content() {\n      return css`\n        flex-direction: row;\n      `;\n    },\n\n    contentSmall(t: Theme) {\n      return css`\n        margin-right: ${t.fileUploaderFileIconSizeSmall};\n      `;\n    },\n\n    contentMedium(t: Theme) {\n      return css`\n        margin-right: ${t.fileUploaderFileIconSizeMedium};\n      `;\n    },\n\n    contentLarge(t: Theme) {\n      return css`\n        margin-right: ${t.fileUploaderFileIconSizeMedium};\n      `;\n    },\n\n    iconSmall(t: Theme) {\n      return css`\n        height: ${t.fileUploaderFileIconSizeSmall};\n        width: ${t.fileUploaderFileIconSizeSmall};\n      `;\n    },\n\n    iconMedium(t: Theme) {\n      return css`\n        height: ${t.fileUploaderFileIconSizeMedium};\n        width: ${t.fileUploaderFileIconSizeMedium};\n      `;\n    },\n\n    iconLarge(t: Theme) {\n      return css`\n        height: ${t.fileUploaderFileIconSizeLarge};\n        width: ${t.fileUploaderFileIconSizeLarge};\n      `;\n    },\n\n    fileTypeIconSmall(t: Theme) {\n      return css`\n        margin-right: ${t.fileUploaderIconGapSmall};\n      `;\n    },\n\n    fileTypeIconMedium(t: Theme) {\n      return css`\n        margin-right: ${t.fileUploaderIconGapMedium};\n      `;\n    },\n\n    fileTypeIconLarge(t: Theme) {\n      return css`\n        margin-right: ${t.fileUploaderIconGapLarge};\n      `;\n    },\n\n    iconColor(t: Theme) {\n      return css`\n        color: ${t.fileUploaderIconColor};\n        &:hover {\n          color: ${t.fileUploaderIconHoverColor};\n        }\n      `;\n    },\n\n    size(t: Theme) {\n      return css`\n        margin-left: ${t.fileUploaderIconGapSmall};\n        color: ${t.fileUploaderDisabledColor};\n      `;\n    },\n\n    name() {\n      return css`\n        flex: 1 1 100%;\n        overflow: hidden;\n      `;\n    },\n\n    nameBlock() {\n      return css`\n        flex: 1 1 100%;\n      `;\n    },\n\n    disabled(t: Theme) {\n      return css`\n        cursor: default;\n        color: ${t.fileUploaderDisabledTextColor};\n      `;\n    },\n  };\n});\n\nexport const getJsTileStyles = memoizeGetStyles(({ css }: Emotion) => {\n  return {\n    content() {\n      return css`\n        flex-direction: column;\n        align-items: center;\n        height: inherit;\n      `;\n    },\n\n    iconAction(t: Theme) {\n      return css`\n        border-radius: ${t.fileUploaderBorderRadius};\n        opacity: 0;\n        background: ${t.fileUploaderTileIconColorBg};\n\n        &:hover {\n          background: ${t.fileUploaderTileIconHoverColorBg};\n        }\n\n        &:active {\n          background: ${t.fileUploaderTileIconActiveColorBg};\n        }\n      `;\n    },\n\n    iconActionShow() {\n      return css`\n        opacity: 1;\n      `;\n    },\n\n    iconSmall(t: Theme) {\n      return css`\n        width: ${t.fileUploaderTileIconSizeSmall};\n        height: ${t.fileUploaderTileIconSizeSmall};\n        padding: ${t.fileUploaderTileIconActionPaddingSmall};\n        top: ${t.fileUploaderTileIconActionPositionSmall};\n        right: ${t.fileUploaderTileIconActionPositionSmall};\n      `;\n    },\n\n    iconMedium(t: Theme) {\n      return css`\n        width: ${t.fileUploaderTileIconSizeMedium};\n        height: ${t.fileUploaderTileIconSizeMedium};\n        padding: ${t.fileUploaderTileIconActionPaddingMedium};\n        top: ${t.fileUploaderTileIconActionPositionMedium};\n        right: ${t.fileUploaderTileIconActionPositionMedium};\n      `;\n    },\n\n    iconLarge(t: Theme) {\n      return css`\n        width: ${t.fileUploaderTileIconSizeLarge};\n        height: ${t.fileUploaderTileIconSizeLarge};\n        padding: ${t.fileUploaderTileIconActionPaddingLarge};\n        top: ${t.fileUploaderTileIconActionPositionLarge};\n        right: ${t.fileUploaderTileIconActionPositionLarge};\n      `;\n    },\n\n    fileTypeIcon(t: Theme) {\n      return css`\n        width: 100%;\n        border: 1px solid ${t.fileUploaderDisabledBorderColor};\n        border-radius: ${t.fileUploaderBorderRadius};\n        box-sizing: border-box;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      `;\n    },\n\n    fileTypeIconPreview() {\n      return css`\n        background-position: top;\n        background-size: cover;\n        background-repeat: no-repeat;\n      `;\n    },\n\n    fileTypeIconSmall(t: Theme) {\n      return css`\n        margin-bottom: ${t.fileUploaderIconGapSmall};\n        height: ${t.fileUploaderTileTypeIconHeightSmall};\n      `;\n    },\n\n    fileTypeIconMedium(t: Theme) {\n      return css`\n        margin-bottom: ${t.fileUploaderIconGapMedium};\n        height: ${t.fileUploaderTileTypeIconHeightMedium};\n      `;\n    },\n\n    fileTypeIconLarge(t: Theme) {\n      return css`\n        margin-bottom: ${t.fileUploaderIconGapLarge};\n        height: ${t.fileUploaderTileTypeIconHeightLarge};\n      `;\n    },\n\n    disabledFileTypeIcon(t: Theme) {\n      return css`\n        box-shadow: none;\n        background: ${t.fileUploaderDisabledBg};\n      `;\n    },\n\n    sizeDisabled(t: Theme) {\n      return css`\n        color: ${t.fileUploaderDisabledIconColor};\n      `;\n    },\n\n    errorFileTypeIcon(t: Theme) {\n      return css`\n        background: ${t.fileUploaderErrorBgColor};\n        border: 1px solid ${t.fileUploaderErrorBgColor};\n      `;\n    },\n\n    warningFileTypeIcon(t: Theme) {\n      return css`\n        background: ${t.fileUploaderWarningBgColor};\n        border: 1px solid ${t.fileUploaderWarningBgColor};\n      `;\n    },\n\n    iconColor(t: Theme) {\n      return css`\n        color: ${t.fileUploaderTileIconColor};\n        &:hover {\n          color: ${t.fileUploaderTileIconHoverColor};\n        }\n      `;\n    },\n\n    size(t: Theme) {\n      return css`\n        width: 100%;\n        margin: ${t.fileUploaderIconGapSmall} 0 0;\n        overflow: hidden;\n        text-align: center;\n        color: ${t.clearCrossIconColor};\n      `;\n    },\n\n    name() {\n      return css`\n        flex: 1 1 100%;\n        word-break: break-all;\n        height: 100%;\n\n        span {\n          word-break: break-word;\n        }\n      `;\n    },\n\n    nameBlock() {\n      return css`\n        flex: 0;\n        text-align: center;\n      `;\n    },\n\n    contentSmall(t: Theme) {\n      const maxHeight = parseInt(t.fileUploaderLineHeightSmall) * 2;\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    },\n\n    contentMedium(t: Theme) {\n      const maxHeight = parseInt(t.fileUploaderLineHeightMedium) * 2;\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    },\n\n    contentLarge(t: Theme) {\n      const maxHeight = parseInt(t.fileUploaderLineHeightLarge) * 2;\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    },\n\n    disabled(t: Theme) {\n      return css`\n        cursor: default;\n        color: ${t.fileUploaderDisabledIconColor};\n      `;\n    },\n  };\n});\n"]}

package/components/FileUploader/FileUploaderFileList/FileUploaderFileList.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { SizeProp } from '../../../lib/types/props.js';
+import type { PopupPositionsType, ShortPopupPositionsType } from '../../../internal/Popup/index.js';
+import type { FileUploaderFileProps } from '../FileUploaderFile.js';
+import { type FileUploaderValidationSummary, type FileUploaderView } from '../fileUtils.js';
+interface FileUploaderFileListProps {
+    renderFile: (props: FileUploaderFileProps) => React.ReactNode;
+    size: SizeProp;
+    view?: FileUploaderView;
+    validationSummary?: FileUploaderValidationSummary;
+    validationSummaryStart?: number;
+    onRemove(fileId: string): void;
+    withValidationTooltip?: boolean;
+    validationTooltipPosition?: ShortPopupPositionsType | PopupPositionsType;
+    withWarningIcon?: boolean;
+    disabled?: boolean;
+}
+export declare const FileUploaderFileDataTids: {
+    readonly fileList: "FileUploader__fileList";
+};
+export declare const FileUploaderFileList: {
+    (props: FileUploaderFileListProps): React.ReactElement;
+    __KONTUR_REACT_UI__: string;
+    displayName: string;
+};
+export {};