npm - @pega/cosmos-react-core - Versions diffs - 2.0.0-dev.2.1 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-core 2.0.0-dev.2.1 → 2.0.0-dev.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3146) hide show

package/lib/components/File/FileInput.js CHANGED Viewed

@@ -1,15 +1,18 @@
-import React, { forwardRef, useCallback, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { hideVisually } from 'polished';
-import { useOverride, useTheme, useConsolidatedRef, useI18n, useUID } from '../../hooks';
+import { useOverride, useConsolidatedRef, useI18n, useUID, useDirection } from '../../hooks';
 import FormControl from '../FormControl';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import Text from '../Text';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as paperClipIcon from '../Icon/icons/paper-clip.icon';
 import FormField from '../FormField';
 import Grid from '../Grid';
 import FileUploadItem from './FileUploadItem';
+registerIcon(paperClipIcon);
 export const StyledDropZone = styled(FormControl)(({ dragOver, theme }) => {
     return css `
     padding: calc(2 * ${theme.base.spacing});
@@ -47,13 +50,14 @@ const StyledInteractiveText = styled.span(({ theme }) => {
   `;
 });
 StyledInteractiveText.defaultProps = defaultThemeProp;
-const BaseFileInput = forwardRef(({ id = useUID(), label, labelHidden, info, required = false, disabled = false, files, onFilesAdded, multiple = false, status, ...restProps }, ref) => {
-    const theme = useTheme();
-    const icon = React.createElement(Icon, { name: 'paper-clip' });
+const BaseFileInput = forwardRef((props, ref) => {
+    const uid = useUID();
+    const { id = uid, label, labelHidden, info, required = false, disabled = false, files, onFilesAdded, multiple = false, status, ...restProps } = props;
+    const icon = _jsx(Icon, { name: 'paper-clip' }, void 0);
     const inputRef = useConsolidatedRef(ref);
     const onChange = useCallback((e) => {
         if (e.target.files) {
-            onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(Array.from(e.target.files));
+            onFilesAdded?.(Array.from(e.target.files));
         }
         /**
          * WHY are we doing this?
@@ -68,39 +72,32 @@ const BaseFileInput = forwardRef(({ id = useUID(), label, labelHidden, info, req
     }, [onFilesAdded]);
     const t = useI18n();
     const [dragOver, setDragOver] = useState(false);
-    const fileInput = (React.createElement(StyledFileInput, null,
-        React.createElement("input", { ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple, ...restProps }),
-        React.createElement(Flex, { container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
-                var _a, _b;
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.click();
-            }, onDragOver: (e) => {
-                e.preventDefault();
-            }, onDragEnter: () => setDragOver(true), onDragLeave: () => setDragOver(false), onDrop: (e) => {
-                e.preventDefault();
-                setDragOver(false);
-                onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(Array.from(e.dataTransfer.files));
-            } },
-            !theme.base.rtl && icon,
-            React.createElement(Text, { variant: 'primary' },
-                "\u00A0",
-                t('file_upload_text_main', React.createElement(StyledInteractiveText, null, t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')))),
-            theme.base.rtl && icon)));
-    return (React.createElement(Grid, { container: { rowGap: 1 } },
-        label ? (React.createElement(FormField, { ...{ label, labelHidden, id, info, required, disabled, status } }, fileInput)) : (fileInput),
-        !!(files === null || files === void 0 ? void 0 : files.length) && (React.createElement(Grid, { container: {
-                gap: 1,
-                cols: 'repeat(auto-fill, minmax(20rem, 1fr))'
-            }, as: 'ul', ...restProps }, files.map(({ name, ...file }, index) => {
-            // eslint-disable-next-line react/no-array-index-key
-            return React.createElement(FileUploadItem, { key: index, name: name, ...file });
-        })))));
+    const { ltr, rtl } = useDirection();
+    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple, ...restProps }, void 0), _jsxs(Flex, { container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
+                    inputRef.current?.focus();
+                    inputRef.current?.click();
+                }, onDragOver: (e) => {
+                    e.preventDefault();
+                }, onDragEnter: () => setDragOver(true), onDragLeave: () => setDragOver(false), onDrop: (e) => {
+                    e.preventDefault();
+                    setDragOver(false);
+                    onFilesAdded?.(Array.from(e.dataTransfer.files));
+                }, 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') }, void 0)
+                            ]), "\u00A0"] }, void 0), rtl && icon] }, void 0)] }, void 0));
+    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, required, disabled, status }, children: fileInput }, void 0)) : (fileInput), !!files?.length && (_jsx(Flex, { container: {
+                    gap: 1,
+                    direction: 'column'
+                }, as: 'ul', ...restProps, children: files.map(({ name, ...file }, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return _jsx(FileUploadItem, { name: name, ...file }, index);
+                }) }, void 0))] }, void 0));
 });
 const FileInput = forwardRef((props, ref) => {
     const Override = useOverride('FileInput');
     if (Override)
-        return React.createElement(Override, { ...props, ref: ref });
-    return React.createElement(BaseFileInput, { ...props, ref: ref });
+        return _jsx(Override, { ...props, ref: ref }, void 0);
+    return _jsx(BaseFileInput, { ...props, ref: ref }, void 0);
 });
 export default FileInput;
 //# sourceMappingURL=FileInput.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n FunctionComponent,\n Ref,\n forwardRef,\n ChangeEvent,\n useCallback,\n PropsWithoutRef,\n DragEvent,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { useOverride, useTheme, useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport FormControl, { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\n\nimport FileUploadItem, { FileUploadItemProps } from './FileUploadItem';\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps {\n /*\n Called when files are added either via the input or drop zone.\n /\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 /* 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 BaseFileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(\n (\n {\n id = useUID(),\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n files,\n onFilesAdded,\n multiple = false,\n status,\n ...restProps\n }: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n ) => {\n const theme = useTheme();\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\n const fileInput = (\n <StyledFileInput>\n <input\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\n {...restProps}\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 {!theme.base.rtl && icon}\n <Text variant='primary'>\n  \n {t(\n 'file_upload_text_main',\n <StyledInteractiveText>\n {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n </StyledInteractiveText>\n )}\n </Text>\n {theme.base.rtl && icon}\n </Flex>\n </StyledFileInput>\n );\n\n return (\n <Grid container={{ rowGap: 1 }}>\n {label ? (\n <FormField {...{ label, labelHidden, id, info, required, disabled, status }}>\n {fileInput}\n </FormField>\n ) : (\n fileInput\n )}\n {!!files?.length && (\n <Grid\n container={{\n gap: 1,\n cols: 'repeat(auto-fill, minmax(20rem, 1fr))'\n }}\n as='ul'\n {...restProps}\n >\n {files.map(({ name, ...file }, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <FileUploadItem key={index} name={name} {...file} />;\n })}\n </Grid>\n )}\n </Grid>\n );\n }\n);\n\nconst FileInput: typeof BaseFileInput = forwardRef((props, ref) => {\n const Override = useOverride('FileInput');\n if (Override) return <Override {...props} ref={ref} />;\n\n return <BaseFileInput {...props} ref={ref} />;\n});\n\nexport default FileInput;\n"]}
1	+ {"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAEV,WAAW,EAGX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC7F,OAAO,WAAiC,MAAM,gBAAgB,CAAC;AAC/D,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;AAE3B,OAAO,cAAuC,MAAM,kBAAkB,CAAC;AAEvE,YAAY,CAAC,aAAa,CAAC,CAAC;AAyC5B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;MAKpC,QAAQ;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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;;;wBAGtD,cAAc;;;KAGjC,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,aAAa,GAAqD,UAAU,CAChF,CAAC,KAAsC,EAAE,GAA0B,EAAE,EAAE;IACrE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,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,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,IAAI,GAAG,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG,CAAC;IACxC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAEzC,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;IAEpC,MAAM,SAAS,GAAG,CAChB,MAAC,eAAe,eACd,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,SAAS,WACb,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,WAC7C;6BACzB,CAAC,sBAEG,EACN,GAAG,IAAI,IAAI,YACP,YACS,CACnB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC3B,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,SAAS,OAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,YACxE,SAAS,WACA,CACb,CAAC,CAAC,CAAC,CACF,SAAS,CACV,EACA,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,CAClB,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,SAAS,EAAE,QAAQ;iBACpB,EACD,EAAE,EAAC,IAAI,KACH,SAAS,YAEZ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE;oBACtC,oDAAoD;oBACpD,OAAO,KAAC,cAAc,IAAa,IAAI,EAAE,IAAI,KAAM,IAAI,IAA3B,KAAK,CAA0B,CAAC;gBAC9D,CAAC,CAAC,WACG,CACR,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,SAAS,GAAyB,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,QAAQ,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;IAC1C,IAAI,QAAQ;QAAE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,WAAI,CAAC;IAEvD,OAAO,KAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,WAAI,CAAC;AAChD,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC","sourcesContent":["import {\n FunctionComponent,\n Ref,\n forwardRef,\n ChangeEvent,\n useCallback,\n PropsWithoutRef,\n DragEvent,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { useOverride, useConsolidatedRef, useI18n, useUID, useDirection } from '../../hooks';\nimport FormControl, { 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';\n\nimport FileUploadItem, { FileUploadItemProps } from './FileUploadItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps {\n /*\n Called when files are added either via the input or drop zone.\n /\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 /* 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 BaseFileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileInputProps>, ref: FileInputProps['ref']) => {\n const uid = useUID();\n const {\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 ...restProps\n } = props;\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 ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\n {...restProps}\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  \n {t('file_upload_text_main', [\n <StyledInteractiveText>\n {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n </StyledInteractiveText>\n ])}\n  \n </Text>\n {rtl && icon}\n </Flex>\n </StyledFileInput>\n );\n\n return (\n <Grid container={{ rowGap: 1 }}>\n {label ? (\n <FormField {...{ label, labelHidden, id, info, required, disabled, status }}>\n {fileInput}\n </FormField>\n ) : (\n fileInput\n )}\n {!!files?.length && (\n <Flex\n container={{\n gap: 1,\n direction: 'column'\n }}\n as='ul'\n {...restProps}\n >\n {files.map(({ name, ...file }, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <FileUploadItem key={index} name={name} {...file} />;\n })}\n </Flex>\n )}\n </Grid>\n );\n }\n);\n\nconst FileInput: typeof BaseFileInput = forwardRef((props, ref) => {\n const Override = useOverride('FileInput');\n if (Override) return <Override {...props} ref={ref} />;\n\n return <BaseFileInput {...props} ref={ref} />;\n});\n\nexport default FileInput;\n"]}

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

@@ -7,7 +7,7 @@ export interface FileItemProps extends BaseProps {
     url: string;
     /** Url pointing to the thumbnail image, rendered in the 'visual' region. */
     thumbnail?: string;
-    /** When passed, it will make the 'visual' region actionable. Passes file url as the parameter. */
+    /** When passed, it will make the icon/thumbnail region actionable. Passes file url as the parameter. */
     onPreview?: (url: FileItemProps['url']) => void;
     /** When passed, it will make the name region actionable. Passes file url as the parameter. */
     onDownload?: (url: FileItemProps['url']) => void;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAA+B,EAAE,EAAE,GAAG,EAAe,MAAM,OAAO,CAAC;~~AAGjF~~,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,~~kGAAkG~~;~~IAClG~~,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAChD,8FAA8F;IAC9F,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;~~AAyDD~~,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,~~CAgC9C~~,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,GAAG,EAAe,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAChD,8FAA8F;IAC9F,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;AAmCD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAkC9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/File/FileItem.js CHANGED Viewed

@@ -1,56 +1,35 @@
-import React, { forwardRef, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Button, { StyledButton } from '../Button';
 import Grid from '../Grid';
-import { useConfiguration, useI18n } from '../../hooks';
-import { downloadFileFactory, getKindFromMimeType, getMimeTypeFromFile } from './utils';
+import { useDirection, useI18n } from '../../hooks';
+import { getKindFromMimeType, getMimeTypeFromFile } from './utils';
 import FileVisual, { StyledFileVisual } from './FileVisual';
-const StyledFileItem = styled.div(props => {
-    const { theme } = props;
+const StyledFileItem = styled.div(({ theme: { base } }) => {
+    const { start, end } = useDirection();
     return css `
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    border-radius: calc(0.5 * ${base['border-radius']});
     > ${StyledFileVisual} {
-      ${() => {
-        return theme.base.rtl
-            ? css `
-              border-top-left-radius: 0;
-              border-top-right-radius: inherit;
-              border-bottom-right-radius: inherit;
-              border-bottom-left-radius: 0;
-            `
-            : css `
-              border-top-left-radius: inherit;
-              border-top-right-radius: 0;
-              border-bottom-right-radius: 0;
-              border-bottom-left-radius: inherit;
-            `;
-    }}
+      ${`border-top-${start}-radius`}: inherit;
+      ${`border-bottom-${start}-radius`}: inherit;
+      ${`border-top-${end}-radius`}: 0;
+      ${`border-bottom-${end}-radius`}: 0;
     }
     > ${StyledFileVisual} + ${StyledButton} {
       margin-inline-start: 0;
-      border: 0.0625rem solid ${theme.base.palette['border-line']};
-      background-color: ${theme.base.palette['primary-background']};
+      border: 0.0625rem solid ${base.palette['border-line']};
+      background-color: ${base.palette['primary-background']};
       opacity: 1;
-      padding: 0 ${theme.base.spacing};
+      padding: 0 ${base.spacing};
       border-inline-start: 0;
-      ${() => {
-        return theme.base.rtl
-            ? css `
-              border-top-left-radius: inherit;
-              border-top-right-radius: 0;
-              border-bottom-right-radius: 0;
-              border-bottom-left-radius: inherit;
-            `
-            : css `
-              border-top-left-radius: 0;
-              border-top-right-radius: inherit;
-              border-bottom-right-radius: inherit;
-              border-bottom-left-radius: 0;
-            `;
-    }}
+      ${`border-top-${start}-radius`}: 0;
+      ${`border-bottom-${start}-radius`}: 0;
+      ${`border-top-${end}-radius`}: inherit;
+      ${`border-bottom-${end}-radius`}: inherit;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -61,12 +40,12 @@ StyledFileItem.defaultProps = defaultThemeProp;
 const FileItem = forwardRef((props, ref) => {
     const { name, url, thumbnail, onPreview, onDownload, ...restProps } = props;
     const t = useI18n();
-    const { portalTarget } = useConfiguration();
-    const downloadFile = useCallback(downloadFileFactory(portalTarget), [portalTarget]);
+    const onDownloadClick = useCallback(() => {
+        onDownload?.(url);
+    }, [url, onDownload]);
     const type = getMimeTypeFromFile(url);
-    return (React.createElement(Grid, { as: StyledFileItem, container: { cols: 'auto 1fr' }, ref: ref },
-        React.createElement(FileVisual, { type: getKindFromMimeType(type !== null && type !== void 0 ? type : ''), disabled: !onPreview, thumbnail: thumbnail, onClick: () => onPreview === null || onPreview === void 0 ? void 0 : onPreview(url), "aria-label": `${t('preview')}: ${name}` }),
-        React.createElement(Button, { ...restProps, variant: 'text', disabled: !onDownload, onClick: () => { var _a; return (_a = onDownload === null || onDownload === void 0 ? void 0 : onDownload(url)) !== null && _a !== void 0 ? _a : downloadFile(url, name); }, "aria-label": `${t('download')}: ${name}` }, name)));
+    const text = name || url;
+    return (_jsxs(Grid, { as: StyledFileItem, container: { cols: 'auto 1fr' }, ref: ref, children: [_jsx(FileVisual, { type: getKindFromMimeType(type ?? ''), disabled: !onPreview, thumbnail: thumbnail, onClick: () => onPreview?.(url), "aria-label": `${t('preview')}: ${text}` }, void 0), _jsx(Button, { ...restProps, variant: 'text', disabled: !onDownload, onClick: onDownloadClick, "aria-label": `${t('download')}: ${text}`, children: text }, void 0)] }, void 0));
 });
 export default FileItem;
 //# sourceMappingURL=FileItem.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAK,~~EAAE,~~EAAE,~~UAAU,EAA4B,WAAW,EAAE,MAAM,OAAO,CAAC;~~AACjF~~,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,~~gBAAgB~~,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;~~AAExD~~,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,~~mBAAmB,EAAE,~~MAAM,SAAS,CAAC;~~AACxF~~,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAiB5D,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,~~CAAC~~,EAAE;~~IACxC~~,MAAM,EAAE,KAAK,EAAE,GAAG,~~KAAK~~,CAAC;~~IAExB~~,OAAO,GAAG,CAAA;gCACoB,~~KAAK,CAAC,~~IAAI,CAAC,eAAe,CAAC;;~~QAEnD~~,gBAAgB;QAChB,~~GAAG~~,~~EAAE~~;~~QACL~~,~~OAAO~~,KAAK,~~CAAC,IAAI,CAAC,GAAG~~;~~YACnB~~,~~CAAC~~,~~CAAC,~~GAAG,~~CAAA;;;;;aAKF~~;~~YACH~~,~~CAAC~~,~~CAAC,~~GAAG,~~CAAA;;;;;aAKF,CAAC;IACR,CAAC~~;;;~~QAGC~~,gBAAgB,MAAM,YAAY;;gCAEV,~~KAAK,CAAC,~~IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;~~0BACvC~~,~~KAAK,CAAC,~~IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;~~mBAE/C~~,~~KAAK,CAAC,~~IAAI,CAAC,OAAO;;~~QAE7B~~,~~GAAG~~,~~EAAE~~;~~QACL~~,~~OAAO~~,KAAK,~~CAAC,IAAI,CAAC,GAAG~~;~~YACnB~~,~~CAAC~~,~~CAAC,~~GAAG,~~CAAA;;;;;aAKF~~;~~YACH~~,~~CAAC~~,~~CAAC,~~GAAG,~~CAAA~~;;;;;~~aAKF~~,CAAC;~~IACR,CAAC;;;;;GAKJ,CAAC;~~AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,QAAQ,GAAqC,UAAU,CAC3D,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,~~EAAE~~,~~YAAY~~,~~EAAE~~,GAAG,~~gBAAgB~~,EAAE,CAAC~~;IAC5C~~,~~MAAM,YAAY,~~GAAG,~~WAAW~~,CAAC,~~mBAAmB,~~CAAC,~~YAAY~~,CAAC,EAAE,~~CAAC~~,~~YAAY,~~CAAC,CAAC,CAAC;~~IAEpF~~,MAAM,IAAI,GAAG,mBAAmB,CAAC,GAAG,CAAC,CAAC;~~IAEtC~~,OAAO,CACL,~~oBAAC~~,IAAI,IAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,GAAG~~;QACjE~~,~~oBAAC~~,UAAU,IACT,IAAI,EAAE,mBAAmB,CAAC,IAAI,~~aAAJ,~~IAAI,~~cAAJ,IAAI,GAAI,~~EAAE,CAAC,EACrC,QAAQ,EAAE,CAAC,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,~~aAAT~~,~~SAAS~~,~~uBAAT,SAAS,CAAG,~~GAAG,CAAC,gBACnB,GAAG,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,~~GACtC;QACF~~,~~oBAAC~~,MAAM,OACD,SAAS,EACb,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,UAAU,EACrB,OAAO,EAAE,~~GAAG~~,~~EAAE~~,~~WAAC,OAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,~~GAAG,CAAC,~~mCAAI,YAAY,~~CAAC,~~GAAG,EAAE,IAAI,CAAC,CAAA,EAAA,gBAC/C,GAAG,CAAC,CAAC,~~UAAU,CAAC,KAAK,IAAI,EAAE,~~IAEtC~~,IAAI,~~CACE~~,~~CACJ~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import ~~React,~~ { forwardRef, PropsWithoutRef, FC, Ref, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button, { StyledButton } from '../Button';\nimport Grid from '../Grid';\nimport { ~~useConfiguration~~, useI18n } from '../../hooks';\n\nimport { ~~downloadFileFactory,~~ getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } 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 /* Url pointing to the thumbnail image, rendered in the 'visual' region. /\n thumbnail?: string;\n /* When passed, it will make the ~~'visual'~~ region actionable. Passes file url as the parameter. /\n onPreview?: (url: FileItemProps['url']) => void;\n /* When passed, it will make the name region actionable. 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(~~props~~ => {\n const { ~~theme~~ } = ~~props~~;\n\n return css`\n border-radius: calc(0.5 ${~~theme.~~base['border-radius']});\n\n > ${StyledFileVisual} {\n ${~~() => {\n return theme.base.rtl\n ? css`\n~~ border-top-~~left-~~radius: ~~0;\n border-top-right-radius:~~ inherit;\n border-bottom-~~right-~~radius: inherit;\n border-~~bottom-left-radius: 0;\n `\n : css`\n border-~~top-~~left-~~radius: ~~inherit;\n border-top-right-radius:~~ 0;\n border-bottom-~~right-~~radius: 0;\n ~~border-bottom-left-radius: inherit;\n `;\n }}\n~~ }\n\n > ${StyledFileVisual} + ${StyledButton} {\n margin-inline-start: 0;\n border: 0.0625rem solid ${~~theme.~~base.palette['border-line']};\n background-color: ${~~theme.~~base.palette['primary-background']};\n opacity: 1;\n padding: 0 ${~~theme.~~base.spacing};\n border-inline-start: 0;\n ${~~() => {\n return theme.base.rtl\n ? css`\n~~ border-top-~~left-~~radius: ~~inherit;\n border-top-right-radius:~~ 0;\n border-bottom-~~right-~~radius: 0;\n border-~~bottom-left-radius: inherit;\n `\n : css`\n border-~~top-~~left-~~radius: ~~0;\n border-top-right-radius:~~ inherit;\n border-bottom-~~right-~~radius: inherit;\n ~~border-bottom-left-radius: 0;\n `;\n~~ ~~}}\n~~ white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `;\n});\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileItemProps>, ref: FileItemProps['ref']) => {\n const { name, url, thumbnail, onPreview, onDownload, ...restProps } = props;\n\n const t = useI18n();\n\n const { ~~portalTarget~~ } = ~~useConfiguration~~();\n ~~const~~ ~~downloadFile = useCallback(downloadFileFactory(portalTarget)~~, ~~[portalTarget~~]);\n\n const type = getMimeTypeFromFile(url);\n\n return (\n <Grid as={StyledFileItem} container={{ cols: 'auto 1fr' }} ref={ref}>\n <FileVisual\n type={getKindFromMimeType(type ?? '')}\n disabled={!onPreview}\n thumbnail={thumbnail}\n onClick={() => onPreview?.(url)}\n aria-label={`${t('preview')}: ${~~name~~}`}\n />\n <Button\n {...restProps}\n variant='text'\n disabled={!onDownload}\n onClick={~~() => onDownload?.(url) ?? downloadFile(url, name)~~}\n aria-label={`${t('download')}: ${~~name~~}`}\n >\n {~~name~~}\n </Button>\n </Grid>\n );\n }\n);\n\nexport default FileItem;\n"]}
1	+ {"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAiB5D,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACxD,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,OAAO,GAAG,CAAA;gCACoB,IAAI,CAAC,eAAe,CAAC;;QAE7C,gBAAgB;QAChB,cAAc,KAAK,SAAS;QAC5B,iBAAiB,KAAK,SAAS;QAC/B,cAAc,GAAG,SAAS;QAC1B,iBAAiB,GAAG,SAAS;;;QAG7B,gBAAgB,MAAM,YAAY;;gCAEV,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACjC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;mBAEzC,IAAI,CAAC,OAAO;;QAEvB,cAAc,KAAK,SAAS;QAC5B,iBAAiB,KAAK,SAAS;QAC/B,cAAc,GAAG,SAAS;QAC1B,iBAAiB,GAAG,SAAS;;;;;GAKlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,QAAQ,GAAqC,UAAU,CAC3D,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,UAAU,EAAE,CAAC,GAAG,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtB,MAAM,IAAI,GAAG,mBAAmB,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC;IAEzB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,GAAG,aACjE,KAAC,UAAU,IACT,IAAI,EAAE,mBAAmB,CAAC,IAAI,IAAI,EAAE,CAAC,EACrC,QAAQ,EAAE,CAAC,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,gBACnB,GAAG,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,WACtC,EACF,KAAC,MAAM,OACD,SAAS,EACb,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,UAAU,EACrB,OAAO,EAAE,eAAe,gBACZ,GAAG,CAAC,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,YAEtC,IAAI,WACE,YACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button, { StyledButton } from '../Button';\nimport Grid from '../Grid';\nimport { useDirection, useI18n } from '../../hooks';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } 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 /* Url pointing to the thumbnail image, rendered in the 'visual' region. /\n thumbnail?: string;\n /* When passed, it will make the icon/thumbnail region actionable. Passes file url as the parameter. /\n onPreview?: (url: FileItemProps['url']) => void;\n /* When passed, it will make the name region actionable. 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(({ theme: { base } }) => {\n const { start, end } = useDirection();\n\n return css`\n border-radius: calc(0.5 ${base['border-radius']});\n\n > ${StyledFileVisual} {\n ${`border-top-${start}-radius`}: inherit;\n ${`border-bottom-${start}-radius`}: inherit;\n ${`border-top-${end}-radius`}: 0;\n ${`border-bottom-${end}-radius`}: 0;\n }\n\n > ${StyledFileVisual} + ${StyledButton} {\n margin-inline-start: 0;\n border: 0.0625rem solid ${base.palette['border-line']};\n background-color: ${base.palette['primary-background']};\n opacity: 1;\n padding: 0 ${base.spacing};\n border-inline-start: 0;\n ${`border-top-${start}-radius`}: 0;\n ${`border-bottom-${start}-radius`}: 0;\n ${`border-top-${end}-radius`}: inherit;\n ${`border-bottom-${end}-radius`}: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n `;\n});\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileItemProps>, ref: FileItemProps['ref']) => {\n const { name, url, thumbnail, onPreview, onDownload, ...restProps } = props;\n\n const t = useI18n();\n\n const onDownloadClick = useCallback(() => {\n onDownload?.(url);\n }, [url, onDownload]);\n\n const type = getMimeTypeFromFile(url);\n const text = name \|\| url;\n\n return (\n <Grid as={StyledFileItem} container={{ cols: 'auto 1fr' }} ref={ref}>\n <FileVisual\n type={getKindFromMimeType(type ?? '')}\n disabled={!onPreview}\n thumbnail={thumbnail}\n onClick={() => onPreview?.(url)}\n aria-label={`${t('preview')}: ${text}`}\n />\n <Button\n {...restProps}\n variant='text'\n disabled={!onDownload}\n onClick={onDownloadClick}\n aria-label={`${t('download')}: ${text}`}\n >\n {text}\n </Button>\n </Grid>\n );\n }\n);\n\nexport default FileItem;\n"]}

package/lib/components/File/FileUploadItem.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-import { PropsWithoutRef, FC, Ref, ReactElement } from 'react';
+import { FC, Ref, ReactElement } from 'react';
 import { ForwardProps, BaseProps } from '../../types';
-import { FileUploadVisualProps } from './FileUploadVisual';
-export interface FileUploadItemProps extends PropsWithoutRef<FileUploadVisualProps>, BaseProps {
+export interface FileUploadItemProps extends BaseProps {
     /** Name of the file. */
     name: string;
     /** A FileUploadVisual element to represent the file. */
@@ -9,18 +8,25 @@ export interface FileUploadItemProps extends PropsWithoutRef<FileUploadVisualPro
     /** Additional information about the file. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */
     meta?: string | 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?(name: FileUploadItemProps['name']): void;
+    onCancel?: (name: FileUploadItemProps['name']) => void;
     /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
-    onPreview?(name: FileUploadItemProps['name']): void;
+    onEdit?: (name: FileUploadItemProps['name']) => void;
     /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
-    onDownload?(name: FileUploadItemProps['name']): void;
+    onPreview?: (name: FileUploadItemProps['name']) => void;
     /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
-    onDelete?(name: FileUploadItemProps['name']): void;
+    onDownload?: (name: FileUploadItemProps['name']) => void;
+    /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
+    onDelete?: (name: FileUploadItemProps['name']) => void;
     /**
      * Set if there is an error uploading or processing the file. Applies error styling to the meta string passed.
      * @default false
      */
     error?: boolean;
+    /** 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?: string;
+    /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */
+    progress?: number;
+    /** A ref to the file item's HTMLLIElement. */
     ref?: Ref<HTMLLIElement>;
 }
 declare const FileUploadItem: FC<FileUploadItemProps & ForwardProps>;

package/lib/components/File/FileUploadItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileUploadItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,~~EAEZ~~,~~eAAe~~,~~EACf,~~EAAE,~~EACF,~~GAAG,~~EACH~~,YAAY,~~EAGb~~,MAAM,OAAO,CAAC;~~AASf~~,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;~~AAItD~~,~~OAAyB,EAAE,qBAAqB,EAAE,~~MAAM,~~oBAAoB,CAAC;AAE7E,MAAM,~~WAAW,mBAAoB,SAAQ,~~eAAe,CAAC,qBAAqB,CAAC,EAAE,~~SAAS;~~IAC5F~~,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uKAAuK;IACvK,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,8IAA8I;IAC9I,QAAQ,CAAC,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,~~GAAG~~,IAAI,CAAC;~~IACnD~~,yGAAyG;IACzG,SAAS,CAAC,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,~~GAAG~~,IAAI,CAAC;~~IACpD~~,yGAAyG;IACzG,UAAU,CAAC,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,~~GAAG~~,IAAI,CAAC;~~IACrD~~,yGAAyG;IACzG,QAAQ,CAAC,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,~~GAAG~~,IAAI,CAAC;~~IACnD~~;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B;AAoBD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,~~CAoG1D~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"FileUploadItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,GAAG,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAU/F,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAOtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uKAAuK;IACvK,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACrD,yGAAyG;IACzG,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,yGAAyG;IACzG,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACzD,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B;AAoBD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA6G1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/File/FileUploadItem.js CHANGED Viewed

@@ -1,14 +1,17 @@
-import React, { forwardRef, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import Button from '../Button';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
 import MetaList from '../MetaList';
 import SummaryItem from '../SummaryItem';
+import Progress from '../Progress';
 import Text from '../Text';
 import { defaultThemeProp } from '../../theme';
 import { useI18n } from '../../hooks';
-import FileUploadVisual from './FileUploadVisual';
+import { getKindFromMimeType, getMimeTypeFromFile } from './utils';
+import FileVisual from './FileVisual';
 const StyledFileUploadItem = styled.li(props => {
     const { theme } = props;
     return css `
@@ -19,32 +22,32 @@ const StyledFileUploadItem = styled.li(props => {
 });
 StyledFileUploadItem.defaultProps = defaultThemeProp;
 const FileUploadItem = forwardRef((props, ref) => {
-    const { name, meta, error = false, progress, icon, thumbnail, onCancel, onPreview, onDownload, onDelete, ...restProps } = props;
+    const { name, meta, error = false, progress, thumbnail, onCancel, onEdit, onPreview, onDownload, onDelete, ...restProps } = props;
     const t = useI18n();
     const definedActions = useMemo(() => [
         { fn: onCancel, text: t('cancel'), icon: 'times' },
+        { fn: onEdit, text: t('edit'), icon: 'pencil' },
         { fn: onPreview, text: t('preview'), icon: 'eye' },
         { fn: onDownload, text: t('download'), icon: 'download' },
         { fn: onDelete, text: t('delete'), icon: 'trash' }
-    ].filter((action) => !!action.fn), [onCancel, onPreview, onDownload, onDelete]);
+    ].filter((action) => !!action.fn), [onCancel, onEdit, onPreview, onDownload, onDelete]);
     let metaContent = meta;
     let actions;
     if (typeof progress === 'number' && progress < 100) {
-        metaContent = `${t('uploading')}...${Math.floor(progress)}%`;
+        metaContent = `${t('uploading')}…${Math.floor(progress)}%`;
     }
     if (Array.isArray(metaContent)) {
-        metaContent = (React.createElement(MetaList, { items: metaContent.map(item => (React.createElement(Text, { key: item === null || item === void 0 ? void 0 : item.toString(), variant: 'secondary', status: error ? 'error' : undefined }, item))) }));
+        metaContent = (_jsx(MetaList, { items: metaContent.map(item => (_jsx(Text, { variant: 'secondary', status: error ? 'error' : undefined, children: item }, item?.toString()))) }, void 0));
     }
     else if (typeof metaContent === 'string') {
-        metaContent = (React.createElement(Text, { variant: 'secondary', status: error ? 'error' : undefined }, metaContent));
+        metaContent = (_jsx(Text, { variant: 'secondary', status: error ? 'error' : undefined, children: metaContent }, void 0));
     }
     if (definedActions.length === 1) {
         const action = definedActions[0];
-        actions = (React.createElement(Button, { icon: true, variant: 'simple', onClick: () => { var _a; return (_a = action.fn) === null || _a === void 0 ? void 0 : _a.call(action, name); }, "aria-label": `${action.text} ${name}` },
-            React.createElement(Icon, { name: action.icon })));
+        actions = (_jsx(Button, { icon: true, variant: 'simple', onClick: () => action.fn?.(name), "aria-label": `${action.text} ${name}`, children: _jsx(Icon, { name: action.icon }, void 0) }, void 0));
     }
     else if (definedActions.length > 1) {
-        actions = (React.createElement(MenuButton, { text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', menu: {
+        actions = (_jsx(MenuButton, { text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', menu: {
                 items: definedActions.map(action => ({
                     id: action.text,
                     primary: action.text,
@@ -52,9 +55,16 @@ const FileUploadItem = forwardRef((props, ref) => {
                         action.fn(name);
                     }
                 }))
-            } }));
+            } }, void 0));
     }
-    return (React.createElement(SummaryItem, { as: StyledFileUploadItem, ref: ref, visual: React.createElement(FileUploadVisual, { progress: progress, icon: icon, thumbnail: thumbnail }), primary: name, secondary: metaContent, actions: actions, error: error, ...restProps }));
+    const visual = useMemo(() => {
+        if (typeof progress === 'number' && progress !== 100) {
+            return _jsx(Progress, { value: progress, placement: 'inline', variant: 'ring' }, void 0);
+        }
+        const type = getMimeTypeFromFile(name);
+        return _jsx(FileVisual, { type: getKindFromMimeType(type ?? ''), thumbnail: thumbnail }, void 0);
+    }, [progress, thumbnail, name]);
+    return (_jsx(SummaryItem, { ...restProps, as: StyledFileUploadItem, ref: ref, visual: visual, primary: name, secondary: metaContent, actions: actions, error: error }, void 0));
 });
 export default FileUploadItem;
 //# sourceMappingURL=FileUploadItem.js.map

package/lib/components/File/FileUploadItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileUploadItem.js","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n forwardRef,\n PropsWithoutRef,\n FC,\n Ref,\n ReactElement,\n useMemo,\n ReactNode\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useI18n } from '../../hooks';\n\nimport FileUploadVisual, { FileUploadVisualProps } from './FileUploadVisual';\n\nexport interface FileUploadItemProps extends PropsWithoutRef<FileUploadVisualProps>, BaseProps {\n /** Name of the file. /\n name: string;\n /* A FileUploadVisual element to represent the file. /\n visual?: ReactElement;\n /* Additional information about the file. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. /\n meta?: string \| 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?(name: FileUploadItemProps['name']): void;\n /* When passed, will render a single icon button or within a MenuButton if other actions are defined. /\n onPreview?(name: FileUploadItemProps['name']): void;\n /* When passed, will render a single icon button or within a MenuButton if other actions are defined. /\n onDownload?(name: FileUploadItemProps['name']): void;\n /* When passed, will render a single icon button or within a MenuButton if other actions are defined. /\n onDelete?(name: FileUploadItemProps['name']): void;\n /\n Set if there is an error uploading or processing the file. Applies error styling to the meta string passed.\n * @default false\n /\n error?: boolean;\n ref?: Ref<HTMLLIElement>;\n}\n\ninterface FileAction {\n fn: (name: FileUploadItemProps['name']) => void;\n text: string;\n icon: string;\n}\n\nconst StyledFileUploadItem = styled.li(props => {\n const { theme } = props;\n\n return css`\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n padding: calc(0.5 ${theme.base.spacing});\n `;\n});\n\nStyledFileUploadItem.defaultProps = defaultThemeProp;\n\nconst FileUploadItem: FC<FileUploadItemProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileUploadItemProps>, ref: FileUploadItemProps['ref']) => {\n const {\n name,\n meta,\n error = false,\n progress,\n icon,\n thumbnail,\n onCancel,\n onPreview,\n onDownload,\n onDelete,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const definedActions: FileAction[] = useMemo(\n () =>\n [\n { fn: onCancel, text: t('cancel'), icon: 'times' },\n { fn: onPreview, text: t('preview'), icon: 'eye' },\n { fn: onDownload, text: t('download'), icon: 'download' },\n { fn: onDelete, text: t('delete'), icon: 'trash' }\n ].filter<FileAction>((action): action is FileAction => !!action.fn),\n [onCancel, onPreview, onDownload, onDelete]\n );\n\n let metaContent: ReactNode = meta;\n let actions: ReactElement \| undefined;\n\n if (typeof progress === 'number' && progress < 100) {\n metaContent = `${t('uploading')}...${Math.floor(progress)}%`;\n }\n\n if (Array.isArray(metaContent)) {\n metaContent = (\n <MetaList\n items={metaContent.map(item => (\n <Text key={item?.toString()} variant='secondary' status={error ? 'error' : undefined}>\n {item}\n </Text>\n ))}\n />\n );\n } else if (typeof metaContent === 'string') {\n metaContent = (\n <Text variant='secondary' status={error ? 'error' : undefined}>\n {metaContent}\n </Text>\n );\n }\n\n if (definedActions.length === 1) {\n const action = definedActions[0];\n\n actions = (\n <Button\n icon\n variant='simple'\n onClick={() => action.fn?.(name)}\n aria-label={`${action.text} ${name}`}\n >\n <Icon name={action.icon} />\n </Button>\n );\n } else if (definedActions.length > 1) {\n actions = (\n <MenuButton\n text={t('actions')}\n iconOnly\n icon='more'\n variant='simple'\n menu={{\n items: definedActions.map(action => ({\n id: action.text,\n primary: action.text,\n onClick: () => {\n action.fn(name);\n }\n }))\n }}\n />\n );\n }\n\n return (\n <SummaryItem\n as={StyledFileUploadItem}\n ref={ref}\n visual={<FileUploadVisual progress={progress} icon={icon} thumbnail={thumbnail} />}\n primary={name}\n secondary={metaContent}\n actions={actions}\n error={error}\n {...restProps}\n />\n );\n }\n);\n\nexport default FileUploadItem;\n"]}
1	+ {"version":3,"file":"FileUploadItem.js","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, ReactElement, useMemo, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useI18n } from '../../hooks';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual from './FileVisual';\n\nexport interface FileUploadItemProps extends BaseProps {\n /** Name of the file. /\n name: string;\n /* A FileUploadVisual element to represent the file. /\n visual?: ReactElement;\n /* Additional information about the file. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. /\n meta?: string \| 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?: (name: FileUploadItemProps['name']) => void;\n /* When passed, will render a single icon button or within a MenuButton if other actions are defined. /\n onEdit?: (name: FileUploadItemProps['name']) => void;\n /* When passed, will render a single icon button or within a MenuButton if other actions are defined. /\n onPreview?: (name: FileUploadItemProps['name']) => void;\n /* When passed, will render a single icon button or within a MenuButton if other actions are defined. /\n onDownload?: (name: FileUploadItemProps['name']) => void;\n /* When passed, will render a single icon button or within a MenuButton if other actions are defined. /\n onDelete?: (name: FileUploadItemProps['name']) => void;\n /\n Set if there is an error uploading or processing the file. Applies error styling to the meta string passed.\n * @default false\n /\n error?: boolean;\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?: string;\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 /* A ref to the file item's HTMLLIElement. /\n ref?: Ref<HTMLLIElement>;\n}\n\ninterface FileAction {\n fn: (name: FileUploadItemProps['name']) => void;\n text: string;\n icon: string;\n}\n\nconst StyledFileUploadItem = styled.li(props => {\n const { theme } = props;\n\n return css`\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n padding: calc(0.5 ${theme.base.spacing});\n `;\n});\n\nStyledFileUploadItem.defaultProps = defaultThemeProp;\n\nconst FileUploadItem: FC<FileUploadItemProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FileUploadItemProps>, ref: FileUploadItemProps['ref']) => {\n const {\n name,\n meta,\n error = false,\n progress,\n thumbnail,\n onCancel,\n onEdit,\n onPreview,\n onDownload,\n onDelete,\n ...restProps\n } = props;\n\n const t = useI18n();\n\n const definedActions: FileAction[] = useMemo(\n () =>\n [\n { fn: onCancel, text: t('cancel'), icon: 'times' },\n { fn: onEdit, text: t('edit'), icon: 'pencil' },\n { fn: onPreview, text: t('preview'), icon: 'eye' },\n { fn: onDownload, text: t('download'), icon: 'download' },\n { fn: onDelete, text: t('delete'), icon: 'trash' }\n ].filter<FileAction>((action): action is FileAction => !!action.fn),\n [onCancel, onEdit, onPreview, onDownload, onDelete]\n );\n\n let metaContent: ReactNode = meta;\n let actions: ReactElement \| undefined;\n\n if (typeof progress === 'number' && progress < 100) {\n metaContent = `${t('uploading')}…${Math.floor(progress)}%`;\n }\n\n if (Array.isArray(metaContent)) {\n metaContent = (\n <MetaList\n items={metaContent.map(item => (\n <Text key={item?.toString()} variant='secondary' status={error ? 'error' : undefined}>\n {item}\n </Text>\n ))}\n />\n );\n } else if (typeof metaContent === 'string') {\n metaContent = (\n <Text variant='secondary' status={error ? 'error' : undefined}>\n {metaContent}\n </Text>\n );\n }\n\n if (definedActions.length === 1) {\n const action = definedActions[0];\n\n actions = (\n <Button\n icon\n variant='simple'\n onClick={() => action.fn?.(name)}\n aria-label={`${action.text} ${name}`}\n >\n <Icon name={action.icon} />\n </Button>\n );\n } else if (definedActions.length > 1) {\n actions = (\n <MenuButton\n text={t('actions')}\n iconOnly\n icon='more'\n variant='simple'\n menu={{\n items: definedActions.map(action => ({\n id: action.text,\n primary: action.text,\n onClick: () => {\n action.fn(name);\n }\n }))\n }}\n />\n );\n }\n\n const visual = useMemo(() => {\n if (typeof progress === 'number' && progress !== 100) {\n return <Progress value={progress} placement='inline' variant='ring' />;\n }\n const type = getMimeTypeFromFile(name);\n return <FileVisual type={getKindFromMimeType(type ?? '')} thumbnail={thumbnail} />;\n }, [progress, thumbnail, name]);\n\n return (\n <SummaryItem\n {...restProps}\n as={StyledFileUploadItem}\n ref={ref}\n visual={visual}\n primary={name}\n secondary={metaContent}\n actions={actions}\n error={error}\n />\n );\n }\n);\n\nexport default FileUploadItem;\n"]}

package/lib/components/File/FileVisual.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { FC, Ref } from 'react';
 import { DefaultTheme } from 'styled-components';
-import { ForwardProps, BaseProps } from '../../types';
+import { ForwardProps, BaseProps, PropsWithDefaults } from '../../types';
 import { ButtonProps } from '../Button';
 import { AttachmentType } from './utils';
 export interface FileVisualProps extends BaseProps {
@@ -12,8 +12,14 @@ export interface FileVisualProps extends BaseProps {
     disabled?: ButtonProps['disabled'];
     /** Reference to a button element. */
     ref?: Ref<HTMLButtonElement>;
+    /**
+     * FileVisual size.
+     * @default "s"
+     */
+    size?: 's' | 'l';
 }
-export declare const StyledFileVisual: import("styled-components").StyledComponent<"div", DefaultTheme, {
+declare type FileVisualPropsWithDefaults = PropsWithDefaults<FileVisualProps, 'size'>;
+export declare const StyledFileVisual: import("styled-components").StyledComponent<"div", DefaultTheme, Pick<FileVisualPropsWithDefaults, "size"> & {
     thumbnail?: FileVisualProps['thumbnail'];
     aType: AttachmentType;
 }, never>;

package/lib/components/File/FileVisual.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileVisual.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAA+B,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AACpE~~,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAc,MAAM,aAAa,CAAC;~~AAGlE~~,OAAO,EAAE,WAAW,EAAgB,MAAM,WAAW,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,oFAAoF;IACpF,IAAI,EAAE,cAAc,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;~~CAC9B~~;~~AAgED~~,eAAO,MAAM,gBAAgB;~~gBACf~~,eAAe,CAAC,WAAW,CAAC;WACjC,cAAc;~~SA4BrB~~,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,~~CAqBlD~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"FileVisual.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAc,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAgB,MAAM,WAAW,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,oFAAoF;IACpF,IAAI,EAAE,cAAc,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AACD,aAAK,2BAA2B,GAAG,iBAAiB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAqE9E,eAAO,MAAM,gBAAgB;gBAEb,eAAe,CAAC,WAAW,CAAC;WACjC,cAAc;SA+BvB,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAoBlD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/File/FileVisual.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import Icon from '../Icon';
 import { defaultThemeProp } from '../../theme';
@@ -17,7 +18,7 @@ const mapping = {
         iconName: 'speaker-on-solid',
         backgroundColor: 'slate-dark'
     },
-    text: {
+    document: {
         iconName: 'filetype-text',
         backgroundColor: 'blue-medium'
     },
@@ -37,10 +38,6 @@ const mapping = {
         iconName: 'slideshow-solid',
         backgroundColor: 'orange-medium'
     },
-    document: {
-        iconName: 'document-doc',
-        backgroundColor: 'blue-medium'
-    },
     link: {
         iconName: 'chain',
         backgroundColor: 'purple-dark'
@@ -54,19 +51,31 @@ const mapping = {
         backgroundColor: 'slate-dark'
     },
     image: {
+        iconName: 'picture-solid',
+        backgroundColor: 'slate-dark'
+    },
+    text: {
+        iconName: 'filetype-text',
         backgroundColor: 'slate-dark'
     }
 };
-export const StyledFileVisual = styled.div(({ theme, thumbnail, aType }) => {
+const sizeConverter = {
+    s: 1,
+    l: 1.375
+};
+export const StyledFileVisual = styled.div(({ theme, thumbnail, size, aType }) => {
     const [color, lightness] = mapping[aType].backgroundColor.split('-', 2);
     const backgroundColor = theme.base.colors[color];
+    const sizeMultiplier = sizeConverter[size] ?? 1;
     return css `
     background-color: ${backgroundColor[lightness]};
     color: ${theme.base.palette.light};
     border-color: transparent;
-    height: ${theme.components.input.height};
-    width: ${theme.components.input.height};
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    height: calc(${sizeMultiplier} * ${theme.components.input.height});
+    width: calc(${sizeMultiplier} * ${theme.components.input.height});
+    border-radius: calc(0.25 * ${theme.base['border-radius']});
+    font-size: calc(0.7 * ${theme.base['font-size']});
+    font-weight: ${theme.base['font-weight']['semi-bold']};
     overflow: hidden;
     opacity: 1;
     ${thumbnail &&
@@ -83,13 +92,11 @@ export const StyledFileVisual = styled.div(({ theme, thumbnail, aType }) => {
 });
 StyledFileVisual.defaultProps = defaultThemeProp;
 const FileVisual = forwardRef((props, ref) => {
-    const { type, thumbnail, disabled, ...restProps } = props;
-    return (React.createElement(StyledFileVisual, { ...restProps, as: StyledButton, ref: ref, icon: true, aType: type, ...{
+    const { type, thumbnail, size, disabled, ...restProps } = props;
+    return (_jsxs(StyledFileVisual, { ...restProps, as: StyledButton, ref: ref, icon: true, aType: type, ...{
             thumbnail,
             disabled
-        } },
-        mapping[type].iconName && React.createElement(Icon, { name: mapping[type].iconName }),
-        mapping[type].text));
+        }, children: [mapping[type].iconName && _jsx(Icon, { name: mapping[type].iconName }, void 0), mapping[type].text] }, void 0));
 });
 export default FileVisual;
 //# sourceMappingURL=FileVisual.js.map