@pega/cosmos-react-core 7.0.0-build.1.0 → 7.0.0-build.10.0

package/lib/components/File/FileDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAsBlC,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GACtC,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,WAAW,IAAI,KAAK,GAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\nimport NoValue from '../NoValue/NoValue';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\n\nexport interface FileDisplayProps\n  extends Pick<FileItemProps, 'onPreview' | 'onDownload'>,\n    BaseProps,\n    NoChildrenProp {\n  /** URL address */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Display value either as file, link only or textual representation.\n   * @default 'file'\n   */\n  variant?: 'file' | 'link' | 'text';\n  /** Thumbnail image. */\n  thumbnail?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst FileDisplay: FunctionComponent<FileDisplayProps & ForwardProps> = forwardRef(\n  function FileDisplay(\n    {\n      displayText,\n      value,\n      variant,\n      thumbnail,\n      onPreview,\n      onDownload,\n      ...restProps\n    }: PropsWithoutRef<FileDisplayProps>,\n    ref: FileDisplayProps['ref']\n  ) {\n    if (variant === 'text' || !value) {\n      return (\n        <span ref={ref} {...restProps}>\n          {value ? displayText || value : <NoValue />}\n        </span>\n      );\n    }\n\n    if (variant === 'link')\n      return (\n        <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n          {displayText || value}\n        </Link>\n      );\n\n    return (\n      <FileItem\n        {...restProps}\n        ref={ref as Ref<HTMLButtonElement>}\n        name={displayText || value}\n        url={value}\n        thumbnail={thumbnail}\n        onDownload={onDownload}\n        onPreview={onPreview}\n      />\n    );\n  }\n);\n\nexport default FileDisplay;\n"]}
+{"version":3,"file":"FileDisplay.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAsBlC,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,EAAE,EACF,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GACtC,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,WAAW,IAAI,KAAK,GAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAA0B,EAC/B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,EACvC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\nimport NoValue from '../NoValue/NoValue';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\n\nexport interface FileDisplayProps\n  extends Pick<FileItemProps, 'id' | 'onPreview' | 'onDownload'>,\n    BaseProps,\n    NoChildrenProp {\n  /** URL address */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Display value either as file, link only or textual representation.\n   * @default 'file'\n   */\n  variant?: 'file' | 'link' | 'text';\n  /** Thumbnail image. */\n  thumbnail?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst FileDisplay: FunctionComponent<FileDisplayProps & ForwardProps> = forwardRef(\n  function FileDisplay(\n    {\n      id,\n      displayText,\n      value,\n      variant,\n      thumbnail,\n      onPreview,\n      onDownload,\n      ...restProps\n    }: PropsWithoutRef<FileDisplayProps>,\n    ref: FileDisplayProps['ref']\n  ) {\n    if (variant === 'text' || !value) {\n      return (\n        <span ref={ref} {...restProps}>\n          {value ? displayText || value : <NoValue />}\n        </span>\n      );\n    }\n\n    if (variant === 'link')\n      return (\n        <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n          {displayText || value}\n        </Link>\n      );\n\n    return (\n      <FileItem\n        {...restProps}\n        id={id}\n        ref={ref as Ref<HTMLDivElement>}\n        format={value.split('.').pop() ?? value}\n        name={displayText || value}\n        thumbnail={thumbnail}\n        onDownload={onDownload}\n        onPreview={onPreview}\n      />\n    );\n  }\n);\n\nexport default FileDisplay;\n"]}

package/lib/components/File/FileDisplayList.d.ts

@@ -0,0 +1,8 @@
+import type { NoChildrenProp, OmitStrict, WithAttributes } from '../../types';
+import type { FileDisplayProps } from './FileDisplay';
+export type FileDisplayListProps = WithAttributes<'div', Pick<FileDisplayProps, 'variant'> & NoChildrenProp & {
+    items: OmitStrict<FileDisplayProps, 'variant'>[];
+}>;
+declare const FileDisplayList: import("react").ForwardRefExoticComponent<Omit<FileDisplayListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default FileDisplayList;
+//# sourceMappingURL=FileDisplayList.d.ts.map

package/lib/components/File/FileDisplayList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDisplayList.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileDisplayList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,KAAK,EACL,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAC/B,cAAc,GAAG;IACf,KAAK,EAAE,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,CAAC;CAClD,CACJ,CAAC;AAEF,QAAA,MAAM,eAAe,8HAYnB,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/lib/components/File/FileDisplayList.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import FileList from './FileList';
+const FileDisplayList = forwardRef(function FileDisplayList({ variant, items, ...restProps }, ref) {
+    return (_jsx(FileList, { ...restProps, type: 'display', items: items.map(item => ({ ...item, variant })), ref: ref }));
+});
+export default FileDisplayList;
+//# sourceMappingURL=FileDisplayList.js.map

package/lib/components/File/FileDisplayList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDisplayList.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplayList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,eAAe,GAAG,UAAU,CAGhC,SAAS,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC9D,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,EAChD,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { NoChildrenProp, OmitStrict, RefElement, WithAttributes } from '../../types';\n\nimport type { FileDisplayProps } from './FileDisplay';\nimport FileList from './FileList';\n\nexport type FileDisplayListProps = WithAttributes<\n  'div',\n  Pick<FileDisplayProps, 'variant'> &\n    NoChildrenProp & {\n      items: OmitStrict<FileDisplayProps, 'variant'>[];\n    }\n>;\n\nconst FileDisplayList = forwardRef<\n  RefElement<FileDisplayListProps>,\n  PropsWithoutRef<FileDisplayListProps>\n>(function FileDisplayList({ variant, items, ...restProps }, ref) {\n  return (\n    <FileList\n      {...restProps}\n      type='display'\n      items={items.map(item => ({ ...item, variant }))}\n      ref={ref}\n    />\n  );\n});\n\nexport default FileDisplayList;\n"]}

package/lib/components/File/FileInput.d.ts

@@ -1,7 +1,7 @@
 import type { FunctionComponent, Ref } from 'react';
 import type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
 import type { FormControlProps } from '../FormControl';
-import type { FileUploadItemProps } from './FileUploadItem';
+import type { FileItemProps } from './FileItem';
 export interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {
     /** Called when files are added either via the input or drop zone. */
     onFilesAdded?: (files: File[]) => void;
@@ -13,7 +13,12 @@ export interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {
      */
     multiple?: boolean;
     /** An array of files that have been uploaded. */
-    files?: FileUploadItemProps[];
+    files?: FileItemProps[];
+    /**
+     * Specify allowed file types.
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}
+     */
+    accept?: string | string[];
     /**
      * Sets DOM id for the control and associates label element via 'for' attribute.
      * If an id is not pass, a random id will be generated for any render.

package/lib/components/File/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC3E,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAYnE,CAAC;AAEH,eAAO,MAAM,eAAe,wMAkB3B,CAAC;;;;AA0JF,wBAA2D"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAUvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAShD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC3E,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAoBpE,CAAC;AAIF,eAAO,MAAM,eAAe,wMAc3B,CAAC;;;;AAgLF,wBAA2D"}

package/lib/components/File/FileInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { hideVisually } from 'polished';
-import { useConsolidatedRef, useI18n, useUID, useDirection, useTestIds, useTheme } from '../../hooks';
+import { useConsolidatedRef, useI18n, useUID, useDirection, useTestIds } from '../../hooks';
 import FormControl from '../FormControl';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
@@ -11,23 +11,25 @@ import Icon, { registerIcon } from '../Icon';
 import * as paperClipIcon from '../Icon/icons/paper-clip.icon';
 import FormField from '../FormField';
 import Grid from '../Grid';
-import { withTestIds } from '../../utils';
-import FileUploadItem from './FileUploadItem';
+import { getFocusables, withTestIds } from '../../utils';
 import { getFileInputTestIds } from './File.test-ids';
+import FileList from './FileList';
+import FileItem from './FileItem';
 registerIcon(paperClipIcon);
-export const StyledDropZone = styled(FormControl)(({ dragOver, theme }) => {
+export const StyledDropZone = styled(FormControl)(({ dragOver, theme: { base: { spacing }, components } }) => {
     return css `
-    padding: calc(2 * ${theme.base.spacing});
-    min-height: 4rem;
-    border-style: dashed;
-    cursor: pointer;
+      padding: calc(2 * ${spacing});
+      height: ${components.input.height};
+      border-style: dashed;
+      cursor: pointer;
 
-    ${dragOver &&
+      ${dragOver &&
         css `
-      border-style: solid;
-    `}
-  `;
+        border-style: solid;
+      `}
+    `;
 });
+StyledDropZone.defaultProps = defaultThemeProp;
 export const StyledFileInput = styled.div(({ theme }) => {
     return css `
       position: relative;
@@ -39,10 +41,6 @@ export const StyledFileInput = styled.div(({ theme }) => {
       input:enabled:focus + ${StyledDropZone} {
         box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
       }
-
-      input[hidden] + ${StyledDropZone} {
-        display: none;
-      }
     `;
 });
 StyledFileInput.defaultProps = defaultThemeProp;
@@ -52,13 +50,18 @@ const StyledInteractiveText = styled.span(({ theme }) => {
   `;
 });
 StyledInteractiveText.defaultProps = defaultThemeProp;
+const StyledSingleFileWrapper = styled.div `
+  display: contents;
+`;
 const FileInput = forwardRef(function FileInput(props, ref) {
     const uid = useUID();
-    const { testId, id = uid, label, labelHidden, info, required = false, disabled = false, files, onFilesAdded, multiple = false, status, additionalInfo, ...restProps } = props;
-    const { base: { 'content-width': { md } } } = useTheme();
+    const { testId, id = uid, label, labelHidden, info, required = false, disabled = false, files, onFilesAdded, multiple = false, status, additionalInfo, accept, ...restProps } = props;
     const testIds = useTestIds(testId, getFileInputTestIds);
     const icon = _jsx(Icon, { name: 'paper-clip' });
     const inputRef = useConsolidatedRef(ref);
+    const fileItemListRef = useRef();
+    // Tracks whether at least one file is uploaded -- used for updating the focus to DropZone when the files are deleted
+    const isFilesAdded = useRef(false);
     const onChange = useCallback((e) => {
         if (e.target.files) {
             onFilesAdded?.(Array.from(e.target.files));
@@ -77,7 +80,8 @@ const FileInput = forwardRef(function FileInput(props, ref) {
     const t = useI18n();
     const [dragOver, setDragOver] = useState(false);
     const { ltr, rtl } = useDirection();
-    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { "data-testid": testIds.control, ...restProps, ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
+    const hideFileInput = !multiple && files && files.length > 0;
+    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { "data-testid": testIds.control, ...restProps, ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple, accept: Array.isArray(accept) ? accept.join(',') : accept }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
                     inputRef.current?.focus();
                     inputRef.current?.click();
                 }, onDragOver: (e) => {
@@ -89,14 +93,26 @@ const FileInput = forwardRef(function FileInput(props, ref) {
                 }, children: [ltr && icon, _jsxs(Text, { variant: 'primary', children: ["\u00A0", t('file_upload_text_main', [
                                 _jsx(StyledInteractiveText, { children: t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one') })
                             ]), "\u00A0"] }), rtl && icon] })] }));
-    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, required: required, disabled: disabled, status: status, additionalInfo: additionalInfo, children: fileInput })) : (fileInput), !!files?.length && (_jsx(Grid, { "data-testid": testIds.files, container: {
-                    gap: 1,
-                    cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`
-                }, as: 'ul', children: files.map((file, index) => {
-                    const key = file.id ?? (file.File ? `${file.File.name}_${file.File.lastModified}` : index);
-                    // When files is an array of native File objects, all properties (including name) are on the prototype, so spreading will not set any props.
-                    return _jsx(FileUploadItem, { ...file, name: file.name, disabled: disabled }, key);
-                }) }))] }));
+    const fileItemList = hideFileInput ? (_jsx(StyledSingleFileWrapper, { "data-testid": testIds.files, ref: element => {
+            if (element)
+                fileItemListRef.current = element;
+        }, children: _jsx(FileItem, { ...files[0] }) })) : (_jsx(FileList, { type: 'item', items: files ?? [], "data-testid": testIds.files, ref: element => {
+            if (element)
+                fileItemListRef.current = element;
+        } }));
+    useEffect(() => {
+        if (files && files.length > 0 && !isFilesAdded.current)
+            isFilesAdded.current = true;
+        else if (files?.length === 0 && isFilesAdded.current) {
+            isFilesAdded.current = false;
+            inputRef.current?.focus();
+        }
+        if (hideFileInput && fileItemListRef.current) {
+            getFocusables(fileItemListRef.current)[0]?.focus();
+        }
+    }, [files]);
+    const renderElement = hideFileInput ? fileItemList : fileInput;
+    return (_jsxs(Grid, { container: { rowGap: hideFileInput ? undefined : 1 }, children: [label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, required: required, disabled: !hideFileInput && disabled, status: status, additionalInfo: additionalInfo, children: renderElement })) : (renderElement), !hideFileInput && fileItemList] }));
 });
 export default withTestIds(FileInput, getFileInputTestIds);
 //# sourceMappingURL=FileInput.js.map

package/lib/components/File/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport {\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useDirection,\n  useTestIds,\n  useTheme\n} from '../../hooks';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\nimport { withTestIds } from '../../utils';\n\nimport FileUploadItem from './FileUploadItem';\nimport type { FileUploadItemProps } from './FileUploadItem';\nimport { getFileInputTestIds } from './File.test-ids';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** Called when files are added either via the input or drop zone. */\n  onFilesAdded?: (files: File[]) => void;\n  /**\n   * Allow multiple files to be selected from the OS specific file browser.\n   * NOTE: This does not restrict multiple files from being added via drag and drop.\n   * Restrict multi file drag and drop via onFilesAdded and custom info message.\n   * @default false\n   */\n  multiple?: boolean;\n  /** An array of files that have been uploaded. */\n  files?: FileUploadItemProps[];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Ref for the input element within the component's dom structure. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(({ dragOver, theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    min-height: 4rem;\n    border-style: dashed;\n    cursor: pointer;\n\n    ${dragOver &&\n    css`\n      border-style: solid;\n    `}\n  `;\n});\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n  ({ theme }) => {\n    return css`\n      position: relative;\n\n      input {\n        ${hideVisually}\n      }\n\n      input:enabled:focus + ${StyledDropZone} {\n        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n      }\n\n      input[hidden] + ${StyledDropZone} {\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n  props: PropsWithoutRef<FileInputProps>,\n  ref: FileInputProps['ref']\n) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    label,\n    labelHidden,\n    info,\n    required = false,\n    disabled = false,\n    files,\n    onFilesAdded,\n    multiple = false,\n    status,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const {\n    base: {\n      'content-width': { md }\n    }\n  } = useTheme();\n\n  const testIds = useTestIds(testId, getFileInputTestIds);\n\n  const icon = <Icon name='paper-clip' />;\n  const inputRef = useConsolidatedRef(ref);\n\n  const onChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        onFilesAdded?.(Array.from(e.target.files));\n      }\n      /**\n       * WHY are we doing this?\n       * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n       * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n       * Since we can not modify the input value of files for browser security reasons,\n       * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n       * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n       */\n      if (inputRef.current) inputRef.current.value = '';\n    },\n    [onFilesAdded]\n  );\n\n  const t = useI18n();\n  const [dragOver, setDragOver] = useState(false);\n  const { ltr, rtl } = useDirection();\n\n  const fileInput = (\n    <StyledFileInput>\n      <input\n        data-testid={testIds.control}\n        {...restProps}\n        ref={inputRef}\n        type='file'\n        id={id}\n        disabled={disabled}\n        onChange={onChange}\n        multiple={multiple}\n      />\n      <Flex\n        container={{ alignItems: 'center', justify: 'center' }}\n        item={{ grow: 1 }}\n        as={StyledDropZone}\n        dragOver={dragOver}\n        onClick={() => {\n          inputRef.current?.focus();\n          inputRef.current?.click();\n        }}\n        onDragOver={(e: DragEvent<HTMLDivElement>) => {\n          e.preventDefault();\n        }}\n        onDragEnter={() => setDragOver(true)}\n        onDragLeave={() => setDragOver(false)}\n        onDrop={(e: DragEvent<HTMLDivElement>) => {\n          e.preventDefault();\n          setDragOver(false);\n          onFilesAdded?.(Array.from(e.dataTransfer.files));\n        }}\n      >\n        {ltr && icon}\n        <Text variant='primary'>\n          &nbsp;\n          {t('file_upload_text_main', [\n            <StyledInteractiveText>\n              {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n            </StyledInteractiveText>\n          ])}\n          &nbsp;\n        </Text>\n        {rtl && icon}\n      </Flex>\n    </StyledFileInput>\n  );\n\n  return (\n    <Grid container={{ rowGap: 1 }}>\n      {label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          required={required}\n          disabled={disabled}\n          status={status}\n          additionalInfo={additionalInfo}\n        >\n          {fileInput}\n        </FormField>\n      ) : (\n        fileInput\n      )}\n      {!!files?.length && (\n        <Grid\n          data-testid={testIds.files}\n          container={{\n            gap: 1,\n            cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`\n          }}\n          as='ul'\n        >\n          {files.map((file, index) => {\n            const key =\n              file.id ?? (file.File ? `${file.File.name}_${file.File.lastModified}` : index);\n\n            // When files is an array of native File objects, all properties (including name) are on the prototype, so spreading will not set any props.\n            return <FileUploadItem key={key} {...file} name={file.name} disabled={disabled} />;\n          })}\n        </Grid>\n      )}\n    </Grid>\n  );\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC5F,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,YAAY,CAAC,aAAa,CAAC,CAAC;AA8C5B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAC/C,CAAC,EACC,QAAQ,EACR,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EACX,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;0BACY,OAAO;gBACjB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;QAI/B,QAAQ;QACV,GAAG,CAAA;;OAEF;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACZ,OAAO,GAAG,CAAA;;;;UAIJ,YAAY;;;8BAGQ,cAAc;sBACtB,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;KAEzE,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEzC,CAAC;AAEF,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,KAAsC,EACtC,GAA0B;IAE1B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,cAAc,EACd,MAAM,EACN,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAExD,MAAM,IAAI,GAAG,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC;IACxC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,eAAe,GAAG,MAAM,EAAkB,CAAC;IAEjD,qHAAqH;IACrH,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEnC,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAgC,EAAE,EAAE;QACnC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,YAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;QACD;;;;;;;WAOG;QACH,IAAI,QAAQ,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;IACpD,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACpC,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE7D,MAAM,SAAS,GAAG,CAChB,MAAC,eAAe,eACd,+BACe,OAAO,CAAC,OAAO,KACxB,SAAS,EACb,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GACzD,EACF,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,cAAc,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;oBAC1B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC5B,CAAC,EACD,UAAU,EAAE,CAAC,CAA4B,EAAE,EAAE;oBAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACrB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACpC,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACrC,MAAM,EAAE,CAAC,CAA4B,EAAE,EAAE;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,WAAW,CAAC,KAAK,CAAC,CAAC;oBACnB,YAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;gBACnD,CAAC,aAEA,GAAG,IAAI,IAAI,EACZ,MAAC,IAAI,IAAC,OAAO,EAAC,SAAS,uBAEpB,CAAC,CAAC,uBAAuB,EAAE;gCAC1B,KAAC,qBAAqB,cACnB,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAC7C;6BACzB,CAAC,cAEG,EACN,GAAG,IAAI,IAAI,IACP,IACS,CACnB,CAAC;IAEF,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,uBAAuB,mBACT,OAAO,CAAC,KAAK,EAC1B,GAAG,EAAE,OAAO,CAAC,EAAE;YACb,IAAI,OAAO;gBAAE,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;QACjD,CAAC,YAED,KAAC,QAAQ,OAAK,KAAK,CAAC,CAAC,CAAC,GAAI,GACF,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IACP,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,IAAI,EAAE,iBACL,OAAO,CAAC,KAAK,EAC1B,GAAG,EAAE,OAAO,CAAC,EAAE;YACb,IAAI,OAAO;gBAAE,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;QACjD,CAAC,GACD,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;aAC/E,IAAI,KAAK,EAAE,MAAM,KAAK,CAAC,IAAI,YAAY,CAAC,OAAO,EAAE;YACpD,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;YAC7B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAC3B;QAED,IAAI,aAAa,IAAI,eAAe,CAAC,OAAO,EAAE;YAC5C,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/D,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,aACvD,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,aAAa,IAAI,QAAQ,EACpC,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,YAE7B,aAAa,GACJ,CACb,CAAC,CAAC,CAAC,CACF,aAAa,CACd,EACA,CAAC,aAAa,IAAI,YAAY,IAC1B,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type {\n  BaseProps,\n  ForwardProps,\n  NoChildrenProp,\n  PropsWithDefaults,\n  TestIdProp\n} from '../../types';\nimport { useConsolidatedRef, useI18n, useUID, useDirection, useTestIds } from '../../hooks';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\nimport { getFocusables, withTestIds } from '../../utils';\n\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\nimport FileList from './FileList';\nimport FileItem from './FileItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** Called when files are added either via the input or drop zone. */\n  onFilesAdded?: (files: File[]) => void;\n  /**\n   * Allow multiple files to be selected from the OS specific file browser.\n   * NOTE: This does not restrict multiple files from being added via drag and drop.\n   * Restrict multi file drag and drop via onFilesAdded and custom info message.\n   * @default false\n   */\n  multiple?: boolean;\n  /** An array of files that have been uploaded. */\n  files?: FileItemProps[];\n  /**\n   * Specify allowed file types.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n   */\n  accept?: string | string[];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Ref for the input element within the component's dom structure. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(\n  ({\n    dragOver,\n    theme: {\n      base: { spacing },\n      components\n    }\n  }) => {\n    return css`\n      padding: calc(2 * ${spacing});\n      height: ${components.input.height};\n      border-style: dashed;\n      cursor: pointer;\n\n      ${dragOver &&\n      css`\n        border-style: solid;\n      `}\n    `;\n  }\n);\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n  ({ theme }) => {\n    return css`\n      position: relative;\n\n      input {\n        ${hideVisually}\n      }\n\n      input:enabled:focus + ${StyledDropZone} {\n        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst StyledSingleFileWrapper = styled.div`\n  display: contents;\n`;\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n  props: PropsWithoutRef<FileInputProps>,\n  ref: FileInputProps['ref']\n) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    label,\n    labelHidden,\n    info,\n    required = false,\n    disabled = false,\n    files,\n    onFilesAdded,\n    multiple = false,\n    status,\n    additionalInfo,\n    accept,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getFileInputTestIds);\n\n  const icon = <Icon name='paper-clip' />;\n  const inputRef = useConsolidatedRef(ref);\n  const fileItemListRef = useRef<HTMLDivElement>();\n\n  // Tracks whether at least one file is uploaded -- used for updating the focus to DropZone when the files are deleted\n  const isFilesAdded = useRef(false);\n\n  const onChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        onFilesAdded?.(Array.from(e.target.files));\n      }\n      /**\n       * WHY are we doing this?\n       * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n       * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n       * Since we can not modify the input value of files for browser security reasons,\n       * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n       * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n       */\n      if (inputRef.current) inputRef.current.value = '';\n    },\n    [onFilesAdded]\n  );\n\n  const t = useI18n();\n  const [dragOver, setDragOver] = useState(false);\n  const { ltr, rtl } = useDirection();\n  const hideFileInput = !multiple && files && files.length > 0;\n\n  const fileInput = (\n    <StyledFileInput>\n      <input\n        data-testid={testIds.control}\n        {...restProps}\n        ref={inputRef}\n        type='file'\n        id={id}\n        disabled={disabled}\n        onChange={onChange}\n        multiple={multiple}\n        accept={Array.isArray(accept) ? accept.join(',') : accept}\n      />\n      <Flex\n        container={{ alignItems: 'center', justify: 'center' }}\n        item={{ grow: 1 }}\n        as={StyledDropZone}\n        dragOver={dragOver}\n        onClick={() => {\n          inputRef.current?.focus();\n          inputRef.current?.click();\n        }}\n        onDragOver={(e: DragEvent<HTMLDivElement>) => {\n          e.preventDefault();\n        }}\n        onDragEnter={() => setDragOver(true)}\n        onDragLeave={() => setDragOver(false)}\n        onDrop={(e: DragEvent<HTMLDivElement>) => {\n          e.preventDefault();\n          setDragOver(false);\n          onFilesAdded?.(Array.from(e.dataTransfer.files));\n        }}\n      >\n        {ltr && icon}\n        <Text variant='primary'>\n          &nbsp;\n          {t('file_upload_text_main', [\n            <StyledInteractiveText>\n              {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n            </StyledInteractiveText>\n          ])}\n          &nbsp;\n        </Text>\n        {rtl && icon}\n      </Flex>\n    </StyledFileInput>\n  );\n\n  const fileItemList = hideFileInput ? (\n    <StyledSingleFileWrapper\n      data-testid={testIds.files}\n      ref={element => {\n        if (element) fileItemListRef.current = element;\n      }}\n    >\n      <FileItem {...files[0]} />\n    </StyledSingleFileWrapper>\n  ) : (\n    <FileList\n      type='item'\n      items={files ?? []}\n      data-testid={testIds.files}\n      ref={element => {\n        if (element) fileItemListRef.current = element;\n      }}\n    />\n  );\n\n  useEffect(() => {\n    if (files && files.length > 0 && !isFilesAdded.current) isFilesAdded.current = true;\n    else if (files?.length === 0 && isFilesAdded.current) {\n      isFilesAdded.current = false;\n      inputRef.current?.focus();\n    }\n\n    if (hideFileInput && fileItemListRef.current) {\n      getFocusables(fileItemListRef.current)[0]?.focus();\n    }\n  }, [files]);\n\n  const renderElement = hideFileInput ? fileItemList : fileInput;\n\n  return (\n    <Grid container={{ rowGap: hideFileInput ? undefined : 1 }}>\n      {label ? (\n        <FormField\n          testId={testIds}\n          label={label}\n          labelHidden={labelHidden}\n          id={id}\n          info={info}\n          required={required}\n          disabled={!hideFileInput && disabled}\n          status={status}\n          additionalInfo={additionalInfo}\n        >\n          {renderElement}\n        </FormField>\n      ) : (\n        renderElement\n      )}\n      {!hideFileInput && fileItemList}\n    </Grid>\n  );\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}

package/lib/components/File/FileItem.d.ts

@@ -2,18 +2,30 @@ import type { FC, Ref } from 'react';
 import type { ForwardProps, BaseProps } from '../../types';
 import type { FileVisualProps } from './FileVisual';
 export interface FileItemProps extends BaseProps {
+    /** Unique id for item. */
+    id: string;
     /** Name of the file. */
     name: string;
-    /** Url of the file. */
-    url: string;
     /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */
     thumbnail?: FileVisualProps['thumbnail'];
-    /** When passed, it will make the name region to perform open in new tab action. Passes file url as the parameter. */
-    onPreview?: (url: FileItemProps['url']) => void;
-    /** When passed, it will make the name region to perform download action. Passes file url as the parameter. */
-    onDownload?: (url: FileItemProps['url']) => void;
+    /** File extension. Use 'url' for link */
+    format?: string;
+    /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */
+    onCancel?: (id: FileItemProps['id']) => void;
+    /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
+    onEdit?: (id: FileItemProps['id']) => void;
+    /** When passed, will be called on click of the name. Passes file id as the parameter. */
+    onPreview?: (id: FileItemProps['id']) => void;
+    /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file id as the parameter. */
+    onDownload?: (id: FileItemProps['id']) => void;
+    /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
+    onDelete?: (id: FileItemProps['id']) => void;
+    /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */
+    progress?: number;
+    /** Set if there is an error uploading the file. Applies error styling to the meta string passed. */
+    error?: string;
     /** Ref for the wrapping element. */
-    ref?: Ref<HTMLButtonElement>;
+    ref?: Ref<HTMLDivElement>;
 }
 declare const FileItem: FC<FileItemProps & ForwardProps>;
 export default FileItem;

package/lib/components/File/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAS3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,oIAAoI;IACpI,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,qHAAqH;IACrH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAChD,8GAA8G;IAC9G,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACjD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAqCD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA0D7C,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAU,MAAM,aAAa,CAAC;AAanE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,oIAAoI;IACpI,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3C,yFAAyF;IACzF,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,0IAA0I;IAC1I,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAqFD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAwJ7C,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/File/FileItem.js

@@ -1,64 +1,139 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import Text, { StyledText } from '../Text';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
 import { defaultThemeProp } from '../../theme';
-import Button, { StyledButtonLink } from '../Button';
-import Grid from '../Grid';
-import { useI18n, useElement } from '../../hooks';
+import Button from '../Button';
+import { useI18n, useElement, useConfiguration } from '../../hooks';
+import Actions from '../Actions';
+import Progress from '../Progress';
+import { StyledProgressRing } from '../Progress/Progress.styles';
+import { formatNumber } from '../Number';
+import Flex from '../Flex';
 import { StyledIconShape } from '../Icon/Icon';
 import { getKindFromMimeType, getMimeTypeFromFile } from './utils';
 import FileVisual, { StyledFileVisual } from './FileVisual';
-const StyledFileItem = styled.div(({ theme: { base: { palette, spacing, 'border-radius': borderRadius }, components } }) => {
+const StyledErrorIcon = styled(Icon)(({ theme }) => {
+    return css `
+    color: ${theme.base.palette.urgent};
+    margin-inline-start: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledErrorIcon.defaultProps = defaultThemeProp;
+const titleEllipsisStyle = css `
+  flex-shrink: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const StyledPreviewTitle = styled(Button) `
+  ${titleEllipsisStyle}
+`;
+const StyledTextTitle = styled(Text) `
+  ${titleEllipsisStyle}
+`;
+const StyledMeta = styled(StyledText)(({ theme, error }) => {
+    return css `
+    /* min width to show percentage in full */
+    min-width: 4ch;
+    margin-inline-start: auto;
+    ${titleEllipsisStyle}
+    ${error &&
+        css `
+      color: ${theme.base.palette.urgent};
+    `}
+  `;
+});
+StyledMeta.defaultProps = defaultThemeProp;
+const StyledActionsWrapper = styled.div(({ meta }) => {
+    return css `
+    margin-inline-start: ${meta ? 'unset' : 'auto'};
+  `;
+});
+StyledActionsWrapper.defaultProps = defaultThemeProp;
+const StyledFileItem = styled.div(({ theme: { base: { palette, 'border-radius': borderRadius, spacing, 'hit-area': { compact } }, components } }) => {
     return css `
       border-radius: calc(0.5 * ${borderRadius});
       border: 0.0625rem solid ${palette['border-line']};
       background-color: ${palette['primary-background']};
+      height: ${components.input.height};
+      min-width: calc(${components.input.height} + 12ch + 1.5 * ${spacing} + ${compact});
+      > ${StyledProgressRing} {
+        margin-inline-start: calc(0.5 * ${spacing});
+      }
 
       > ${StyledFileVisual}, > ${StyledIconShape} {
         border-start-start-radius: inherit;
         border-end-start-radius: inherit;
         border-start-end-radius: 0;
         border-end-end-radius: 0;
-        height: ${components.input.height};
         width: ${components.input.height};
-      }
-
-      > :is(${StyledFileVisual}, ${StyledIconShape}) + :is(${StyledButtonLink}, ${StyledText}) {
-        margin-inline-start: ${spacing};
-        width: auto;
-        max-width: calc(100% - calc(2 * ${spacing}));
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        flex-shrink: 0;
       }
     `;
 });
 StyledFileItem.defaultProps = defaultThemeProp;
 const FileItem = forwardRef(function FileItem(props, ref) {
-    const { name, url, thumbnail, onPreview, onDownload, ...restProps } = props;
+    const { id, name, thumbnail, format, error, onCancel, onEdit, onPreview, onDownload, onDelete, progress, ...restProps } = props;
     const [thumbnailError, setThumbnailError] = useState(false);
-    const [target, setTarget] = useElement();
+    const [textTarget, setTextTarget] = useElement();
+    const [metaTarget, setMetaTarget] = useElement();
+    const { locale } = useConfiguration();
     const t = useI18n();
-    const type = getMimeTypeFromFile(url);
-    const text = name || url;
-    let ariaLabel;
-    if (onPreview) {
-        ariaLabel = t('open_file_in_new_tab', [text]);
+    const uploading = typeof progress === 'number' && progress < 100;
+    let metaMessage;
+    if (uploading) {
+        metaMessage = formatNumber(progress, {
+            locale,
+            options: {
+                style: 'unit',
+                unit: 'percent',
+                maximumFractionDigits: 0
+            }
+        });
+    }
+    else if (error) {
+        metaMessage = error;
+    }
+    const definedActions = [
+        { onClick: onEdit, text: t('edit'), icon: 'pencil' },
+        { onClick: onDownload, text: t('download'), icon: 'download' },
+        { onClick: onDelete, text: t('delete'), icon: 'trash' }
+    ]
+        .filter(action => {
+        return !!action.onClick;
+    })
+        .map(({ text: actiontext, icon, onClick }) => ({
+        id: actiontext,
+        text: actiontext,
+        icon,
+        onClick: () => {
+            if (onClick)
+                onClick(id);
+        }
+    }));
+    let visual;
+    if (uploading) {
+        visual = _jsx(Progress, { variant: 'ring', placement: 'inline', value: progress });
+    }
+    else if (error) {
+        visual = _jsx(StyledErrorIcon, { name: 'warn-solid' });
     }
-    else if (onDownload) {
-        ariaLabel = t('download_file', [text]);
+    else {
+        visual = (_jsx(FileVisual, { type: format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format ?? '') ?? ''), thumbnail: thumbnailError ? undefined : thumbnail, onThumbnailError: () => {
+                setThumbnailError(true);
+            } }));
     }
-    return (_jsxs(Grid, { as: StyledFileItem, container: { cols: 'auto 1fr', alignItems: 'center', justifyItems: 'start' }, ref: ref, children: [_jsx(FileVisual, { type: getKindFromMimeType(type ?? ''), thumbnail: thumbnailError ? undefined : thumbnail, onThumbnailError: () => {
-                    setThumbnailError(true);
-                } }), onPreview || onDownload ? (_jsxs(Button, { ...restProps, variant: 'link', ref: setTarget, onClick: () => {
-                    if (onPreview)
-                        onPreview(url);
-                    else if (onDownload)
-                        onDownload(url);
-                }, "aria-label": ariaLabel, children: [text, onPreview && _jsx(Icon, { name: 'open' })] })) : (_jsx(Text, { ...restProps, ref: setTarget, children: text })), _jsx(Tooltip, { target: target, smart: true, children: text })] }));
+    return (_jsxs(Flex, { as: StyledFileItem, container: {
+            pad: [undefined, 0.5, undefined, undefined],
+            alignItems: 'center',
+            justify: 'start',
+            gap: 1
+        }, ref: ref, children: [visual, onPreview && !(error || uploading) ? (_jsxs(Button, { ...restProps, as: StyledPreviewTitle, variant: 'link', ref: setTextTarget, onClick: () => {
+                    onPreview(id);
+                }, "aria-label": t('preview_file', [name]), children: [name, format === 'url' && _jsx(Icon, { name: 'open' })] })) : (_jsx(Text, { ...restProps, as: StyledTextTitle, ref: setTextTarget, children: name })), metaMessage && (_jsxs(_Fragment, { children: [_jsx(Text, { as: StyledMeta, variant: 'secondary', error: error && !uploading, ref: setMetaTarget, children: metaMessage }), metaTarget && (_jsx(Tooltip, { target: metaTarget, describeTarget: false, smart: true, children: metaMessage }))] })), (error || uploading) && onCancel && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Button, { label: t('cancel'), "aria-label": `${t('cancel')} - ${name}`, variant: 'simple', compact: true, icon: true, onClick: () => onCancel(id), children: _jsx(Icon, { name: 'times' }) }) })), !(error || uploading) && !!definedActions.length && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Actions, { items: definedActions, compact: true, iconOnly: true, contextualLabel: name }) })), textTarget && (_jsx(Tooltip, { target: textTarget, smart: true, describeTarget: false, children: name }))] }));
 });
 export default FileItem;
 //# sourceMappingURL=FileItem.js.map

package/lib/components/File/FileItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { PropsWithoutRef, FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text, { StyledText } from '../Text';\nimport Icon from '../Icon';\nimport Tooltip from '../Tooltip';\nimport type { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button, { StyledButtonLink } from '../Button';\nimport Grid from '../Grid';\nimport { useI18n, useElement } from '../../hooks';\nimport { StyledIconShape } from '../Icon/Icon';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\nimport type { FileVisualProps } from './FileVisual';\n\nexport interface FileItemProps extends BaseProps {\n  /** Name of the file. */\n  name: string;\n  /** Url of the file. */\n  url: string;\n  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: FileVisualProps['thumbnail'];\n  /** When passed, it will make the name region to perform open in new tab action. Passes file url as the parameter. */\n  onPreview?: (url: FileItemProps['url']) => void;\n  /** When passed, it will make the name region to perform download action. Passes file url as the parameter. */\n  onDownload?: (url: FileItemProps['url']) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst StyledFileItem = styled.div(\n  ({\n    theme: {\n      base: { palette, spacing, 'border-radius': borderRadius },\n      components\n    }\n  }) => {\n    return css`\n      border-radius: calc(0.5 * ${borderRadius});\n      border: 0.0625rem solid ${palette['border-line']};\n      background-color: ${palette['primary-background']};\n\n      > ${StyledFileVisual}, > ${StyledIconShape} {\n        border-start-start-radius: inherit;\n        border-end-start-radius: inherit;\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        height: ${components.input.height};\n        width: ${components.input.height};\n      }\n\n      > :is(${StyledFileVisual}, ${StyledIconShape}) + :is(${StyledButtonLink}, ${StyledText}) {\n        margin-inline-start: ${spacing};\n        width: auto;\n        max-width: calc(100% - calc(2 * ${spacing}));\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    `;\n  }\n);\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(function FileItem(\n  props: PropsWithoutRef<FileItemProps>,\n  ref: FileItemProps['ref']\n) {\n  const { name, url, thumbnail, onPreview, onDownload, ...restProps } = props;\n\n  const [thumbnailError, setThumbnailError] = useState(false);\n  const [target, setTarget] = useElement<HTMLButtonElement | HTMLSpanElement>();\n  const t = useI18n();\n\n  const type = getMimeTypeFromFile(url);\n  const text = name || url;\n\n  let ariaLabel: undefined | string;\n\n  if (onPreview) {\n    ariaLabel = t('open_file_in_new_tab', [text]);\n  } else if (onDownload) {\n    ariaLabel = t('download_file', [text]);\n  }\n\n  return (\n    <Grid\n      as={StyledFileItem}\n      container={{ cols: 'auto 1fr', alignItems: 'center', justifyItems: 'start' }}\n      ref={ref}\n    >\n      <FileVisual\n        type={getKindFromMimeType(type ?? '')}\n        thumbnail={thumbnailError ? undefined : thumbnail}\n        onThumbnailError={() => {\n          setThumbnailError(true);\n        }}\n      />\n      {onPreview || onDownload ? (\n        <Button\n          {...restProps}\n          variant='link'\n          ref={setTarget}\n          onClick={() => {\n            if (onPreview) onPreview(url);\n            else if (onDownload) onDownload(url);\n          }}\n          aria-label={ariaLabel}\n        >\n          {text}\n          {onPreview && <Icon name='open' />}\n        </Button>\n      ) : (\n        <Text {...restProps} ref={setTarget}>\n          {text}\n        </Text>\n      )}\n      <Tooltip target={target} smart>\n        {text}\n      </Tooltip>\n    </Grid>\n  );\n});\n\nexport default FileItem;\n"]}
+{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AA8B5D,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;sCACA,KAAK,CAAC,IAAI,CAAC,OAAO;GACrD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IACrC,kBAAkB;CACrB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAChC,kBAAkB;CACrB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAqB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;;;;MAIN,kBAAkB;MAClB,KAAK;QACP,GAAG,CAAA;eACQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;KACnC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACtE,OAAO,GAAG,CAAA;2BACe,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;GAC/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,eAAe,EAAE,YAAY,EAC7B,OAAO,EACP,UAAU,EAAE,EAAE,OAAO,EAAE,EACxB,EACD,UAAU,EACX,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;kCACoB,YAAY;gCACd,OAAO,CAAC,aAAa,CAAC;0BAC5B,OAAO,CAAC,oBAAoB,CAAC;gBACvC,UAAU,CAAC,KAAK,CAAC,MAAM;wBACf,UAAU,CAAC,KAAK,CAAC,MAAM,mBAAmB,OAAO,MAAM,OAAO;UAC5E,kBAAkB;0CACc,OAAO;;;UAGvC,gBAAgB,OAAO,eAAe;;;;;iBAK/B,UAAU,CAAC,KAAK,CAAC,MAAM;;;KAGnC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,QAAQ,GAAqC,UAAU,CAAC,SAAS,QAAQ,CAC7E,KAAqC,EACrC,GAAyB;IAEzB,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,SAAS,EACT,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAE,CAAC;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAE,CAAC;IACjD,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,GAAG,GAAG,CAAC;IAEjE,IAAI,WAAW,CAAC;IAEhB,IAAI,SAAS,EAAE;QACb,WAAW,GAAG,YAAY,CAAC,QAAQ,EAAE;YACnC,MAAM;YACN,OAAO,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,SAAS;gBACf,qBAAqB,EAAE,CAAC;aACzB;SACF,CAAC,CAAC;KACJ;SAAM,IAAI,KAAK,EAAE;QAChB,WAAW,GAAG,KAAK,CAAC;KACrB;IAED,MAAM,cAAc,GAAa;QAC/B,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE;QACpD,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9D,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;KACxD;SACE,MAAM,CAAC,MAAM,CAAC,EAAE;QACf,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IAC1B,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QAC7C,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,UAAU;QAChB,IAAI;QACJ,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,OAAO;gBAAE,OAAO,CAAC,EAAE,CAAC,CAAC;QAC3B,CAAC;KACF,CAAC,CAAC,CAAC;IAEN,IAAI,MAAM,CAAC;IAEX,IAAI,SAAS,EAAE;QACb,MAAM,GAAG,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,QAAQ,GAAI,CAAC;KAC1E;SAAM,IAAI,KAAK,EAAE;QAChB,MAAM,GAAG,KAAC,eAAe,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC;KAChD;SAAM;QACL,MAAM,GAAG,CACP,KAAC,UAAU,IACT,IAAI,EACF,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,MAAM,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,EAE1F,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,gBAAgB,EAAE,GAAG,EAAE;gBACrB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC,GACD,CACH,CAAC;KACH;IAED,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE;YACT,GAAG,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC;YAC3C,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,CAAC;SACP,EACD,GAAG,EAAE,GAAG,aAEP,MAAM,EAEN,SAAS,IAAI,CAAC,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CACpC,MAAC,MAAM,OACD,SAAS,EACb,EAAE,EAAE,kBAAkB,EACtB,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,SAAS,CAAC,EAAE,CAAC,CAAC;gBAChB,CAAC,gBACW,CAAC,CAAC,cAAc,EAAE,CAAC,IAAI,CAAC,CAAC,aAEpC,IAAI,EACJ,MAAM,KAAK,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,IAClC,CACV,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,SAAS,EAAE,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,aAAa,YACzD,IAAI,GACA,CACR,EACA,WAAW,IAAI,CACd,8BACE,KAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,YACrF,WAAW,GACP,EAEN,UAAU,IAAI,CACb,KAAC,OAAO,IAAC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,kBACtD,WAAW,GACJ,CACX,IACA,CACJ,EAEA,CAAC,KAAK,IAAI,SAAS,CAAC,IAAI,QAAQ,IAAI,CACnC,KAAC,oBAAoB,IAAC,IAAI,EAAE,CAAC,CAAC,WAAW,YACvC,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,gBACN,GAAG,CAAC,CAAC,QAAQ,CAAC,MAAM,IAAI,EAAE,EACtC,OAAO,EAAC,QAAQ,EAChB,OAAO,QACP,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAE3B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,GACY,CACxB,EAEA,CAAC,CAAC,KAAK,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,CACnD,KAAC,oBAAoB,IAAC,IAAI,EAAE,CAAC,CAAC,WAAW,YACvC,KAAC,OAAO,IAAC,KAAK,EAAE,cAAc,EAAE,OAAO,QAAC,QAAQ,QAAC,eAAe,EAAE,IAAI,GAAI,GACrD,CACxB,EAEA,UAAU,IAAI,CACb,KAAC,OAAO,IAAC,MAAM,EAAE,UAAU,EAAE,KAAK,QAAC,cAAc,EAAE,KAAK,YACrD,IAAI,GACG,CACX,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { PropsWithoutRef, FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text, { StyledText } from '../Text';\nimport Icon from '../Icon';\nimport Tooltip from '../Tooltip';\nimport type { ForwardProps, BaseProps, Action } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { useI18n, useElement, useConfiguration } from '../../hooks';\nimport Actions from '../Actions';\nimport Progress from '../Progress';\nimport { StyledProgressRing } from '../Progress/Progress.styles';\nimport { formatNumber } from '../Number';\nimport Flex from '../Flex';\nimport { StyledIconShape } from '../Icon/Icon';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\nimport type { FileVisualProps } from './FileVisual';\n\nexport interface FileItemProps extends BaseProps {\n  /** Unique id for item. */\n  id: string;\n  /** Name of the file. */\n  name: string;\n  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: FileVisualProps['thumbnail'];\n  /** File extension. Use 'url' for link */\n  format?: string;\n  /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n  onCancel?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onEdit?: (id: FileItemProps['id']) => void;\n  /** When passed, will be called on click of the name. Passes file id as the parameter. */\n  onPreview?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file id as the parameter. */\n  onDownload?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDelete?: (id: FileItemProps['id']) => void;\n  /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n  progress?: number;\n  /** Set if there is an error uploading the file. Applies error styling to the meta string passed. */\n  error?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledErrorIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst titleEllipsisStyle = css`\n  flex-shrink: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nconst StyledPreviewTitle = styled(Button)`\n  ${titleEllipsisStyle}\n`;\n\nconst StyledTextTitle = styled(Text)`\n  ${titleEllipsisStyle}\n`;\n\nconst StyledMeta = styled(StyledText)<{ error: boolean }>(({ theme, error }) => {\n  return css`\n    /* min width to show percentage in full */\n    min-width: 4ch;\n    margin-inline-start: auto;\n    ${titleEllipsisStyle}\n    ${error &&\n    css`\n      color: ${theme.base.palette.urgent};\n    `}\n  `;\n});\n\nStyledMeta.defaultProps = defaultThemeProp;\n\nconst StyledActionsWrapper = styled.div<{ meta: boolean }>(({ meta }) => {\n  return css`\n    margin-inline-start: ${meta ? 'unset' : 'auto'};\n  `;\n});\n\nStyledActionsWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFileItem = styled.div(\n  ({\n    theme: {\n      base: {\n        palette,\n        'border-radius': borderRadius,\n        spacing,\n        'hit-area': { compact }\n      },\n      components\n    }\n  }) => {\n    return css`\n      border-radius: calc(0.5 * ${borderRadius});\n      border: 0.0625rem solid ${palette['border-line']};\n      background-color: ${palette['primary-background']};\n      height: ${components.input.height};\n      min-width: calc(${components.input.height} + 12ch + 1.5 * ${spacing} + ${compact});\n      > ${StyledProgressRing} {\n        margin-inline-start: calc(0.5 * ${spacing});\n      }\n\n      > ${StyledFileVisual}, > ${StyledIconShape} {\n        border-start-start-radius: inherit;\n        border-end-start-radius: inherit;\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        width: ${components.input.height};\n        flex-shrink: 0;\n      }\n    `;\n  }\n);\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(function FileItem(\n  props: PropsWithoutRef<FileItemProps>,\n  ref: FileItemProps['ref']\n) {\n  const {\n    id,\n    name,\n    thumbnail,\n    format,\n    error,\n    onCancel,\n    onEdit,\n    onPreview,\n    onDownload,\n    onDelete,\n    progress,\n    ...restProps\n  } = props;\n\n  const [thumbnailError, setThumbnailError] = useState(false);\n  const [textTarget, setTextTarget] = useElement();\n  const [metaTarget, setMetaTarget] = useElement();\n  const { locale } = useConfiguration();\n  const t = useI18n();\n  const uploading = typeof progress === 'number' && progress < 100;\n\n  let metaMessage;\n\n  if (uploading) {\n    metaMessage = formatNumber(progress, {\n      locale,\n      options: {\n        style: 'unit',\n        unit: 'percent',\n        maximumFractionDigits: 0\n      }\n    });\n  } else if (error) {\n    metaMessage = error;\n  }\n\n  const definedActions: Action[] = [\n    { onClick: onEdit, text: t('edit'), icon: 'pencil' },\n    { onClick: onDownload, text: t('download'), icon: 'download' },\n    { onClick: onDelete, text: t('delete'), icon: 'trash' }\n  ]\n    .filter(action => {\n      return !!action.onClick;\n    })\n    .map(({ text: actiontext, icon, onClick }) => ({\n      id: actiontext,\n      text: actiontext,\n      icon,\n      onClick: () => {\n        if (onClick) onClick(id);\n      }\n    }));\n\n  let visual;\n\n  if (uploading) {\n    visual = <Progress variant='ring' placement='inline' value={progress} />;\n  } else if (error) {\n    visual = <StyledErrorIcon name='warn-solid' />;\n  } else {\n    visual = (\n      <FileVisual\n        type={\n          format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format ?? '') ?? '')\n        }\n        thumbnail={thumbnailError ? undefined : thumbnail}\n        onThumbnailError={() => {\n          setThumbnailError(true);\n        }}\n      />\n    );\n  }\n\n  return (\n    <Flex\n      as={StyledFileItem}\n      container={{\n        pad: [undefined, 0.5, undefined, undefined],\n        alignItems: 'center',\n        justify: 'start',\n        gap: 1\n      }}\n      ref={ref}\n    >\n      {visual}\n\n      {onPreview && !(error || uploading) ? (\n        <Button\n          {...restProps}\n          as={StyledPreviewTitle}\n          variant='link'\n          ref={setTextTarget}\n          onClick={() => {\n            onPreview(id);\n          }}\n          aria-label={t('preview_file', [name])}\n        >\n          {name}\n          {format === 'url' && <Icon name='open' />}\n        </Button>\n      ) : (\n        <Text {...restProps} as={StyledTextTitle} ref={setTextTarget}>\n          {name}\n        </Text>\n      )}\n      {metaMessage && (\n        <>\n          <Text as={StyledMeta} variant='secondary' error={error && !uploading} ref={setMetaTarget}>\n            {metaMessage}\n          </Text>\n\n          {metaTarget && (\n            <Tooltip target={metaTarget} describeTarget={false} smart>\n              {metaMessage}\n            </Tooltip>\n          )}\n        </>\n      )}\n\n      {(error || uploading) && onCancel && (\n        <StyledActionsWrapper meta={!!metaMessage}>\n          <Button\n            label={t('cancel')}\n            aria-label={`${t('cancel')} - ${name}`}\n            variant='simple'\n            compact\n            icon\n            onClick={() => onCancel(id)}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledActionsWrapper>\n      )}\n\n      {!(error || uploading) && !!definedActions.length && (\n        <StyledActionsWrapper meta={!!metaMessage}>\n          <Actions items={definedActions} compact iconOnly contextualLabel={name} />\n        </StyledActionsWrapper>\n      )}\n\n      {textTarget && (\n        <Tooltip target={textTarget} smart describeTarget={false}>\n          {name}\n        </Tooltip>\n      )}\n    </Flex>\n  );\n});\n\nexport default FileItem;\n"]}

package/lib/components/File/FileList.d.ts

@@ -0,0 +1,14 @@
+import type { PropsWithoutRef } from 'react';
+import type { WithAttributes } from '../../types';
+import type { FileDisplayProps } from './FileDisplay';
+import type { FileItemProps } from './FileItem';
+export type FileListProps = WithAttributes<'div', {
+    type: 'display';
+    items: FileDisplayProps[];
+} | {
+    type: 'item';
+    items: FileItemProps[];
+}>;
+declare const FileList: import("react").ForwardRefExoticComponent<PropsWithoutRef<FileListProps> & import("react").RefAttributes<HTMLDivElement>>;
+export default FileList;
+//# sourceMappingURL=FileList.d.ts.map

package/lib/components/File/FileList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAK9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACH;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CACJ,CAAC;AAQF,QAAA,MAAM,QAAQ,2HAkBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/File/FileList.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { useBreakpoint, useConsolidatedRef } from '../../hooks';
+import Grid from '../Grid';
+import { StyledLink } from '../Link';
+import FileDisplay from './FileDisplay';
+import FileItem from './FileItem';
+const StyledFileList = styled(Grid) `
+  ${StyledLink} + ${StyledLink} {
+    margin-inline-start: unset;
+  }
+`;
+const FileList = forwardRef(function FileList({ type, items, ...restProps }, ref) {
+    const listRef = useConsolidatedRef(ref);
+    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: listRef });
+    return (_jsx(Grid, { ...restProps, ref: listRef, container: { gap: 0.5, cols: isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr' }, as: StyledFileList, children: type === 'display'
+            ? items.map(item => _jsx(FileDisplay, { ...item }, item.id))
+            : items.map(item => _jsx(FileItem, { ...item }, item.id)) }));
+});
+export default FileList;
+//# sourceMappingURL=FileList.js.map

package/lib/components/File/FileList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.js","sourceRoot":"","sources":["../../../src/components/File/FileList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAclC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC/B,UAAU,MAAM,UAAU;;;CAG7B,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAClD,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC;IAEvE,OAAO,CACL,KAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,EAAE,EACxE,EAAE,EAAE,cAAc,YAEjB,IAAI,KAAK,SAAS;YACjB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAC,WAAW,OAAmB,IAAI,IAAjB,IAAI,CAAC,EAAE,CAAc,CAAC;YAC5D,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAC,QAAQ,OAAmB,IAAI,IAAjB,IAAI,CAAC,EAAE,CAAc,CAAC,GACtD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport type { RefElement, WithAttributes } from '../../types';\nimport { useBreakpoint, useConsolidatedRef } from '../../hooks';\nimport Grid from '../Grid';\nimport { StyledLink } from '../Link';\n\nimport type { FileDisplayProps } from './FileDisplay';\nimport type { FileItemProps } from './FileItem';\nimport FileDisplay from './FileDisplay';\nimport FileItem from './FileItem';\n\nexport type FileListProps = WithAttributes<\n  'div',\n  | {\n      type: 'display';\n      items: FileDisplayProps[];\n    }\n  | {\n      type: 'item';\n      items: FileItemProps[];\n    }\n>;\n\nconst StyledFileList = styled(Grid)`\n  ${StyledLink} + ${StyledLink} {\n    margin-inline-start: unset;\n  }\n`;\n\nconst FileList = forwardRef<RefElement<FileListProps>, PropsWithoutRef<FileListProps>>(\n  function FileList({ type, items, ...restProps }, ref) {\n    const listRef = useConsolidatedRef(ref);\n    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: listRef });\n\n    return (\n      <Grid\n        {...restProps}\n        ref={listRef}\n        container={{ gap: 0.5, cols: isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr' }}\n        as={StyledFileList}\n      >\n        {type === 'display'\n          ? items.map(item => <FileDisplay key={item.id} {...item} />)\n          : items.map(item => <FileItem key={item.id} {...item} />)}\n      </Grid>\n    );\n  }\n);\n\nexport default FileList;\n"]}