@dnb/eufemia 10.69.1 → 10.70.0

package/components/upload/UploadDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadDocs.js","names":["UploadProperties","id","doc","type","status","acceptedFileTypes","filesAmountLimit","fileMaxSize","title","text","download","skeleton","AcceptedFileTypeProperties","fileType","UploadEvents","onChange","onFileDelete","onFileClick"],"sources":["../../../../src/components/upload/UploadDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const UploadProperties: PropertiesTableProps = {\n  id: {\n    doc: 'Unique id used with the useUpload hook to manage the files. Needed when wanting to connect with the useUpload hook.',\n    type: ['string', 'Function', 'Object', 'React.Context'],\n    status: 'optional',\n  },\n  acceptedFileTypes: {\n    doc: 'List of accepted file types. Either as string or [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype). When providing a list of [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype), the accepted file types will be presented in a table(see [example](/uilib/components/upload/demos/#upload-with-file-max-size-based-on-file-type)).',\n    type: ['Array<string>', 'Array<AcceptedFileType>'],\n    status: 'required',\n  },\n  filesAmountLimit: {\n    doc: 'Defines the amount of files the user can select and upload. Defaults to 100.',\n    type: 'number',\n    status: 'optional',\n  },\n  fileMaxSize: {\n    doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.',\n    type: ['number', 'false'],\n    status: 'optional',\n  },\n  title: {\n    doc: 'Custom text property. Replaces the default title. Can be disabled using `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  text: {\n    doc: 'Custom text property. Replaces the default text. Can be disabled using `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  download: {\n    doc: 'Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'Skeleton should be applied when loading content.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const AcceptedFileTypeProperties: PropertiesTableProps = {\n  fileType: {\n    doc: 'The name of the accepted file type.',\n    type: 'string',\n    status: 'required',\n  },\n  fileMaxSize: {\n    doc: 'Defines the max file size of the given file type in MB. Use either `0` or `false` to disable. If not provided, it defaults to the value of [Uploads](/uilib/components/upload/properties/#properties) `fileMaxSize` which defaults to 5 MB.',\n    type: ['number', 'false'],\n    status: 'optional',\n  },\n}\n\nexport const UploadEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`).',\n    type: 'function',\n    status: 'optional',\n  },\n  onFileDelete: {\n    doc: 'Will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onFileClick: {\n    doc: 'Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,EAAE,EAAE;IACFC,GAAG,EAAE,qHAAqH;IAC1HC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,CAAC;IACvDC,MAAM,EAAE;EACV,CAAC;EACDC,iBAAiB,EAAE;IACjBH,GAAG,EAAE,oXAAoX;IACzXC,IAAI,EAAE,CAAC,eAAe,EAAE,yBAAyB,CAAC;IAClDC,MAAM,EAAE;EACV,CAAC;EACDE,gBAAgB,EAAE;IAChBJ,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,2IAA2I;IAChJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,QAAQ,EAAE;IACRT,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMQ,0BAAgD,GAAG;EAC9DC,QAAQ,EAAE;IACRX,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,6OAA6O;IAClPC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMU,YAAkC,GAAG;EAChDC,QAAQ,EAAE;IACRb,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDY,YAAY,EAAE;IACZd,GAAG,EAAE,mGAAmG;IACxGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,WAAW,EAAE;IACXf,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"UploadDocs.js","names":["UploadProperties","id","doc","type","status","acceptedFileTypes","filesAmountLimit","fileMaxSize","title","text","download","allowDuplicates","skeleton","AcceptedFileTypeProperties","fileType","UploadEvents","onChange","onFileDelete","onFileClick"],"sources":["../../../../src/components/upload/UploadDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const UploadProperties: PropertiesTableProps = {\n  id: {\n    doc: 'Unique id used with the useUpload hook to manage the files. Needed when wanting to connect with the useUpload hook.',\n    type: ['string', 'Function', 'Object', 'React.Context'],\n    status: 'optional',\n  },\n  acceptedFileTypes: {\n    doc: 'List of accepted file types. Either as string or [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype). When providing a list of [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype), the accepted file types will be presented in a table(see [example](/uilib/components/upload/demos/#upload-with-file-max-size-based-on-file-type)).',\n    type: ['Array<string>', 'Array<AcceptedFileType>'],\n    status: 'required',\n  },\n  filesAmountLimit: {\n    doc: 'Defines the amount of files the user can select and upload. Defaults to 100.',\n    type: 'number',\n    status: 'optional',\n  },\n  fileMaxSize: {\n    doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.',\n    type: ['number', 'false'],\n    status: 'optional',\n  },\n  title: {\n    doc: 'Custom text property. Replaces the default title. Can be disabled using `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  text: {\n    doc: 'Custom text property. Replaces the default text. Can be disabled using `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  download: {\n    doc: 'Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  allowDuplicates: {\n    doc: 'Allows uploading of duplicate files. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'Skeleton should be applied when loading content.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const AcceptedFileTypeProperties: PropertiesTableProps = {\n  fileType: {\n    doc: 'The name of the accepted file type.',\n    type: 'string',\n    status: 'required',\n  },\n  fileMaxSize: {\n    doc: 'Defines the max file size of the given file type in MB. Use either `0` or `false` to disable. If not provided, it defaults to the value of [Uploads](/uilib/components/upload/properties/#properties) `fileMaxSize` which defaults to 5 MB.',\n    type: ['number', 'false'],\n    status: 'optional',\n  },\n}\n\nexport const UploadEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`).',\n    type: 'function',\n    status: 'optional',\n  },\n  onFileDelete: {\n    doc: 'Will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onFileClick: {\n    doc: 'Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,EAAE,EAAE;IACFC,GAAG,EAAE,qHAAqH;IAC1HC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,CAAC;IACvDC,MAAM,EAAE;EACV,CAAC;EACDC,iBAAiB,EAAE;IACjBH,GAAG,EAAE,oXAAoX;IACzXC,IAAI,EAAE,CAAC,eAAe,EAAE,yBAAyB,CAAC;IAClDC,MAAM,EAAE;EACV,CAAC;EACDE,gBAAgB,EAAE;IAChBJ,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,2IAA2I;IAChJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,eAAe,EAAE;IACfT,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,0BAAgD,GAAG;EAC9DC,QAAQ,EAAE;IACRZ,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,6OAA6O;IAClPC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMW,YAAkC,GAAG;EAChDC,QAAQ,EAAE;IACRd,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,YAAY,EAAE;IACZf,GAAG,EAAE,mGAAmG;IACxGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDc,WAAW,EAAE;IACXhB,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/components/upload/UploadFileList.js

@@ -15,6 +15,7 @@ function UploadFileList() {
     fileListAriaLabel,
     deleteButton,
     download,
+    allowDuplicates,
     loadingText,
     onFileDelete,
     onFileClick,
@@ -116,7 +117,8 @@ function UploadFileList() {
       onClick: onFileClick && onFileClickHandler,
       deleteButtonText: deleteButton,
       loadingText: loadingText,
-      download: download
+      download: download,
+      allowDuplicates: allowDuplicates
     });
   }));
 }

package/components/upload/UploadFileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFileList.js","names":["React","useEffect","useRef","UploadContext","UploadFileListCell","useUpload","isAsync","UploadFileList","context","useContext","id","fileListAriaLabel","deleteButton","download","loadingText","onFileDelete","onFileClick","onChange","files","setFiles","setInternalFiles","filesRef","current","length","removeFile","fileToBeRemoved","filter","fileListElement","file","updateFile","fileToBeUpdated","props","map","idIsSame","fileIsSame","_objectSpread","updateFiles","updatedFiles","handleDeleteAsync","uploadFile","isLoading","errorMessage","fileItem","error","message","handleFileClickAsync","createElement","className","index","onDeleteHandler","onFileClickHandler","key","onDelete","onClick","deleteButtonText"],"sources":["../../../../src/components/upload/UploadFileList.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { UploadFile } from './types'\nimport { UploadContext } from './UploadContext'\nimport UploadFileListCell from './UploadFileListCell'\nimport useUpload from './useUpload'\nimport { isAsync } from '../../shared/helpers/isAsync'\n\nfunction UploadFileList() {\n  const context = React.useContext(UploadContext)\n\n  const {\n    id,\n    fileListAriaLabel,\n    deleteButton,\n    download,\n    loadingText,\n    onFileDelete,\n    onFileClick,\n    onChange,\n  } = context\n\n  const { files, setFiles, setInternalFiles } = useUpload(id)\n\n  const filesRef = useRef(null)\n\n  useEffect(() => {\n    filesRef.current = files\n  }, [files])\n\n  if (files === null || files.length < 1) {\n    return null\n  }\n\n  const removeFile = (fileToBeRemoved: UploadFile) => {\n    return filesRef.current.filter(\n      (fileListElement) => fileListElement.file != fileToBeRemoved.file\n    )\n  }\n\n  const updateFile = (\n    fileToBeUpdated: UploadFile,\n    props: Partial<UploadFile>\n  ) => {\n    return filesRef.current.map((fileListElement: UploadFile) => {\n      const idIsSame =\n        fileListElement.id && fileListElement.id === fileToBeUpdated.id\n\n      const fileIsSame =\n        fileListElement.file &&\n        fileListElement.file === fileToBeUpdated.file\n\n      return idIsSame || fileIsSame\n        ? {\n            ...fileListElement,\n            ...props,\n          }\n        : fileListElement\n    })\n  }\n\n  const updateFiles = (updatedFiles: UploadFile[]) => {\n    setFiles(updatedFiles)\n    setInternalFiles(updatedFiles)\n\n    if (typeof onChange === 'function') {\n      onChange({ files: updatedFiles })\n    }\n  }\n\n  const handleDeleteAsync = async (uploadFile: UploadFile) => {\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: true,\n        errorMessage: null,\n      })\n    )\n\n    try {\n      await onFileDelete({ fileItem: uploadFile })\n      updateFiles(removeFile(uploadFile))\n    } catch (error) {\n      updateFiles(\n        updateFile(uploadFile, {\n          isLoading: false,\n          errorMessage: error.message,\n        })\n      )\n    }\n  }\n\n  const handleFileClickAsync = async (uploadFile: UploadFile) => {\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: true,\n      })\n    )\n\n    await onFileClick({ fileItem: uploadFile })\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: false,\n      })\n    )\n  }\n\n  return (\n    <ul className=\"dnb-upload__file-list\" aria-label={fileListAriaLabel}>\n      {files.map((uploadFile: UploadFile, index: number) => {\n        const onDeleteHandler = async () => {\n          if (typeof onFileDelete === 'function') {\n            if (isAsync(onFileDelete)) {\n              handleDeleteAsync(uploadFile)\n            } else {\n              onFileDelete({ fileItem: uploadFile })\n              updateFiles(removeFile(uploadFile))\n            }\n          } else {\n            updateFiles(removeFile(uploadFile))\n          }\n        }\n\n        const onFileClickHandler = async () => {\n          if (typeof onFileClick === 'function') {\n            if (isAsync(onFileClick)) {\n              handleFileClickAsync(uploadFile)\n            } else {\n              onFileClick({ fileItem: uploadFile })\n            }\n          }\n        }\n\n        return (\n          <UploadFileListCell\n            key={index}\n            id={id}\n            uploadFile={uploadFile}\n            onDelete={onDeleteHandler}\n            onClick={onFileClick && onFileClickHandler}\n            deleteButtonText={deleteButton}\n            loadingText={loadingText}\n            download={download}\n          />\n        )\n      })}\n    </ul>\n  )\n}\n\nexport default UploadFileList\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"UploadFileList.js","names":["React","useEffect","useRef","UploadContext","UploadFileListCell","useUpload","isAsync","UploadFileList","context","useContext","id","fileListAriaLabel","deleteButton","download","allowDuplicates","loadingText","onFileDelete","onFileClick","onChange","files","setFiles","setInternalFiles","filesRef","current","length","removeFile","fileToBeRemoved","filter","fileListElement","file","updateFile","fileToBeUpdated","props","map","idIsSame","fileIsSame","_objectSpread","updateFiles","updatedFiles","handleDeleteAsync","uploadFile","isLoading","errorMessage","fileItem","error","message","handleFileClickAsync","createElement","className","index","onDeleteHandler","onFileClickHandler","key","onDelete","onClick","deleteButtonText"],"sources":["../../../../src/components/upload/UploadFileList.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { UploadFile } from './types'\nimport { UploadContext } from './UploadContext'\nimport UploadFileListCell from './UploadFileListCell'\nimport useUpload from './useUpload'\nimport { isAsync } from '../../shared/helpers/isAsync'\n\nfunction UploadFileList() {\n  const context = React.useContext(UploadContext)\n\n  const {\n    id,\n    fileListAriaLabel,\n    deleteButton,\n    download,\n    allowDuplicates,\n    loadingText,\n    onFileDelete,\n    onFileClick,\n    onChange,\n  } = context\n\n  const { files, setFiles, setInternalFiles } = useUpload(id)\n\n  const filesRef = useRef(null)\n\n  useEffect(() => {\n    filesRef.current = files\n  }, [files])\n\n  if (files === null || files.length < 1) {\n    return null\n  }\n\n  const removeFile = (fileToBeRemoved: UploadFile) => {\n    return filesRef.current.filter(\n      (fileListElement) => fileListElement.file != fileToBeRemoved.file\n    )\n  }\n\n  const updateFile = (\n    fileToBeUpdated: UploadFile,\n    props: Partial<UploadFile>\n  ) => {\n    return filesRef.current.map((fileListElement: UploadFile) => {\n      const idIsSame =\n        fileListElement.id && fileListElement.id === fileToBeUpdated.id\n\n      const fileIsSame =\n        fileListElement.file &&\n        fileListElement.file === fileToBeUpdated.file\n\n      return idIsSame || fileIsSame\n        ? {\n            ...fileListElement,\n            ...props,\n          }\n        : fileListElement\n    })\n  }\n\n  const updateFiles = (updatedFiles: UploadFile[]) => {\n    setFiles(updatedFiles)\n    setInternalFiles(updatedFiles)\n\n    if (typeof onChange === 'function') {\n      onChange({ files: updatedFiles })\n    }\n  }\n\n  const handleDeleteAsync = async (uploadFile: UploadFile) => {\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: true,\n        errorMessage: null,\n      })\n    )\n\n    try {\n      await onFileDelete({ fileItem: uploadFile })\n      updateFiles(removeFile(uploadFile))\n    } catch (error) {\n      updateFiles(\n        updateFile(uploadFile, {\n          isLoading: false,\n          errorMessage: error.message,\n        })\n      )\n    }\n  }\n\n  const handleFileClickAsync = async (uploadFile: UploadFile) => {\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: true,\n      })\n    )\n\n    await onFileClick({ fileItem: uploadFile })\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: false,\n      })\n    )\n  }\n\n  return (\n    <ul className=\"dnb-upload__file-list\" aria-label={fileListAriaLabel}>\n      {files.map((uploadFile: UploadFile, index: number) => {\n        const onDeleteHandler = async () => {\n          if (typeof onFileDelete === 'function') {\n            if (isAsync(onFileDelete)) {\n              handleDeleteAsync(uploadFile)\n            } else {\n              onFileDelete({ fileItem: uploadFile })\n              updateFiles(removeFile(uploadFile))\n            }\n          } else {\n            updateFiles(removeFile(uploadFile))\n          }\n        }\n\n        const onFileClickHandler = async () => {\n          if (typeof onFileClick === 'function') {\n            if (isAsync(onFileClick)) {\n              handleFileClickAsync(uploadFile)\n            } else {\n              onFileClick({ fileItem: uploadFile })\n            }\n          }\n        }\n\n        return (\n          <UploadFileListCell\n            key={index}\n            id={id}\n            uploadFile={uploadFile}\n            onDelete={onDeleteHandler}\n            onClick={onFileClick && onFileClickHandler}\n            deleteButtonText={deleteButton}\n            loadingText={loadingText}\n            download={download}\n            allowDuplicates={allowDuplicates}\n          />\n        )\n      })}\n    </ul>\n  )\n}\n\nexport default UploadFileList\n"],"mappings":"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","ignoreList":[]}

package/components/upload/UploadFileListCell.d.ts

@@ -34,13 +34,18 @@ export type UploadFileListCellProps = {
      * Default: false
      */
     download?: boolean;
+    /**
+     * Allows uploading of duplicate files.
+     * Default: false
+     */
+    allowDuplicates?: boolean;
     /**
      * Text
      */
     loadingText: React.ReactNode;
     deleteButtonText: React.ReactNode;
 };
-declare const UploadFileListCell: ({ id, uploadFile, onDelete, onClick, loadingText, deleteButtonText, download, }: UploadFileListCellProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadFileListCell: ({ id, uploadFile, onDelete, onClick, loadingText, deleteButtonText, download, allowDuplicates, }: UploadFileListCellProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadFileListCell;
 export declare function getFileIcon(file: File, loading?: {
     isLoading: UploadFile['isLoading'];

package/components/upload/UploadFileListCell.js

@@ -13,7 +13,7 @@ import FormStatus from '../../components/FormStatus';
 import ProgressIndicator from '../../components/progress-indicator';
 import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_png_medium as png, file_jpg_medium as jpg, file_word_medium as doc, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
 import { getPreviousSibling } from '../../shared/component-helper';
-import useUpload from './useUpload';
+import useUpload, { isFileEqual } from './useUpload';
 import { getFileTypeFromExtension } from './UploadVerify';
 import UploadFileLink from './UploadFileListLink';
 export const fileExtensionImages = {
@@ -39,7 +39,8 @@ const UploadFileListCell = _ref => {
     onClick,
     loadingText,
     deleteButtonText,
-    download
+    download,
+    allowDuplicates
   } = _ref;
   const {
     file,
@@ -50,6 +51,7 @@ const UploadFileListCell = _ref => {
   const imageUrl = (file === null || file === void 0 ? void 0 : file.size) > 0 ? URL.createObjectURL(file) : null;
   const cellRef = useRef();
   const exists = useExistsHighlight(id, file);
+  const isDuplicate = !allowDuplicates && exists;
   const handleDisappearFocus = useCallback(() => {
     var _getPreviousSibling;
     const cellElement = cellRef.current;
@@ -63,7 +65,7 @@ const UploadFileListCell = _ref => {
     onDelete();
   }, [handleDisappearFocus, onDelete]);
   return React.createElement("li", {
-    className: classnames('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', exists && 'dnb-upload__file-cell--highlight'),
+    className: classnames('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', isDuplicate && 'dnb-upload__file-cell--highlight'),
     ref: cellRef
   }, React.createElement("div", {
     className: "dnb-upload__file-cell__content"
@@ -87,7 +89,8 @@ const UploadFileListCell = _ref => {
       text: file.name,
       href: imageUrl,
       download: download,
-      onClick: onClick
+      onClick: onClick,
+      bottom: 0
     }));
   }
   function getWarning() {
@@ -114,7 +117,7 @@ function useExistsHighlight(id, file) {
         exists,
         file: f
       } = _ref2;
-      return exists && f.name === file.name && f.size === file.size;
+      return exists && isFileEqual(file, f);
     });
     if (exists) {
       updateExists(true);

package/components/upload/UploadFileListCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFileListCell.js","names":["React","useCallback","useRef","classnames","Button","Icon","FormStatus","ProgressIndicator","trash","TrashIcon","exclamation_medium","ExclamationIcon","file_png_medium","png","file_jpg_medium","jpg","file_word_medium","doc","file_pdf_medium","pdf","file_xls_medium","xls","file_ppt_medium","ppt","file_csv_medium","csv","file_txt_medium","txt","file_xml_medium","xml","file_medium","file","getPreviousSibling","useUpload","getFileTypeFromExtension","UploadFileLink","fileExtensionImages","docx","odt","UploadFileListCell","_ref","_div","_FormStatus","id","uploadFile","onDelete","onClick","loadingText","deleteButtonText","download","errorMessage","isLoading","hasWarning","imageUrl","size","URL","createObjectURL","cellRef","exists","useExistsHighlight","handleDisappearFocus","_getPreviousSibling","cellElement","current","focusElement","querySelector","focus","preventScroll","onDeleteHandler","createElement","className","ref","getFileIcon","getTitle","icon","variant","icon_position","disabled","getWarning","text","name","href","top","stretch","internalFiles","updateExists","useState","timerRef","clearTimers","clearTimeout","useEffect","some","_ref2","f","setTimeout","loading","_loading$size","_Icon","iconFileType","mimeParts","type","split","Object","prototype","hasOwnProperty","call"],"sources":["../../../../src/components/upload/UploadFileListCell.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport Button from '../button/Button'\nimport Icon from '../../components/Icon'\nimport FormStatus from '../../components/FormStatus'\nimport ProgressIndicator from '../../components/progress-indicator'\n\n// Icons\nimport {\n  trash as TrashIcon,\n  exclamation_medium as ExclamationIcon,\n  file_png_medium as png,\n  file_jpg_medium as jpg,\n  file_word_medium as doc,\n  file_pdf_medium as pdf,\n  file_xls_medium as xls,\n  file_ppt_medium as ppt,\n  file_csv_medium as csv,\n  file_txt_medium as txt,\n  file_xml_medium as xml,\n  file_medium as file,\n} from '../../icons'\nimport { UploadFile, UploadFileNative } from './types'\n\n// Shared\nimport { getPreviousSibling } from '../../shared/component-helper'\nimport useUpload from './useUpload'\nimport { getFileTypeFromExtension } from './UploadVerify'\nimport UploadFileLink from './UploadFileListLink'\nimport { ProgressIndicatorAllProps } from '../progress-indicator/types'\n\n// Will be deprecated - and then default to only showing the file icon,\n// and not file icon per file extension type\nexport const fileExtensionImages = {\n  png,\n  jpg,\n  pdf,\n  doc,\n  docx: doc,\n  odt: doc,\n  xls,\n  ppt,\n  csv,\n  txt,\n  xml,\n  file,\n}\n\nexport type UploadFileListCellProps = {\n  id: string\n\n  /**\n   * Uploaded file\n   */\n  uploadFile: UploadFile | UploadFileNative\n\n  /**\n   * Calls onDelete when clicking the delete button\n   */\n  onDelete: () => void\n\n  /**\n   * Calls onClick when clicking the file name\n   */\n  onClick?: () => void\n\n  /**\n   * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.\n   * Default: false\n   */\n  download?: boolean\n\n  /**\n   * Text\n   */\n  loadingText: React.ReactNode\n  deleteButtonText: React.ReactNode\n}\n\nconst UploadFileListCell = ({\n  id,\n  uploadFile,\n  onDelete,\n  onClick,\n  loadingText,\n  deleteButtonText,\n  download,\n}: UploadFileListCellProps) => {\n  const { file, errorMessage, isLoading } = uploadFile\n  const hasWarning = errorMessage != null\n\n  const imageUrl = file?.size > 0 ? URL.createObjectURL(file) : null\n  const cellRef = useRef<HTMLLIElement>()\n  const exists = useExistsHighlight(id, file)\n\n  const handleDisappearFocus = useCallback(() => {\n    const cellElement = cellRef.current\n    const focusElement = getPreviousSibling(\n      '.dnb-upload',\n      cellElement\n    )?.querySelector('.dnb-upload__file-input-button') as HTMLButtonElement\n    focusElement?.focus({ preventScroll: true })\n  }, [cellRef])\n\n  const onDeleteHandler = useCallback(() => {\n    handleDisappearFocus()\n\n    onDelete()\n  }, [handleDisappearFocus, onDelete])\n\n  return (\n    <li\n      className={classnames(\n        'dnb-upload__file-cell',\n        hasWarning && 'dnb-upload__file-cell--warning',\n        exists && 'dnb-upload__file-cell--highlight'\n      )}\n      ref={cellRef}\n    >\n      <div className=\"dnb-upload__file-cell__content\">\n        <div className=\"dnb-upload__file-cell__content__left\">\n          {getFileIcon(file, { isLoading }, hasWarning)}\n          {getTitle()}\n        </div>\n        <div>\n          <Button\n            icon={TrashIcon}\n            variant=\"tertiary\"\n            onClick={onDeleteHandler}\n            icon_position=\"left\"\n            disabled={isLoading}\n          >\n            {deleteButtonText}\n          </Button>\n        </div>\n      </div>\n\n      {getWarning()}\n    </li>\n  )\n\n  function getTitle() {\n    return isLoading ? (\n      <div\n        className={classnames(\n          'dnb-upload__file-cell__text-container',\n          'dnb-upload__file-cell__text-container--loading'\n        )}\n      >\n        {loadingText}\n      </div>\n    ) : (\n      <div className=\"dnb-upload__file-cell__text-container\">\n        <UploadFileLink\n          text={file.name}\n          href={imageUrl}\n          download={download}\n          onClick={onClick}\n        />\n      </div>\n    )\n  }\n\n  function getWarning() {\n    return hasWarning ? (\n      <FormStatus top=\"small\" text={errorMessage} stretch />\n    ) : null\n  }\n}\n\nexport default UploadFileListCell\n\nfunction useExistsHighlight(id: string, file: File) {\n  const { internalFiles } = useUpload(id)\n  const [exists, updateExists] = React.useState(false)\n  const timerRef = React.useRef<NodeJS.Timer>()\n\n  const clearTimers = () => {\n    clearTimeout(timerRef.current)\n  }\n\n  React.useEffect(() => {\n    const exists = internalFiles.some(({ exists, file: f }) => {\n      return exists && f.name === file.name && f.size === file.size\n    })\n\n    if (exists) {\n      updateExists(true)\n      clearTimers()\n      timerRef.current = setTimeout(() => updateExists(false), 1500) // transition-duration in CSS\n    }\n\n    return clearTimers\n  }, [file, internalFiles])\n\n  return exists\n}\n\nexport function getFileIcon(\n  file: File,\n  loading?: {\n    isLoading: UploadFile['isLoading']\n    size?: ProgressIndicatorAllProps['size']\n  },\n  hasWarning?: boolean\n) {\n  if (loading?.isLoading) {\n    return <ProgressIndicator size={loading?.size ?? 'default'} />\n  }\n\n  if (hasWarning) return <Icon icon={ExclamationIcon} />\n\n  let iconFileType = getFileTypeFromExtension(file)\n\n  if (!iconFileType) {\n    const mimeParts = file.type.split('/')\n    iconFileType =\n      fileExtensionImages[mimeParts[0]] ||\n      fileExtensionImages[mimeParts[1]]\n  }\n\n  if (\n    !Object.prototype.hasOwnProperty.call(\n      fileExtensionImages,\n      iconFileType\n    )\n  ) {\n    iconFileType = 'file'\n  }\n\n  return <Icon icon={fileExtensionImages[iconFileType]} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"UploadFileListCell.js","names":["React","useCallback","useRef","classnames","Button","Icon","FormStatus","ProgressIndicator","trash","TrashIcon","exclamation_medium","ExclamationIcon","file_png_medium","png","file_jpg_medium","jpg","file_word_medium","doc","file_pdf_medium","pdf","file_xls_medium","xls","file_ppt_medium","ppt","file_csv_medium","csv","file_txt_medium","txt","file_xml_medium","xml","file_medium","file","getPreviousSibling","useUpload","isFileEqual","getFileTypeFromExtension","UploadFileLink","fileExtensionImages","docx","odt","UploadFileListCell","_ref","_div","_FormStatus","id","uploadFile","onDelete","onClick","loadingText","deleteButtonText","download","allowDuplicates","errorMessage","isLoading","hasWarning","imageUrl","size","URL","createObjectURL","cellRef","exists","useExistsHighlight","isDuplicate","handleDisappearFocus","_getPreviousSibling","cellElement","current","focusElement","querySelector","focus","preventScroll","onDeleteHandler","createElement","className","ref","getFileIcon","getTitle","icon","variant","icon_position","disabled","getWarning","text","name","href","bottom","top","stretch","internalFiles","updateExists","useState","timerRef","clearTimers","clearTimeout","useEffect","some","_ref2","f","setTimeout","loading","_loading$size","_Icon","iconFileType","mimeParts","type","split","Object","prototype","hasOwnProperty","call"],"sources":["../../../../src/components/upload/UploadFileListCell.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport Button from '../button/Button'\nimport Icon from '../../components/Icon'\nimport FormStatus from '../../components/FormStatus'\nimport ProgressIndicator from '../../components/progress-indicator'\n\n// Icons\nimport {\n  trash as TrashIcon,\n  exclamation_medium as ExclamationIcon,\n  file_png_medium as png,\n  file_jpg_medium as jpg,\n  file_word_medium as doc,\n  file_pdf_medium as pdf,\n  file_xls_medium as xls,\n  file_ppt_medium as ppt,\n  file_csv_medium as csv,\n  file_txt_medium as txt,\n  file_xml_medium as xml,\n  file_medium as file,\n} from '../../icons'\nimport { UploadFile, UploadFileNative } from './types'\n\n// Shared\nimport { getPreviousSibling } from '../../shared/component-helper'\nimport useUpload, { isFileEqual } from './useUpload'\nimport { getFileTypeFromExtension } from './UploadVerify'\nimport UploadFileLink from './UploadFileListLink'\nimport { ProgressIndicatorAllProps } from '../progress-indicator/types'\n\n// Will be deprecated - and then default to only showing the file icon,\n// and not file icon per file extension type\nexport const fileExtensionImages = {\n  png,\n  jpg,\n  pdf,\n  doc,\n  docx: doc,\n  odt: doc,\n  xls,\n  ppt,\n  csv,\n  txt,\n  xml,\n  file,\n}\n\nexport type UploadFileListCellProps = {\n  id: string\n\n  /**\n   * Uploaded file\n   */\n  uploadFile: UploadFile | UploadFileNative\n\n  /**\n   * Calls onDelete when clicking the delete button\n   */\n  onDelete: () => void\n\n  /**\n   * Calls onClick when clicking the file name\n   */\n  onClick?: () => void\n\n  /**\n   * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.\n   * Default: false\n   */\n  download?: boolean\n\n  /**\n   * Allows uploading of duplicate files.\n   * Default: false\n   */\n  allowDuplicates?: boolean\n\n  /**\n   * Text\n   */\n  loadingText: React.ReactNode\n  deleteButtonText: React.ReactNode\n}\n\nconst UploadFileListCell = ({\n  id,\n  uploadFile,\n  onDelete,\n  onClick,\n  loadingText,\n  deleteButtonText,\n  download,\n  allowDuplicates,\n}: UploadFileListCellProps) => {\n  const { file, errorMessage, isLoading } = uploadFile\n  const hasWarning = errorMessage != null\n\n  const imageUrl = file?.size > 0 ? URL.createObjectURL(file) : null\n  const cellRef = useRef<HTMLLIElement>()\n  const exists = useExistsHighlight(id, file)\n  const isDuplicate = !allowDuplicates && exists\n\n  const handleDisappearFocus = useCallback(() => {\n    const cellElement = cellRef.current\n    const focusElement = getPreviousSibling(\n      '.dnb-upload',\n      cellElement\n    )?.querySelector('.dnb-upload__file-input-button') as HTMLButtonElement\n    focusElement?.focus({ preventScroll: true })\n  }, [cellRef])\n\n  const onDeleteHandler = useCallback(() => {\n    handleDisappearFocus()\n\n    onDelete()\n  }, [handleDisappearFocus, onDelete])\n\n  return (\n    <li\n      className={classnames(\n        'dnb-upload__file-cell',\n        hasWarning && 'dnb-upload__file-cell--warning',\n        isDuplicate && 'dnb-upload__file-cell--highlight'\n      )}\n      ref={cellRef}\n    >\n      <div className=\"dnb-upload__file-cell__content\">\n        <div className=\"dnb-upload__file-cell__content__left\">\n          {getFileIcon(file, { isLoading }, hasWarning)}\n          {getTitle()}\n        </div>\n        <div>\n          <Button\n            icon={TrashIcon}\n            variant=\"tertiary\"\n            onClick={onDeleteHandler}\n            icon_position=\"left\"\n            disabled={isLoading}\n          >\n            {deleteButtonText}\n          </Button>\n        </div>\n      </div>\n\n      {getWarning()}\n    </li>\n  )\n\n  function getTitle() {\n    return isLoading ? (\n      <div\n        className={classnames(\n          'dnb-upload__file-cell__text-container',\n          'dnb-upload__file-cell__text-container--loading'\n        )}\n      >\n        {loadingText}\n      </div>\n    ) : (\n      <div className=\"dnb-upload__file-cell__text-container\">\n        <UploadFileLink\n          text={file.name}\n          href={imageUrl}\n          download={download}\n          onClick={onClick}\n          bottom={0}\n        />\n      </div>\n    )\n  }\n\n  function getWarning() {\n    return hasWarning ? (\n      <FormStatus top=\"small\" text={errorMessage} stretch />\n    ) : null\n  }\n}\n\nexport default UploadFileListCell\n\nfunction useExistsHighlight(id: string, file: File) {\n  const { internalFiles } = useUpload(id)\n  const [exists, updateExists] = React.useState(false)\n  const timerRef = React.useRef<NodeJS.Timer>()\n\n  const clearTimers = () => {\n    clearTimeout(timerRef.current)\n  }\n\n  React.useEffect(() => {\n    const exists = internalFiles.some(({ exists, file: f }) => {\n      return exists && isFileEqual(file, f)\n    })\n\n    if (exists) {\n      updateExists(true)\n      clearTimers()\n      timerRef.current = setTimeout(() => updateExists(false), 1500) // transition-duration in CSS\n    }\n\n    return clearTimers\n  }, [file, internalFiles])\n\n  return exists\n}\n\nexport function getFileIcon(\n  file: File,\n  loading?: {\n    isLoading: UploadFile['isLoading']\n    size?: ProgressIndicatorAllProps['size']\n  },\n  hasWarning?: boolean\n) {\n  if (loading?.isLoading) {\n    return <ProgressIndicator size={loading?.size ?? 'default'} />\n  }\n\n  if (hasWarning) return <Icon icon={ExclamationIcon} />\n\n  let iconFileType = getFileTypeFromExtension(file)\n\n  if (!iconFileType) {\n    const mimeParts = file.type.split('/')\n    iconFileType =\n      fileExtensionImages[mimeParts[0]] ||\n      fileExtensionImages[mimeParts[1]]\n  }\n\n  if (\n    !Object.prototype.hasOwnProperty.call(\n      fileExtensionImages,\n      iconFileType\n    )\n  ) {\n    iconFileType = 'file'\n  }\n\n  return <Icon icon={fileExtensionImages[iconFileType]} />\n}\n"],"mappings":"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","ignoreList":[]}

package/components/upload/types.d.ts

@@ -55,6 +55,11 @@ export type UploadProps = {
      * Default: false
      */
     download?: boolean;
+    /**
+     * Allows uploading of duplicate files.
+     * Default: false
+     */
+    allowDuplicates?: boolean;
     /**
      * Custom text properties
      */

package/components/upload/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/upload/types.ts"],"sourcesContent":["import React from 'react'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { LocaleProps, SpacingProps } from '../../shared/types'\nimport type { SharedStateId } from '../../shared/helpers/useSharedState'\n\nexport type UploadAcceptedFileTypes = string[]\n\nexport type UploadAcceptedFileTypesWithFileMaxSize =\n  UploadAcceptedFileTypeObject[]\n\nexport type UploadAcceptedFileTypeObject = {\n  fileType: string\n  fileMaxSize?: number | false\n}\n\nexport type UploadProps = {\n  /**\n   * unique id used with the useUpload hook to manage the files\n   */\n  id?: SharedStateId\n\n  /**\n   * list of accepted file types.\n   */\n  acceptedFileTypes:\n    | UploadAcceptedFileTypes\n    | UploadAcceptedFileTypesWithFileMaxSize\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Defines the amount of files the user can select and upload\n   * Default: 100\n   */\n  filesAmountLimit?: number\n\n  /**\n   * Defines the max file size of each file in MB. Use either `0` or `false` to disable.\n   * Default: 5 MB\n   */\n  fileMaxSize?: number | false\n\n  /**\n   * will be called on `files` changes made by the user. Access the files with `{ files }`.\n   */\n  onChange?: ({ files }: { files: Array<UploadFile> }) => void\n\n  /**\n   * will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.\n   */\n  onFileDelete?: ({\n    fileItem,\n  }: {\n    fileItem: UploadFile\n  }) => void | Promise<void>\n\n  /**\n   * Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`.\n   */\n  onFileClick?: ({\n    fileItem,\n  }: {\n    fileItem: UploadFile\n  }) => void | Promise<void>\n\n  /**\n   * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.\n   * Default: false\n   */\n  download?: boolean\n\n  /**\n   * Custom text properties\n   */\n  title?: React.ReactNode\n  text?: React.ReactNode\n  fileTypeTableCaption?: React.ReactNode\n  fileTypeDescription?: React.ReactNode\n  fileSizeDescription?: React.ReactNode\n  fileAmountDescription?: React.ReactNode\n  fileSizeContent?: React.ReactNode\n  buttonText?: React.ReactNode\n  errorLargeFile?: React.ReactNode\n  errorUnsupportedFile?: React.ReactNode\n  errorAmountLimit?: React.ReactNode\n  loadingText?: React.ReactNode\n  deleteButton?: React.ReactNode\n  fileListAriaLabel?: string\n  children?: React.ReactNode\n}\n\nexport type UploadAllProps = UploadProps &\n  SpacingProps &\n  LocaleProps &\n  Omit<React.HTMLProps<HTMLElement>, 'onChange' | 'title'>\n\nexport type UploadContextProps = {\n  id?: string\n  onInputUpload: (files: Array<UploadFileNative>) => void\n} & Partial<UploadAllProps>\n\nexport type UploadFile = {\n  file: File\n  id: string\n  exists: boolean\n  isLoading?: boolean\n  errorMessage?: React.ReactNode\n}\n\nexport type UploadFileNative = Omit<UploadFile, 'id' | 'exists'> &\n  Partial<Pick<UploadFile, 'id' | 'exists'>>\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/upload/types.ts"],"sourcesContent":["import React from 'react'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { LocaleProps, SpacingProps } from '../../shared/types'\nimport type { SharedStateId } from '../../shared/helpers/useSharedState'\n\nexport type UploadAcceptedFileTypes = string[]\n\nexport type UploadAcceptedFileTypesWithFileMaxSize =\n  UploadAcceptedFileTypeObject[]\n\nexport type UploadAcceptedFileTypeObject = {\n  fileType: string\n  fileMaxSize?: number | false\n}\n\nexport type UploadProps = {\n  /**\n   * unique id used with the useUpload hook to manage the files\n   */\n  id?: SharedStateId\n\n  /**\n   * list of accepted file types.\n   */\n  acceptedFileTypes:\n    | UploadAcceptedFileTypes\n    | UploadAcceptedFileTypesWithFileMaxSize\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * Defines the amount of files the user can select and upload\n   * Default: 100\n   */\n  filesAmountLimit?: number\n\n  /**\n   * Defines the max file size of each file in MB. Use either `0` or `false` to disable.\n   * Default: 5 MB\n   */\n  fileMaxSize?: number | false\n\n  /**\n   * will be called on `files` changes made by the user. Access the files with `{ files }`.\n   */\n  onChange?: ({ files }: { files: Array<UploadFile> }) => void\n\n  /**\n   * will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.\n   */\n  onFileDelete?: ({\n    fileItem,\n  }: {\n    fileItem: UploadFile\n  }) => void | Promise<void>\n\n  /**\n   * Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`.\n   */\n  onFileClick?: ({\n    fileItem,\n  }: {\n    fileItem: UploadFile\n  }) => void | Promise<void>\n\n  /**\n   * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.\n   * Default: false\n   */\n  download?: boolean\n\n  /**\n   * Allows uploading of duplicate files.\n   * Default: false\n   */\n  allowDuplicates?: boolean\n\n  /**\n   * Custom text properties\n   */\n  title?: React.ReactNode\n  text?: React.ReactNode\n  fileTypeTableCaption?: React.ReactNode\n  fileTypeDescription?: React.ReactNode\n  fileSizeDescription?: React.ReactNode\n  fileAmountDescription?: React.ReactNode\n  fileSizeContent?: React.ReactNode\n  buttonText?: React.ReactNode\n  errorLargeFile?: React.ReactNode\n  errorUnsupportedFile?: React.ReactNode\n  errorAmountLimit?: React.ReactNode\n  loadingText?: React.ReactNode\n  deleteButton?: React.ReactNode\n  fileListAriaLabel?: string\n  children?: React.ReactNode\n}\n\nexport type UploadAllProps = UploadProps &\n  SpacingProps &\n  LocaleProps &\n  Omit<React.HTMLProps<HTMLElement>, 'onChange' | 'title'>\n\nexport type UploadContextProps = {\n  id?: string\n  onInputUpload: (files: Array<UploadFileNative>) => void\n} & Partial<UploadAllProps>\n\nexport type UploadFile = {\n  file: File\n  id: string\n  exists: boolean\n  isLoading?: boolean\n  errorMessage?: React.ReactNode\n}\n\nexport type UploadFileNative = Omit<UploadFile, 'id' | 'exists'> &\n  Partial<Pick<UploadFile, 'id' | 'exists'>>\n"],"mappings":"","ignoreList":[]}

package/components/upload/useUpload.d.ts

@@ -10,4 +10,5 @@ export type useUploadReturn = {
  * Use together with Upload with the same id to manage the files from outside the component.
  */
 declare function useUpload(id: UploadProps['id']): useUploadReturn;
+export declare const isFileEqual: (fileA: File, fileB: File) => boolean;
 export default useUpload;

package/components/upload/useUpload.js

@@ -23,7 +23,7 @@ function useUpload(id) {
       let {
         file: f
       } = _ref;
-      return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
+      return isFileEqual(file, f);
     });
   }, [files]);
   return {
@@ -34,5 +34,11 @@ function useUpload(id) {
     getExistingFile
   };
 }
+export const isFileEqual = (fileA, fileB) => {
+  const compareExistingProperty = function (a, b, property) {
+    return a && property in a && b && property in b && (a[property] === 0 || b[property] === 0 || a[property] === b[property]);
+  };
+  return fileA.name === fileB.name && compareExistingProperty(fileA, fileB, 'size') && compareExistingProperty(fileA, fileB, 'lastModified');
+};
 export default useUpload;
 //# sourceMappingURL=useUpload.js.map

package/components/upload/useUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUpload.js","names":["useCallback","useMemo","useSharedState","useUpload","id","data","extend","setFiles","files","setInternalFiles","internalFiles","getExistingFile","file","fileItems","arguments","length","undefined","find","_ref","f","name","size","lastModified"],"sources":["../../../../src/components/upload/useUpload.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { useSharedState } from '../../shared/helpers/useSharedState'\nimport type { UploadFile, UploadFileNative, UploadProps } from './types'\n\nexport type useUploadReturn = {\n  files: Array<UploadFile>\n  setFiles: (files: Array<UploadFile | UploadFileNative>) => void\n  internalFiles: Array<UploadFile>\n  setInternalFiles: (files: Array<UploadFile>) => void\n  getExistingFile: (\n    file: File,\n    fileItems?: Array<UploadFile>\n  ) => UploadFile\n}\n\n/**\n * Use together with Upload with the same id to manage the files from outside the component.\n */\nfunction useUpload(id: UploadProps['id']): useUploadReturn {\n  const { data, extend } = useSharedState<{\n    files?: Array<UploadFile>\n    internalFiles?: Array<UploadFile>\n  }>(id)\n\n  const setFiles = useCallback(\n    (files: Array<UploadFile>) => {\n      extend({ files })\n    },\n    [extend]\n  )\n\n  const setInternalFiles = useCallback(\n    (internalFiles: Array<UploadFile>) => {\n      extend({ internalFiles })\n    },\n    [extend]\n  )\n\n  const files = useMemo(() => data?.files || [], [data?.files])\n  const internalFiles = useMemo(\n    () => data?.internalFiles || [],\n    [data?.internalFiles]\n  )\n\n  const getExistingFile = useCallback(\n    (file: File, fileItems: Array<UploadFile> = files) => {\n      return fileItems.find(({ file: f }) => {\n        return (\n          f.name === file.name &&\n          f.size === file.size &&\n          f.lastModified === file.lastModified\n        )\n      })\n    },\n    [files]\n  )\n\n  return {\n    files,\n    setFiles,\n    internalFiles,\n    setInternalFiles,\n    getExistingFile,\n  }\n}\n\nexport default useUpload\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,cAAc,QAAQ,qCAAqC;AAiBpE,SAASC,SAASA,CAACC,EAAqB,EAAmB;EACzD,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGJ,cAAc,CAGpCE,EAAE,CAAC;EAEN,MAAMG,QAAQ,GAAGP,WAAW,CACzBQ,KAAwB,IAAK;IAC5BF,MAAM,CAAC;MAAEE;IAAM,CAAC,CAAC;EACnB,CAAC,EACD,CAACF,MAAM,CACT,CAAC;EAED,MAAMG,gBAAgB,GAAGT,WAAW,CACjCU,aAAgC,IAAK;IACpCJ,MAAM,CAAC;MAAEI;IAAc,CAAC,CAAC;EAC3B,CAAC,EACD,CAACJ,MAAM,CACT,CAAC;EAED,MAAME,KAAK,GAAGP,OAAO,CAAC,MAAM,CAAAI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,KAAI,EAAE,EAAE,CAACH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,CAAC,CAAC;EAC7D,MAAME,aAAa,GAAGT,OAAO,CAC3B,MAAM,CAAAI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,KAAI,EAAE,EAC/B,CAACL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,CACtB,CAAC;EAED,MAAMC,eAAe,GAAGX,WAAW,CACjC,UAACY,IAAU,EAA2C;IAAA,IAAzCC,SAA4B,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,KAAK;IAC/C,OAAOK,SAAS,CAACI,IAAI,CAACC,IAAA,IAAiB;MAAA,IAAhB;QAAEN,IAAI,EAAEO;MAAE,CAAC,GAAAD,IAAA;MAChC,OACEC,CAAC,CAACC,IAAI,KAAKR,IAAI,CAACQ,IAAI,IACpBD,CAAC,CAACE,IAAI,KAAKT,IAAI,CAACS,IAAI,IACpBF,CAAC,CAACG,YAAY,KAAKV,IAAI,CAACU,YAAY;IAExC,CAAC,CAAC;EACJ,CAAC,EACD,CAACd,KAAK,CACR,CAAC;EAED,OAAO;IACLA,KAAK;IACLD,QAAQ;IACRG,aAAa;IACbD,gBAAgB;IAChBE;EACF,CAAC;AACH;AAEA,eAAeR,SAAS","ignoreList":[]}
+{"version":3,"file":"useUpload.js","names":["useCallback","useMemo","useSharedState","useUpload","id","data","extend","setFiles","files","setInternalFiles","internalFiles","getExistingFile","file","fileItems","arguments","length","undefined","find","_ref","f","isFileEqual","fileA","fileB","compareExistingProperty","a","b","property","name"],"sources":["../../../../src/components/upload/useUpload.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { useSharedState } from '../../shared/helpers/useSharedState'\nimport type { UploadFile, UploadFileNative, UploadProps } from './types'\n\nexport type useUploadReturn = {\n  files: Array<UploadFile>\n  setFiles: (files: Array<UploadFile | UploadFileNative>) => void\n  internalFiles: Array<UploadFile>\n  setInternalFiles: (files: Array<UploadFile>) => void\n  getExistingFile: (\n    file: File,\n    fileItems?: Array<UploadFile>\n  ) => UploadFile\n}\n\n/**\n * Use together with Upload with the same id to manage the files from outside the component.\n */\nfunction useUpload(id: UploadProps['id']): useUploadReturn {\n  const { data, extend } = useSharedState<{\n    files?: Array<UploadFile>\n    internalFiles?: Array<UploadFile>\n  }>(id)\n\n  const setFiles = useCallback(\n    (files: Array<UploadFile>) => {\n      extend({ files })\n    },\n    [extend]\n  )\n\n  const setInternalFiles = useCallback(\n    (internalFiles: Array<UploadFile>) => {\n      extend({ internalFiles })\n    },\n    [extend]\n  )\n\n  const files = useMemo(() => data?.files || [], [data?.files])\n  const internalFiles = useMemo(\n    () => data?.internalFiles || [],\n    [data?.internalFiles]\n  )\n\n  const getExistingFile = useCallback(\n    (file: File, fileItems: Array<UploadFile> = files) => {\n      return fileItems.find(({ file: f }) => {\n        return isFileEqual(file, f)\n      })\n    },\n    [files]\n  )\n\n  return {\n    files,\n    setFiles,\n    internalFiles,\n    setInternalFiles,\n    getExistingFile,\n  }\n}\n\nexport const isFileEqual = (fileA: File, fileB: File): boolean => {\n  const compareExistingProperty = function (\n    a: File,\n    b: File,\n    property: string\n  ) {\n    return (\n      a &&\n      property in a &&\n      b &&\n      property in b &&\n      (a[property] === 0 || // If value is 0, which is default when not provided, we can't say whether the file is equal or not, so we assume they are.\n        b[property] === 0 || // If value is 0, which is default when not provided, we can't say whether the file is equal or not, so we assume they are.\n        a[property] === b[property])\n    )\n  }\n  return (\n    fileA.name === fileB.name &&\n    compareExistingProperty(fileA, fileB, 'size') &&\n    compareExistingProperty(fileA, fileB, 'lastModified')\n  )\n}\n\nexport default useUpload\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,cAAc,QAAQ,qCAAqC;AAiBpE,SAASC,SAASA,CAACC,EAAqB,EAAmB;EACzD,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGJ,cAAc,CAGpCE,EAAE,CAAC;EAEN,MAAMG,QAAQ,GAAGP,WAAW,CACzBQ,KAAwB,IAAK;IAC5BF,MAAM,CAAC;MAAEE;IAAM,CAAC,CAAC;EACnB,CAAC,EACD,CAACF,MAAM,CACT,CAAC;EAED,MAAMG,gBAAgB,GAAGT,WAAW,CACjCU,aAAgC,IAAK;IACpCJ,MAAM,CAAC;MAAEI;IAAc,CAAC,CAAC;EAC3B,CAAC,EACD,CAACJ,MAAM,CACT,CAAC;EAED,MAAME,KAAK,GAAGP,OAAO,CAAC,MAAM,CAAAI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,KAAI,EAAE,EAAE,CAACH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,CAAC,CAAC;EAC7D,MAAME,aAAa,GAAGT,OAAO,CAC3B,MAAM,CAAAI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,KAAI,EAAE,EAC/B,CAACL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,CACtB,CAAC;EAED,MAAMC,eAAe,GAAGX,WAAW,CACjC,UAACY,IAAU,EAA2C;IAAA,IAAzCC,SAA4B,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,KAAK;IAC/C,OAAOK,SAAS,CAACI,IAAI,CAACC,IAAA,IAAiB;MAAA,IAAhB;QAAEN,IAAI,EAAEO;MAAE,CAAC,GAAAD,IAAA;MAChC,OAAOE,WAAW,CAACR,IAAI,EAAEO,CAAC,CAAC;IAC7B,CAAC,CAAC;EACJ,CAAC,EACD,CAACX,KAAK,CACR,CAAC;EAED,OAAO;IACLA,KAAK;IACLD,QAAQ;IACRG,aAAa;IACbD,gBAAgB;IAChBE;EACF,CAAC;AACH;AAEA,OAAO,MAAMS,WAAW,GAAGA,CAACC,KAAW,EAAEC,KAAW,KAAc;EAChE,MAAMC,uBAAuB,GAAG,SAAAA,CAC9BC,CAAO,EACPC,CAAO,EACPC,QAAgB,EAChB;IACA,OACEF,CAAC,IACDE,QAAQ,IAAIF,CAAC,IACbC,CAAC,IACDC,QAAQ,IAAID,CAAC,KACZD,CAAC,CAACE,QAAQ,CAAC,KAAK,CAAC,IAChBD,CAAC,CAACC,QAAQ,CAAC,KAAK,CAAC,IACjBF,CAAC,CAACE,QAAQ,CAAC,KAAKD,CAAC,CAACC,QAAQ,CAAC,CAAC;EAElC,CAAC;EACD,OACEL,KAAK,CAACM,IAAI,KAAKL,KAAK,CAACK,IAAI,IACzBJ,uBAAuB,CAACF,KAAK,EAAEC,KAAK,EAAE,MAAM,CAAC,IAC7CC,uBAAuB,CAACF,KAAK,EAAEC,KAAK,EAAE,cAAc,CAAC;AAEzD,CAAC;AAED,eAAenB,SAAS","ignoreList":[]}

package/components/visually-hidden/VisuallyHiddenDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const VisuallyHiddenProperties: PropertiesTableProps;

package/components/visually-hidden/VisuallyHiddenDocs.js

@@ -0,0 +1,13 @@
+export const VisuallyHiddenProperties = {
+  focusable: {
+    doc: 'Set to `true` to hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user) root. Defaults to `false`.',
+    type: ['boolean'],
+    status: 'optional'
+  },
+  element: {
+    doc: 'Custom root HTML element for the component. Defaults to `<span>`.',
+    type: ['string', 'React.Element'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=VisuallyHiddenDocs.js.map

package/components/visually-hidden/VisuallyHiddenDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHiddenDocs.js","names":["VisuallyHiddenProperties","focusable","doc","type","status","element"],"sources":["../../../../src/components/visually-hidden/VisuallyHiddenDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const VisuallyHiddenProperties: PropertiesTableProps = {\n  focusable: {\n    doc: 'Set to `true` to hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user) root. Defaults to `false`.',\n    type: ['boolean'],\n    status: 'optional',\n  },\n  element: {\n    doc: 'Custom root HTML element for the component. Defaults to `<span>`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,wBAA8C,GAAG;EAC5DC,SAAS,EAAE;IACTC,GAAG,EAAE,4IAA4I;IACjJC,IAAI,EAAE,CAAC,SAAS,CAAC;IACjBC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/es/components/aria-live/AriaLiveDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const AriaLiveProperties: PropertiesTableProps;

package/es/components/aria-live/AriaLiveDocs.js

@@ -0,0 +1,48 @@
+export const AriaLiveProperties = {
+  variant: {
+    doc: 'Can be `text` for text messages or `content` for whole application content. Defaults to `text`.',
+    type: ['string'],
+    status: 'optional'
+  },
+  priority: {
+    doc: 'Priority of the announcement. Can be `low` or `high`. Defaults to `low`.',
+    type: ['string'],
+    status: 'optional'
+  },
+  delay: {
+    doc: 'Delay in milliseconds before the announcement is made. Defaults to `1000`.',
+    type: ['number'],
+    status: 'optional'
+  },
+  disabled: {
+    doc: 'If `true`, the announcement will not be made. Defaults to `false`.',
+    type: ['boolean'],
+    status: 'optional'
+  },
+  atomic: {
+    doc: 'If `true`, assistive technologies will present the entire region as a whole. If `false`, only additions will be announced.',
+    type: ['boolean'],
+    status: 'optional'
+  },
+  politeness: {
+    doc: 'The politeness setting for the announcement. Can be `polite` or `assertive`.',
+    type: ['string'],
+    status: 'optional'
+  },
+  relevant: {
+    doc: 'A space-separated list of the types of changes that should be announced. Can be `additions`, `removals`, `text`, or `all`.',
+    type: ['string'],
+    status: 'optional'
+  },
+  showAnnouncement: {
+    doc: 'Whether to show the children or not. Defaults to `false`.',
+    type: ['boolean'],
+    status: 'optional'
+  },
+  children: {
+    doc: 'The content that will be announced to the user.',
+    type: ['ReactNode'],
+    status: 'required'
+  }
+};
+//# sourceMappingURL=AriaLiveDocs.js.map

package/es/components/aria-live/AriaLiveDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaLiveDocs.js","names":["AriaLiveProperties","variant","doc","type","status","priority","delay","disabled","atomic","politeness","relevant","showAnnouncement","children"],"sources":["../../../../src/components/aria-live/AriaLiveDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const AriaLiveProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Can be `text` for text messages or `content` for whole application content. Defaults to `text`.',\n    type: ['string'],\n    status: 'optional',\n  },\n  priority: {\n    doc: 'Priority of the announcement. Can be `low` or `high`. Defaults to `low`.',\n    type: ['string'],\n    status: 'optional',\n  },\n  delay: {\n    doc: 'Delay in milliseconds before the announcement is made. Defaults to `1000`.',\n    type: ['number'],\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'If `true`, the announcement will not be made. Defaults to `false`.',\n    type: ['boolean'],\n    status: 'optional',\n  },\n  atomic: {\n    doc: 'If `true`, assistive technologies will present the entire region as a whole. If `false`, only additions will be announced.',\n    type: ['boolean'],\n    status: 'optional',\n  },\n  politeness: {\n    doc: 'The politeness setting for the announcement. Can be `polite` or `assertive`.',\n    type: ['string'],\n    status: 'optional',\n  },\n  relevant: {\n    doc: 'A space-separated list of the types of changes that should be announced. Can be `additions`, `removals`, `text`, or `all`.',\n    type: ['string'],\n    status: 'optional',\n  },\n  showAnnouncement: {\n    doc: 'Whether to show the children or not. Defaults to `false`.',\n    type: ['boolean'],\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content that will be announced to the user.',\n    type: ['ReactNode'],\n    status: 'required',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,kBAAwC,GAAG;EACtDC,OAAO,EAAE;IACPC,GAAG,EAAE,iGAAiG;IACtGC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0EAA0E;IAC/EC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,4EAA4E;IACjFC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,CAAC,SAAS,CAAC;IACjBC,MAAM,EAAE;EACV,CAAC;EACDI,MAAM,EAAE;IACNN,GAAG,EAAE,4HAA4H;IACjIC,IAAI,EAAE,CAAC,SAAS,CAAC;IACjBC,MAAM,EAAE;EACV,CAAC;EACDK,UAAU,EAAE;IACVP,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,4HAA4H;IACjIC,IAAI,EAAE,CAAC,QAAQ,CAAC;IAChBC,MAAM,EAAE;EACV,CAAC;EACDO,gBAAgB,EAAE;IAChBT,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,CAAC,SAAS,CAAC;IACjBC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,CAAC,WAAW,CAAC;IACnBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/es/components/avatar/Avatar.d.ts

@@ -53,6 +53,16 @@ export interface AvatarProps extends Omit<React.HTMLProps<HTMLElement>, 'size'>
      * Default: null
      */
     hasLabel?: boolean;
+    /**
+     * Define a custom background color, instead of a variant. Use a Eufemia color.
+     * Default: undefined
+     */
+    backgroundColor?: string;
+    /**
+     * Define a custom color to compliment the backgroundColor. Use a Eufemia color.
+     * Default: undefined
+     */
+    color?: string;
 }
 export declare const defaultProps: {
     size: string;

package/es/components/avatar/Avatar.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps", "hasLabel"];
+const _excluded = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps", "hasLabel", "backgroundColor", "color"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -34,7 +34,9 @@ const Avatar = localProps => {
       variant,
       src,
       imgProps,
-      hasLabel
+      hasLabel,
+      backgroundColor,
+      color
     } = allProps,
     props = _objectWithoutProperties(allProps, _excluded);
   let children = null;
@@ -59,12 +61,24 @@ const Avatar = localProps => {
     warn(`Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
   }
   validateDOMAttributes(allProps, props);
+  const style = _objectSpread({
+    '--background-color': getColor(backgroundColor),
+    '--color': getColor(color)
+  }, props === null || props === void 0 ? void 0 : props.style);
   return React.createElement("span", _extends({
     className: classnames(`dnb-avatar dnb-avatar--${variant || 'primary'} dnb-avatar--size-${size || 'medium'}`, skeletonClasses, spacingClasses, className)
-  }, props), childrenIsString && React.createElement("span", {
+  }, props, {
+    style: style
+  }), childrenIsString && React.createElement("span", {
     className: "dnb-sr-only"
   }, childrenProp), children);
 };
+function getColor(value) {
+  if (String(value).includes('--')) {
+    return value;
+  }
+  return value ? !/#|var/.test(value) ? `var(--color-${value})` : value : undefined;
+}
 Avatar.Group = AvatarGroup;
 export { AvatarGroup };
 Avatar._supportsSpacingProps = true;

package/es/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Img","Context","validateDOMAttributes","extendPropsWithContext","warn","AvatarGroup","AvatarGroupContext","defaultProps","size","variant","skeleton","Avatar","localProps","context","useContext","avatarGroupContext","allProps","alt","className","children","childrenProp","src","imgProps","hasLabel","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","childrenIsString","imageProps","_objectSpread","createElement","firstLetterUpperCase","charAt","toUpperCase","_extends","Group","_supportsSpacingProps"],"sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Elements\nimport Img, { ImgProps } from '../../elements/img/Img'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n  warn,\n} from '../../shared/component-helper'\n\n// Internal\nimport AvatarGroup, { AvatarGroupContext } from './AvatarGroup'\n\nexport type AvatarSizes = 'small' | 'medium' | 'large' | 'x-large'\nexport type AvatarVariants = 'primary' | 'secondary' | 'tertiary'\n\nexport type AvatarImgProps = ImgProps\n\nexport interface AvatarProps\n  extends Omit<React.HTMLProps<HTMLElement>, 'size'> {\n  /**\n   * Used in combination with `src` to provide an alt attribute for the `img` element.\n   * Default: null\n   */\n  alt?: string\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the component.\n   * Default: medium.\n   */\n  size?: AvatarSizes\n\n  /**\n   * Specifies the path to the image\n   * Default: null\n   */\n  src?: string\n\n  /**\n   * Props applied to the `img` element if the component is used to display an image.\n   * Default: null\n   */\n  imgProps?: ImgProps\n\n  /**\n   * The variant of the component.\n   * Default: primary.\n   */\n  variant?: AvatarVariants\n\n  /**\n   * If an avatar is hidden from the screen reader (by setting aria-hidden={true}) or if label is given, typical inside a table or dl (definition list), then you can disable Avatar.Group as a dependent of Avatar.\n   * Use `true` to omit the `Avatar group required:` warning.\n   * Default: null\n   */\n  hasLabel?: boolean\n}\n\nexport const defaultProps = {\n  size: 'medium',\n  variant: 'primary',\n  skeleton: false,\n}\n\nconst Avatar = (localProps: AvatarProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const avatarGroupContext = React.useContext(AvatarGroupContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Avatar,\n    { skeleton: context?.skeleton },\n    avatarGroupContext\n  )\n\n  const {\n    alt,\n    className,\n    children: childrenProp,\n    size,\n    skeleton,\n    variant,\n    src,\n    imgProps,\n    hasLabel,\n    ...props\n  } = allProps\n\n  let children = null\n\n  const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const childrenIsString = typeof childrenProp === 'string'\n\n  if (src || imgProps) {\n    const imageProps = { src, alt, ...imgProps }\n    children = <Img {...imageProps} />\n  } else if (childrenIsString) {\n    const firstLetterUpperCase = childrenProp.charAt(0).toUpperCase()\n    children = <span aria-hidden>{firstLetterUpperCase}</span>\n  } else {\n    children = childrenProp\n  }\n\n  if (!avatarGroupContext && !hasLabel) {\n    warn(\n      `Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  validateDOMAttributes(allProps, props)\n\n  return (\n    <span\n      className={classnames(\n        'dnb-avatar',\n        `dnb-avatar--${variant || 'primary'}`,\n        `dnb-avatar--size-${size || 'medium'}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n    >\n      {childrenIsString && (\n        <span className=\"dnb-sr-only\">{childrenProp}</span>\n      )}\n      {children}\n    </span>\n  )\n}\n\nAvatar.Group = AvatarGroup\n\nexport { AvatarGroup }\n\nAvatar._supportsSpacingProps = true\n\nexport default Avatar\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,QAAQ,4BAA4B;AAGhE,OAAOC,GAAG,MAAoB,wBAAwB;AAGtD,OAAOC,OAAO,MAAM,sBAAsB;AAG1C,SACEC,qBAAqB,EACrBC,sBAAsB,EACtBC,IAAI,QACC,+BAA+B;AAGtC,OAAOC,WAAW,IAAIC,kBAAkB,QAAQ,eAAe;AAiE/D,OAAO,MAAMC,YAAY,GAAG;EAC1BC,IAAI,EAAE,QAAQ;EACdC,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,MAAM,GAAIC,UAAsC,IAAK;EAEzD,MAAMC,OAAO,GAAGjB,KAAK,CAACkB,UAAU,CAACb,OAAO,CAAC;EACzC,MAAMc,kBAAkB,GAAGnB,KAAK,CAACkB,UAAU,CAACR,kBAAkB,CAAC;EAG/D,MAAMU,QAAQ,GAAGb,sBAAsB,CACrCS,UAAU,EACVL,YAAY,EACZM,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,MAAM,EACf;IAAED,QAAQ,EAAEG,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEH;EAAS,CAAC,EAC/BK,kBACF,CAAC;EAED,MAAM;MACJE,GAAG;MACHC,SAAS;MACTC,QAAQ,EAAEC,YAAY;MACtBZ,IAAI;MACJE,QAAQ;MACRD,OAAO;MACPY,GAAG;MACHC,QAAQ;MACRC;IAEF,CAAC,GAAGP,QAAQ;IADPQ,KAAK,GAAAC,wBAAA,CACNT,QAAQ,EAAAU,SAAA;EAEZ,IAAIP,QAAQ,GAAG,IAAI;EAEnB,MAAMQ,eAAe,GAAG5B,mBAAmB,CAAC,OAAO,EAAEW,QAAQ,EAAEG,OAAO,CAAC;EACvE,MAAMe,cAAc,GAAG9B,oBAAoB,CAAC0B,KAAK,CAAC;EAElD,MAAMK,gBAAgB,GAAG,OAAOT,YAAY,KAAK,QAAQ;EAEzD,IAAIC,GAAG,IAAIC,QAAQ,EAAE;IACnB,MAAMQ,UAAU,GAAAC,aAAA;MAAKV,GAAG;MAAEJ;IAAG,GAAKK,QAAQ,CAAE;IAC5CH,QAAQ,GAAGvB,KAAA,CAAAoC,aAAA,CAAChC,GAAG,EAAK8B,UAAa,CAAC;EACpC,CAAC,MAAM,IAAID,gBAAgB,EAAE;IAC3B,MAAMI,oBAAoB,GAAGb,YAAY,CAACc,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC;IACjEhB,QAAQ,GAAGvB,KAAA,CAAAoC,aAAA;MAAM;IAAW,GAAEC,oBAA2B,CAAC;EAC5D,CAAC,MAAM;IACLd,QAAQ,GAAGC,YAAY;EACzB;EAEA,IAAI,CAACL,kBAAkB,IAAI,CAACQ,QAAQ,EAAE;IACpCnB,IAAI,CACF,+JACF,CAAC;EACH;EAEAF,qBAAqB,CAACc,QAAQ,EAAEQ,KAAK,CAAC;EAEtC,OACE5B,KAAA,CAAAoC,aAAA,SAAAI,QAAA;IACElB,SAAS,EAAErB,UAAU,2BAEJY,OAAO,IAAI,SAAS,qBACfD,IAAI,IAAI,QAAQ,IACpCmB,eAAe,EACfC,cAAc,EACdV,SACF;EAAE,GACEM,KAAK,GAERK,gBAAgB,IACfjC,KAAA,CAAAoC,aAAA;IAAMd,SAAS,EAAC;EAAa,GAAEE,YAAmB,CACnD,EACAD,QACG,CAAC;AAEX,CAAC;AAEDR,MAAM,CAAC0B,KAAK,GAAGhC,WAAW;AAE1B,SAASA,WAAW;AAEpBM,MAAM,CAAC2B,qBAAqB,GAAG,IAAI;AAEnC,eAAe3B,MAAM","ignoreList":[]}
+{"version":3,"file":"Avatar.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Img","Context","validateDOMAttributes","extendPropsWithContext","warn","AvatarGroup","AvatarGroupContext","defaultProps","size","variant","skeleton","Avatar","localProps","context","useContext","avatarGroupContext","allProps","alt","className","children","childrenProp","src","imgProps","hasLabel","backgroundColor","color","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","childrenIsString","imageProps","_objectSpread","createElement","firstLetterUpperCase","charAt","toUpperCase","style","getColor","_extends","value","String","includes","test","undefined","Group","_supportsSpacingProps"],"sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Elements\nimport Img, { ImgProps } from '../../elements/img/Img'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  validateDOMAttributes,\n  extendPropsWithContext,\n  warn,\n} from '../../shared/component-helper'\n\n// Internal\nimport AvatarGroup, { AvatarGroupContext } from './AvatarGroup'\n\nexport type AvatarSizes = 'small' | 'medium' | 'large' | 'x-large'\nexport type AvatarVariants = 'primary' | 'secondary' | 'tertiary'\n\nexport type AvatarImgProps = ImgProps\n\nexport interface AvatarProps\n  extends Omit<React.HTMLProps<HTMLElement>, 'size'> {\n  /**\n   * Used in combination with `src` to provide an alt attribute for the `img` element.\n   * Default: null\n   */\n  alt?: string\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content of the component. Can be used instead of prop \"data\".\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The size of the component.\n   * Default: medium.\n   */\n  size?: AvatarSizes\n\n  /**\n   * Specifies the path to the image\n   * Default: null\n   */\n  src?: string\n\n  /**\n   * Props applied to the `img` element if the component is used to display an image.\n   * Default: null\n   */\n  imgProps?: ImgProps\n\n  /**\n   * The variant of the component.\n   * Default: primary.\n   */\n  variant?: AvatarVariants\n\n  /**\n   * If an avatar is hidden from the screen reader (by setting aria-hidden={true}) or if label is given, typical inside a table or dl (definition list), then you can disable Avatar.Group as a dependent of Avatar.\n   * Use `true` to omit the `Avatar group required:` warning.\n   * Default: null\n   */\n  hasLabel?: boolean\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   * Default: undefined\n   */\n  backgroundColor?: string\n\n  /**\n   * Define a custom color to compliment the backgroundColor. Use a Eufemia color.\n   * Default: undefined\n   */\n  color?: string\n}\n\nexport const defaultProps = {\n  size: 'medium',\n  variant: 'primary',\n  skeleton: false,\n}\n\nconst Avatar = (localProps: AvatarProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const avatarGroupContext = React.useContext(AvatarGroupContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Avatar,\n    { skeleton: context?.skeleton },\n    avatarGroupContext\n  )\n\n  const {\n    alt,\n    className,\n    children: childrenProp,\n    size,\n    skeleton,\n    variant,\n    src,\n    imgProps,\n    hasLabel,\n    backgroundColor,\n    color,\n    ...props\n  } = allProps\n\n  let children = null\n\n  const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  const childrenIsString = typeof childrenProp === 'string'\n\n  if (src || imgProps) {\n    const imageProps = { src, alt, ...imgProps }\n    children = <Img {...imageProps} />\n  } else if (childrenIsString) {\n    const firstLetterUpperCase = childrenProp.charAt(0).toUpperCase()\n    children = <span aria-hidden>{firstLetterUpperCase}</span>\n  } else {\n    children = childrenProp\n  }\n\n  if (!avatarGroupContext && !hasLabel) {\n    warn(\n      `Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  validateDOMAttributes(allProps, props)\n\n  const style = {\n    '--background-color': getColor(backgroundColor),\n    '--color': getColor(color),\n    ...props?.style,\n  } as React.CSSProperties\n\n  return (\n    <span\n      className={classnames(\n        'dnb-avatar',\n        `dnb-avatar--${variant || 'primary'}`,\n        `dnb-avatar--size-${size || 'medium'}`,\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...props}\n      style={style}\n    >\n      {childrenIsString && (\n        <span className=\"dnb-sr-only\">{childrenProp}</span>\n      )}\n      {children}\n    </span>\n  )\n}\n\nfunction getColor(value: string) {\n  if (String(value).includes('--')) {\n    return value\n  }\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nAvatar.Group = AvatarGroup\n\nexport { AvatarGroup }\n\nAvatar._supportsSpacingProps = true\n\nexport default Avatar\n"],"mappings":"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","ignoreList":[]}

package/es/components/avatar/AvatarDocs.d.ts

@@ -0,0 +1,3 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const AvatarProperties: PropertiesTableProps;
+export declare const AvatarGroupProperties: PropertiesTableProps;

package/es/components/avatar/AvatarDocs.js

@@ -0,0 +1,95 @@
+export const AvatarProperties = {
+  size: {
+    doc: 'Size of the Avatar. Options: `small` | `medium` | `large` | `x-large`. Defaults to `medium`.',
+    type: ['small', 'medium', 'large', 'x-large'],
+    status: 'optional'
+  },
+  children: {
+    doc: 'Content of the component.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  alt: {
+    doc: 'Used in combination with `src` to provide an alt attribute for the `img` element.',
+    type: 'string',
+    status: 'optional'
+  },
+  src: {
+    doc: 'Specifies the path to the image.',
+    type: 'string',
+    status: 'optional'
+  },
+  imgProps: {
+    doc: '[Image properties](/uilib/elements/image) applied to the `img` element if the component is used to display an image.',
+    type: ['ImgProps'],
+    status: 'optional'
+  },
+  variant: {
+    doc: 'Override the variant of the component. Options: `primary` | `secondary` | `tertiary`. Defaults to `primary`.',
+    type: ['primary', 'secondary', 'tertiary'],
+    status: 'optional'
+  },
+  hasLabel: {
+    doc: 'If aria-hidden is set to `true` or if a label is given, typical inside a table or dl (definition list), then you can disable Avatar.Group as a dependent of Avatar. Use `true` to omit the `Avatar group required:` warning.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  backgroundColor: {
+    doc: 'Define a custom background color, instead of a variant. Use a Eufemia color.',
+    type: 'string',
+    status: 'optional'
+  },
+  color: {
+    doc: 'Define a custom color to compliment the backgroundColor. Use a Eufemia color.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: 'Various',
+    status: 'optional'
+  }
+};
+export const AvatarGroupProperties = {
+  label: {
+    doc: 'The label description of the group of avatars.',
+    type: 'string',
+    status: 'required'
+  },
+  size: {
+    doc: 'Size of the Avatars, and "elements hidden text (+x)". Options: `small` | `medium` | `large` | `x-large`. Defaults to `medium`.',
+    type: ['small', 'medium', 'large', 'x-large'],
+    status: 'optional'
+  },
+  variant: {
+    doc: 'Override the variant of the Avatars. Options: `primary` | `secondary` | `tertiary`. Defaults to `primary`.',
+    type: ['primary', 'secondary', 'tertiary'],
+    status: 'optional'
+  },
+  maxElements: {
+    doc: 'Number of max displayed elements, including the "elements hidden text (+x)". Defaults to `4`.',
+    type: 'number',
+    status: 'optional'
+  },
+  children: {
+    doc: 'The Avatars to group.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: 'Various',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=AvatarDocs.js.map