npm - @veeqo/ui - Versions diffs - 12.4.0-beta-5 → 12.4.0-beta-7 - Mend

@veeqo/ui 12.4.0-beta-5 → 12.4.0-beta-7

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

Files changed (10) hide show

package/dist/components/UploadFile/UploadFile.cjs CHANGED Viewed

@@ -25,7 +25,14 @@ 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, isDirty, ...otherProps }, outerRef) => {
     var _a;
     const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile();
-    useValidateInput.useValidateInput({ customErrorMessage: errorMessage, inputRef, fileList, fileTypes, maxBytes });
+    useValidateInput.useValidateInput({
+        customErrorMessage: errorMessage,
+        inputRef,
+        fileList,
+        fileTypes,
+        maxBytes,
+        isDirty,
+    });
     React.useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
     const [isDragOver, setIsDragOver] = React.useState(false);
     // Computed properties based on params

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

	@@ -1 +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 isDirty,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ customErrorMessage: errorMessage, inputRef, fileList, fileTypes, maxBytes });\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 isDirty={!!isDirty}\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 {isDirty && hasUserProvidedNoFiles && (\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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"}
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 isDirty,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({\n customErrorMessage: errorMessage,\n inputRef,\n fileList,\n fileTypes,\n maxBytes,\n isDirty,\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 isDirty={!!isDirty}\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 {isDirty && hasUserProvidedNoFiles && (\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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"}

package/dist/components/UploadFile/UploadFile.js CHANGED Viewed

@@ -19,7 +19,14 @@ 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, isDirty, ...otherProps }, outerRef) => {
     var _a;
     const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile();
-    useValidateInput({ customErrorMessage: errorMessage, inputRef, fileList, fileTypes, maxBytes });
+    useValidateInput({
+        customErrorMessage: errorMessage,
+        inputRef,
+        fileList,
+        fileTypes,
+        maxBytes,
+        isDirty,
+    });
     useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
     const [isDragOver, setIsDragOver] = useState(false);
     // Computed properties based on params

package/dist/components/UploadFile/UploadFile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadFile.js","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 isDirty,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ customErrorMessage: errorMessage, inputRef, fileList, fileTypes, maxBytes });\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 isDirty={!!isDirty}\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 {isDirty && hasUserProvidedNoFiles && (\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":["React"],"mappings":"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"}
1	+ {"version":3,"file":"UploadFile.js","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 isDirty,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({\n customErrorMessage: errorMessage,\n inputRef,\n fileList,\n fileTypes,\n maxBytes,\n isDirty,\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 isDirty={!!isDirty}\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 {isDirty && hasUserProvidedNoFiles && (\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":["React"],"mappings":"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"}

package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.cjs CHANGED Viewed

@@ -3,12 +3,12 @@
 var React = require('react');
 var constants = require('../../constants.cjs');
-const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, }) => {
+const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, isDirty, }) => {
     // 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 = React.useCallback(() => {
         var _a, _b, _c, _d;
-        let errorMessage = customErrorMessage || constants.InputErrorStateMessages.VALID;
+        let errorMessage = customErrorMessage !== null && customErrorMessage !== undefined ? customErrorMessage : constants.InputErrorStateMessages.VALID;
         if (!((_b = (_a = inputRef.current) === null || _a === undefined ? undefined : _a.files) === null || _b === undefined ? undefined : _b.length)) {
             (_c = inputRef.current) === null || _c === undefined ? undefined : _c.setCustomValidity(errorMessage);
             return;
@@ -59,10 +59,10 @@ const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, customError
         // If no errors, errorMessage remains VALID
         (_d = inputRef.current) === null || _d === undefined ? undefined : _d.setCustomValidity(errorMessage);
     }, [customErrorMessage, inputRef, maxBytes, fileTypes]);
-    // Validate input whenever fileList changes
+    // Validate input whenever fileList or the custom error message changes
     React.useEffect(() => {
         setInputValidation();
-    }, [fileList, setInputValidation]);
+    }, [fileList, setInputValidation, isDirty]);
 };
 exports.useValidateInput = useValidateInput;

package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useValidateInput.cjs","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\n\ntype UseValidateInputProps = {\n fileTypes: Array<AcceptedFileTypes>;\n maxBytes: number;\n fileList: FileList \| undefined;\n inputRef: React.MutableRefObject<HTMLInputElement \| null>;\n customErrorMessage?: string;\n};\n\nexport const useValidateInput = ({\n fileList,\n fileTypes,\n inputRef,\n maxBytes,\n customErrorMessage,\n}: UseValidateInputProps) => {\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 = useCallback(() => {\n let errorMessage = customErrorMessage \|\| InputErrorStateMessages.VALID;\n\n if (!inputRef.current?.files?.length) {\n inputRef.current?.setCustomValidity(errorMessage);\n return;\n }\n\n const results = {\n numberOfInvalidFormatFiles: 0,\n numberOfInvalidSizeFiles: 0,\n totalFiles: inputRef.current.files.length,\n };\n\n Array.from(inputRef.current.files).forEach((file) => {\n // Check file size\n if (file.size > maxBytes) {\n results.numberOfInvalidSizeFiles += 1;\n }\n\n // Check file type/format\n const [, extension] = file.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n if (!isTypeValid) {\n results.numberOfInvalidFormatFiles += 1;\n }\n });\n\n // Determine appropriate error message based on validation results\n const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n const isSingleFile = results.totalFiles === 1;\n\n if (hasFormatErrors && hasSizeErrors) {\n // Both format and size errors exist\n errorMessage = InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n } else if (hasFormatErrors && !hasSizeErrors) {\n // Only format errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_FORMAT;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_FORMATS;\n }\n } else if (!hasFormatErrors && hasSizeErrors) {\n // Only size errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_SIZE;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_SIZES;\n }\n }\n // If no errors, errorMessage remains VALID\n\n inputRef.current?.setCustomValidity(errorMessage);\n }, [customErrorMessage, inputRef, maxBytes, fileTypes]);\n\n // Validate input whenever fileList changes\n useEffect(() => {\n setInputValidation();\n }, [fileList, setInputValidation]);\n};\n"],"names":["useCallback","InputErrorStateMessages","useEffect"],"mappings":";;;;;~~AAWa~~,MAAA,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,kBAAkB,~~GACI~~,KAAI;;;AAG1B,IAAA,MAAM,kBAAkB,GAAGA,iBAAW,CAAC,MAAK;;~~AAC1C~~,~~QAAA,~~IAAI,YAAY,GAAG,kBAAkB,~~IAAIC~~,iCAAuB,CAAC,KAAK;AAEtE,QAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,CAAA,EAAE;YACpC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;YACjD;AACD;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,0BAA0B,EAAE,CAAC;AAC7B,YAAA,wBAAwB,EAAE,CAAC;AAC3B,YAAA,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM;SAC1C;AAED,QAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;;AAElD,YAAA,IAAI,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE;AACxB,gBAAA,OAAO,CAAC,wBAAwB,IAAI,CAAC;AACtC;;AAGD,YAAA,MAAM,GAAG,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAC1C,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;AAChB,gBAAA,OAAO,CAAC,0BAA0B,IAAI,CAAC;AACxC;AACH,SAAC,CAAC;;AAGF,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,0BAA0B,GAAG,CAAC;AAC9D,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,wBAAwB,GAAG,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,KAAK,CAAC;QAE7C,IAAI,eAAe,IAAI,aAAa,EAAE;;AAEpC,YAAA,YAAY,GAAGA,iCAAuB,CAAC,uBAAuB;AAC/D;AAAM,aAAA,IAAI,eAAe,IAAI,CAAC,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAGA,iCAAuB,CAAC,cAAc;AACtD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAGA,iCAAuB,CAAC,eAAe;AACvD;AACF;AAAM,aAAA,IAAI,CAAC,eAAe,IAAI,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAGA,iCAAuB,CAAC,YAAY;AACpD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAGA,iCAAuB,CAAC,aAAa;AACrD;AACF;;QAGD,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;KAClD,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;;IAGvDC,eAAS,CAAC,MAAK;AACb,QAAA,kBAAkB,EAAE;~~AACtB~~,~~KAAC,~~EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;~~AACpC~~;;;;"}
1	+ {"version":3,"file":"useValidateInput.cjs","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\n\ntype UseValidateInputProps = {\n fileTypes: Array<AcceptedFileTypes>;\n maxBytes: number;\n fileList: FileList \| undefined;\n inputRef: React.MutableRefObject<HTMLInputElement \| null>;\n customErrorMessage?: string;\n isDirty?: boolean;\n};\n\nexport const useValidateInput = ({\n fileList,\n fileTypes,\n inputRef,\n maxBytes,\n customErrorMessage,\n isDirty,\n}: UseValidateInputProps) => {\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 = useCallback(() => {\n let errorMessage = customErrorMessage ?? InputErrorStateMessages.VALID;\n\n if (!inputRef.current?.files?.length) {\n inputRef.current?.setCustomValidity(errorMessage);\n return;\n }\n\n const results = {\n numberOfInvalidFormatFiles: 0,\n numberOfInvalidSizeFiles: 0,\n totalFiles: inputRef.current.files.length,\n };\n\n Array.from(inputRef.current.files).forEach((file) => {\n // Check file size\n if (file.size > maxBytes) {\n results.numberOfInvalidSizeFiles += 1;\n }\n\n // Check file type/format\n const [, extension] = file.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n if (!isTypeValid) {\n results.numberOfInvalidFormatFiles += 1;\n }\n });\n\n // Determine appropriate error message based on validation results\n const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n const isSingleFile = results.totalFiles === 1;\n\n if (hasFormatErrors && hasSizeErrors) {\n // Both format and size errors exist\n errorMessage = InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n } else if (hasFormatErrors && !hasSizeErrors) {\n // Only format errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_FORMAT;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_FORMATS;\n }\n } else if (!hasFormatErrors && hasSizeErrors) {\n // Only size errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_SIZE;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_SIZES;\n }\n }\n // If no errors, errorMessage remains VALID\n\n inputRef.current?.setCustomValidity(errorMessage);\n }, [customErrorMessage, inputRef, maxBytes, fileTypes]);\n\n // Validate input whenever fileList or the custom error message changes\n useEffect(() => {\n setInputValidation();\n }, [fileList, setInputValidation, isDirty]);\n};\n"],"names":["useCallback","InputErrorStateMessages","useEffect"],"mappings":"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"}

package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ type UseValidateInputProps = {
     fileList: FileList | undefined;
     inputRef: React.MutableRefObject<HTMLInputElement | null>;
     customErrorMessage?: string;
+    isDirty?: boolean;
 };
-export declare const useValidateInput: ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, }: UseValidateInputProps) => void;
+export declare const useValidateInput: ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, isDirty, }: UseValidateInputProps) => void;
 export {};

package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { useCallback, useEffect } from 'react';
 import { InputErrorStateMessages } from '../../constants.js';
-const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, }) => {
+const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, customErrorMessage, isDirty, }) => {
     // 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 = useCallback(() => {
         var _a, _b, _c, _d;
-        let errorMessage = customErrorMessage || InputErrorStateMessages.VALID;
+        let errorMessage = customErrorMessage !== null && customErrorMessage !== undefined ? customErrorMessage : InputErrorStateMessages.VALID;
         if (!((_b = (_a = inputRef.current) === null || _a === undefined ? undefined : _a.files) === null || _b === undefined ? undefined : _b.length)) {
             (_c = inputRef.current) === null || _c === undefined ? undefined : _c.setCustomValidity(errorMessage);
             return;
@@ -57,10 +57,10 @@ const useValidateInput = ({ fileList, fileTypes, inputRef, maxBytes, customError
         // If no errors, errorMessage remains VALID
         (_d = inputRef.current) === null || _d === undefined ? undefined : _d.setCustomValidity(errorMessage);
     }, [customErrorMessage, inputRef, maxBytes, fileTypes]);
-    // Validate input whenever fileList changes
+    // Validate input whenever fileList or the custom error message changes
     useEffect(() => {
         setInputValidation();
-    }, [fileList, setInputValidation]);
+    }, [fileList, setInputValidation, isDirty]);
 };
 export { useValidateInput };

package/dist/components/UploadFile/hooks/useValidateInput/useValidateInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useValidateInput.js","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\n\ntype UseValidateInputProps = {\n fileTypes: Array<AcceptedFileTypes>;\n maxBytes: number;\n fileList: FileList \| undefined;\n inputRef: React.MutableRefObject<HTMLInputElement \| null>;\n customErrorMessage?: string;\n};\n\nexport const useValidateInput = ({\n fileList,\n fileTypes,\n inputRef,\n maxBytes,\n customErrorMessage,\n}: UseValidateInputProps) => {\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 = useCallback(() => {\n let errorMessage = customErrorMessage \|\| InputErrorStateMessages.VALID;\n\n if (!inputRef.current?.files?.length) {\n inputRef.current?.setCustomValidity(errorMessage);\n return;\n }\n\n const results = {\n numberOfInvalidFormatFiles: 0,\n numberOfInvalidSizeFiles: 0,\n totalFiles: inputRef.current.files.length,\n };\n\n Array.from(inputRef.current.files).forEach((file) => {\n // Check file size\n if (file.size > maxBytes) {\n results.numberOfInvalidSizeFiles += 1;\n }\n\n // Check file type/format\n const [, extension] = file.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n if (!isTypeValid) {\n results.numberOfInvalidFormatFiles += 1;\n }\n });\n\n // Determine appropriate error message based on validation results\n const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n const isSingleFile = results.totalFiles === 1;\n\n if (hasFormatErrors && hasSizeErrors) {\n // Both format and size errors exist\n errorMessage = InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n } else if (hasFormatErrors && !hasSizeErrors) {\n // Only format errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_FORMAT;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_FORMATS;\n }\n } else if (!hasFormatErrors && hasSizeErrors) {\n // Only size errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_SIZE;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_SIZES;\n }\n }\n // If no errors, errorMessage remains VALID\n\n inputRef.current?.setCustomValidity(errorMessage);\n }, [customErrorMessage, inputRef, maxBytes, fileTypes]);\n\n // Validate input whenever fileList changes\n useEffect(() => {\n setInputValidation();\n }, [fileList, setInputValidation]);\n};\n"],"names":[],"mappings":";;;~~AAWa~~,MAAA,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,kBAAkB,~~GACI~~,KAAI;;;AAG1B,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;;~~AAC1C~~,~~QAAA,~~IAAI,YAAY,GAAG,kBAAkB,~~IAAI~~,uBAAuB,CAAC,KAAK;AAEtE,QAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,CAAA,EAAE;YACpC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;YACjD;AACD;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,0BAA0B,EAAE,CAAC;AAC7B,YAAA,wBAAwB,EAAE,CAAC;AAC3B,YAAA,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM;SAC1C;AAED,QAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;;AAElD,YAAA,IAAI,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE;AACxB,gBAAA,OAAO,CAAC,wBAAwB,IAAI,CAAC;AACtC;;AAGD,YAAA,MAAM,GAAG,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAC1C,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;AAChB,gBAAA,OAAO,CAAC,0BAA0B,IAAI,CAAC;AACxC;AACH,SAAC,CAAC;;AAGF,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,0BAA0B,GAAG,CAAC;AAC9D,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,wBAAwB,GAAG,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,KAAK,CAAC;QAE7C,IAAI,eAAe,IAAI,aAAa,EAAE;;AAEpC,YAAA,YAAY,GAAG,uBAAuB,CAAC,uBAAuB;AAC/D;AAAM,aAAA,IAAI,eAAe,IAAI,CAAC,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAG,uBAAuB,CAAC,cAAc;AACtD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAG,uBAAuB,CAAC,eAAe;AACvD;AACF;AAAM,aAAA,IAAI,CAAC,eAAe,IAAI,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAG,uBAAuB,CAAC,YAAY;AACpD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAG,uBAAuB,CAAC,aAAa;AACrD;AACF;;QAGD,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;KAClD,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;;IAGvD,SAAS,CAAC,MAAK;AACb,QAAA,kBAAkB,EAAE;~~AACtB~~,~~KAAC,~~EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;~~AACpC~~;;;;"}
1	+ {"version":3,"file":"useValidateInput.js","sources":["../../../../../src/components/UploadFile/hooks/useValidateInput/useValidateInput.ts"],"sourcesContent":["import { useEffect, useCallback } from 'react';\nimport { AcceptedFileTypes, InputErrorStateMessages } from '../../constants';\n\ntype UseValidateInputProps = {\n fileTypes: Array<AcceptedFileTypes>;\n maxBytes: number;\n fileList: FileList \| undefined;\n inputRef: React.MutableRefObject<HTMLInputElement \| null>;\n customErrorMessage?: string;\n isDirty?: boolean;\n};\n\nexport const useValidateInput = ({\n fileList,\n fileTypes,\n inputRef,\n maxBytes,\n customErrorMessage,\n isDirty,\n}: UseValidateInputProps) => {\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 = useCallback(() => {\n let errorMessage = customErrorMessage ?? InputErrorStateMessages.VALID;\n\n if (!inputRef.current?.files?.length) {\n inputRef.current?.setCustomValidity(errorMessage);\n return;\n }\n\n const results = {\n numberOfInvalidFormatFiles: 0,\n numberOfInvalidSizeFiles: 0,\n totalFiles: inputRef.current.files.length,\n };\n\n Array.from(inputRef.current.files).forEach((file) => {\n // Check file size\n if (file.size > maxBytes) {\n results.numberOfInvalidSizeFiles += 1;\n }\n\n // Check file type/format\n const [, extension] = file.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n if (!isTypeValid) {\n results.numberOfInvalidFormatFiles += 1;\n }\n });\n\n // Determine appropriate error message based on validation results\n const hasFormatErrors = results.numberOfInvalidFormatFiles > 0;\n const hasSizeErrors = results.numberOfInvalidSizeFiles > 0;\n const isSingleFile = results.totalFiles === 1;\n\n if (hasFormatErrors && hasSizeErrors) {\n // Both format and size errors exist\n errorMessage = InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n } else if (hasFormatErrors && !hasSizeErrors) {\n // Only format errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_FORMAT;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_FORMATS;\n }\n } else if (!hasFormatErrors && hasSizeErrors) {\n // Only size errors\n if (isSingleFile) {\n errorMessage = InputErrorStateMessages.INVALID_SIZE;\n } else {\n errorMessage = InputErrorStateMessages.INVALID_SIZES;\n }\n }\n // If no errors, errorMessage remains VALID\n\n inputRef.current?.setCustomValidity(errorMessage);\n }, [customErrorMessage, inputRef, maxBytes, fileTypes]);\n\n // Validate input whenever fileList or the custom error message changes\n useEffect(() => {\n setInputValidation();\n }, [fileList, setInputValidation, isDirty]);\n};\n"],"names":[],"mappings":";;;AAYa,MAAA,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAClB,OAAO,GACe,KAAI;;;AAG1B,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAK;;QAC1C,IAAI,YAAY,GAAG,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,KAAlB,SAAA,GAAA,kBAAkB,GAAI,uBAAuB,CAAC,KAAK;AAEtE,QAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,MAAM,CAAA,EAAE;YACpC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;YACjD;AACD;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,0BAA0B,EAAE,CAAC;AAC7B,YAAA,wBAAwB,EAAE,CAAC;AAC3B,YAAA,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM;SAC1C;AAED,QAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;;AAElD,YAAA,IAAI,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE;AACxB,gBAAA,OAAO,CAAC,wBAAwB,IAAI,CAAC;AACtC;;AAGD,YAAA,MAAM,GAAG,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;YAC1C,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;YACvF,IAAI,CAAC,WAAW,EAAE;AAChB,gBAAA,OAAO,CAAC,0BAA0B,IAAI,CAAC;AACxC;AACH,SAAC,CAAC;;AAGF,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,0BAA0B,GAAG,CAAC;AAC9D,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,wBAAwB,GAAG,CAAC;AAC1D,QAAA,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,KAAK,CAAC;QAE7C,IAAI,eAAe,IAAI,aAAa,EAAE;;AAEpC,YAAA,YAAY,GAAG,uBAAuB,CAAC,uBAAuB;AAC/D;AAAM,aAAA,IAAI,eAAe,IAAI,CAAC,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAG,uBAAuB,CAAC,cAAc;AACtD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAG,uBAAuB,CAAC,eAAe;AACvD;AACF;AAAM,aAAA,IAAI,CAAC,eAAe,IAAI,aAAa,EAAE;;AAE5C,YAAA,IAAI,YAAY,EAAE;AAChB,gBAAA,YAAY,GAAG,uBAAuB,CAAC,YAAY;AACpD;AAAM,iBAAA;AACL,gBAAA,YAAY,GAAG,uBAAuB,CAAC,aAAa;AACrD;AACF;;QAGD,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,iBAAiB,CAAC,YAAY,CAAC;KAClD,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;;IAGvD,SAAS,CAAC,MAAK;AACb,QAAA,kBAAkB,EAAE;KACrB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAC7C;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "12.4.0-beta-5",
+  "version": "12.4.0-beta-7",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",