@veeqo/ui 12.4.0-beta-9 → 12.5.0

package/dist/components/SelectDropdown/components/item.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"item.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div,\n  &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div,\n  &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div,\n  &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div,\n  > div:first-of-type[role='gridcell'] > :first-child {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,64CAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}
+{"version":3,"file":"item.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div,\n  &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-pressed] > div,\n  &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div,\n  &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div,\n  > div:first-of-type[role='gridcell'] > :first-child {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,q8CAAA;AACA,iBAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}

package/dist/components/SelectDropdown/components/item.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../_virtual/____insertStyle.js';
 
-insertStyle("._item_19dv4_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_19dv4_1._appearance-secondary_19dv4_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_19dv4_1[data-hovered] > div, ._item_19dv4_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #f0f7fc;\n}\n._item_19dv4_1[data-pressed] > div, ._item_19dv4_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #e3f0fa;\n}\n._item_19dv4_1[data-focused] {\n  outline: 0;\n}\n._item_19dv4_1[data-focus-visible] > div, ._item_19dv4_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_19dv4_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_19dv4_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_19dv4_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_19dv4_1 > div,\n._item_19dv4_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
-var styles = {"item":"_item_19dv4_1","appearance-secondary":"_appearance-secondary_19dv4_7"};
+insertStyle("._item_1dwbl_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_1dwbl_1._appearance-secondary_1dwbl_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-hovered] > div, ._item_1dwbl_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-pressed] > div, ._item_1dwbl_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-focused] {\n  outline: 0;\n}\n._item_1dwbl_1[data-focus-visible] > div, ._item_1dwbl_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_1dwbl_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_1dwbl_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_1dwbl_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_1dwbl_1 > div,\n._item_1dwbl_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
+var itemStyles = {"item":"_item_1dwbl_1","appearance-secondary":"_appearance-secondary_1dwbl_7"};
 
-export { styles as default };
+export { itemStyles as default };
 //# sourceMappingURL=item.module.scss.js.map

package/dist/components/SelectDropdown/components/item.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.module.scss.js","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div,\n  &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: #f0f7fc;\n  }\n\n  &[data-pressed] > div,\n  &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: #e3f0fa;\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div,\n  &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div,\n  > div:first-of-type[role='gridcell'] > :first-child {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,64CAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}
+{"version":3,"file":"item.module.scss.js","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n\n  &.appearance-secondary {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-hovered] > div,\n  &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-pressed] > div,\n  &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n\n  &[data-focused] {\n    outline: 0;\n  }\n\n  &[data-focus-visible] > div,\n  &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n    z-index: 1;\n    position: relative;\n  }\n\n  &[data-dragging] {\n    background-color: var(--colors-neutral-grey-base);\n    border-color: var(--color-secondary-blue-base);\n  }\n\n  &[data-drop-target] {\n    background-color: var(--colors-secondary-green-base);\n    border-color: var(--colors-secondary-green-base);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--colors-neutral-grey-light);\n    opacity: 0.75;\n  }\n\n  > div,\n  > div:first-of-type[role='gridcell'] > :first-child {\n    padding: var(--sizes-sm);\n    border-radius: var(--radius-base);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,q8CAAA;AACA,iBAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}

package/dist/components/SelectDropdown/types.d.ts

@@ -3,10 +3,11 @@ import { ReactElement } from 'react';
 import { ButtonProps } from '../Button/types';
 import { ListItemProps } from './components/ListItem/types';
 import { ListItemSectionProps } from './components/ListItemSection/ListItemSection';
+import { GridItemProps } from './components/GridItem/types';
 type CTAButtonProps = Omit<ButtonProps, 'variant'> & {
     label: string;
 };
-export type SelectDropdownItem = ListItemProps | ListItemSectionProps;
+export type SelectDropdownItem = ListItemProps | ListItemSectionProps | GridItemProps;
 type ImportedListBoxProps = Pick<ListBoxProps<SelectDropdownItem>, 'children' | 'dragAndDropHooks' | 'onScroll' | 'disabledKeys'>;
 export type SelectDropdownSingleProps = ImportedListBoxProps & {
     multiple?: false;
@@ -31,6 +32,8 @@ export type SelectDropdownProps = (SelectDropdownSingleProps | SelectDropdownMul
     actions?: CTAButtonProps[];
     searchValue?: string;
     onSearchChange?: (value: string) => void;
+    topAction?: CTAButtonProps;
+    isSelectDropdownOpen?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;

package/dist/components/UploadFile/UploadFile.cjs

@@ -1,132 +1,143 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../theme/index.cjs');
-var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
-var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
 var styled$1 = require('./styled.cjs');
 var constants = require('./constants.cjs');
 var UploadCopy = require('./components/UploadCopy/UploadCopy.cjs');
-var DropCopy = require('./components/DropCopy/DropCopy.cjs');
+var setInputElFile = require('./utils/setInputElFile/setInputElFile.cjs');
 var getValidTypesString = require('./utils/getValidTypesString/getValidTypesString.cjs');
 var getFileSizeString = require('./utils/getFileSizeString/getFileSizeString.cjs');
 var getTypePropForInputEl = require('./utils/getTypePropForInputEl/getTypePropForInputEl.cjs');
 var styled = require('../../hoc/withLabels/styled.cjs');
+var UploadFileErrors = require('./components/UploadFileErrors/UploadFileErrors.cjs');
 var UploadedFile = require('./components/UploadedFile/UploadedFile.cjs');
 var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
-var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
-var useUploadFile = require('./hooks/useUploadFile/useUploadFile.cjs');
-var useValidateInput = require('./hooks/useValidateInput/useValidateInput.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const UploadFile = React.forwardRef(({ id, name, maxBytes = 1000000, format = constants.FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage, ...otherProps }, outerRef) => {
-    var _a, _b;
-    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile();
-    const { validationCount } = useValidateInput.useValidateInput({
-        customErrorMessage: errorMessage,
-        inputRef,
-        fileList,
-        fileTypes,
-        maxBytes,
-    });
-    React.useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
-    const [isDragOver, setIsDragOver] = React.useState(false);
+const UploadFile = React.forwardRef(({ id, name, maxBytes = 1000000, format = constants.FileSizeUnit.MB, fileTypes, label = 'Upload file', required, disabled, ...otherProps }, outerRef) => {
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(outerRef, () => inputRef.current, []);
+    const [file, setFile] = React.useState();
+    const [errorState, setErrorState] = React.useState(constants.InputState.VALID);
+    const isInvalidFormat = errorState === constants.InputState.INVALID_FORMAT || errorState === constants.InputState.INVALID_FORMAT_AND_SIZE;
+    const isOverMaxSize = errorState === constants.InputState.INVALID_SIZE || errorState === constants.InputState.INVALID_FORMAT_AND_SIZE;
     // Computed properties based on params
     const maxSizeCopy = getFileSizeString.getFileSizeString({ maxBytes, format });
     const acceptedTypesCopy = getValidTypesString.getValidTypesString({ fileTypes });
     const acceptedTypesForInputEl = getTypePropForInputEl.getTypePropForInputEl({ fileTypes });
-    const validateMaximumFiles = React.useCallback((files) => {
-        if ((files === null || files === undefined ? undefined : files.length) && (files === null || files === undefined ? undefined : files.length) > maxFiles) {
-            clearFileSelection();
-            onMaxFilesExceeded === null || onMaxFilesExceeded === undefined ? undefined : onMaxFilesExceeded();
-            return false;
+    const clearFileSelection = () => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === undefined ? undefined : _a.value)
+            inputRef.current.value = '';
+    };
+    // Tracks error states within the input element itself, using preset
+    // error messages and assigns these to the input component based on the file
+    const setInputValidation = ({ overMaxSize, invalidFormat, }) => {
+        var _a;
+        let error = constants.InputState.VALID;
+        if (invalidFormat && !overMaxSize) {
+            error = constants.InputState.INVALID_FORMAT;
         }
-        return true;
-    }, [clearFileSelection, maxFiles, onMaxFilesExceeded]);
+        else if (!invalidFormat && overMaxSize) {
+            error = constants.InputState.INVALID_SIZE;
+        }
+        else if (invalidFormat && overMaxSize) {
+            error = constants.InputState.INVALID_FORMAT_AND_SIZE;
+        }
+        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.setCustomValidity(error);
+        setErrorState(error);
+    };
     // Processes file and updates the UI appropriately:
     const updateFiles = React.useCallback((files) => {
         if (!files.length) {
+            setInputValidation({ invalidFormat: true });
             return;
         }
-        setFileList(files);
-    }, [setFileList]);
+        const [newFile] = files;
+        const hasExceededMaxSize = newFile.size > maxBytes;
+        const [, extension] = newFile.type.split('/');
+        const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);
+        const hasInvalidFormat = !isTypeValid;
+        if (hasExceededMaxSize || hasInvalidFormat) {
+            // Empty the inputRef's read-only fileList by clearing the value attribute,
+            // since we have an invalid input.
+            clearFileSelection();
+        }
+        else {
+            // Update the files attribute of the input el, with the new file(s)
+            setInputElFile.setInputElFile({ fileList: files, elementId: id });
+        }
+        setInputValidation({
+            invalidFormat: hasInvalidFormat,
+            overMaxSize: hasExceededMaxSize,
+        });
+        setFile(newFile);
+    }, [fileTypes, id, maxBytes]);
     // For focussing of input el and updating drop UI
     const onDragEnter = (event) => {
         var _a;
         event.preventDefault();
-        setIsDragOver(true);
         (_a = inputRef.current) === null || _a === undefined ? undefined : _a.focus();
     };
     // For unfocussing of input el and updating drop UI
     const onDragLeave = (event) => {
+        var _a;
         event.preventDefault();
-        setIsDragOver(false);
+        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.blur();
     };
     // Prevents default browser behaviour
     const onDragOver = (event) => event.preventDefault();
     // Process file when dropped into eligible area
     const onDrop = (event) => {
         event.preventDefault();
-        setIsDragOver(false);
         // Prevent reactions on dragging events that do not contain files
         if (!event.dataTransfer.files.length)
             return;
-        const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);
-        if (canUpdateFiles) {
-            updateFiles(event.dataTransfer.files);
-        }
+        updateFiles(event.dataTransfer.files);
     };
+    // Removes input el's files, clears errors and removes file from react component
+    const resetSelection = React.useCallback(() => {
+        clearFileSelection();
+        setFile(undefined);
+        setInputValidation({
+            invalidFormat: false,
+            overMaxSize: false,
+        });
+    }, []);
     // Updates UI based on a native file input change. Attached via useEffect below
-    const onChange = React.useCallback(() => {
-        var _a, _b;
-        const canUpdateFiles = validateMaximumFiles((_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.files);
-        const files = (_b = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _b === undefined ? undefined : _b.files;
-        if (canUpdateFiles && files) {
+    const onInputChange = React.useCallback(() => {
+        var _a;
+        const files = (_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.files;
+        if ((files === null || files === undefined ? undefined : files.length) && (files === null || files === undefined ? undefined : files.length) > 0)
             updateFiles(files);
-        }
-        else if (fileList) {
-            updateFiles(fileList);
-        }
-    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);
+        else
+            resetSelection();
+    }, [resetSelection, updateFiles]);
     React.useEffect(() => {
         const ref = inputRef === null || inputRef === undefined ? undefined : inputRef.current;
-        ref === null || ref === undefined ? undefined : ref.addEventListener('change', onChange);
-        ref === null || ref === undefined ? undefined : ref.addEventListener('cancel', onCancel);
+        ref === null || ref === undefined ? undefined : ref.addEventListener('change', onInputChange);
+        ref === null || ref === undefined ? undefined : ref.addEventListener('cancel', resetSelection);
         return () => {
-            ref === null || ref === undefined ? undefined : ref.removeEventListener('change', onChange);
-            ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', onCancel);
+            ref === null || ref === undefined ? undefined : ref.removeEventListener('change', onInputChange);
+            ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', resetSelection);
         };
-    }, [onChange, onCancel, inputRef]);
-    const hasUserProvidedNoFiles = !(fileList === null || fileList === undefined ? undefined : fileList.length);
+    }, [onInputChange, resetSelection]);
     return (React__default.default.createElement(styled.RootStack, { spacing: "xs", alignX: "stretch" },
         React__default.default.createElement(styled.Label, { htmlFor: id },
             label,
             React__default.default.createElement(FlexCol.FlexCol, null,
                 React__default.default.createElement(styled.Hint, null,
-                    maxSizeCopy,
-                    React__default.default.createElement("br", null),
-                    acceptedTypesCopy),
-                React__default.default.createElement(styled$1.DropZoneContainer, { hasUserProvidedNoFiles: hasUserProvidedNoFiles, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
-                    isDragOver ? React__default.default.createElement(DropCopy.DropCopy, null) : React__default.default.createElement(UploadCopy.UploadCopy, null),
-                    React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
+                    React__default.default.createElement("div", null, acceptedTypesCopy),
+                    React__default.default.createElement("div", null, maxSizeCopy)),
+                React__default.default.createElement(styled$1.DropZoneContainer, { "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                    React__default.default.createElement(UploadCopy.UploadCopy, null),
+                    React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, required: required, disabled: disabled, ...otherProps })))),
         React__default.default.createElement(FlexCol.FlexCol, null,
-            ((_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.validity.valid) === false &&
-                hasUserProvidedNoFiles &&
-                !!validationCount && (React__default.default.createElement(FlexRow.FlexRow, null,
-                React__default.default.createElement(CriticalIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.secondary.red.base }),
-                React__default.default.createElement(styled.Error, null, (_b = inputRef.current) === null || _b === undefined ? undefined : _b.validationMessage))),
-            disabledMessage && (React__default.default.createElement(FlexRow.FlexRow, { id: `${id}-disabled` },
-                React__default.default.createElement(LockIcon.ReactComponent, { width: 16, height: 16, color: index.theme.colors.neutral.ink.light }),
-                React__default.default.createElement(styled.Disabled, null, disabledMessage))),
-            !hideUploadedFiles &&
-                fileList && [
-                Array.from(fileList).map((file) => {
-                    return (React__default.default.createElement(UploadedFile.UploadedFile, { key: `${file.name}`, file: file, removeFileFromList: removeFileFromList, disabled: disabled, format: format, maxBytes: maxBytes, fileTypes: fileTypes }));
-                }),
-            ])));
+            React__default.default.createElement(UploadedFile.UploadedFile, { file: file, resetSelection: resetSelection, disabled: disabled }),
+            React__default.default.createElement(UploadFileErrors.UploadFileErrors, { acceptedTypesCopy: isInvalidFormat ? acceptedTypesCopy : undefined, maxSizeCopy: isOverMaxSize ? maxSizeCopy : undefined }))));
 });
 
 exports.UploadFile = UploadFile;

package/dist/components/UploadFile/UploadFile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport { FileSizeUnit, DEFAULT_MAXIMUM_MULTIPLE_FILES } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = 1000000,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      disabled,\n      multiple,\n      label = multiple ? 'Upload files' : 'Upload file',\n      hideUploadedFiles = false,\n      onMaxFilesExceeded,\n      maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n      disabledMessage,\n      errorMessage,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n      useUploadFile();\n\n    const { validationCount } = useValidateInput({\n      customErrorMessage: errorMessage,\n      inputRef,\n      fileList,\n      fileTypes,\n      maxBytes,\n    });\n\n    useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n    const [isDragOver, setIsDragOver] = useState(false);\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const validateMaximumFiles = useCallback(\n      (files: FileList | null | undefined) => {\n        if (files?.length && files?.length > maxFiles) {\n          clearFileSelection();\n          onMaxFilesExceeded?.();\n          return false;\n        }\n        return true;\n      },\n      [clearFileSelection, maxFiles, onMaxFilesExceeded],\n    );\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          return;\n        }\n\n        setFileList(files);\n      },\n      [setFileList],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(true);\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      setIsDragOver(false);\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n\n      const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n      if (canUpdateFiles) {\n        updateFiles(event.dataTransfer.files);\n      }\n    };\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onChange = useCallback(() => {\n      const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n      const files = inputRef?.current?.files;\n      if (canUpdateFiles && files) {\n        updateFiles(files);\n      } else if (fileList) {\n        updateFiles(fileList);\n      }\n    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onChange);\n      ref?.addEventListener('cancel', onCancel);\n\n      return () => {\n        ref?.removeEventListener('change', onChange);\n        ref?.removeEventListener('cancel', onCancel);\n      };\n    }, [onChange, onCancel, inputRef]);\n\n    const hasUserProvidedNoFiles = !fileList?.length;\n\n    return (\n      <RootStack spacing=\"xs\" alignX=\"stretch\">\n        <Label htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Hint>\n              {maxSizeCopy}\n              <br />\n              {acceptedTypesCopy}\n            </Hint>\n            <DropZoneContainer\n              hasUserProvidedNoFiles={hasUserProvidedNoFiles}\n              isDragOver={isDragOver}\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              {isDragOver ? <DropCopy /> : <UploadCopy />}\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                disabled={disabled}\n                multiple={multiple}\n                {...otherProps}\n              />\n            </DropZoneContainer>\n          </FlexCol>\n        </Label>\n        <FlexCol>\n          {inputRef?.current?.validity.valid === false &&\n            hasUserProvidedNoFiles &&\n            !!validationCount && (\n              <FlexRow>\n                <CriticalIcon width={16} height={16} color={theme.colors.secondary.red.base} />\n                <Error>{inputRef.current?.validationMessage}</Error>\n              </FlexRow>\n            )}\n          {disabledMessage && (\n            <FlexRow id={`${id}-disabled`}>\n              <LockIcon width={16} height={16} color={theme.colors.neutral.ink.light} />\n              <Disabled>{disabledMessage}</Disabled>\n            </FlexRow>\n          )}\n          {!hideUploadedFiles &&\n            fileList && [\n              Array.from(fileList).map((file) => {\n                return (\n                  <UploadedFile\n                    key={`${file.name}`}\n                    file={file}\n                    removeFileFromList={removeFileFromList}\n                    disabled={disabled}\n                    format={format}\n                    maxBytes={maxBytes}\n                    fileTypes={fileTypes}\n                  />\n                );\n              }),\n            ]}\n        </FlexCol>\n      </RootStack>\n    );\n  },\n);\n"],"names":["forwardRef","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","Error","LockIcon","Disabled","UploadedFile"],"mappings":"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"}
+{"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { DropZoneContainer } from './styled';\nimport { InputState, FileSizeUnit } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { setInputElFile } from './utils/setInputElFile/setInputElFile';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n  (\n    {\n      id,\n      name,\n      maxBytes = 1000000,\n      format = FileSizeUnit.MB,\n      fileTypes,\n      label = 'Upload file',\n      required,\n      disabled,\n      ...otherProps\n    }: UploadFileProps,\n    outerRef,\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    useImperativeHandle(outerRef, () => inputRef.current!, []);\n\n    const [file, setFile] = useState<File>();\n    const [errorState, setErrorState] = useState(InputState.VALID);\n\n    const isInvalidFormat =\n      errorState === InputState.INVALID_FORMAT || errorState === InputState.INVALID_FORMAT_AND_SIZE;\n    const isOverMaxSize =\n      errorState === InputState.INVALID_SIZE || errorState === InputState.INVALID_FORMAT_AND_SIZE;\n\n    // Computed properties based on params\n    const maxSizeCopy = getFileSizeString({ maxBytes, format });\n    const acceptedTypesCopy = getValidTypesString({ fileTypes });\n    const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n    const clearFileSelection = () => {\n      if (inputRef.current?.value) inputRef.current.value = '';\n    };\n\n    // Tracks error states within the input element itself, using preset\n    // error messages and assigns these to the input component based on the file\n    const setInputValidation = ({\n      overMaxSize,\n      invalidFormat,\n    }: {\n      overMaxSize?: boolean;\n      invalidFormat?: boolean;\n    }) => {\n      let error = InputState.VALID;\n      if (invalidFormat && !overMaxSize) {\n        error = InputState.INVALID_FORMAT;\n      } else if (!invalidFormat && overMaxSize) {\n        error = InputState.INVALID_SIZE;\n      } else if (invalidFormat && overMaxSize) {\n        error = InputState.INVALID_FORMAT_AND_SIZE;\n      }\n      inputRef.current?.setCustomValidity(error);\n      setErrorState(error);\n    };\n\n    // Processes file and updates the UI appropriately:\n    const updateFiles = useCallback(\n      (files: FileList) => {\n        if (!files.length) {\n          setInputValidation({ invalidFormat: true });\n          return;\n        }\n\n        const [newFile] = files;\n        const hasExceededMaxSize = newFile.size > maxBytes;\n\n        const [, extension] = newFile.type.split('/');\n        const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n        const hasInvalidFormat = !isTypeValid;\n\n        if (hasExceededMaxSize || hasInvalidFormat) {\n          // Empty the inputRef's read-only fileList by clearing the value attribute,\n          // since we have an invalid input.\n          clearFileSelection();\n        } else {\n          // Update the files attribute of the input el, with the new file(s)\n          setInputElFile({ fileList: files, elementId: id });\n        }\n        setInputValidation({\n          invalidFormat: hasInvalidFormat,\n          overMaxSize: hasExceededMaxSize,\n        });\n        setFile(newFile);\n      },\n      [fileTypes, id, maxBytes],\n    );\n\n    // For focussing of input el and updating drop UI\n    const onDragEnter = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      inputRef.current?.focus();\n    };\n\n    // For unfocussing of input el and updating drop UI\n    const onDragLeave = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      inputRef.current?.blur();\n    };\n\n    // Prevents default browser behaviour\n    const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n    // Process file when dropped into eligible area\n    const onDrop = (event: DragEvent<HTMLElement>) => {\n      event.preventDefault();\n      // Prevent reactions on dragging events that do not contain files\n      if (!event.dataTransfer.files.length) return;\n      updateFiles(event.dataTransfer.files);\n    };\n\n    // Removes input el's files, clears errors and removes file from react component\n    const resetSelection = useCallback(() => {\n      clearFileSelection();\n      setFile(undefined);\n      setInputValidation({\n        invalidFormat: false,\n        overMaxSize: false,\n      });\n    }, []);\n\n    // Updates UI based on a native file input change. Attached via useEffect below\n    const onInputChange = useCallback(() => {\n      const files = inputRef?.current?.files;\n      if (files?.length && files?.length > 0) updateFiles(files);\n      else resetSelection();\n    }, [resetSelection, updateFiles]);\n\n    useEffect(() => {\n      const ref = inputRef?.current;\n      ref?.addEventListener('change', onInputChange);\n      ref?.addEventListener('cancel', resetSelection);\n\n      return () => {\n        ref?.removeEventListener('change', onInputChange);\n        ref?.removeEventListener('cancel', resetSelection);\n      };\n    }, [onInputChange, resetSelection]);\n\n    return (\n      <RootStack spacing=\"xs\" alignX=\"stretch\">\n        <Label htmlFor={id}>\n          {label}\n          <FlexCol>\n            <Hint>\n              <div>{acceptedTypesCopy}</div>\n              <div>{maxSizeCopy}</div>\n            </Hint>\n            <DropZoneContainer\n              data-testid=\"drop-zone-container\"\n              onDrop={onDrop}\n              onDragEnter={onDragEnter}\n              onDragOver={onDragOver}\n              onDragLeave={onDragLeave}\n            >\n              <UploadCopy />\n              <input\n                ref={inputRef}\n                id={id}\n                type=\"file\"\n                accept={acceptedTypesForInputEl}\n                name={name}\n                required={required}\n                disabled={disabled}\n                {...otherProps}\n              />\n            </DropZoneContainer>\n          </FlexCol>\n        </Label>\n        <FlexCol>\n          <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n          <UploadFileErrors\n            acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n            maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n          />\n        </FlexCol>\n      </RootStack>\n    );\n  },\n);\n"],"names":["forwardRef","FileSizeUnit","useRef","useImperativeHandle","useState","InputState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","setInputElFile","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","UploadCopy","UploadedFile","UploadFileErrors"],"mappings":"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"}

package/dist/components/UploadFile/UploadFile.js

@@ -1,126 +1,137 @@
-import React__default, { forwardRef, useImperativeHandle, useState, useCallback, useEffect } from 'react';
-import { theme } from '../../theme/index.js';
-import { ReactComponent as CriticalIcon } from '../../icons/design-system/components/CriticalIcon.js';
-import { ReactComponent as LockIcon } from '../../icons/design-system/components/LockIcon.js';
+import React__default, { forwardRef, useRef, useImperativeHandle, useState, useCallback, useEffect } from 'react';
 import { DropZoneContainer } from './styled.js';
-import { FileSizeUnit, DEFAULT_MAXIMUM_MULTIPLE_FILES } from './constants.js';
+import { InputState, FileSizeUnit } from './constants.js';
 import { UploadCopy } from './components/UploadCopy/UploadCopy.js';
-import { DropCopy } from './components/DropCopy/DropCopy.js';
+import { setInputElFile } from './utils/setInputElFile/setInputElFile.js';
 import { getValidTypesString } from './utils/getValidTypesString/getValidTypesString.js';
 import { getFileSizeString } from './utils/getFileSizeString/getFileSizeString.js';
 import { getTypePropForInputEl } from './utils/getTypePropForInputEl/getTypePropForInputEl.js';
-import { RootStack, Label, Hint, Disabled, Error } from '../../hoc/withLabels/styled.js';
+import { RootStack, Label, Hint } from '../../hoc/withLabels/styled.js';
+import { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors.js';
 import { UploadedFile } from './components/UploadedFile/UploadedFile.js';
 import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
-import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
-import { useUploadFile } from './hooks/useUploadFile/useUploadFile.js';
-import { useValidateInput } from './hooks/useValidateInput/useValidateInput.js';
 
-const UploadFile = forwardRef(({ id, name, maxBytes = 1000000, format = FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, errorMessage, ...otherProps }, outerRef) => {
-    var _a, _b;
-    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile();
-    const { validationCount } = useValidateInput({
-        customErrorMessage: errorMessage,
-        inputRef,
-        fileList,
-        fileTypes,
-        maxBytes,
-    });
-    useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
-    const [isDragOver, setIsDragOver] = useState(false);
+const UploadFile = forwardRef(({ id, name, maxBytes = 1000000, format = FileSizeUnit.MB, fileTypes, label = 'Upload file', required, disabled, ...otherProps }, outerRef) => {
+    const inputRef = useRef(null);
+    useImperativeHandle(outerRef, () => inputRef.current, []);
+    const [file, setFile] = useState();
+    const [errorState, setErrorState] = useState(InputState.VALID);
+    const isInvalidFormat = errorState === InputState.INVALID_FORMAT || errorState === InputState.INVALID_FORMAT_AND_SIZE;
+    const isOverMaxSize = errorState === InputState.INVALID_SIZE || errorState === InputState.INVALID_FORMAT_AND_SIZE;
     // Computed properties based on params
     const maxSizeCopy = getFileSizeString({ maxBytes, format });
     const acceptedTypesCopy = getValidTypesString({ fileTypes });
     const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });
-    const validateMaximumFiles = useCallback((files) => {
-        if ((files === null || files === undefined ? undefined : files.length) && (files === null || files === undefined ? undefined : files.length) > maxFiles) {
-            clearFileSelection();
-            onMaxFilesExceeded === null || onMaxFilesExceeded === undefined ? undefined : onMaxFilesExceeded();
-            return false;
+    const clearFileSelection = () => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === undefined ? undefined : _a.value)
+            inputRef.current.value = '';
+    };
+    // Tracks error states within the input element itself, using preset
+    // error messages and assigns these to the input component based on the file
+    const setInputValidation = ({ overMaxSize, invalidFormat, }) => {
+        var _a;
+        let error = InputState.VALID;
+        if (invalidFormat && !overMaxSize) {
+            error = InputState.INVALID_FORMAT;
         }
-        return true;
-    }, [clearFileSelection, maxFiles, onMaxFilesExceeded]);
+        else if (!invalidFormat && overMaxSize) {
+            error = InputState.INVALID_SIZE;
+        }
+        else if (invalidFormat && overMaxSize) {
+            error = InputState.INVALID_FORMAT_AND_SIZE;
+        }
+        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.setCustomValidity(error);
+        setErrorState(error);
+    };
     // Processes file and updates the UI appropriately:
     const updateFiles = useCallback((files) => {
         if (!files.length) {
+            setInputValidation({ invalidFormat: true });
             return;
         }
-        setFileList(files);
-    }, [setFileList]);
+        const [newFile] = files;
+        const hasExceededMaxSize = newFile.size > maxBytes;
+        const [, extension] = newFile.type.split('/');
+        const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);
+        const hasInvalidFormat = !isTypeValid;
+        if (hasExceededMaxSize || hasInvalidFormat) {
+            // Empty the inputRef's read-only fileList by clearing the value attribute,
+            // since we have an invalid input.
+            clearFileSelection();
+        }
+        else {
+            // Update the files attribute of the input el, with the new file(s)
+            setInputElFile({ fileList: files, elementId: id });
+        }
+        setInputValidation({
+            invalidFormat: hasInvalidFormat,
+            overMaxSize: hasExceededMaxSize,
+        });
+        setFile(newFile);
+    }, [fileTypes, id, maxBytes]);
     // For focussing of input el and updating drop UI
     const onDragEnter = (event) => {
         var _a;
         event.preventDefault();
-        setIsDragOver(true);
         (_a = inputRef.current) === null || _a === undefined ? undefined : _a.focus();
     };
     // For unfocussing of input el and updating drop UI
     const onDragLeave = (event) => {
+        var _a;
         event.preventDefault();
-        setIsDragOver(false);
+        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.blur();
     };
     // Prevents default browser behaviour
     const onDragOver = (event) => event.preventDefault();
     // Process file when dropped into eligible area
     const onDrop = (event) => {
         event.preventDefault();
-        setIsDragOver(false);
         // Prevent reactions on dragging events that do not contain files
         if (!event.dataTransfer.files.length)
             return;
-        const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);
-        if (canUpdateFiles) {
-            updateFiles(event.dataTransfer.files);
-        }
+        updateFiles(event.dataTransfer.files);
     };
+    // Removes input el's files, clears errors and removes file from react component
+    const resetSelection = useCallback(() => {
+        clearFileSelection();
+        setFile(undefined);
+        setInputValidation({
+            invalidFormat: false,
+            overMaxSize: false,
+        });
+    }, []);
     // Updates UI based on a native file input change. Attached via useEffect below
-    const onChange = useCallback(() => {
-        var _a, _b;
-        const canUpdateFiles = validateMaximumFiles((_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.files);
-        const files = (_b = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _b === undefined ? undefined : _b.files;
-        if (canUpdateFiles && files) {
+    const onInputChange = useCallback(() => {
+        var _a;
+        const files = (_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.files;
+        if ((files === null || files === undefined ? undefined : files.length) && (files === null || files === undefined ? undefined : files.length) > 0)
             updateFiles(files);
-        }
-        else if (fileList) {
-            updateFiles(fileList);
-        }
-    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);
+        else
+            resetSelection();
+    }, [resetSelection, updateFiles]);
     useEffect(() => {
         const ref = inputRef === null || inputRef === undefined ? undefined : inputRef.current;
-        ref === null || ref === undefined ? undefined : ref.addEventListener('change', onChange);
-        ref === null || ref === undefined ? undefined : ref.addEventListener('cancel', onCancel);
+        ref === null || ref === undefined ? undefined : ref.addEventListener('change', onInputChange);
+        ref === null || ref === undefined ? undefined : ref.addEventListener('cancel', resetSelection);
         return () => {
-            ref === null || ref === undefined ? undefined : ref.removeEventListener('change', onChange);
-            ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', onCancel);
+            ref === null || ref === undefined ? undefined : ref.removeEventListener('change', onInputChange);
+            ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', resetSelection);
         };
-    }, [onChange, onCancel, inputRef]);
-    const hasUserProvidedNoFiles = !(fileList === null || fileList === undefined ? undefined : fileList.length);
+    }, [onInputChange, resetSelection]);
     return (React__default.createElement(RootStack, { spacing: "xs", alignX: "stretch" },
         React__default.createElement(Label, { htmlFor: id },
             label,
             React__default.createElement(FlexCol, null,
                 React__default.createElement(Hint, null,
-                    maxSizeCopy,
-                    React__default.createElement("br", null),
-                    acceptedTypesCopy),
-                React__default.createElement(DropZoneContainer, { hasUserProvidedNoFiles: hasUserProvidedNoFiles, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
-                    isDragOver ? React__default.createElement(DropCopy, null) : React__default.createElement(UploadCopy, null),
-                    React__default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
+                    React__default.createElement("div", null, acceptedTypesCopy),
+                    React__default.createElement("div", null, maxSizeCopy)),
+                React__default.createElement(DropZoneContainer, { "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                    React__default.createElement(UploadCopy, null),
+                    React__default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, required: required, disabled: disabled, ...otherProps })))),
         React__default.createElement(FlexCol, null,
-            ((_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.validity.valid) === false &&
-                hasUserProvidedNoFiles &&
-                !!validationCount && (React__default.createElement(FlexRow, null,
-                React__default.createElement(CriticalIcon, { width: 16, height: 16, color: theme.colors.secondary.red.base }),
-                React__default.createElement(Error, null, (_b = inputRef.current) === null || _b === undefined ? undefined : _b.validationMessage))),
-            disabledMessage && (React__default.createElement(FlexRow, { id: `${id}-disabled` },
-                React__default.createElement(LockIcon, { width: 16, height: 16, color: theme.colors.neutral.ink.light }),
-                React__default.createElement(Disabled, null, disabledMessage))),
-            !hideUploadedFiles &&
-                fileList && [
-                Array.from(fileList).map((file) => {
-                    return (React__default.createElement(UploadedFile, { key: `${file.name}`, file: file, removeFileFromList: removeFileFromList, disabled: disabled, format: format, maxBytes: maxBytes, fileTypes: fileTypes }));
-                }),
-            ])));
+            React__default.createElement(UploadedFile, { file: file, resetSelection: resetSelection, disabled: disabled }),
+            React__default.createElement(UploadFileErrors, { acceptedTypesCopy: isInvalidFormat ? acceptedTypesCopy : undefined, maxSizeCopy: isOverMaxSize ? maxSizeCopy : undefined }))));
 });
 
 export { UploadFile };