@pega/cosmos-react-core 7.0.0-build.9.1 → 7.0.0-rc.1

package/lib/components/File/FileInput.js

@@ -1,67 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { hideVisually } from 'polished';
-import { useConsolidatedRef, useI18n, useUID, useDirection, useTestIds } from '../../hooks';
-import FormControl from '../FormControl';
-import { defaultThemeProp } from '../../theme';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { MetaList, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import { useConsolidatedRef, useI18n, useUID, useTestIds, usePrevious, useElement, useModalManager, useModalContext } from '../../hooks';
 import Flex from '../Flex';
 import Text from '../Text';
 import Icon, { registerIcon } from '../Icon';
 import * as paperClipIcon from '../Icon/icons/paper-clip.icon';
-import FormField from '../FormField';
-import Grid from '../Grid';
-import { getFocusables, withTestIds } from '../../utils';
+import { getActiveElement, getFocusables, withTestIds } from '../../utils';
+import Tooltip from '../Tooltip';
+import Button from '../Button';
+import Modal, {} from '../Modal';
 import { getFileInputTestIds } from './File.test-ids';
 import FileList from './FileList';
 import FileItem from './FileItem';
+import { StyledBareButton, StyledDropZone, StyledFileInput, StyledIconWrapper, StyledAttachedFileCount, StyledSingleFileWrapper, StyledUploadStatus, StyledFlex, StyledFormField, StyledFileInputControl, StyledDownloadAllButton } from './FileInput.styles';
 registerIcon(paperClipIcon);
-export const StyledDropZone = styled(FormControl)(({ dragOver, theme: { base: { spacing }, components } }) => {
-    return css `
-      padding: calc(2 * ${spacing});
-      height: ${components.input.height};
-      border-style: dashed;
-      cursor: pointer;
-
-      ${dragOver &&
-        css `
-        border-style: solid;
-      `}
-    `;
-});
-StyledDropZone.defaultProps = defaultThemeProp;
-export const StyledFileInput = styled.div(({ theme }) => {
-    return css `
-      position: relative;
-
-      input {
-        ${hideVisually}
-      }
-
-      input:enabled:focus + ${StyledDropZone} {
-        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
-      }
-    `;
-});
-StyledFileInput.defaultProps = defaultThemeProp;
-const StyledInteractiveText = styled.span(({ theme }) => {
-    return css `
-    color: ${theme.base.palette.interactive};
-  `;
-});
-StyledInteractiveText.defaultProps = defaultThemeProp;
-const StyledSingleFileWrapper = styled.div `
-  display: contents;
-`;
-const FileInput = forwardRef(function FileInput(props, ref) {
+const Component = props => {
+    const { compact, multiple, status, count, dragOver = false, readOnly } = props;
+    const t = useI18n();
+    const attachedFileCount = multiple && count ? (_jsx(StyledAttachedFileCount, { children: t('number_of_items', [count], { count }) })) : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(StyledUploadStatus, { item: { grow: 1 }, container: { justify: compact && multiple ? 'start' : 'center', alignItems: 'center' }, status: status, dragOver: dragOver, readOnly: readOnly, children: _jsx(Text, { variant: 'secondary', children: compact
+                        ? attachedFileCount
+                        : t('file_upload_text_main', [
+                            t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')
+                        ]) }) }), _jsx(StyledIconWrapper, { container: { justify: 'center', alignItems: 'center' }, children: _jsx(Icon, { name: 'paper-clip' }) })] }));
+};
+const BaseFileInput = 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, accept, ...restProps } = props;
+    const { testId, id = uid, label, labelHidden, info, required = false, disabled = false, readOnly = false, files, onDownloadAll, onFilesAdded, multiple = false, status, additionalInfo, accept, compact = false, previewFromActions = false, ...restProps } = props;
     const testIds = useTestIds(testId, getFileInputTestIds);
-    const icon = _jsx(Icon, { name: 'paper-clip' });
+    const [target, setTarget] = useElement();
     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 activeElement = getActiveElement();
+    const activeElementInList = fileItemListRef.current?.contains(activeElement);
+    const isInputActiveElement = activeElement === inputRef.current;
+    const compactWithSingleAttach = compact && !multiple;
     const onChange = useCallback((e) => {
         if (e.target.files) {
             onFilesAdded?.(Array.from(e.target.files));
@@ -79,40 +53,161 @@ const FileInput = forwardRef(function FileInput(props, ref) {
     }, [onFilesAdded]);
     const t = useI18n();
     const [dragOver, setDragOver] = useState(false);
-    const { ltr, rtl } = useDirection();
     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: () => {
+    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { "data-testid": testIds.control, ...restProps, ref: inputRef, type: 'file', id: id, required: required, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: () => {
+                    if (target) {
+                        target.dispatchEvent(new Event('focusin'));
+                    }
+                }, onBlur: () => {
+                    if (target) {
+                        target.dispatchEvent(new Event('focusout'));
+                    }
+                }, multiple: multiple, accept: Array.isArray(accept) ? accept.join(',') : accept, "aria-describedby": `${id}-info`, onClick: readOnly
+                    ? e => {
+                        e.preventDefault();
+                    }
+                    : undefined }), _jsx(Flex, { container: true, as: StyledDropZone, disabled: disabled, readOnly: readOnly, 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') })
-                            ]), "\u00A0"] }), rtl && icon] })] }));
-    const fileItemList = hideFileInput ? (_jsx(StyledSingleFileWrapper, { "data-testid": testIds.files, ref: element => {
+                    if (!readOnly) {
+                        inputRef.current?.click();
+                    }
+                }, ...(!disabled && !readOnly
+                    ? {
+                        onDragOver: (e) => {
+                            e.preventDefault();
+                        },
+                        onDragEnter: () => setDragOver(true),
+                        onDragLeave: () => setDragOver(false),
+                        onDrop: (e) => {
+                            e.preventDefault();
+                            setDragOver(false);
+                            const fileList = Array.from(e.dataTransfer.files);
+                            onFilesAdded?.(multiple ? fileList : fileList.slice(0, 1));
+                        }
+                    }
+                    : undefined), compactMode: compact, ref: setTarget, children: _jsx(Component, { compact: compact, multiple: multiple, status: status, dragOver: dragOver, readOnly: readOnly }) }), compactWithSingleAttach && target && (_jsx(Tooltip, { target: target, describeTarget: true, children: t('file_upload_text_main', [t('file_upload_text_one')]) }))] }));
+    const getReadOnlyFile = (file) => {
+        const readOnlyFile = { ...file };
+        delete readOnlyFile.onCancel;
+        delete readOnlyFile.onEdit;
+        delete readOnlyFile.onDelete;
+        delete readOnlyFile.progress;
+        return readOnlyFile;
+    };
+    const fileItemList = hideFileInput ? (_jsx(StyledSingleFileWrapper, { "data-testid": testIds.files, compact: compact, ref: element => {
             if (element)
                 fileItemListRef.current = element;
-        }, children: _jsx(FileItem, { ...files[0] }) })) : (_jsx(FileList, { type: 'item', items: files ?? [], "data-testid": testIds.files, ref: element => {
+        }, children: _jsx(FileItem, { ...(readOnly ? getReadOnlyFile(files[0]) : files[0]), compact: compact, previewFromActions: compactWithSingleAttach && previewFromActions, disabled: disabled }) })) : (_jsx(FileList, { type: 'item', items: readOnly
+            ? files?.map(file => {
+                return getReadOnlyFile(file);
+            }) ?? []
+            : files ?? [], "data-testid": testIds.files, disabled: disabled, ref: element => {
             if (element)
                 fileItemListRef.current = element;
         } }));
+    const prevFiles = usePrevious(files);
     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) {
+        if (!multiple &&
+            prevFiles?.length === 0 &&
+            files?.length === 1 &&
+            fileItemListRef.current &&
+            isInputActiveElement) {
             getFocusables(fileItemListRef.current)[0]?.focus();
         }
+        if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {
+            inputRef.current?.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] }));
+    const fileInputInfoActions = useMemo(() => {
+        if (info && !onDownloadAll) {
+            return info;
+        }
+        const downloadAllButton = (_jsx(Button, { onClick: onDownloadAll, variant: 'link', children: t('download_all') }));
+        if (onDownloadAll && !info && files && files.length > 1 && multiple) {
+            return downloadAllButton;
+        }
+        if (info && onDownloadAll) {
+            if (files && files.length > 1 && multiple) {
+                return _jsx(MetaList, { items: [info, downloadAllButton] });
+            }
+            return info;
+        }
+    }, [info, onDownloadAll]);
+    return (_jsxs(Flex, { container: { rowGap: hideFileInput ? undefined : 1, direction: 'column' }, as: StyledFileInputControl, status: status, children: [label ? (_jsx(StyledFormField, { testId: testIds, label: _jsxs(_Fragment, { children: [label, readOnly && _jsx(VisuallyHiddenText, { children: t('read_only') })] }), labelHidden: labelHidden, id: id, info: fileInputInfoActions, required: required, disabled: !hideFileInput && disabled, readOnly: readOnly, status: status, additionalInfo: additionalInfo, compactMode: compactWithSingleAttach, children: _jsxs(_Fragment, { children: [renderElement, readOnly && files && files.length > 1 && multiple && (_jsx(StyledDownloadAllButton, { variant: 'link', onClick: onDownloadAll, children: t('download_all') }))] }) })) : (renderElement), multiple && !compact && files && files.length > 0 && fileItemList] }));
+});
+const AttachFilesModal = ({ modalContent, modal, readOnly }) => {
+    const t = useI18n();
+    const { dismiss } = useModalContext();
+    const formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: modal?.loading, onClick: () => {
+                    if (modal?.onCancel)
+                        modal.onCancel({ close: dismiss });
+                }, children: t('cancel') }), _jsx(Button, { disabled: modal?.loading, type: 'submit', variant: 'primary', onClick: () => {
+                    if (modal?.onSubmit)
+                        modal.onSubmit({ close: dismiss });
+                }, children: t('submit') })] }));
+    return (_jsx(Modal, { progress: modal?.loading, heading: t('attach_files'), actions: !readOnly ? formActions : undefined, onBeforeOpen: modal?.onBeforeOpen, children: modalContent }));
+};
+const FileInput = forwardRef(function FileInput(props, ref) {
+    const uid = useUID();
+    const { modal, count, ...baseFileInputProps } = props;
+    const { id = uid, label, labelHidden, info, required = false, disabled = false, readOnly = false, onFilesAdded, multiple = false, status, additionalInfo, compact = false } = baseFileInputProps;
+    const t = useI18n();
+    const [dragOver, setDragOver] = useState(false);
+    const [buttonEl, setButtonEl] = useElement();
+    const { create } = useModalManager();
+    const modalMethods = useRef();
+    let modalContent;
+    if (compact && multiple) {
+        modalContent = (_jsx(BaseFileInput, { ...baseFileInputProps, multiple: true, compact: false, labelHidden: false, ref: ref }));
+    }
+    const modalProps = {
+        modal,
+        modalContent
+    };
+    useEffect(() => {
+        if (compact && multiple && modal) {
+            modalMethods.current?.update({
+                modal,
+                modalContent,
+                readOnly
+            });
+        }
+    }, [compact, multiple, modal, readOnly, modalProps]);
+    useEffect(() => {
+        return () => {
+            if (modalMethods.current) {
+                modalMethods.current?.dismiss();
+                modalMethods.current?.unmount();
+            }
+        };
+    }, []);
+    if (compact && multiple) {
+        const render = (_jsxs(Flex, { container: true, children: [_jsx(StyledBareButton, { id: id, onClick: () => {
+                        modalMethods.current = create(AttachFilesModal, { ...modalProps, readOnly }, { dismissible: readOnly });
+                    }, "aria-label": count && count > 0
+                        ? `${t('attach_review')} ${t('number_of_items', [count], { count })}`
+                        : undefined, "aria-describedby": `${id}-info`, disabled: disabled, ...(!disabled && !readOnly
+                        ? {
+                            onDragOver: (e) => {
+                                e.preventDefault();
+                            },
+                            onDragEnter: () => setDragOver(true),
+                            onDragLeave: () => setDragOver(false),
+                            onDrop: (e) => {
+                                e.preventDefault();
+                                setDragOver(false);
+                                onFilesAdded?.(Array.from(e.dataTransfer.files));
+                                if (buttonEl)
+                                    buttonEl.click();
+                            }
+                        }
+                        : undefined), ref: setButtonEl, children: _jsx(StyledFlex, { container: true, children: _jsx(Component, { compact: compact, multiple: multiple, status: status, count: count, dragOver: dragOver, readOnly: readOnly }) }) }), buttonEl && (_jsx(Tooltip, { target: buttonEl, describeTarget: count === 0, children: count && count > 0
+                        ? t('attach_review')
+                        : t('file_upload_text_main', [t('file_upload_text_multiple')]) }))] }));
+        return label ? (_jsx(StyledFormField, { label: label, labelHidden: labelHidden, id: id, info: info, required: required, disabled: disabled, readOnly: readOnly, status: status, additionalInfo: additionalInfo, compactMode: true, children: render })) : (render);
+    }
+    return _jsx(BaseFileInput, { ...baseFileInputProps, ref: ref });
 });
 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, 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"]}
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\n\nimport {\n  MetaList,\n  type FileListProps,\n  type ModalProps,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, OmitStrict, TestIdProp } from '../../types';\nimport {\n  useConsolidatedRef,\n  useI18n,\n  useUID,\n  useTestIds,\n  usePrevious,\n  useElement,\n  useModalManager,\n  useModalContext\n} from '../../hooks';\nimport type { FormControlProps } from '../FormControl';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport { getActiveElement, getFocusables, withTestIds } from '../../utils';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport Modal, { type ModalMethods } from '../Modal';\n\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\nimport FileList from './FileList';\nimport FileItem from './FileItem';\nimport {\n  StyledBareButton,\n  StyledDropZone,\n  StyledFileInput,\n  StyledIconWrapper,\n  StyledAttachedFileCount,\n  StyledSingleFileWrapper,\n  StyledUploadStatus,\n  StyledFlex,\n  StyledFormField,\n  StyledFileInputControl,\n  StyledDownloadAllButton\n} from './FileInput.styles';\n\nregisterIcon(paperClipIcon);\n\n/** Props to be used when rendering compact variant for multiple FileInput. */\ninterface MultiAttachCompactProps {\n  /** Modal props */\n  modal?: Pick<ModalProps, 'onBeforeOpen'> & {\n    /** Callback for cancel button */\n    onCancel: ({ close }: { close: () => void }) => void;\n    /** Callback for submit button */\n    onSubmit: ({ close }: { close: () => void }) => void;\n    /** If true renders loading indicator inside Modal. */\n    loading?: boolean;\n  };\n  /** Conveys the number of files attached  */\n  count?: number;\n}\n\ninterface ComponentProps\n  extends Pick<BaseFileInputProps, 'compact' | 'multiple' | 'status' | 'readOnly'>,\n    Pick<MultiAttachCompactProps, 'count'> {\n  dragOver?: boolean;\n}\n\ninterface BaseFileInputProps\n  extends BaseProps,\n    NoChildrenProp,\n    TestIdProp,\n    Pick<FileItemProps, 'previewFromActions'>,\n    Pick<FileListProps, 'onDownloadAll'> {\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  /**\n   * Renders compact variant.\n   * @default false\n   */\n  compact?: boolean;\n  /** An array of files that have been uploaded. */\n  files?: OmitStrict<FileItemProps, 'previewFromActions'>[];\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  /** Makes the input non editable and non clickable. */\n  readOnly?: FormControlProps['readOnly'];\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 interface FileInputProps extends BaseFileInputProps, MultiAttachCompactProps {}\n\nconst Component: FunctionComponent<ComponentProps> = props => {\n  const { compact, multiple, status, count, dragOver = false, readOnly } = props;\n  const t = useI18n();\n\n  const attachedFileCount =\n    multiple && count ? (\n      <StyledAttachedFileCount>{t('number_of_items', [count], { count })}</StyledAttachedFileCount>\n    ) : undefined;\n\n  return (\n    <>\n      <StyledUploadStatus\n        item={{ grow: 1 }}\n        container={{ justify: compact && multiple ? 'start' : 'center', alignItems: 'center' }}\n        status={status}\n        dragOver={dragOver}\n        readOnly={readOnly}\n      >\n        <Text variant='secondary'>\n          {compact\n            ? attachedFileCount\n            : t('file_upload_text_main', [\n                t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')\n              ])}\n        </Text>\n      </StyledUploadStatus>\n\n      <StyledIconWrapper container={{ justify: 'center', alignItems: 'center' }}>\n        <Icon name='paper-clip' />\n      </StyledIconWrapper>\n    </>\n  );\n};\n\nconst BaseFileInput: FunctionComponent<BaseFileInputProps & ForwardProps> = forwardRef(\n  function FileInput(props: PropsWithoutRef<BaseFileInputProps>, ref: BaseFileInputProps['ref']) {\n    const uid = useUID();\n    const {\n      testId,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      files,\n      onDownloadAll,\n      onFilesAdded,\n      multiple = false,\n      status,\n      additionalInfo,\n      accept,\n      compact = false,\n      previewFromActions = false,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getFileInputTestIds);\n    const [target, setTarget] = useElement<HTMLElement>();\n\n    const inputRef = useConsolidatedRef(ref);\n    const fileItemListRef = useRef<HTMLDivElement>();\n    const activeElement = getActiveElement();\n    const activeElementInList = fileItemListRef.current?.contains(activeElement);\n    const isInputActiveElement = activeElement === inputRef.current;\n    const compactWithSingleAttach = compact && !multiple;\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 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          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={onChange}\n          onFocus={() => {\n            if (target) {\n              target.dispatchEvent(new Event('focusin'));\n            }\n          }}\n          onBlur={() => {\n            if (target) {\n              target.dispatchEvent(new Event('focusout'));\n            }\n          }}\n          multiple={multiple}\n          accept={Array.isArray(accept) ? accept.join(',') : accept}\n          aria-describedby={`${id}-info`}\n          onClick={\n            readOnly\n              ? e => {\n                  e.preventDefault();\n                }\n              : undefined\n          }\n        />\n        <Flex\n          container\n          as={StyledDropZone}\n          disabled={disabled}\n          readOnly={readOnly}\n          onClick={() => {\n            inputRef.current?.focus();\n            if (!readOnly) {\n              inputRef.current?.click();\n            }\n          }}\n          {...(!disabled && !readOnly\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\n                  const fileList = Array.from(e.dataTransfer.files);\n                  onFilesAdded?.(multiple ? fileList : fileList.slice(0, 1));\n                }\n              }\n            : undefined)}\n          compactMode={compact}\n          ref={setTarget}\n        >\n          <Component\n            compact={compact}\n            multiple={multiple}\n            status={status}\n            dragOver={dragOver}\n            readOnly={readOnly}\n          />\n        </Flex>\n        {compactWithSingleAttach && target && (\n          <Tooltip target={target} describeTarget>\n            {t('file_upload_text_main', [t('file_upload_text_one')])}\n          </Tooltip>\n        )}\n      </StyledFileInput>\n    );\n\n    const getReadOnlyFile = (file: FileItemProps) => {\n      const readOnlyFile = { ...file };\n      delete readOnlyFile.onCancel;\n      delete readOnlyFile.onEdit;\n      delete readOnlyFile.onDelete;\n      delete readOnlyFile.progress;\n      return readOnlyFile;\n    };\n\n    const fileItemList = hideFileInput ? (\n      <StyledSingleFileWrapper\n        data-testid={testIds.files}\n        compact={compact}\n        ref={element => {\n          if (element) fileItemListRef.current = element;\n        }}\n      >\n        <FileItem\n          {...(readOnly ? getReadOnlyFile(files[0]) : files[0])}\n          compact={compact}\n          previewFromActions={compactWithSingleAttach && previewFromActions}\n          disabled={disabled}\n        />\n      </StyledSingleFileWrapper>\n    ) : (\n      <FileList\n        type='item'\n        items={\n          readOnly\n            ? files?.map(file => {\n                return getReadOnlyFile(file);\n              }) ?? []\n            : files ?? []\n        }\n        data-testid={testIds.files}\n        disabled={disabled}\n        ref={element => {\n          if (element) fileItemListRef.current = element;\n        }}\n      />\n    );\n\n    const prevFiles = usePrevious(files);\n    useEffect(() => {\n      if (\n        !multiple &&\n        prevFiles?.length === 0 &&\n        files?.length === 1 &&\n        fileItemListRef.current &&\n        isInputActiveElement\n      ) {\n        getFocusables(fileItemListRef.current)[0]?.focus();\n      }\n\n      if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {\n        inputRef.current?.focus();\n      }\n    }, [files]);\n\n    const renderElement = hideFileInput ? fileItemList : fileInput;\n\n    const fileInputInfoActions = useMemo(() => {\n      if (info && !onDownloadAll) {\n        return info;\n      }\n\n      const downloadAllButton = (\n        <Button onClick={onDownloadAll} variant='link'>\n          {t('download_all')}\n        </Button>\n      );\n\n      if (onDownloadAll && !info && files && files.length > 1 && multiple) {\n        return downloadAllButton;\n      }\n\n      if (info && onDownloadAll) {\n        if (files && files.length > 1 && multiple) {\n          return <MetaList items={[info, downloadAllButton]} />;\n        }\n        return info;\n      }\n    }, [info, onDownloadAll]);\n\n    return (\n      <Flex\n        container={{ rowGap: hideFileInput ? undefined : 1, direction: 'column' }}\n        as={StyledFileInputControl}\n        status={status}\n      >\n        {label ? (\n          <StyledFormField\n            testId={testIds}\n            label={\n              <>\n                {label}\n                {readOnly && <VisuallyHiddenText>{t('read_only')}</VisuallyHiddenText>}\n              </>\n            }\n            labelHidden={labelHidden}\n            id={id}\n            info={fileInputInfoActions}\n            required={required}\n            disabled={!hideFileInput && disabled}\n            readOnly={readOnly}\n            status={status}\n            additionalInfo={additionalInfo}\n            compactMode={compactWithSingleAttach}\n          >\n            <>\n              {renderElement}\n              {readOnly && files && files.length > 1 && multiple && (\n                <StyledDownloadAllButton variant='link' onClick={onDownloadAll}>\n                  {t('download_all')}\n                </StyledDownloadAllButton>\n              )}\n            </>\n          </StyledFormField>\n        ) : (\n          renderElement\n        )}\n        {multiple && !compact && files && files.length > 0 && fileItemList}\n      </Flex>\n    );\n  }\n);\n\nconst AttachFilesModal: FunctionComponent<\n  {\n    modalContent?: JSX.Element;\n    readOnly: FileInputProps['readOnly'];\n  } & Pick<MultiAttachCompactProps, 'modal'>\n> = ({ modalContent, modal, readOnly }) => {\n  const t = useI18n();\n  const { dismiss } = useModalContext();\n\n  const formActions = (\n    <>\n      <Button\n        disabled={modal?.loading}\n        onClick={() => {\n          if (modal?.onCancel) modal.onCancel({ close: dismiss });\n        }}\n      >\n        {t('cancel')}\n      </Button>\n\n      <Button\n        disabled={modal?.loading}\n        type='submit'\n        variant='primary'\n        onClick={() => {\n          if (modal?.onSubmit) modal.onSubmit({ close: dismiss });\n        }}\n      >\n        {t('submit')}\n      </Button>\n    </>\n  );\n\n  return (\n    <Modal\n      progress={modal?.loading}\n      heading={t('attach_files')}\n      actions={!readOnly ? formActions : undefined}\n      onBeforeOpen={modal?.onBeforeOpen}\n    >\n      {modalContent}\n    </Modal>\n  );\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 { modal, count, ...baseFileInputProps } = props;\n\n  const {\n    id = uid,\n    label,\n    labelHidden,\n    info,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    onFilesAdded,\n    multiple = false,\n    status,\n    additionalInfo,\n    compact = false\n  } = baseFileInputProps;\n\n  const t = useI18n();\n  const [dragOver, setDragOver] = useState(false);\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n  const { create } = useModalManager();\n  const modalMethods = useRef<ModalMethods>();\n\n  let modalContent: JSX.Element | undefined;\n\n  if (compact && multiple) {\n    modalContent = (\n      <BaseFileInput\n        {...baseFileInputProps}\n        multiple\n        compact={false}\n        labelHidden={false}\n        ref={ref}\n      />\n    );\n  }\n\n  const modalProps = {\n    modal,\n    modalContent\n  };\n\n  useEffect(() => {\n    if (compact && multiple && modal) {\n      modalMethods.current?.update({\n        modal,\n        modalContent,\n        readOnly\n      });\n    }\n  }, [compact, multiple, modal, readOnly, modalProps]);\n\n  useEffect(() => {\n    return () => {\n      if (modalMethods.current) {\n        modalMethods.current?.dismiss();\n        modalMethods.current?.unmount();\n      }\n    };\n  }, []);\n\n  if (compact && multiple) {\n    const render = (\n      <Flex container>\n        <StyledBareButton\n          id={id}\n          onClick={() => {\n            modalMethods.current = create(\n              AttachFilesModal,\n              { ...modalProps, readOnly },\n              { dismissible: readOnly }\n            );\n          }}\n          aria-label={\n            count && count > 0\n              ? `${t('attach_review')} ${t('number_of_items', [count], { count })}`\n              : undefined\n          }\n          aria-describedby={`${id}-info`}\n          disabled={disabled}\n          {...(!disabled && !readOnly\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                  if (buttonEl) buttonEl.click();\n                }\n              }\n            : undefined)}\n          ref={setButtonEl}\n        >\n          <StyledFlex container>\n            <Component\n              compact={compact}\n              multiple={multiple}\n              status={status}\n              count={count}\n              dragOver={dragOver}\n              readOnly={readOnly}\n            />\n          </StyledFlex>\n        </StyledBareButton>\n        {buttonEl && (\n          <Tooltip target={buttonEl} describeTarget={count === 0}>\n            {count && count > 0\n              ? t('attach_review')\n              : t('file_upload_text_main', [t('file_upload_text_multiple')])}\n          </Tooltip>\n        )}\n      </Flex>\n    );\n\n    return label ? (\n      <StyledFormField\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        additionalInfo={additionalInfo}\n        compactMode\n      >\n        {render}\n      </StyledFormField>\n    ) : (\n      render\n    );\n  }\n\n  return <BaseFileInput {...baseFileInputProps} ref={ref} />;\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}

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

@@ -0,0 +1,26 @@
+import { type FormControlProps } from '../FormControl';
+import type { FileInputProps } from './FileInput';
+export declare const StyledDropZone: import("styled-components").StyledComponent<import("react").FunctionComponent<FormControlProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
+    compactMode: FileInputProps['compact'];
+}, never>;
+export declare const StyledUploadStatus: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Flex").FlexProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
+    status: FormControlProps['status'];
+    readOnly: FormControlProps['readOnly'];
+    dragOver: boolean;
+}, never>;
+export declare const StyledIconWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Flex").FlexProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFileInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSingleFileWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    compact: FileInputProps['compact'];
+}, never>;
+export declare const StyledAttachedFileCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFlex: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Flex").FlexProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBareButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFormField: import("styled-components").StyledComponent<import("react").FC<import("../FormField").FormFieldProps & import("../..").ForwardProps> & {
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+}, import("styled-components").DefaultTheme, {
+    compactMode: FileInputProps['compact'];
+}, never>;
+export declare const StyledFileInputControl: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Flex").FlexProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, Pick<FormControlProps, "status">, never>;
+export declare const StyledDownloadAllButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=FileInput.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"AAGA,OAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AASpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,cAAc;iBAAsC,cAAc,CAAC,SAAS,CAAC;SAuBxF,CAAC;AAIH,eAAO,MAAM,kBAAkB;YACrB,gBAAgB,CAAC,QAAQ,CAAC;cACxB,gBAAgB,CAAC,UAAU,CAAC;cAC5B,OAAO;SAwCjB,CAAC;AAIH,eAAO,MAAM,iBAAiB,iMAa5B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAgC3B,CAAC;AAIF,eAAO,MAAM,uBAAuB;aAAyB,cAAc,CAAC,SAAS,CAAC;SAarF,CAAC;AAEF,eAAO,MAAM,uBAAuB,0GAWnC,CAAC;AAIF,eAAO,MAAM,UAAU,iMAEtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,oNAwC3B,CAAC;AAIH,eAAO,MAAM,eAAe;;;iBAAoC,cAAc,CAAC,SAAS,CAAC;SASvF,CAAC;AAEH,eAAO,MAAM,sBAAsB,+NAejC,CAAC;AAIH,eAAO,MAAM,uBAAuB,qMAWlC,CAAC"}

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

@@ -0,0 +1,166 @@
+import styled, { css } from 'styled-components';
+import { hideVisually } from 'polished';
+import FormControl, {} from '../FormControl';
+import { defaultThemeProp } from '../../theme';
+import Flex from '../Flex';
+import BareButton from '../Button/BareButton';
+import FormField, { StyledFormFieldInfo } from '../FormField';
+import { StyledMetaListItem } from '../MetaList/MetaList';
+import Button from '../Button';
+import { calculateFontSize } from '../../styles';
+import { StyledFileItem } from './FileItem';
+export const StyledDropZone = styled(FormControl)(({ compactMode, theme: { base: { 'hit-area': { 'finger-min': fingerMin, compact } }, components } }) => {
+    return css `
+    height: ${components.input.height};
+    border: none;
+    cursor: pointer;
+
+    ${compactMode &&
+        css `
+      height: ${compact};
+    `}
+
+    @media (pointer: coarse) {
+      height: ${fingerMin};
+    }
+  `;
+});
+StyledDropZone.defaultProps = defaultThemeProp;
+export const StyledUploadStatus = styled(Flex)(({ dragOver, status, readOnly, theme: { base: { 'border-radius': borderRadius }, components: { 'form-field': formField, 'form-control': { 'border-color': borderColor, ':hover': { 'border-color': hoverBorderColor } } } } }) => {
+    return css `
+    border: 0.0625rem dashed ${borderColor};
+    border-start-start-radius: calc(0.5 * ${borderRadius});
+    border-end-start-radius: calc(0.5 * ${borderRadius});
+    ${!readOnly &&
+        css `
+      ${status &&
+            css `
+        border-color: ${formField[status]['status-color']};
+      `};
+
+      ${dragOver &&
+            css `
+        border-style: solid;
+      `}
+
+      &:hover:not([disabled]):not(:focus, :focus-within) {
+        ${!status &&
+            css `
+          border-color: ${hoverBorderColor};
+        `}
+      }
+    `}
+  `;
+});
+StyledUploadStatus.defaultProps = defaultThemeProp;
+export const StyledIconWrapper = styled(Flex)(({ theme: { base: { 'border-radius': borderRadius }, components } }) => {
+    return css `
+    border: 0.0625rem solid ${components['form-control']['border-color']};
+    border-start-end-radius: calc(0.5 * ${borderRadius});
+    border-end-end-radius: calc(0.5 * ${borderRadius});
+    border-inline-start: none;
+    aspect-ratio: 1 / 1;
+  `;
+});
+StyledIconWrapper.defaultProps = defaultThemeProp;
+export const StyledFileInput = styled.div(({ theme: { components: { 'form-control': { 'border-color': borderColor, ':focus': { 'box-shadow': boxShadow } } } } }) => {
+    return css `
+      position: relative;
+
+      input {
+        ${hideVisually}
+      }
+
+      input:enabled:focus + ${StyledDropZone} {
+        box-shadow: ${boxShadow};
+
+        > ${StyledIconWrapper} {
+          border: none;
+        }
+        > ${StyledUploadStatus} {
+          border-block: none;
+          border-inline-start: none;
+          border-inline-end: 0.0625rem dashed ${borderColor};
+        }
+      }
+    `;
+});
+StyledFileInput.defaultProps = defaultThemeProp;
+export const StyledSingleFileWrapper = styled.div(({ compact }) => {
+    return css `
+      display: contents;
+
+      ${compact &&
+        css `
+        > ${StyledFileItem} {
+          width: 25ch;
+        }
+      `};
+    `;
+});
+export const StyledAttachedFileCount = styled.span(({ theme: { base: { palette, spacing } } }) => {
+    return css `
+      padding-inline-start: ${spacing};
+      color: ${palette.interactive};
+    `;
+});
+StyledAttachedFileCount.defaultProps = defaultThemeProp;
+export const StyledFlex = styled(Flex) `
+  height: inherit;
+`;
+export const StyledBareButton = styled(BareButton)(({ theme: { base: { palette, 'hit-area': { 'finger-min': fingerMin, compact }, 'border-radius': baseRadius }, components: { 'form-control': { 'border-color': borderColor, 'border-radius': radius, ':focus': { 'box-shadow': boxShadow } } } } }) => {
+    return css `
+    height: ${compact};
+    width: 25ch;
+    cursor: pointer;
+    border-radius: calc(${baseRadius} * ${radius});
+    background-color: ${palette['primary-background']};
+
+    @media (pointer: coarse) {
+      height: ${fingerMin};
+    }
+
+    &:focus {
+      box-shadow: ${boxShadow};
+
+      ${StyledIconWrapper} {
+        border: none;
+      }
+      ${StyledUploadStatus} {
+        border-block: none;
+        border-inline-start: none;
+        border-inline-end: 0.0625rem dashed ${borderColor};
+      }
+    }
+  `;
+});
+StyledBareButton.defaultProps = defaultThemeProp;
+export const StyledFormField = styled(FormField)(({ compactMode }) => {
+    return css `
+    ${compactMode &&
+        css `
+      width: 25ch;
+    `};
+  `;
+});
+export const StyledFileInputControl = styled(Flex)(({ theme: { base: { spacing }, components: { 'form-field': formField } }, status }) => {
+    return css `
+    ${StyledFormFieldInfo} {
+      margin-block-start: calc(0.5 * ${spacing});
+      ${StyledMetaListItem}:first-child {
+        color: ${status && formField[status]['status-color']};
+      }
+    }
+  `;
+});
+StyledFileInputControl.defaultProps = defaultThemeProp;
+export const StyledDownloadAllButton = styled(Button)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing } } }) => {
+    const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);
+    return css `
+    font-size: ${infoFontSize};
+    margin-block-start: calc(0.5 * ${spacing});
+    align-self: flex-start;
+  `;
+});
+StyledDownloadAllButton.defaultProps = defaultThemeProp;
+//# sourceMappingURL=FileInput.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.styles.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,WAAW,EAAE,EAAyB,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,SAAS,EAAE,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGjD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAA6C,CAAC,EAC7F,WAAW,EACX,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,UAAU,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EACjD,EACD,UAAU,EACX,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;cACE,UAAU,CAAC,KAAK,CAAC,MAAM;;;;MAI/B,WAAW;QACb,GAAG,CAAA;gBACS,OAAO;KAClB;;;gBAGW,SAAS;;GAEtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAI3C,CAAC,EACF,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACvC,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC/C,EACF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;+BACmB,WAAW;4CACE,YAAY;0CACd,YAAY;MAChD,CAAC,QAAQ;QACX,GAAG,CAAA;QACC,MAAM;YACR,GAAG,CAAA;wBACe,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC;OAClD;;QAEC,QAAQ;YACV,GAAG,CAAA;;OAEF;;;UAGG,CAAC,MAAM;YACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;;KAEJ;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7C,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACvC,UAAU,EACX,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;8BACkB,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0CAC9B,YAAY;wCACd,YAAY;;;GAGjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,cAAc,EAAE,EACd,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACtC,EACF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;UAIJ,YAAY;;;8BAGQ,cAAc;sBACtB,SAAS;;YAEnB,iBAAiB;;;YAGjB,kBAAkB;;;gDAGkB,WAAW;;;KAGtD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACd,OAAO,GAAG,CAAA;;;QAGN,OAAO;QACT,GAAG,CAAA;YACG,cAAc;;;OAGnB;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAChD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;8BACgB,OAAO;eACtB,OAAO,CAAC,WAAW;KAC7B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAClD,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,UAAU,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EAChD,eAAe,EAAE,UAAU,EAC5B,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EACd,cAAc,EAAE,WAAW,EAC3B,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACtC,EACF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;cACE,OAAO;;;0BAGK,UAAU,MAAM,MAAM;wBACxB,OAAO,CAAC,oBAAoB,CAAC;;;gBAGrC,SAAS;;;;oBAIL,SAAS;;QAErB,iBAAiB;;;QAGjB,kBAAkB;;;8CAGoB,WAAW;;;GAGtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAA6C,CAAC,EAC5F,WAAW,EACZ,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,WAAW;QACb,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAmC,CAAC,EACpF,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EACxC,EACD,MAAM,EACP,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,mBAAmB;uCACc,OAAO;QACtC,kBAAkB;iBACT,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC;;;GAGzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EACrD,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,EAClE,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACrE,OAAO,GAAG,CAAA;iBACK,YAAY;qCACQ,OAAO;;GAEzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormControl, { type FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport BareButton from '../Button/BareButton';\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport Button from '../Button';\nimport { calculateFontSize } from '../../styles';\n\nimport type { FileInputProps } from './FileInput';\nimport { StyledFileItem } from './FileItem';\n\nexport const StyledDropZone = styled(FormControl)<{ compactMode: FileInputProps['compact'] }>(({\n  compactMode,\n  theme: {\n    base: {\n      'hit-area': { 'finger-min': fingerMin, compact }\n    },\n    components\n  }\n}) => {\n  return css`\n    height: ${components.input.height};\n    border: none;\n    cursor: pointer;\n\n    ${compactMode &&\n    css`\n      height: ${compact};\n    `}\n\n    @media (pointer: coarse) {\n      height: ${fingerMin};\n    }\n  `;\n});\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nexport const StyledUploadStatus = styled(Flex)<{\n  status: FormControlProps['status'];\n  readOnly: FormControlProps['readOnly'];\n  dragOver: boolean;\n}>(({\n  dragOver,\n  status,\n  readOnly,\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'form-field': formField,\n      'form-control': {\n        'border-color': borderColor,\n        ':hover': { 'border-color': hoverBorderColor }\n      }\n    }\n  }\n}) => {\n  return css`\n    border: 0.0625rem dashed ${borderColor};\n    border-start-start-radius: calc(0.5 * ${borderRadius});\n    border-end-start-radius: calc(0.5 * ${borderRadius});\n    ${!readOnly &&\n    css`\n      ${status &&\n      css`\n        border-color: ${formField[status]['status-color']};\n      `};\n\n      ${dragOver &&\n      css`\n        border-style: solid;\n      `}\n\n      &:hover:not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n      }\n    `}\n  `;\n});\n\nStyledUploadStatus.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrapper = styled(Flex)(({\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components\n  }\n}) => {\n  return css`\n    border: 0.0625rem solid ${components['form-control']['border-color']};\n    border-start-end-radius: calc(0.5 * ${borderRadius});\n    border-end-end-radius: calc(0.5 * ${borderRadius});\n    border-inline-start: none;\n    aspect-ratio: 1 / 1;\n  `;\n});\n\nStyledIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div(\n  ({\n    theme: {\n      components: {\n        'form-control': {\n          'border-color': borderColor,\n          ':focus': { 'box-shadow': boxShadow }\n        }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n\n      input {\n        ${hideVisually}\n      }\n\n      input:enabled:focus + ${StyledDropZone} {\n        box-shadow: ${boxShadow};\n\n        > ${StyledIconWrapper} {\n          border: none;\n        }\n        > ${StyledUploadStatus} {\n          border-block: none;\n          border-inline-start: none;\n          border-inline-end: 0.0625rem dashed ${borderColor};\n        }\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nexport const StyledSingleFileWrapper = styled.div<{ compact: FileInputProps['compact'] }>(\n  ({ compact }) => {\n    return css`\n      display: contents;\n\n      ${compact &&\n      css`\n        > ${StyledFileItem} {\n          width: 25ch;\n        }\n      `};\n    `;\n  }\n);\n\nexport const StyledAttachedFileCount = styled.span(\n  ({\n    theme: {\n      base: { palette, spacing }\n    }\n  }) => {\n    return css`\n      padding-inline-start: ${spacing};\n      color: ${palette.interactive};\n    `;\n  }\n);\n\nStyledAttachedFileCount.defaultProps = defaultThemeProp;\n\nexport const StyledFlex = styled(Flex)`\n  height: inherit;\n`;\n\nexport const StyledBareButton = styled(BareButton)(({\n  theme: {\n    base: {\n      palette,\n      'hit-area': { 'finger-min': fingerMin, compact },\n      'border-radius': baseRadius\n    },\n    components: {\n      'form-control': {\n        'border-color': borderColor,\n        'border-radius': radius,\n        ':focus': { 'box-shadow': boxShadow }\n      }\n    }\n  }\n}) => {\n  return css`\n    height: ${compact};\n    width: 25ch;\n    cursor: pointer;\n    border-radius: calc(${baseRadius} * ${radius});\n    background-color: ${palette['primary-background']};\n\n    @media (pointer: coarse) {\n      height: ${fingerMin};\n    }\n\n    &:focus {\n      box-shadow: ${boxShadow};\n\n      ${StyledIconWrapper} {\n        border: none;\n      }\n      ${StyledUploadStatus} {\n        border-block: none;\n        border-inline-start: none;\n        border-inline-end: 0.0625rem dashed ${borderColor};\n      }\n    }\n  `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled(FormField)<{ compactMode: FileInputProps['compact'] }>(({\n  compactMode\n}) => {\n  return css`\n    ${compactMode &&\n    css`\n      width: 25ch;\n    `};\n  `;\n});\n\nexport const StyledFileInputControl = styled(Flex)<Pick<FormControlProps, 'status'>>(({\n  theme: {\n    base: { spacing },\n    components: { 'form-field': formField }\n  },\n  status\n}) => {\n  return css`\n    ${StyledFormFieldInfo} {\n      margin-block-start: calc(0.5 * ${spacing});\n      ${StyledMetaListItem}:first-child {\n        color: ${status && formField[status]['status-color']};\n      }\n    }\n  `;\n});\n\nStyledFileInputControl.defaultProps = defaultThemeProp;\n\nexport const StyledDownloadAllButton = styled(Button)(({\n  theme: {\n    base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }\n  }\n}) => {\n  const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n  return css`\n    font-size: ${infoFontSize};\n    margin-block-start: calc(0.5 * ${spacing});\n    align-self: flex-start;\n  `;\n});\n\nStyledDownloadAllButton.defaultProps = defaultThemeProp;\n"]}