@veeqo/ui 12.5.0 → 13.0.0

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

@@ -1,9 +1,23 @@
 /// <reference types="react" />
-import { AcceptedFileTypes, FileSizeUnit } from './constants';
+import { AcceptedFileTypes, ErrorType, FileSizeUnit } from './constants';
 export interface UploadFileProps extends React.InputHTMLAttributes<HTMLInputElement> {
     id: string;
     fileTypes: Array<AcceptedFileTypes>;
     label?: string;
     format?: FileSizeUnit;
     maxBytes?: number;
+    errorMessage?: string;
+    hideUploadedFiles?: boolean;
+    onMaxFilesExceeded?: () => void;
+    maxFiles?: number;
+    disabledMessage?: string;
+    isDirty?: boolean;
 }
+export type UploadFileErrors = {
+    criticalErrors: Array<UploadFileError>;
+};
+type UploadFileError = {
+    errorType: ErrorType;
+    errorMessage: string;
+};
+export {};

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var constants = require('../../constants.cjs');
+
+function getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile, }) {
+    // both errors
+    if (hasFormatErrors && hasSizeErrors) {
+        return constants.InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;
+    }
+    // only format errors
+    if (hasFormatErrors) {
+        return isSingleFile
+            ? constants.InputErrorStateMessages.INVALID_FORMAT
+            : constants.InputErrorStateMessages.INVALID_FORMATS;
+    }
+    // only size errors
+    if (hasSizeErrors) {
+        return isSingleFile
+            ? constants.InputErrorStateMessages.INVALID_SIZE
+            : constants.InputErrorStateMessages.INVALID_SIZES;
+    }
+    // no errors
+    return constants.InputErrorStateMessages.VALID;
+}
+
+exports.getErrorMessage = getErrorMessage;
+//# sourceMappingURL=getErrorMessage.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getErrorMessage.cjs","sources":["../../../../../src/components/UploadFile/utils/getErrorMessage/getErrorMessage.ts"],"sourcesContent":["import { InputErrorStateMessages } from '../../constants';\n\ntype GetErrorMessageProps = {\n  hasFormatErrors: boolean;\n  hasSizeErrors: boolean;\n  isSingleFile: boolean;\n};\nexport function getErrorMessage({\n  hasFormatErrors,\n  hasSizeErrors,\n  isSingleFile,\n}: GetErrorMessageProps) {\n  // both errors\n  if (hasFormatErrors && hasSizeErrors) {\n    return InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n  }\n\n  // only format errors\n  if (hasFormatErrors) {\n    return isSingleFile\n      ? InputErrorStateMessages.INVALID_FORMAT\n      : InputErrorStateMessages.INVALID_FORMATS;\n  }\n\n  // only size errors\n  if (hasSizeErrors) {\n    return isSingleFile\n      ? InputErrorStateMessages.INVALID_SIZE\n      : InputErrorStateMessages.INVALID_SIZES;\n  }\n\n  // no errors\n  return InputErrorStateMessages.VALID;\n}\n"],"names":["InputErrorStateMessages"],"mappings":";;;;AAOM,SAAU,eAAe,CAAC,EAC9B,eAAe,EACf,aAAa,EACb,YAAY,GACS,EAAA;;IAErB,IAAI,eAAe,IAAI,aAAa,EAAE;QACpC,OAAOA,iCAAuB,CAAC,uBAAuB;AACvD;;AAGD,IAAA,IAAI,eAAe,EAAE;AACnB,QAAA,OAAO;cACHA,iCAAuB,CAAC;AAC1B,cAAEA,iCAAuB,CAAC,eAAe;AAC5C;;AAGD,IAAA,IAAI,aAAa,EAAE;AACjB,QAAA,OAAO;cACHA,iCAAuB,CAAC;AAC1B,cAAEA,iCAAuB,CAAC,aAAa;AAC1C;;IAGD,OAAOA,iCAAuB,CAAC,KAAK;AACtC;;;;"}

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.d.ts

@@ -0,0 +1,8 @@
+import { InputErrorStateMessages } from '../../constants';
+type GetErrorMessageProps = {
+    hasFormatErrors: boolean;
+    hasSizeErrors: boolean;
+    isSingleFile: boolean;
+};
+export declare function getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile, }: GetErrorMessageProps): InputErrorStateMessages;
+export {};

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.js

@@ -0,0 +1,25 @@
+import { InputErrorStateMessages } from '../../constants.js';
+
+function getErrorMessage({ hasFormatErrors, hasSizeErrors, isSingleFile, }) {
+    // both errors
+    if (hasFormatErrors && hasSizeErrors) {
+        return InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;
+    }
+    // only format errors
+    if (hasFormatErrors) {
+        return isSingleFile
+            ? InputErrorStateMessages.INVALID_FORMAT
+            : InputErrorStateMessages.INVALID_FORMATS;
+    }
+    // only size errors
+    if (hasSizeErrors) {
+        return isSingleFile
+            ? InputErrorStateMessages.INVALID_SIZE
+            : InputErrorStateMessages.INVALID_SIZES;
+    }
+    // no errors
+    return InputErrorStateMessages.VALID;
+}
+
+export { getErrorMessage };
+//# sourceMappingURL=getErrorMessage.js.map

package/dist/components/UploadFile/utils/getErrorMessage/getErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getErrorMessage.js","sources":["../../../../../src/components/UploadFile/utils/getErrorMessage/getErrorMessage.ts"],"sourcesContent":["import { InputErrorStateMessages } from '../../constants';\n\ntype GetErrorMessageProps = {\n  hasFormatErrors: boolean;\n  hasSizeErrors: boolean;\n  isSingleFile: boolean;\n};\nexport function getErrorMessage({\n  hasFormatErrors,\n  hasSizeErrors,\n  isSingleFile,\n}: GetErrorMessageProps) {\n  // both errors\n  if (hasFormatErrors && hasSizeErrors) {\n    return InputErrorStateMessages.INVALID_FORMAT_AND_SIZE;\n  }\n\n  // only format errors\n  if (hasFormatErrors) {\n    return isSingleFile\n      ? InputErrorStateMessages.INVALID_FORMAT\n      : InputErrorStateMessages.INVALID_FORMATS;\n  }\n\n  // only size errors\n  if (hasSizeErrors) {\n    return isSingleFile\n      ? InputErrorStateMessages.INVALID_SIZE\n      : InputErrorStateMessages.INVALID_SIZES;\n  }\n\n  // no errors\n  return InputErrorStateMessages.VALID;\n}\n"],"names":[],"mappings":";;AAOM,SAAU,eAAe,CAAC,EAC9B,eAAe,EACf,aAAa,EACb,YAAY,GACS,EAAA;;IAErB,IAAI,eAAe,IAAI,aAAa,EAAE;QACpC,OAAO,uBAAuB,CAAC,uBAAuB;AACvD;;AAGD,IAAA,IAAI,eAAe,EAAE;AACnB,QAAA,OAAO;cACH,uBAAuB,CAAC;AAC1B,cAAE,uBAAuB,CAAC,eAAe;AAC5C;;AAGD,IAAA,IAAI,aAAa,EAAE;AACjB,QAAA,OAAO;cACH,uBAAuB,CAAC;AAC1B,cAAE,uBAAuB,CAAC,aAAa;AAC1C;;IAGD,OAAO,uBAAuB,CAAC,KAAK;AACtC;;;;"}

package/dist/components/UploadFile/utils/getErrorMessage/index.d.ts

@@ -0,0 +1 @@
+export { getErrorMessage } from './getErrorMessage';

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.cjs

@@ -3,30 +3,33 @@
 var constants = require('../../constants.cjs');
 
 /**
- * Constructs a string intended to be consumed by an <input> element of type "file". This string
- * should go inside the accept property
+ * Converts a file size in bytes to a human-readable string with the specified format unit.
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000,
+ *  maxBytes: 10000000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Max size: 1 MB"
+ * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
  *
- * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
- * the returned string
+ * @param maxBytes - The file size in bytes to convert
+ * @param format - The unit format to display (KB or MB)
+ * @param baseString - Optional prefix string, defaults to "Maximum file size: "
+ * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)
+ * @returns A formatted string representing the file size
  */
-const getFileSizeString = ({ maxBytes, format, baseString }) => {
-    const base = baseString == null ? 'Max size: ' : baseString;
+const getFileSizeString = ({ maxBytes, format, baseString, digits = 2, }) => {
+    const base = baseString !== null && baseString !== undefined ? baseString : 'Maximum file size: ';
+    const getValue = (divisor) => parseFloat((maxBytes / divisor).toFixed(digits));
     switch (format) {
         case constants.FileSizeUnit.KB:
-            return `${base}${Number(maxBytes) / 1000} KB`;
+            return `${base}${getValue(1000)} KB`;
         case constants.FileSizeUnit.MB:
-            return `${base}${Number(maxBytes) / 1000000} MB`;
+            return `${base}${getValue(1000000)} MB`;
         default:
-            return `${base}${Number(maxBytes) / 1000} KB`;
+            return `${base}${getValue(1000)} KB`;
     }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"getFileSizeString.cjs","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":["import { FileSizeUnit } from '../../constants';\n\ntype GetFileSizeStringProps = {\n  maxBytes: number;\n  format: FileSizeUnit;\n  baseString?: string;\n};\n/**\n * Constructs a string intended to be consumed by an <input> element of type \"file\". This string\n * should go inside the accept property \n *\n * E.g.\n *\n * const maxSizeCopy = getFileSizeString({\n *  maxBytes: 10000,\n *  format: FileSizeUnit.MB\n * });\n *\n * Where @constant maxSizeCopy would equal \"Max size: 1 MB\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * the returned string\n */\nexport const getFileSizeString = ({ maxBytes, format, baseString }: GetFileSizeStringProps) => {\n  const base = baseString == null ? 'Max size: ' : baseString;\n  switch (format) {\n    case FileSizeUnit.KB:\n      return `${base}${Number(maxBytes) / 1000} KB`;\n    case FileSizeUnit.MB:\n      return `${base}${Number(maxBytes) / 1000000} MB`;\n    default:\n      return `${base}${Number(maxBytes) / 1000} KB`;\n  }\n};\n"],"names":["FileSizeUnit"],"mappings":";;;;AAOA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAA0B,KAAI;AAC5F,IAAA,MAAM,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,YAAY,GAAG,UAAU;AAC3D,IAAA,QAAQ,MAAM;QACZ,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;QAC/C,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAA,GAAA,CAAK;AAClD,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;AAChD;AACH;;;;"}
+{"version":3,"file":"getFileSizeString.cjs","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":["import { FileSizeUnit } from '../../constants';\n\ntype GetFileSizeStringProps = {\n  maxBytes: number;\n  format: FileSizeUnit;\n  baseString?: string;\n  digits?: number;\n};\n/**\n * Converts a file size in bytes to a human-readable string with the specified format unit.\n *\n * E.g.\n *\n * const maxSizeCopy = getFileSizeString({\n *  maxBytes: 10000000,\n *  format: FileSizeUnit.MB\n * });\n *\n * Where @constant maxSizeCopy would equal \"Maximum file size: 10 MB\"\n *\n * @param maxBytes - The file size in bytes to convert\n * @param format - The unit format to display (KB or MB)\n * @param baseString - Optional prefix string, defaults to \"Maximum file size: \"\n * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)\n * @returns A formatted string representing the file size\n */\nexport const getFileSizeString = ({\n  maxBytes,\n  format,\n  baseString,\n  digits = 2,\n}: GetFileSizeStringProps) => {\n  const base = baseString ?? 'Maximum file size: ';\n  const getValue = (divisor: number) => parseFloat((maxBytes / divisor).toFixed(digits));\n  switch (format) {\n    case FileSizeUnit.KB:\n      return `${base}${getValue(1000)} KB`;\n    case FileSizeUnit.MB:\n      return `${base}${getValue(1000000)} MB`;\n    default:\n      return `${base}${getValue(1000)} KB`;\n  }\n};\n"],"names":["FileSizeUnit"],"mappings":";;;;AAQA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,GAAG,CAAC,GACa,KAAI;IAC3B,MAAM,IAAI,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,SAAA,GAAA,UAAU,GAAI,qBAAqB;IAChD,MAAM,QAAQ,GAAG,CAAC,OAAe,KAAK,UAAU,CAAC,CAAC,QAAQ,GAAG,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;AACtF,IAAA,QAAQ,MAAM;QACZ,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,IAAI,CAAC,KAAK;QACtC,KAAKA,sBAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,OAAO,CAAC,KAAK;AACzC,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,IAAI,CAAC,KAAK;AACvC;AACH;;;;"}

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.d.ts

@@ -3,22 +3,25 @@ type GetFileSizeStringProps = {
     maxBytes: number;
     format: FileSizeUnit;
     baseString?: string;
+    digits?: number;
 };
 /**
- * Constructs a string intended to be consumed by an <input> element of type "file". This string
- * should go inside the accept property
+ * Converts a file size in bytes to a human-readable string with the specified format unit.
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000,
+ *  maxBytes: 10000000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Max size: 1 MB"
+ * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
  *
- * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
- * the returned string
+ * @param maxBytes - The file size in bytes to convert
+ * @param format - The unit format to display (KB or MB)
+ * @param baseString - Optional prefix string, defaults to "Maximum file size: "
+ * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)
+ * @returns A formatted string representing the file size
  */
-export declare const getFileSizeString: ({ maxBytes, format, baseString }: GetFileSizeStringProps) => string;
+export declare const getFileSizeString: ({ maxBytes, format, baseString, digits, }: GetFileSizeStringProps) => string;
 export {};

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.js

@@ -1,30 +1,33 @@
 import { FileSizeUnit } from '../../constants.js';
 
 /**
- * Constructs a string intended to be consumed by an <input> element of type "file". This string
- * should go inside the accept property
+ * Converts a file size in bytes to a human-readable string with the specified format unit.
  *
  * E.g.
  *
  * const maxSizeCopy = getFileSizeString({
- *  maxBytes: 10000,
+ *  maxBytes: 10000000,
  *  format: FileSizeUnit.MB
  * });
  *
- * Where @constant maxSizeCopy would equal "Max size: 1 MB"
+ * Where @constant maxSizeCopy would equal "Maximum file size: 10 MB"
  *
- * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes
- * the returned string
+ * @param maxBytes - The file size in bytes to convert
+ * @param format - The unit format to display (KB or MB)
+ * @param baseString - Optional prefix string, defaults to "Maximum file size: "
+ * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)
+ * @returns A formatted string representing the file size
  */
-const getFileSizeString = ({ maxBytes, format, baseString }) => {
-    const base = baseString == null ? 'Max size: ' : baseString;
+const getFileSizeString = ({ maxBytes, format, baseString, digits = 2, }) => {
+    const base = baseString !== null && baseString !== undefined ? baseString : 'Maximum file size: ';
+    const getValue = (divisor) => parseFloat((maxBytes / divisor).toFixed(digits));
     switch (format) {
         case FileSizeUnit.KB:
-            return `${base}${Number(maxBytes) / 1000} KB`;
+            return `${base}${getValue(1000)} KB`;
         case FileSizeUnit.MB:
-            return `${base}${Number(maxBytes) / 1000000} MB`;
+            return `${base}${getValue(1000000)} MB`;
         default:
-            return `${base}${Number(maxBytes) / 1000} KB`;
+            return `${base}${getValue(1000)} KB`;
     }
 };
 

package/dist/components/UploadFile/utils/getFileSizeString/getFileSizeString.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFileSizeString.js","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":["import { FileSizeUnit } from '../../constants';\n\ntype GetFileSizeStringProps = {\n  maxBytes: number;\n  format: FileSizeUnit;\n  baseString?: string;\n};\n/**\n * Constructs a string intended to be consumed by an <input> element of type \"file\". This string\n * should go inside the accept property \n *\n * E.g.\n *\n * const maxSizeCopy = getFileSizeString({\n *  maxBytes: 10000,\n *  format: FileSizeUnit.MB\n * });\n *\n * Where @constant maxSizeCopy would equal \"Max size: 1 MB\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * the returned string\n */\nexport const getFileSizeString = ({ maxBytes, format, baseString }: GetFileSizeStringProps) => {\n  const base = baseString == null ? 'Max size: ' : baseString;\n  switch (format) {\n    case FileSizeUnit.KB:\n      return `${base}${Number(maxBytes) / 1000} KB`;\n    case FileSizeUnit.MB:\n      return `${base}${Number(maxBytes) / 1000000} MB`;\n    default:\n      return `${base}${Number(maxBytes) / 1000} KB`;\n  }\n};\n"],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAA0B,KAAI;AAC5F,IAAA,MAAM,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,YAAY,GAAG,UAAU;AAC3D,IAAA,QAAQ,MAAM;QACZ,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;QAC/C,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAA,GAAA,CAAK;AAClD,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,GAAA,CAAK;AAChD;AACH;;;;"}
+{"version":3,"file":"getFileSizeString.js","sources":["../../../../../src/components/UploadFile/utils/getFileSizeString/getFileSizeString.ts"],"sourcesContent":["import { FileSizeUnit } from '../../constants';\n\ntype GetFileSizeStringProps = {\n  maxBytes: number;\n  format: FileSizeUnit;\n  baseString?: string;\n  digits?: number;\n};\n/**\n * Converts a file size in bytes to a human-readable string with the specified format unit.\n *\n * E.g.\n *\n * const maxSizeCopy = getFileSizeString({\n *  maxBytes: 10000000,\n *  format: FileSizeUnit.MB\n * });\n *\n * Where @constant maxSizeCopy would equal \"Maximum file size: 10 MB\"\n *\n * @param maxBytes - The file size in bytes to convert\n * @param format - The unit format to display (KB or MB)\n * @param baseString - Optional prefix string, defaults to \"Maximum file size: \"\n * @param digits - Number of decimal places to show, defaults to 2 (strips any leading zeros)\n * @returns A formatted string representing the file size\n */\nexport const getFileSizeString = ({\n  maxBytes,\n  format,\n  baseString,\n  digits = 2,\n}: GetFileSizeStringProps) => {\n  const base = baseString ?? 'Maximum file size: ';\n  const getValue = (divisor: number) => parseFloat((maxBytes / divisor).toFixed(digits));\n  switch (format) {\n    case FileSizeUnit.KB:\n      return `${base}${getValue(1000)} KB`;\n    case FileSizeUnit.MB:\n      return `${base}${getValue(1000000)} MB`;\n    default:\n      return `${base}${getValue(1000)} KB`;\n  }\n};\n"],"names":[],"mappings":";;AAQA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,GAAG,CAAC,GACa,KAAI;IAC3B,MAAM,IAAI,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,SAAA,GAAA,UAAU,GAAI,qBAAqB;IAChD,MAAM,QAAQ,GAAG,CAAC,OAAe,KAAK,UAAU,CAAC,CAAC,QAAQ,GAAG,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;AACtF,IAAA,QAAQ,MAAM;QACZ,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,IAAI,CAAC,KAAK;QACtC,KAAK,YAAY,CAAC,EAAE;YAClB,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,OAAO,CAAC,KAAK;AACzC,QAAA;YACE,OAAO,CAAA,EAAG,IAAI,CAAG,EAAA,QAAQ,CAAC,IAAI,CAAC,KAAK;AACvC;AACH;;;;"}

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.cjs

@@ -1,7 +1,5 @@
 'use strict';
 
-var constants = require('../../constants.cjs');
-
 /**
  * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
  * fileTypes list passed as parameter.
@@ -21,34 +19,22 @@ var constants = require('../../constants.cjs');
  * the returned string
  */
 const getValidTypesString = ({ fileTypes, baseString }) => {
-    let base = baseString == null ? 'Valid types: ' : baseString;
-    fileTypes.forEach((fileType, index, list) => {
-        const iterable = list.length > 1;
-        const isLast = index === list.length - 1 && iterable;
-        const isPenultimate = index === list.length - 2 && iterable;
-        if (isLast)
-            base += ' and ';
-        switch (fileType) {
-            case constants.AcceptedFileTypes.CSV:
-                base += 'CSV';
-                break;
-            case constants.AcceptedFileTypes.GIF:
-                base += 'GIF';
-                break;
-            case constants.AcceptedFileTypes.JPEG:
-                base += 'JPEG';
-                break;
-            case constants.AcceptedFileTypes.JPG:
-                base += 'JPG';
-                break;
-            case constants.AcceptedFileTypes.PNG:
-                base += 'PNG';
-                break;
-        }
-        if (!isPenultimate && !isLast && list.length > 2)
-            base += ', ';
-    });
-    return base;
+    // Remove leading dot and uppercase for display
+    const getDisplayType = (fileType) => fileType.replace(/^\./, '').toUpperCase();
+    if (!fileTypes.length)
+        return baseString !== null && baseString !== undefined ? baseString : '';
+    const displayTypes = fileTypes.map(getDisplayType);
+    let result = baseString == null ? 'Valid file types: ' : baseString;
+    if (displayTypes.length === 1) {
+        result += displayTypes[0];
+    }
+    else if (displayTypes.length === 2) {
+        result += `${displayTypes[0]} and ${displayTypes[1]}`;
+    }
+    else {
+        result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;
+    }
+    return result;
 };
 
 exports.getValidTypesString = getValidTypesString;

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

@@ -1 +1 @@
-{"version":3,"file":"getValidTypesString.cjs","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  let base = baseString == null ? 'Valid types: ' : baseString;\n  fileTypes.forEach((fileType, index, list) => {\n    const iterable = list.length > 1;\n    const isLast = index === list.length - 1 && iterable;\n    const isPenultimate = index === list.length - 2 && iterable;\n\n    if (isLast) base += ' and ';\n\n    switch (fileType) {\n      case AcceptedFileTypes.CSV:\n        base += 'CSV';\n        break;\n      case AcceptedFileTypes.GIF:\n        base += 'GIF';\n        break;\n      case AcceptedFileTypes.JPEG:\n        base += 'JPEG';\n        break;\n      case AcceptedFileTypes.JPG:\n        base += 'JPG';\n        break;\n      case AcceptedFileTypes.PNG:\n        base += 'PNG';\n        break;\n      default:\n        break;\n    }\n\n    if (!isPenultimate && !isLast && list.length > 2) base += ', ';\n  });\n  return base;\n};\n"],"names":["AcceptedFileTypes"],"mappings":";;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;AACzF,IAAA,IAAI,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,eAAe,GAAG,UAAU;IAC5D,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;QACpD,MAAM,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;AAE3D,QAAA,IAAI,MAAM;YAAE,IAAI,IAAI,OAAO;AAE3B,QAAA,QAAQ,QAAQ;YACd,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,IAAI;gBACzB,IAAI,IAAI,MAAM;gBACd;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;AAGH;QAED,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,IAAI,IAAI;AAChE,KAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"getValidTypesString.cjs","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  // Remove leading dot and uppercase for display\n  const getDisplayType = (fileType: AcceptedFileTypes) => fileType.replace(/^\\./, '').toUpperCase();\n\n  if (!fileTypes.length) return baseString ?? '';\n\n  const displayTypes = fileTypes.map(getDisplayType);\n\n  let result = baseString == null ? 'Valid file types: ' : baseString;\n\n  if (displayTypes.length === 1) {\n    result += displayTypes[0];\n  } else if (displayTypes.length === 2) {\n    result += `${displayTypes[0]} and ${displayTypes[1]}`;\n  } else {\n    result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;\n  }\n\n  return result;\n};\n"],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;;AAEzF,IAAA,MAAM,cAAc,GAAG,CAAC,QAA2B,KAAK,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE;IAEjG,IAAI,CAAC,SAAS,CAAC,MAAM;AAAE,QAAA,OAAO,UAAU,KAAV,IAAA,IAAA,UAAU,iBAAV,UAAU,GAAI,EAAE;IAE9C,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;AAElD,IAAA,IAAI,MAAM,GAAG,UAAU,IAAI,IAAI,GAAG,oBAAoB,GAAG,UAAU;AAEnE,IAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,QAAA,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC;AAC1B;AAAM,SAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,QAAA,MAAM,IAAI,CAAA,EAAG,YAAY,CAAC,CAAC,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,CAAC,CAAC,CAAA,CAAE;AACtD;AAAM,SAAA;QACL,MAAM,IAAI,CAAG,EAAA,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA,CAAE;AACjG;AAED,IAAA,OAAO,MAAM;AACf;;;;"}

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.js

@@ -1,5 +1,3 @@
-import { AcceptedFileTypes } from '../../constants.js';
-
 /**
  * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
  * fileTypes list passed as parameter.
@@ -19,34 +17,22 @@ import { AcceptedFileTypes } from '../../constants.js';
  * the returned string
  */
 const getValidTypesString = ({ fileTypes, baseString }) => {
-    let base = baseString == null ? 'Valid types: ' : baseString;
-    fileTypes.forEach((fileType, index, list) => {
-        const iterable = list.length > 1;
-        const isLast = index === list.length - 1 && iterable;
-        const isPenultimate = index === list.length - 2 && iterable;
-        if (isLast)
-            base += ' and ';
-        switch (fileType) {
-            case AcceptedFileTypes.CSV:
-                base += 'CSV';
-                break;
-            case AcceptedFileTypes.GIF:
-                base += 'GIF';
-                break;
-            case AcceptedFileTypes.JPEG:
-                base += 'JPEG';
-                break;
-            case AcceptedFileTypes.JPG:
-                base += 'JPG';
-                break;
-            case AcceptedFileTypes.PNG:
-                base += 'PNG';
-                break;
-        }
-        if (!isPenultimate && !isLast && list.length > 2)
-            base += ', ';
-    });
-    return base;
+    // Remove leading dot and uppercase for display
+    const getDisplayType = (fileType) => fileType.replace(/^\./, '').toUpperCase();
+    if (!fileTypes.length)
+        return baseString !== null && baseString !== undefined ? baseString : '';
+    const displayTypes = fileTypes.map(getDisplayType);
+    let result = baseString == null ? 'Valid file types: ' : baseString;
+    if (displayTypes.length === 1) {
+        result += displayTypes[0];
+    }
+    else if (displayTypes.length === 2) {
+        result += `${displayTypes[0]} and ${displayTypes[1]}`;
+    }
+    else {
+        result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;
+    }
+    return result;
 };
 
 export { getValidTypesString };

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.js.map

@@ -1 +1 @@
-{"version":3,"file":"getValidTypesString.js","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  let base = baseString == null ? 'Valid types: ' : baseString;\n  fileTypes.forEach((fileType, index, list) => {\n    const iterable = list.length > 1;\n    const isLast = index === list.length - 1 && iterable;\n    const isPenultimate = index === list.length - 2 && iterable;\n\n    if (isLast) base += ' and ';\n\n    switch (fileType) {\n      case AcceptedFileTypes.CSV:\n        base += 'CSV';\n        break;\n      case AcceptedFileTypes.GIF:\n        base += 'GIF';\n        break;\n      case AcceptedFileTypes.JPEG:\n        base += 'JPEG';\n        break;\n      case AcceptedFileTypes.JPG:\n        base += 'JPG';\n        break;\n      case AcceptedFileTypes.PNG:\n        base += 'PNG';\n        break;\n      default:\n        break;\n    }\n\n    if (!isPenultimate && !isLast && list.length > 2) base += ', ';\n  });\n  return base;\n};\n"],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;AACzF,IAAA,IAAI,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,eAAe,GAAG,UAAU;IAC5D,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;QACpD,MAAM,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;AAE3D,QAAA,IAAI,MAAM;YAAE,IAAI,IAAI,OAAO;AAE3B,QAAA,QAAQ,QAAQ;YACd,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,IAAI;gBACzB,IAAI,IAAI,MAAM;gBACd;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;AAGH;QAED,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,IAAI,IAAI;AAChE,KAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"getValidTypesString.js","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  // Remove leading dot and uppercase for display\n  const getDisplayType = (fileType: AcceptedFileTypes) => fileType.replace(/^\\./, '').toUpperCase();\n\n  if (!fileTypes.length) return baseString ?? '';\n\n  const displayTypes = fileTypes.map(getDisplayType);\n\n  let result = baseString == null ? 'Valid file types: ' : baseString;\n\n  if (displayTypes.length === 1) {\n    result += displayTypes[0];\n  } else if (displayTypes.length === 2) {\n    result += `${displayTypes[0]} and ${displayTypes[1]}`;\n  } else {\n    result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;\n  }\n\n  return result;\n};\n"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;;AAEzF,IAAA,MAAM,cAAc,GAAG,CAAC,QAA2B,KAAK,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE;IAEjG,IAAI,CAAC,SAAS,CAAC,MAAM;AAAE,QAAA,OAAO,UAAU,KAAV,IAAA,IAAA,UAAU,iBAAV,UAAU,GAAI,EAAE;IAE9C,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;AAElD,IAAA,IAAI,MAAM,GAAG,UAAU,IAAI,IAAI,GAAG,oBAAoB,GAAG,UAAU;AAEnE,IAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,QAAA,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC;AAC1B;AAAM,SAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,QAAA,MAAM,IAAI,CAAA,EAAG,YAAY,CAAC,CAAC,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,CAAC,CAAC,CAAA,CAAE;AACtD;AAAM,SAAA;QACL,MAAM,IAAI,CAAG,EAAA,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA,CAAE;AACjG;AAED,IAAA,OAAO,MAAM;AACf;;;;"}

package/dist/components/UploadFile/utils/index.d.ts

@@ -1,4 +1,3 @@
 export { getValidTypesString } from './getValidTypesString/getValidTypesString';
 export { getFileSizeString } from './getFileSizeString/getFileSizeString';
 export { getTypePropForInputEl } from './getTypePropForInputEl/getTypePropForInputEl';
-export { setInputElFile } from './setInputElFile/setInputElFile';

package/dist/components/UploadedFile/UploadedFile.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../theme/index.cjs');
+var Button = require('../Button/Button.cjs');
+var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var Text = require('../Text/Text.cjs');
+var Image = require('../Image/Image.cjs');
+var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var styled = require('../../hoc/withLabels/styled.cjs');
+var usePreviewImage = require('./hooks/usePreviewImage/usePreviewImage.cjs');
+var UploadedFile_module = require('./UploadedFile.module.scss.cjs');
+var useFileErrorMessages = require('./hooks/useFileErrorMessages/useFileErrorMessages.cjs');
+var getFileSizeString = require('../UploadFile/utils/getFileSizeString/getFileSizeString.cjs');
+var Skeleton = require('../Skeleton/Skeleton.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const UploadedFile = ({ file, onRemoveFile, disabled, format, maxBytes, fileTypes, isLoading, }) => {
+    const { previewSrc, shouldShowPreview } = usePreviewImage.usePreviewImage({ file });
+    const { errorMessages, hasCriticalErrors } = useFileErrorMessages.useFileErrorMessages({
+        file,
+        maxBytes,
+        fileTypes,
+    });
+    const fileSizeCopy = getFileSizeString.getFileSizeString({ maxBytes: (file === null || file === undefined ? undefined : file.size) || 0, format, baseString: '' });
+    if (isLoading) {
+        return React__default.default.createElement(Skeleton.Skeleton, { height: "40px", "aria-label": "Loading file" });
+    }
+    if (!file)
+        return null;
+    const RemoveButton = (React__default.default.createElement(Button.Button, { size: "sm", variant: "flat", onClick: () => onRemoveFile && onRemoveFile(file), iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), "aria-label": `Remove file ${file.name}`, disabled: disabled }));
+    const ErrorMessages = hasCriticalErrors && (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "flex-start" },
+        React__default.default.createElement(CriticalIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.secondary.red.base }),
+        React__default.default.createElement("div", { className: UploadedFile_module.singleLineWrapper },
+            React__default.default.createElement(styled.Error, { className: UploadedFile_module.singleLineTextWithoutFlex }, errorMessages.criticalErrors.map((error, index, array) => {
+                const isNotLast = !!(array.length > index + 1);
+                return `${error.errorMessage}${isNotLast ? ', ' : ''}`;
+            })))));
+    if (!shouldShowPreview) {
+        return (React__default.default.createElement("div", { className: hasCriticalErrors
+                ? UploadedFile_module.uploadedFileContainerCriticalError
+                : UploadedFile_module.uploadedFileContainer },
+            React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "space-between", alignItems: "center" },
+                React__default.default.createElement(FlexCol.FlexCol, { style: { flex: 1, minWidth: 0 } },
+                    React__default.default.createElement("div", { className: UploadedFile_module.standardFileTextWrapper },
+                        React__default.default.createElement(Text.Text, { className: UploadedFile_module.singleLineText, variant: "body", style: {
+                                minWidth: 0,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                            } }, file.name),
+                        React__default.default.createElement(Text.Text, { variant: "body", className: UploadedFile_module.fileSizeText, style: { color: index.theme.colors.neutral.ink.light } }, fileSizeCopy)),
+                    ErrorMessages),
+                onRemoveFile && (React__default.default.createElement("div", { style: { display: 'flex', alignItems: 'center', marginLeft: 12 } }, RemoveButton)))));
+    }
+    return (React__default.default.createElement("div", { className: hasCriticalErrors
+            ? UploadedFile_module.uploadedFileContainerCriticalError
+            : UploadedFile_module.uploadedFileContainer },
+        React__default.default.createElement(FlexRow.FlexRow, { style: { flexWrap: 'nowrap' }, justifyContent: "space-between" },
+            React__default.default.createElement(FlexCol.FlexCol, null,
+                React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", style: { flex: 1, minWidth: 0, gap: index.theme.sizes.base }, flexWrap: "nowrap" },
+                    React__default.default.createElement(Image.Image, { className: UploadedFile_module.previewImage, height: "44", width: "44", src: previewSrc }),
+                    React__default.default.createElement("div", { className: UploadedFile_module.singleLineWrapper },
+                        React__default.default.createElement(Text.Text, { className: UploadedFile_module.singleLineTextWithoutFlex, variant: "body" }, file === null || file === undefined ? undefined : file.name),
+                        React__default.default.createElement(Text.Text, { variant: "body", className: UploadedFile_module.singleLineTextWithoutFlex, style: {
+                                color: index.theme.colors.neutral.ink.light,
+                            } }, fileSizeCopy))),
+                ErrorMessages),
+            onRemoveFile && RemoveButton)));
+};
+
+exports.UploadedFile = UploadedFile;
+//# sourceMappingURL=UploadedFile.cjs.map

package/dist/components/UploadedFile/UploadedFile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedFile.cjs","sources":["../../../src/components/UploadedFile/UploadedFile.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Button } from '../Button';\nimport { CriticalIcon, CrossIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { Image } from '../Image';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Error } from '../../hoc/withLabels/styled';\nimport { usePreviewImage } from './hooks/usePreviewImage';\nimport uploadedFileStyles from './UploadedFile.module.scss';\nimport { useFileErrorMessages } from './hooks/useFileErrorMessages';\nimport { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';\nimport { getFileSizeString } from '../UploadFile/utils';\nimport { Skeleton } from '../Skeleton';\n\nexport type UploadedFileProps = {\n  file?: File | null;\n  onRemoveFile?: (file: File) => void;\n  disabled?: boolean;\n  format: FileSizeUnit;\n  maxBytes: number;\n  fileTypes: Array<AcceptedFileTypes>;\n  isLoading?: boolean;\n};\n\nexport const UploadedFile = ({\n  file,\n  onRemoveFile,\n  disabled,\n  format,\n  maxBytes,\n  fileTypes,\n  isLoading,\n}: UploadedFileProps) => {\n  const { previewSrc, shouldShowPreview } = usePreviewImage({ file });\n\n  const { errorMessages, hasCriticalErrors } = useFileErrorMessages({\n    file,\n    maxBytes,\n    fileTypes,\n  });\n\n  const fileSizeCopy = getFileSizeString({ maxBytes: file?.size || 0, format, baseString: '' });\n\n  if (isLoading) {\n    return <Skeleton height=\"40px\" aria-label=\"Loading file\" />;\n  }\n\n  if (!file) return null;\n\n  const RemoveButton = (\n    <Button\n      size=\"sm\"\n      variant=\"flat\"\n      onClick={() => onRemoveFile && onRemoveFile(file)}\n      iconSlot={<CrossIcon />}\n      aria-label={`Remove file ${file.name}`}\n      disabled={disabled}\n    />\n  );\n\n  const ErrorMessages = hasCriticalErrors && (\n    <FlexRow alignItems=\"flex-start\">\n      <CriticalIcon\n        width={theme.sizes.base}\n        height={theme.sizes.base}\n        color={theme.colors.secondary.red.base}\n      />\n      <div className={uploadedFileStyles.singleLineWrapper}>\n        <Error className={uploadedFileStyles.singleLineTextWithoutFlex}>\n          {errorMessages.criticalErrors.map((error, index, array) => {\n            const isNotLast = !!(array.length > index + 1);\n            return `${error.errorMessage}${isNotLast ? ', ' : ''}`;\n          })}\n        </Error>\n      </div>\n    </FlexRow>\n  );\n\n  if (!shouldShowPreview) {\n    return (\n      <div\n        className={\n          hasCriticalErrors\n            ? uploadedFileStyles.uploadedFileContainerCriticalError\n            : uploadedFileStyles.uploadedFileContainer\n        }\n      >\n        <FlexRow justifyContent=\"space-between\" alignItems=\"center\">\n          <FlexCol style={{ flex: 1, minWidth: 0 }}>\n            <div className={uploadedFileStyles.standardFileTextWrapper}>\n              <Text\n                className={uploadedFileStyles.singleLineText}\n                variant=\"body\"\n                style={{\n                  minWidth: 0,\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                }}\n              >\n                {file.name}\n              </Text>\n              <Text\n                variant=\"body\"\n                className={uploadedFileStyles.fileSizeText}\n                style={{ color: theme.colors.neutral.ink.light }}\n              >\n                {fileSizeCopy}\n              </Text>\n            </div>\n            {ErrorMessages}\n          </FlexCol>\n          {onRemoveFile && (\n            <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}>\n              {RemoveButton}\n            </div>\n          )}\n        </FlexRow>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={\n        hasCriticalErrors\n          ? uploadedFileStyles.uploadedFileContainerCriticalError\n          : uploadedFileStyles.uploadedFileContainer\n      }\n    >\n      <FlexRow style={{ flexWrap: 'nowrap' }} justifyContent=\"space-between\">\n        <FlexCol>\n          <FlexRow\n            alignItems=\"center\"\n            style={{ flex: 1, minWidth: 0, gap: theme.sizes.base }}\n            flexWrap=\"nowrap\"\n          >\n            <Image\n              className={uploadedFileStyles.previewImage}\n              height=\"44\"\n              width=\"44\"\n              src={previewSrc}\n            />\n            <div className={uploadedFileStyles.singleLineWrapper}>\n              <Text className={uploadedFileStyles.singleLineTextWithoutFlex} variant=\"body\">\n                {file?.name}\n              </Text>\n              <Text\n                variant=\"body\"\n                className={uploadedFileStyles.singleLineTextWithoutFlex}\n                style={{\n                  color: theme.colors.neutral.ink.light,\n                }}\n              >\n                {fileSizeCopy}\n              </Text>\n            </div>\n          </FlexRow>\n          {ErrorMessages}\n        </FlexCol>\n        {onRemoveFile && RemoveButton}\n      </FlexRow>\n    </div>\n  );\n};\n"],"names":["usePreviewImage","useFileErrorMessages","getFileSizeString","React","Skeleton","Button","CrossIcon","FlexRow","CriticalIcon","theme","uploadedFileStyles","Error","FlexCol","Text","Image"],"mappings":"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"}

package/dist/components/UploadedFile/UploadedFile.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AcceptedFileTypes, FileSizeUnit } from '../UploadFile/constants';
+export type UploadedFileProps = {
+    file?: File | null;
+    onRemoveFile?: (file: File) => void;
+    disabled?: boolean;
+    format: FileSizeUnit;
+    maxBytes: number;
+    fileTypes: Array<AcceptedFileTypes>;
+    isLoading?: boolean;
+};
+export declare const UploadedFile: ({ file, onRemoveFile, disabled, format, maxBytes, fileTypes, isLoading, }: UploadedFileProps) => React.JSX.Element | null;