@dnb/eufemia 10.43.0 → 10.45.0

package/components/upload/UploadDocs.d.ts

@@ -1,3 +1,4 @@
 import { PropertiesTableProps } from '../../shared/types';
 export declare const UploadProperties: PropertiesTableProps;
+export declare const AcceptedFileTypeProperties: PropertiesTableProps;
 export declare const UploadEvents: PropertiesTableProps;

package/components/upload/UploadDocs.js

@@ -1,7 +1,7 @@
 export const UploadProperties = {
   acceptedFileTypes: {
-    doc: 'List of accepted file types.',
-    type: 'Array<string>',
+    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)).',
+    type: ['Array<string>', 'Array<AcceptedFileType>'],
     status: 'required'
   },
   filesAmountLimit: {
@@ -10,8 +10,8 @@ export const UploadProperties = {
     status: 'optional'
   },
   fileMaxSize: {
-    doc: '`fileMaxSize` is max size of each file in MB. Defaults to 5 MB.',
-    type: 'number',
+    doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.',
+    type: ['number', 'false'],
     status: 'optional'
   },
   title: {
@@ -35,6 +35,18 @@ export const UploadProperties = {
     status: 'optional'
   }
 };
+export const AcceptedFileTypeProperties = {
+  fileType: {
+    doc: 'The name of the accepted file type.',
+    type: 'string',
+    status: 'required'
+  },
+  fileMaxSize: {
+    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.',
+    type: ['number', 'false'],
+    status: 'optional'
+  }
+};
 export const UploadEvents = {
   onChange: {
     doc: 'Will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`).',

package/components/upload/UploadDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadDocs.js","names":["UploadProperties","acceptedFileTypes","doc","type","status","filesAmountLimit","fileMaxSize","title","text","skeleton","UploadEvents","onChange","onFileDelete"],"sources":["../../../../src/components/upload/UploadDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const UploadProperties: PropertiesTableProps = {\n  acceptedFileTypes: {\n    doc: 'List of accepted file types.',\n    type: 'Array<string>',\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: '`fileMaxSize` is max size of each file in MB. Defaults to 5 MB.',\n    type: 'number',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Custom text property. Replaces the default title.',\n    type: 'string',\n    status: 'optional',\n  },\n  text: {\n    doc: 'Custom text property. Replaces the default text.',\n    type: 'string',\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 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}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,iBAAiB,EAAE;IACjBC,GAAG,EAAE,8BAA8B;IACnCC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBH,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,iEAAiE;IACtEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,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,MAAMM,YAAkC,GAAG;EAChDC,QAAQ,EAAE;IACRT,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDQ,YAAY,EAAE;IACZV,GAAG,EAAE,mGAAmG;IACxGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"UploadDocs.js","names":["UploadProperties","acceptedFileTypes","doc","type","status","filesAmountLimit","fileMaxSize","title","text","skeleton","AcceptedFileTypeProperties","fileType","UploadEvents","onChange","onFileDelete"],"sources":["../../../../src/components/upload/UploadDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const UploadProperties: PropertiesTableProps = {\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.',\n    type: 'string',\n    status: 'optional',\n  },\n  text: {\n    doc: 'Custom text property. Replaces the default text.',\n    type: 'string',\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}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,iBAAiB,EAAE;IACjBC,GAAG,EAAE,oXAAoX;IACzXC,IAAI,EAAE,CAAC,eAAe,EAAE,yBAAyB,CAAC;IAClDC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBH,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,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,MAAMM,0BAAgD,GAAG;EAC9DC,QAAQ,EAAE;IACRT,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,6OAA6O;IAClPC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMQ,YAAkC,GAAG;EAChDC,QAAQ,EAAE;IACRX,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDU,YAAY,EAAE;IACZZ,GAAG,EAAE,mGAAmG;IACxGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/components/upload/UploadInfo.js

@@ -1,3 +1,4 @@
+var _UploadInfoAcceptedFi;
 import React from 'react';
 import { defaultProps, UploadContext } from './UploadContext';
 import Lead from '../../elements/Lead';
@@ -6,6 +7,12 @@ import Dl from '../../elements/Dl';
 import Dt from '../../elements/Dt';
 import Dd from '../../elements/Dd';
 import { format } from '../number-format/NumberUtils';
+import { isArrayOfObjects, isArrayOfStrings } from './UploadVerify';
+import Table from '../Table';
+import Tr from '../table/TableTr';
+import Th from '../table/TableTh';
+import Td from '../table/TableTd';
+const prettifyAcceptedFileFormats = acceptedFileTypes => acceptedFileTypes.sort().join(', ').toUpperCase();
 const UploadInfo = () => {
   const context = React.useContext(UploadContext);
   const {
@@ -20,18 +27,63 @@ const UploadInfo = () => {
     fileMaxSize,
     children
   } = context;
-  const prettifiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
+  const prettifiedAcceptedFileFormats = prettifyAcceptedFileFormats(acceptedFileTypes);
+  const isAcceptedFileTypeListOfStrings = isArrayOfStrings(acceptedFileTypes);
+  const displayAcceptedFileFormatsListItem = isAcceptedFileTypeListOfStrings && prettifiedAcceptedFileFormats;
+  const displayFileMaxSizeItem = isAcceptedFileTypeListOfStrings && fileMaxSize;
+  const displayFilesAmountLimitItem = filesAmountLimit < defaultProps.filesAmountLimit;
+  const displayAcceptedFileFormatsTable = isArrayOfObjects(acceptedFileTypes);
+  const displayDl = displayAcceptedFileFormatsListItem || displayFileMaxSizeItem || displayFilesAmountLimitItem;
   return React.createElement(React.Fragment, null, React.createElement(Lead, {
     space: "0"
   }, title), React.createElement(P, {
     top: "xx-small",
     className: "dnb-upload__text"
-  }, text), children, React.createElement(Dl, {
+  }, text), children, displayDl && React.createElement(Dl, {
     top: "small",
     bottom: 0,
-    layout: "horizontal",
-    className: "dnb-upload__condition-list"
-  }, prettifiedAcceptedFileFormats && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettifiedAcceptedFileFormats)), React.createElement(Dl.Item, null, React.createElement(Dt, null, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), filesAmountLimit < defaultProps.filesAmountLimit && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))));
+    layout: "horizontal"
+  }, displayAcceptedFileFormatsListItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettifiedAcceptedFileFormats)), displayFileMaxSizeItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), displayFilesAmountLimitItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))), displayAcceptedFileFormatsTable && (_UploadInfoAcceptedFi || (_UploadInfoAcceptedFi = React.createElement(UploadInfoAcceptedFileTypesTable, null))));
 };
+function UploadInfoAcceptedFileTypesTable() {
+  const context = React.useContext(UploadContext);
+  const {
+    acceptedFileTypes,
+    fileTypeTableCaption,
+    fileTypeDescription,
+    fileSizeDescription,
+    fileSizeContent,
+    fileMaxSize
+  } = context;
+  const groupByFileMaxSize = (acceptedFileTypes, fallBackFileMaxSize) => {
+    const fileMaxSizeIsFalseOrZero = fileMaxSize => {
+      return fileMaxSize === false || fileMaxSize === 0;
+    };
+    const group = {};
+    acceptedFileTypes.forEach(item => {
+      const itemFileMaxSize = item.fileMaxSize;
+      const groupName = itemFileMaxSize ? itemFileMaxSize : fileMaxSizeIsFalseOrZero(itemFileMaxSize) ? 0 : fileMaxSizeIsFalseOrZero(fallBackFileMaxSize) ? 0 : fallBackFileMaxSize;
+      group[groupName] = group[groupName] || [];
+      group[groupName].push(item);
+    });
+    return group;
+  };
+  const acceptedFileTypesGroupedByFileMaxSize = groupByFileMaxSize(acceptedFileTypes, fileMaxSize);
+  return React.createElement(Table, {
+    border: true,
+    className: "dnb-upload__accepted-file-types-table",
+    size: "small"
+  }, React.createElement("caption", {
+    className: "dnb-sr-only"
+  }, fileTypeTableCaption), React.createElement("thead", null, React.createElement(Tr, {
+    variant: "odd",
+    cellSpacing: 0
+  }, React.createElement(Th, null, fileTypeDescription), React.createElement(Th, null, fileSizeDescription))), React.createElement("tbody", null, Object.keys(acceptedFileTypesGroupedByFileMaxSize).sort((a, b) => Number(b) - Number(a)).map(key => {
+    return React.createElement(Tr, {
+      variant: "odd",
+      key: key
+    }, React.createElement(Td, null, prettifyAcceptedFileFormats(acceptedFileTypesGroupedByFileMaxSize[key].map(acceptedFileTypesObj => acceptedFileTypesObj.fileType))), React.createElement(Td, null, key !== '0' && String(fileSizeContent).replace('%size', format(key).toString())));
+  })));
+}
 export default UploadInfo;
 //# sourceMappingURL=UploadInfo.js.map

package/components/upload/UploadInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadInfo.js","names":["React","defaultProps","UploadContext","Lead","P","Dl","Dt","Dd","format","UploadInfo","context","useContext","title","text","acceptedFileTypes","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","filesAmountLimit","fileMaxSize","children","prettifiedAcceptedFileFormats","join","toUpperCase","createElement","Fragment","space","top","className","bottom","layout","Item","String","replace","toString"],"sources":["../../../../src/components/upload/UploadInfo.tsx"],"sourcesContent":["import React from 'react'\nimport { defaultProps, UploadContext } from './UploadContext'\nimport Lead from '../../elements/Lead'\nimport P from '../../elements/P'\nimport Dl from '../../elements/Dl'\nimport Dt from '../../elements/Dt'\nimport Dd from '../../elements/Dd'\nimport { format } from '../number-format/NumberUtils'\n\nconst UploadInfo = () => {\n  const context = React.useContext(UploadContext)\n\n  const {\n    title,\n    text,\n    acceptedFileTypes,\n    fileTypeDescription,\n    fileSizeDescription,\n    fileAmountDescription,\n    fileSizeContent,\n    filesAmountLimit,\n    fileMaxSize,\n    children,\n  } = context\n\n  const prettifiedAcceptedFileFormats = acceptedFileTypes\n    .join(', ')\n    .toUpperCase()\n\n  return (\n    <>\n      <Lead space=\"0\">{title}</Lead>\n\n      <P top=\"xx-small\" className=\"dnb-upload__text\">\n        {text}\n      </P>\n\n      {children}\n\n      <Dl\n        top=\"small\"\n        bottom={0}\n        layout=\"horizontal\"\n        className=\"dnb-upload__condition-list\"\n      >\n        {prettifiedAcceptedFileFormats && (\n          <Dl.Item>\n            <Dt>{fileTypeDescription}</Dt>\n            <Dd>{prettifiedAcceptedFileFormats}</Dd>\n          </Dl.Item>\n        )}\n\n        <Dl.Item>\n          <Dt>{fileSizeDescription}</Dt>\n          <Dd>\n            {String(fileSizeContent).replace(\n              '%size',\n              format(fileMaxSize).toString()\n            )}\n          </Dd>\n        </Dl.Item>\n\n        {filesAmountLimit < defaultProps.filesAmountLimit && (\n          <Dl.Item>\n            <Dt>{fileAmountDescription}</Dt>\n            <Dd>{filesAmountLimit}</Dd>\n          </Dl.Item>\n        )}\n      </Dl>\n    </>\n  )\n}\n\nexport default UploadInfo\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,QAAQ,iBAAiB;AAC7D,OAAOC,IAAI,MAAM,qBAAqB;AACtC,OAAOC,CAAC,MAAM,kBAAkB;AAChC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,SAASC,MAAM,QAAQ,8BAA8B;AAErD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACT,aAAa,CAAC;EAE/C,MAAM;IACJU,KAAK;IACLC,IAAI;IACJC,iBAAiB;IACjBC,mBAAmB;IACnBC,mBAAmB;IACnBC,qBAAqB;IACrBC,eAAe;IACfC,gBAAgB;IAChBC,WAAW;IACXC;EACF,CAAC,GAAGX,OAAO;EAEX,MAAMY,6BAA6B,GAAGR,iBAAiB,CACpDS,IAAI,CAAC,IAAI,CAAC,CACVC,WAAW,CAAC,CAAC;EAEhB,OACExB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACE1B,KAAA,CAAAyB,aAAA,CAACtB,IAAI;IAACwB,KAAK,EAAC;EAAG,GAAEf,KAAY,CAAC,EAE9BZ,KAAA,CAAAyB,aAAA,CAACrB,CAAC;IAACwB,GAAG,EAAC,UAAU;IAACC,SAAS,EAAC;EAAkB,GAC3ChB,IACA,CAAC,EAEHQ,QAAQ,EAETrB,KAAA,CAAAyB,aAAA,CAACpB,EAAE;IACDuB,GAAG,EAAC,OAAO;IACXE,MAAM,EAAE,CAAE;IACVC,MAAM,EAAC,YAAY;IACnBF,SAAS,EAAC;EAA4B,GAErCP,6BAA6B,IAC5BtB,KAAA,CAAAyB,aAAA,CAACpB,EAAE,CAAC2B,IAAI,QACNhC,KAAA,CAAAyB,aAAA,CAACnB,EAAE,QAAES,mBAAwB,CAAC,EAC9Bf,KAAA,CAAAyB,aAAA,CAAClB,EAAE,QAAEe,6BAAkC,CAChC,CACV,EAEDtB,KAAA,CAAAyB,aAAA,CAACpB,EAAE,CAAC2B,IAAI,QACNhC,KAAA,CAAAyB,aAAA,CAACnB,EAAE,QAAEU,mBAAwB,CAAC,EAC9BhB,KAAA,CAAAyB,aAAA,CAAClB,EAAE,QACA0B,MAAM,CAACf,eAAe,CAAC,CAACgB,OAAO,CAC9B,OAAO,EACP1B,MAAM,CAACY,WAAW,CAAC,CAACe,QAAQ,CAAC,CAC/B,CACE,CACG,CAAC,EAEThB,gBAAgB,GAAGlB,YAAY,CAACkB,gBAAgB,IAC/CnB,KAAA,CAAAyB,aAAA,CAACpB,EAAE,CAAC2B,IAAI,QACNhC,KAAA,CAAAyB,aAAA,CAACnB,EAAE,QAAEW,qBAA0B,CAAC,EAChCjB,KAAA,CAAAyB,aAAA,CAAClB,EAAE,QAAEY,gBAAqB,CACnB,CAET,CACJ,CAAC;AAEP,CAAC;AAED,eAAeV,UAAU"}
+{"version":3,"file":"UploadInfo.js","names":["React","defaultProps","UploadContext","Lead","P","Dl","Dt","Dd","format","isArrayOfObjects","isArrayOfStrings","Table","Tr","Th","Td","prettifyAcceptedFileFormats","acceptedFileTypes","sort","join","toUpperCase","UploadInfo","context","useContext","title","text","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","filesAmountLimit","fileMaxSize","children","prettifiedAcceptedFileFormats","isAcceptedFileTypeListOfStrings","displayAcceptedFileFormatsListItem","displayFileMaxSizeItem","displayFilesAmountLimitItem","displayAcceptedFileFormatsTable","displayDl","createElement","Fragment","space","top","className","bottom","layout","Item","String","replace","toString","_UploadInfoAcceptedFi","UploadInfoAcceptedFileTypesTable","fileTypeTableCaption","groupByFileMaxSize","fallBackFileMaxSize","fileMaxSizeIsFalseOrZero","group","forEach","item","itemFileMaxSize","groupName","push","acceptedFileTypesGroupedByFileMaxSize","border","size","variant","cellSpacing","Object","keys","a","b","Number","map","key","acceptedFileTypesObj","fileType"],"sources":["../../../../src/components/upload/UploadInfo.tsx"],"sourcesContent":["import React from 'react'\nimport { defaultProps, UploadContext } from './UploadContext'\nimport Lead from '../../elements/Lead'\nimport P from '../../elements/P'\nimport Dl from '../../elements/Dl'\nimport Dt from '../../elements/Dt'\nimport Dd from '../../elements/Dd'\nimport { format } from '../number-format/NumberUtils'\nimport { isArrayOfObjects, isArrayOfStrings } from './UploadVerify'\nimport Table from '../Table'\nimport Tr from '../table/TableTr'\nimport Th from '../table/TableTh'\nimport Td from '../table/TableTd'\nimport { UploadAcceptedFileTypeObject, UploadProps } from './types'\n\nconst prettifyAcceptedFileFormats = (acceptedFileTypes) =>\n  acceptedFileTypes.sort().join(', ').toUpperCase()\n\nconst UploadInfo = () => {\n  const context = React.useContext(UploadContext)\n\n  const {\n    title,\n    text,\n    acceptedFileTypes,\n    fileTypeDescription,\n    fileSizeDescription,\n    fileAmountDescription,\n    fileSizeContent,\n    filesAmountLimit,\n    fileMaxSize,\n    children,\n  } = context\n\n  const prettifiedAcceptedFileFormats =\n    prettifyAcceptedFileFormats(acceptedFileTypes)\n\n  const isAcceptedFileTypeListOfStrings =\n    isArrayOfStrings(acceptedFileTypes)\n\n  const displayAcceptedFileFormatsListItem =\n    isAcceptedFileTypeListOfStrings && prettifiedAcceptedFileFormats\n\n  const displayFileMaxSizeItem =\n    isAcceptedFileTypeListOfStrings && fileMaxSize\n\n  const displayFilesAmountLimitItem =\n    filesAmountLimit < defaultProps.filesAmountLimit\n\n  const displayAcceptedFileFormatsTable =\n    isArrayOfObjects(acceptedFileTypes)\n\n  const displayDl =\n    displayAcceptedFileFormatsListItem ||\n    displayFileMaxSizeItem ||\n    displayFilesAmountLimitItem\n\n  return (\n    <>\n      <Lead space=\"0\">{title}</Lead>\n\n      <P top=\"xx-small\" className=\"dnb-upload__text\">\n        {text}\n      </P>\n\n      {children}\n\n      {displayDl && (\n        <Dl top=\"small\" bottom={0} layout=\"horizontal\">\n          {displayAcceptedFileFormatsListItem && (\n            <Dl.Item>\n              <Dt>{fileTypeDescription}</Dt>\n              <Dd>{prettifiedAcceptedFileFormats}</Dd>\n            </Dl.Item>\n          )}\n\n          {displayFileMaxSizeItem && (\n            <Dl.Item>\n              <Dt>{fileSizeDescription}</Dt>\n              <Dd>\n                {String(fileSizeContent).replace(\n                  '%size',\n                  format(fileMaxSize).toString()\n                )}\n              </Dd>\n            </Dl.Item>\n          )}\n\n          {displayFilesAmountLimitItem && (\n            <Dl.Item>\n              <Dt>{fileAmountDescription}</Dt>\n              <Dd>{filesAmountLimit}</Dd>\n            </Dl.Item>\n          )}\n        </Dl>\n      )}\n      {displayAcceptedFileFormatsTable && (\n        <UploadInfoAcceptedFileTypesTable />\n      )}\n    </>\n  )\n}\n\nfunction UploadInfoAcceptedFileTypesTable() {\n  const context = React.useContext(UploadContext)\n\n  const {\n    acceptedFileTypes,\n    fileTypeTableCaption,\n    fileTypeDescription,\n    fileSizeDescription,\n    fileSizeContent,\n    fileMaxSize,\n  } = context\n\n  const groupByFileMaxSize = (\n    acceptedFileTypes: UploadProps['acceptedFileTypes'],\n    fallBackFileMaxSize: UploadProps['fileMaxSize']\n  ) => {\n    const fileMaxSizeIsFalseOrZero = (\n      fileMaxSize: UploadProps['fileMaxSize']\n    ) => {\n      return fileMaxSize === false || fileMaxSize === 0\n    }\n\n    const group = {}\n    acceptedFileTypes.forEach((item) => {\n      const itemFileMaxSize = item.fileMaxSize\n      const groupName = itemFileMaxSize\n        ? itemFileMaxSize\n        : fileMaxSizeIsFalseOrZero(itemFileMaxSize)\n        ? 0\n        : fileMaxSizeIsFalseOrZero(fallBackFileMaxSize)\n        ? 0\n        : fallBackFileMaxSize\n\n      group[groupName] = group[groupName] || []\n      group[groupName].push(item)\n    })\n\n    return group\n  }\n\n  const acceptedFileTypesGroupedByFileMaxSize = groupByFileMaxSize(\n    acceptedFileTypes,\n    fileMaxSize\n  )\n\n  return (\n    <Table\n      border\n      className=\"dnb-upload__accepted-file-types-table\"\n      size=\"small\"\n    >\n      <caption className=\"dnb-sr-only\">{fileTypeTableCaption}</caption>\n      <thead>\n        <Tr variant=\"odd\" cellSpacing={0}>\n          <Th>{fileTypeDescription}</Th>\n          <Th>{fileSizeDescription}</Th>\n        </Tr>\n      </thead>\n      <tbody>\n        {Object.keys(acceptedFileTypesGroupedByFileMaxSize)\n          .sort((a, b) => Number(b) - Number(a))\n          .map((key) => {\n            return (\n              <Tr variant=\"odd\" key={key}>\n                <Td>\n                  {prettifyAcceptedFileFormats(\n                    acceptedFileTypesGroupedByFileMaxSize[key].map(\n                      (\n                        acceptedFileTypesObj: UploadAcceptedFileTypeObject\n                      ) => acceptedFileTypesObj.fileType\n                    )\n                  )}\n                </Td>\n                <Td>\n                  {key !== '0' &&\n                    String(fileSizeContent).replace(\n                      '%size',\n                      format(key).toString()\n                    )}\n                </Td>\n              </Tr>\n            )\n          })}\n      </tbody>\n    </Table>\n  )\n}\n\nexport default UploadInfo\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,QAAQ,iBAAiB;AAC7D,OAAOC,IAAI,MAAM,qBAAqB;AACtC,OAAOC,CAAC,MAAM,kBAAkB;AAChC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,OAAOC,EAAE,MAAM,mBAAmB;AAClC,SAASC,MAAM,QAAQ,8BAA8B;AACrD,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gBAAgB;AACnE,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,EAAE,MAAM,kBAAkB;AACjC,OAAOC,EAAE,MAAM,kBAAkB;AACjC,OAAOC,EAAE,MAAM,kBAAkB;AAGjC,MAAMC,2BAA2B,GAAIC,iBAAiB,IACpDA,iBAAiB,CAACC,IAAI,CAAC,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,CAACC,WAAW,CAAC,CAAC;AAEnD,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,MAAMC,OAAO,GAAGrB,KAAK,CAACsB,UAAU,CAACpB,aAAa,CAAC;EAE/C,MAAM;IACJqB,KAAK;IACLC,IAAI;IACJR,iBAAiB;IACjBS,mBAAmB;IACnBC,mBAAmB;IACnBC,qBAAqB;IACrBC,eAAe;IACfC,gBAAgB;IAChBC,WAAW;IACXC;EACF,CAAC,GAAGV,OAAO;EAEX,MAAMW,6BAA6B,GACjCjB,2BAA2B,CAACC,iBAAiB,CAAC;EAEhD,MAAMiB,+BAA+B,GACnCvB,gBAAgB,CAACM,iBAAiB,CAAC;EAErC,MAAMkB,kCAAkC,GACtCD,+BAA+B,IAAID,6BAA6B;EAElE,MAAMG,sBAAsB,GAC1BF,+BAA+B,IAAIH,WAAW;EAEhD,MAAMM,2BAA2B,GAC/BP,gBAAgB,GAAG5B,YAAY,CAAC4B,gBAAgB;EAElD,MAAMQ,+BAA+B,GACnC5B,gBAAgB,CAACO,iBAAiB,CAAC;EAErC,MAAMsB,SAAS,GACbJ,kCAAkC,IAClCC,sBAAsB,IACtBC,2BAA2B;EAE7B,OACEpC,KAAA,CAAAuC,aAAA,CAAAvC,KAAA,CAAAwC,QAAA,QACExC,KAAA,CAAAuC,aAAA,CAACpC,IAAI;IAACsC,KAAK,EAAC;EAAG,GAAElB,KAAY,CAAC,EAE9BvB,KAAA,CAAAuC,aAAA,CAACnC,CAAC;IAACsC,GAAG,EAAC,UAAU;IAACC,SAAS,EAAC;EAAkB,GAC3CnB,IACA,CAAC,EAEHO,QAAQ,EAERO,SAAS,IACRtC,KAAA,CAAAuC,aAAA,CAAClC,EAAE;IAACqC,GAAG,EAAC,OAAO;IAACE,MAAM,EAAE,CAAE;IAACC,MAAM,EAAC;EAAY,GAC3CX,kCAAkC,IACjClC,KAAA,CAAAuC,aAAA,CAAClC,EAAE,CAACyC,IAAI,QACN9C,KAAA,CAAAuC,aAAA,CAACjC,EAAE,QAAEmB,mBAAwB,CAAC,EAC9BzB,KAAA,CAAAuC,aAAA,CAAChC,EAAE,QAAEyB,6BAAkC,CAChC,CACV,EAEAG,sBAAsB,IACrBnC,KAAA,CAAAuC,aAAA,CAAClC,EAAE,CAACyC,IAAI,QACN9C,KAAA,CAAAuC,aAAA,CAACjC,EAAE,QAAEoB,mBAAwB,CAAC,EAC9B1B,KAAA,CAAAuC,aAAA,CAAChC,EAAE,QACAwC,MAAM,CAACnB,eAAe,CAAC,CAACoB,OAAO,CAC9B,OAAO,EACPxC,MAAM,CAACsB,WAAW,CAAC,CAACmB,QAAQ,CAAC,CAC/B,CACE,CACG,CACV,EAEAb,2BAA2B,IAC1BpC,KAAA,CAAAuC,aAAA,CAAClC,EAAE,CAACyC,IAAI,QACN9C,KAAA,CAAAuC,aAAA,CAACjC,EAAE,QAAEqB,qBAA0B,CAAC,EAChC3B,KAAA,CAAAuC,aAAA,CAAChC,EAAE,QAAEsB,gBAAqB,CACnB,CAET,CACL,EACAQ,+BAA+B,KAAAa,qBAAA,KAAAA,qBAAA,GAC9BlD,KAAA,CAAAuC,aAAA,CAACY,gCAAgC,MAAE,CAAC,EAEtC,CAAC;AAEP,CAAC;AAED,SAASA,gCAAgCA,CAAA,EAAG;EAC1C,MAAM9B,OAAO,GAAGrB,KAAK,CAACsB,UAAU,CAACpB,aAAa,CAAC;EAE/C,MAAM;IACJc,iBAAiB;IACjBoC,oBAAoB;IACpB3B,mBAAmB;IACnBC,mBAAmB;IACnBE,eAAe;IACfE;EACF,CAAC,GAAGT,OAAO;EAEX,MAAMgC,kBAAkB,GAAGA,CACzBrC,iBAAmD,EACnDsC,mBAA+C,KAC5C;IACH,MAAMC,wBAAwB,GAC5BzB,WAAuC,IACpC;MACH,OAAOA,WAAW,KAAK,KAAK,IAAIA,WAAW,KAAK,CAAC;IACnD,CAAC;IAED,MAAM0B,KAAK,GAAG,CAAC,CAAC;IAChBxC,iBAAiB,CAACyC,OAAO,CAAEC,IAAI,IAAK;MAClC,MAAMC,eAAe,GAAGD,IAAI,CAAC5B,WAAW;MACxC,MAAM8B,SAAS,GAAGD,eAAe,GAC7BA,eAAe,GACfJ,wBAAwB,CAACI,eAAe,CAAC,GACzC,CAAC,GACDJ,wBAAwB,CAACD,mBAAmB,CAAC,GAC7C,CAAC,GACDA,mBAAmB;MAEvBE,KAAK,CAACI,SAAS,CAAC,GAAGJ,KAAK,CAACI,SAAS,CAAC,IAAI,EAAE;MACzCJ,KAAK,CAACI,SAAS,CAAC,CAACC,IAAI,CAACH,IAAI,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAOF,KAAK;EACd,CAAC;EAED,MAAMM,qCAAqC,GAAGT,kBAAkB,CAC9DrC,iBAAiB,EACjBc,WACF,CAAC;EAED,OACE9B,KAAA,CAAAuC,aAAA,CAAC5B,KAAK;IACJoD,MAAM;IACNpB,SAAS,EAAC,uCAAuC;IACjDqB,IAAI,EAAC;EAAO,GAEZhE,KAAA,CAAAuC,aAAA;IAASI,SAAS,EAAC;EAAa,GAAES,oBAA8B,CAAC,EACjEpD,KAAA,CAAAuC,aAAA,gBACEvC,KAAA,CAAAuC,aAAA,CAAC3B,EAAE;IAACqD,OAAO,EAAC,KAAK;IAACC,WAAW,EAAE;EAAE,GAC/BlE,KAAA,CAAAuC,aAAA,CAAC1B,EAAE,QAAEY,mBAAwB,CAAC,EAC9BzB,KAAA,CAAAuC,aAAA,CAAC1B,EAAE,QAAEa,mBAAwB,CAC3B,CACC,CAAC,EACR1B,KAAA,CAAAuC,aAAA,gBACG4B,MAAM,CAACC,IAAI,CAACN,qCAAqC,CAAC,CAChD7C,IAAI,CAAC,CAACoD,CAAC,EAAEC,CAAC,KAAKC,MAAM,CAACD,CAAC,CAAC,GAAGC,MAAM,CAACF,CAAC,CAAC,CAAC,CACrCG,GAAG,CAAEC,GAAG,IAAK;IACZ,OACEzE,KAAA,CAAAuC,aAAA,CAAC3B,EAAE;MAACqD,OAAO,EAAC,KAAK;MAACQ,GAAG,EAAEA;IAAI,GACzBzE,KAAA,CAAAuC,aAAA,CAACzB,EAAE,QACAC,2BAA2B,CAC1B+C,qCAAqC,CAACW,GAAG,CAAC,CAACD,GAAG,CAE1CE,oBAAkD,IAC/CA,oBAAoB,CAACC,QAC5B,CACF,CACE,CAAC,EACL3E,KAAA,CAAAuC,aAAA,CAACzB,EAAE,QACA2D,GAAG,KAAK,GAAG,IACV1B,MAAM,CAACnB,eAAe,CAAC,CAACoB,OAAO,CAC7B,OAAO,EACPxC,MAAM,CAACiE,GAAG,CAAC,CAACxB,QAAQ,CAAC,CACvB,CACA,CACF,CAAC;EAET,CAAC,CACE,CACF,CAAC;AAEZ;AAEA,eAAe7B,UAAU"}

package/components/upload/UploadVerify.d.ts

@@ -1,9 +1,11 @@
-import { UploadFile, UploadContextProps, UploadAcceptedFileTypes } from './types';
+import { UploadFile, UploadContextProps, UploadAcceptedFileTypes, UploadAcceptedFileTypesWithFileMaxSize } from './types';
 export declare const BYTES_IN_A_MEGA_BYTE = 1048576;
 export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];
 export declare function getFileTypeFromExtension(file: File): string;
-export declare function getAcceptedFileTypes(acceptedFileTypes: UploadAcceptedFileTypes): string;
+export declare function getAcceptedFileTypes(acceptedFileTypes: UploadAcceptedFileTypes | UploadAcceptedFileTypesWithFileMaxSize): string;
 export declare function hasPreferredMimeType(acceptedFileTypes: UploadAcceptedFileTypes, file: File): boolean;
+export declare function isArrayOfStrings(arr: any): boolean;
+export declare function isArrayOfObjects(arr: any): boolean;
 export declare function extendWithAbbreviation(acceptedFileTypes: UploadAcceptedFileTypes, abbreviations?: {
     jpg: string;
 }): string[];

package/components/upload/UploadVerify.js

@@ -7,15 +7,34 @@ export function verifyFiles(files, context) {
     errorLargeFile,
     errorUnsupportedFile
   } = context;
+  const getFileType = (file, listOfAcceptedFilesTypes) => {
+    return hasPreferredMimeType(listOfAcceptedFilesTypes, file) ? file.type : getFileTypeFromExtension(file) || file.type;
+  };
   const handleSize = file => {
-    return file.size / BYTES_IN_A_MEGA_BYTE > fileMaxSize ? String(errorLargeFile).replace('%size', format(fileMaxSize).toString()) : null;
+    const validateFileSize = (fileSize, maxFileSize) => {
+      if (maxFileSize && fileSize / BYTES_IN_A_MEGA_BYTE > maxFileSize) {
+        return String(errorLargeFile).replace('%size', format(maxFileSize).toString());
+      }
+      return null;
+    };
+    if (isArrayOfStrings(acceptedFileTypes) || acceptedFileTypes.length === 0 || !acceptedFileTypes) {
+      return validateFileSize(file.size, fileMaxSize);
+    } else if (isArrayOfObjects(acceptedFileTypes)) {
+      const fileType = getFileType(file, getAcceptedFileTypesAsListOfStrings(acceptedFileTypes));
+      const acceptedFileTypeObj = acceptedFileTypes.find(item => {
+        return item.fileType === fileType;
+      });
+      return validateFileSize(file.size, acceptedFileTypeObj.fileMaxSize !== undefined ? acceptedFileTypeObj.fileMaxSize : fileMaxSize);
+    }
+    return null;
   };
   const handleType = file => {
     if (acceptedFileTypes.length === 0) {
       return false;
     }
-    const fileType = hasPreferredMimeType(acceptedFileTypes, file) ? file.type : getFileTypeFromExtension(file) || file.type;
-    const foundType = extendWithAbbreviation(acceptedFileTypes).some(type => {
+    const listOfAcceptedFilesTypes = getAcceptedFileTypesAsListOfStrings(acceptedFileTypes);
+    const fileType = getFileType(file, listOfAcceptedFilesTypes);
+    const foundType = extendWithAbbreviation(listOfAcceptedFilesTypes).some(type => {
       return fileType.includes(type);
     });
     return !foundType ? errorUnsupportedFile : null;
@@ -36,11 +55,20 @@ export function getFileTypeFromExtension(file) {
   return file.name.includes('.') && file.name.replace(/.*\.([^.]+)$/, '$1') || null;
 }
 export function getAcceptedFileTypes(acceptedFileTypes) {
-  return extendWithAbbreviation(acceptedFileTypes).map(type => type.includes('/') ? type : `.${type}`).join(',');
+  return extendWithAbbreviation(getAcceptedFileTypesAsListOfStrings(acceptedFileTypes)).map(type => type.includes('/') ? type : `.${type}`).join(',');
 }
 export function hasPreferredMimeType(acceptedFileTypes, file) {
   return file.type.split('/')[1] && (!(acceptedFileTypes !== null && acceptedFileTypes !== void 0 && acceptedFileTypes.length) || (acceptedFileTypes === null || acceptedFileTypes === void 0 ? void 0 : acceptedFileTypes.some(type => type.toLowerCase() === file.type.toLowerCase())));
 }
+function getAcceptedFileTypesAsListOfStrings(acceptedFileTypes) {
+  return isArrayOfStrings(acceptedFileTypes) ? acceptedFileTypes : acceptedFileTypes.map(obj => obj.fileType);
+}
+export function isArrayOfStrings(arr) {
+  return Array.isArray(arr) && arr.length > 0 && arr.every(i => typeof i === 'string');
+}
+export function isArrayOfObjects(arr) {
+  return Array.isArray(arr) && arr.length > 0 && arr.every(i => typeof i === 'object');
+}
 export function extendWithAbbreviation(acceptedFileTypes) {
   let abbreviations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     jpg: 'jpeg'

package/components/upload/UploadVerify.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadVerify.js","names":["format","BYTES_IN_A_MEGA_BYTE","verifyFiles","files","context","fileMaxSize","acceptedFileTypes","errorLargeFile","errorUnsupportedFile","handleSize","file","size","String","replace","toString","handleType","length","fileType","hasPreferredMimeType","type","getFileTypeFromExtension","foundType","extendWithAbbreviation","some","includes","cleanedFiles","map","item","errorMessage","name","getAcceptedFileTypes","join","split","toLowerCase","abbreviations","arguments","undefined","jpg","list","Object","entries","forEach","_ref","abbr","t","push"],"sources":["../../../../src/components/upload/UploadVerify.tsx"],"sourcesContent":["import { format } from '../number-format/NumberUtils'\nimport {\n  UploadFile,\n  UploadContextProps,\n  UploadAcceptedFileTypes,\n} from './types'\n\nexport const BYTES_IN_A_MEGA_BYTE = 1048576\n\nexport function verifyFiles(\n  files: UploadFile[],\n  context: Pick<\n    UploadContextProps,\n    | 'errorUnsupportedFile'\n    | 'errorLargeFile'\n    | 'acceptedFileTypes'\n    | 'fileMaxSize'\n  >\n) {\n  const {\n    fileMaxSize,\n    acceptedFileTypes,\n    errorLargeFile,\n    errorUnsupportedFile,\n  } = context\n\n  const handleSize = (file: File) => {\n    return (\n      // Converts from b (binary) to MB (decimal)\n      file.size / BYTES_IN_A_MEGA_BYTE > fileMaxSize\n        ? String(errorLargeFile).replace(\n            '%size',\n            format(fileMaxSize).toString()\n          )\n        : null\n    )\n  }\n\n  const handleType = (file: File) => {\n    if (acceptedFileTypes.length === 0) {\n      return false\n    }\n    const fileType = hasPreferredMimeType(acceptedFileTypes, file)\n      ? file.type\n      : getFileTypeFromExtension(file) || file.type\n    const foundType = extendWithAbbreviation(acceptedFileTypes).some(\n      (type) => {\n        /**\n         * \"file.type\" can be e.g. \"images/png\"\n         */\n        return fileType.includes(type)\n      }\n    )\n    return !foundType ? errorUnsupportedFile : null\n  }\n\n  const cleanedFiles = files.map((item) => {\n    const { file } = item\n\n    const errorMessage = handleSize(file) || handleType(file)\n\n    if (errorMessage) {\n      item.errorMessage = errorMessage\n    }\n\n    return item\n  })\n\n  return cleanedFiles\n}\n\nexport function getFileTypeFromExtension(file: File) {\n  return (\n    (file.name.includes('.') && file.name.replace(/.*\\.([^.]+)$/, '$1')) ||\n    null\n  )\n}\n\nexport function getAcceptedFileTypes(\n  acceptedFileTypes: UploadAcceptedFileTypes\n) {\n  return extendWithAbbreviation(acceptedFileTypes)\n    .map((type) => (type.includes('/') ? type : `.${type}`))\n    .join(',')\n}\n\nexport function hasPreferredMimeType(\n  acceptedFileTypes: UploadAcceptedFileTypes,\n  file: File\n) {\n  return (\n    file.type.split('/')[1] &&\n    (!acceptedFileTypes?.length ||\n      acceptedFileTypes?.some(\n        (type) => type.toLowerCase() === file.type.toLowerCase()\n      ))\n  )\n}\n\nexport function extendWithAbbreviation(\n  acceptedFileTypes: UploadAcceptedFileTypes,\n  abbreviations = { jpg: 'jpeg' }\n) {\n  const list = [...acceptedFileTypes]\n\n  Object.entries(abbreviations).forEach(([type, abbr]) => {\n    if (list.some((t) => t === type) && !list.some((t) => t === abbr)) {\n      list.push(abbr)\n    }\n  })\n\n  return list\n}\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,8BAA8B;AAOrD,OAAO,MAAMC,oBAAoB,GAAG,OAAO;AAE3C,OAAO,SAASC,WAAWA,CACzBC,KAAmB,EACnBC,OAMC,EACD;EACA,MAAM;IACJC,WAAW;IACXC,iBAAiB;IACjBC,cAAc;IACdC;EACF,CAAC,GAAGJ,OAAO;EAEX,MAAMK,UAAU,GAAIC,IAAU,IAAK;IACjC,OAEEA,IAAI,CAACC,IAAI,GAAGV,oBAAoB,GAAGI,WAAW,GAC1CO,MAAM,CAACL,cAAc,CAAC,CAACM,OAAO,CAC5B,OAAO,EACPb,MAAM,CAACK,WAAW,CAAC,CAACS,QAAQ,CAAC,CAC/B,CAAC,GACD,IAAI;EAEZ,CAAC;EAED,MAAMC,UAAU,GAAIL,IAAU,IAAK;IACjC,IAAIJ,iBAAiB,CAACU,MAAM,KAAK,CAAC,EAAE;MAClC,OAAO,KAAK;IACd;IACA,MAAMC,QAAQ,GAAGC,oBAAoB,CAACZ,iBAAiB,EAAEI,IAAI,CAAC,GAC1DA,IAAI,CAACS,IAAI,GACTC,wBAAwB,CAACV,IAAI,CAAC,IAAIA,IAAI,CAACS,IAAI;IAC/C,MAAME,SAAS,GAAGC,sBAAsB,CAAChB,iBAAiB,CAAC,CAACiB,IAAI,CAC7DJ,IAAI,IAAK;MAIR,OAAOF,QAAQ,CAACO,QAAQ,CAACL,IAAI,CAAC;IAChC,CACF,CAAC;IACD,OAAO,CAACE,SAAS,GAAGb,oBAAoB,GAAG,IAAI;EACjD,CAAC;EAED,MAAMiB,YAAY,GAAGtB,KAAK,CAACuB,GAAG,CAAEC,IAAI,IAAK;IACvC,MAAM;MAAEjB;IAAK,CAAC,GAAGiB,IAAI;IAErB,MAAMC,YAAY,GAAGnB,UAAU,CAACC,IAAI,CAAC,IAAIK,UAAU,CAACL,IAAI,CAAC;IAEzD,IAAIkB,YAAY,EAAE;MAChBD,IAAI,CAACC,YAAY,GAAGA,YAAY;IAClC;IAEA,OAAOD,IAAI;EACb,CAAC,CAAC;EAEF,OAAOF,YAAY;AACrB;AAEA,OAAO,SAASL,wBAAwBA,CAACV,IAAU,EAAE;EACnD,OACGA,IAAI,CAACmB,IAAI,CAACL,QAAQ,CAAC,GAAG,CAAC,IAAId,IAAI,CAACmB,IAAI,CAAChB,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,IACnE,IAAI;AAER;AAEA,OAAO,SAASiB,oBAAoBA,CAClCxB,iBAA0C,EAC1C;EACA,OAAOgB,sBAAsB,CAAChB,iBAAiB,CAAC,CAC7CoB,GAAG,CAAEP,IAAI,IAAMA,IAAI,CAACK,QAAQ,CAAC,GAAG,CAAC,GAAGL,IAAI,GAAI,IAAGA,IAAK,EAAE,CAAC,CACvDY,IAAI,CAAC,GAAG,CAAC;AACd;AAEA,OAAO,SAASb,oBAAoBA,CAClCZ,iBAA0C,EAC1CI,IAAU,EACV;EACA,OACEA,IAAI,CAACS,IAAI,CAACa,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KACtB,EAAC1B,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEU,MAAM,MACzBV,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEiB,IAAI,CACpBJ,IAAI,IAAKA,IAAI,CAACc,WAAW,CAAC,CAAC,KAAKvB,IAAI,CAACS,IAAI,CAACc,WAAW,CAAC,CACzD,CAAC,EAAC;AAER;AAEA,OAAO,SAASX,sBAAsBA,CACpChB,iBAA0C,EAE1C;EAAA,IADA4B,aAAa,GAAAC,SAAA,CAAAnB,MAAA,QAAAmB,SAAA,QAAAC,SAAA,GAAAD,SAAA,MAAG;IAAEE,GAAG,EAAE;EAAO,CAAC;EAE/B,MAAMC,IAAI,GAAG,CAAC,GAAGhC,iBAAiB,CAAC;EAEnCiC,MAAM,CAACC,OAAO,CAACN,aAAa,CAAC,CAACO,OAAO,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACvB,IAAI,EAAEwB,IAAI,CAAC,GAAAD,IAAA;IACjD,IAAIJ,IAAI,CAACf,IAAI,CAAEqB,CAAC,IAAKA,CAAC,KAAKzB,IAAI,CAAC,IAAI,CAACmB,IAAI,CAACf,IAAI,CAAEqB,CAAC,IAAKA,CAAC,KAAKD,IAAI,CAAC,EAAE;MACjEL,IAAI,CAACO,IAAI,CAACF,IAAI,CAAC;IACjB;EACF,CAAC,CAAC;EAEF,OAAOL,IAAI;AACb"}
+{"version":3,"file":"UploadVerify.js","names":["format","BYTES_IN_A_MEGA_BYTE","verifyFiles","files","context","fileMaxSize","acceptedFileTypes","errorLargeFile","errorUnsupportedFile","getFileType","file","listOfAcceptedFilesTypes","hasPreferredMimeType","type","getFileTypeFromExtension","handleSize","validateFileSize","fileSize","maxFileSize","String","replace","toString","isArrayOfStrings","length","size","isArrayOfObjects","fileType","getAcceptedFileTypesAsListOfStrings","acceptedFileTypeObj","find","item","undefined","handleType","foundType","extendWithAbbreviation","some","includes","cleanedFiles","map","errorMessage","name","getAcceptedFileTypes","join","split","toLowerCase","obj","arr","Array","isArray","every","i","abbreviations","arguments","jpg","list","Object","entries","forEach","_ref","abbr","t","push"],"sources":["../../../../src/components/upload/UploadVerify.tsx"],"sourcesContent":["import { format } from '../number-format/NumberUtils'\nimport {\n  UploadFile,\n  UploadContextProps,\n  UploadAcceptedFileTypes,\n  UploadAcceptedFileTypesWithFileMaxSize,\n} from './types'\n\nexport const BYTES_IN_A_MEGA_BYTE = 1048576\n\nexport function verifyFiles(\n  files: UploadFile[],\n  context: Pick<\n    UploadContextProps,\n    | 'errorUnsupportedFile'\n    | 'errorLargeFile'\n    | 'acceptedFileTypes'\n    | 'fileMaxSize'\n  >\n) {\n  const {\n    fileMaxSize,\n    acceptedFileTypes,\n    errorLargeFile,\n    errorUnsupportedFile,\n  } = context\n\n  const getFileType = (\n    file: File,\n    listOfAcceptedFilesTypes: UploadAcceptedFileTypes\n  ) => {\n    return hasPreferredMimeType(listOfAcceptedFilesTypes, file)\n      ? file.type\n      : getFileTypeFromExtension(file) || file.type\n  }\n\n  const handleSize = (file: File) => {\n    const validateFileSize = (\n      fileSize: number,\n      maxFileSize: number | false\n    ) => {\n      if (\n        maxFileSize &&\n        // Converts from b (binary) to MB (decimal)\n        fileSize / BYTES_IN_A_MEGA_BYTE > maxFileSize\n      ) {\n        return String(errorLargeFile).replace(\n          '%size',\n          format(maxFileSize).toString()\n        )\n      }\n      return null\n    }\n\n    if (\n      isArrayOfStrings(acceptedFileTypes) ||\n      acceptedFileTypes.length === 0 ||\n      !acceptedFileTypes\n    ) {\n      return validateFileSize(file.size, fileMaxSize)\n    } else if (isArrayOfObjects(acceptedFileTypes)) {\n      const fileType = getFileType(\n        file,\n        getAcceptedFileTypesAsListOfStrings(acceptedFileTypes)\n      )\n\n      const acceptedFileTypeObj = (\n        acceptedFileTypes as UploadAcceptedFileTypesWithFileMaxSize\n      ).find((item) => {\n        return item.fileType === fileType\n      })\n\n      return validateFileSize(\n        file.size,\n        acceptedFileTypeObj.fileMaxSize !== undefined\n          ? acceptedFileTypeObj.fileMaxSize\n          : fileMaxSize\n      )\n    }\n    return null\n  }\n\n  const handleType = (file: File) => {\n    if (acceptedFileTypes.length === 0) {\n      return false\n    }\n\n    const listOfAcceptedFilesTypes =\n      getAcceptedFileTypesAsListOfStrings(acceptedFileTypes)\n    const fileType = getFileType(file, listOfAcceptedFilesTypes)\n    const foundType = extendWithAbbreviation(\n      listOfAcceptedFilesTypes\n    ).some((type) => {\n      /**\n       * \"file.type\" can be e.g. \"image/png\"\n       */\n      return fileType.includes(type)\n    })\n    return !foundType ? errorUnsupportedFile : null\n  }\n\n  const cleanedFiles = files.map((item) => {\n    const { file } = item\n\n    const errorMessage = handleSize(file) || handleType(file)\n\n    if (errorMessage) {\n      item.errorMessage = errorMessage\n    }\n\n    return item\n  })\n\n  return cleanedFiles\n}\n\nexport function getFileTypeFromExtension(file: File) {\n  return (\n    (file.name.includes('.') && file.name.replace(/.*\\.([^.]+)$/, '$1')) ||\n    null\n  )\n}\n\nexport function getAcceptedFileTypes(\n  acceptedFileTypes:\n    | UploadAcceptedFileTypes\n    | UploadAcceptedFileTypesWithFileMaxSize\n) {\n  return extendWithAbbreviation(\n    getAcceptedFileTypesAsListOfStrings(acceptedFileTypes)\n  )\n    .map((type) => (type.includes('/') ? type : `.${type}`))\n    .join(',')\n}\n\nexport function hasPreferredMimeType(\n  acceptedFileTypes: UploadAcceptedFileTypes,\n  file: File\n) {\n  return (\n    file.type.split('/')[1] &&\n    (!acceptedFileTypes?.length ||\n      acceptedFileTypes?.some(\n        (type) => type.toLowerCase() === file.type.toLowerCase()\n      ))\n  )\n}\n\nfunction getAcceptedFileTypesAsListOfStrings(\n  acceptedFileTypes:\n    | UploadAcceptedFileTypes\n    | UploadAcceptedFileTypesWithFileMaxSize\n) {\n  return isArrayOfStrings(acceptedFileTypes)\n    ? (acceptedFileTypes as UploadAcceptedFileTypes)\n    : (acceptedFileTypes as UploadAcceptedFileTypesWithFileMaxSize).map(\n        (obj) => obj.fileType\n      )\n}\n\nexport function isArrayOfStrings(arr) {\n  return (\n    Array.isArray(arr) &&\n    arr.length > 0 &&\n    arr.every((i) => typeof i === 'string')\n  )\n}\n\nexport function isArrayOfObjects(arr) {\n  return (\n    Array.isArray(arr) &&\n    arr.length > 0 &&\n    arr.every((i) => typeof i === 'object')\n  )\n}\n\nexport function extendWithAbbreviation(\n  acceptedFileTypes: UploadAcceptedFileTypes,\n  abbreviations = { jpg: 'jpeg' }\n) {\n  const list = [...acceptedFileTypes]\n\n  Object.entries(abbreviations).forEach(([type, abbr]) => {\n    if (list.some((t) => t === type) && !list.some((t) => t === abbr)) {\n      list.push(abbr)\n    }\n  })\n\n  return list\n}\n"],"mappings":"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"}

package/components/upload/style/dnb-upload.css

@@ -112,6 +112,21 @@
 .dnb-upload__text.dnb-p {
   color: var(--upload-text--secondary);
 }
+.dnb-upload__accepted-file-types-table.dnb-table {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.dnb-upload__accepted-file-types-table.dnb-table thead th {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-basis);
+  padding-top: var(--spacing-small);
+}
+.dnb-upload__accepted-file-types-table.dnb-table thead th:first-child {
+  padding-left: 0;
+}
+.dnb-upload__accepted-file-types-table.dnb-table tbody td:first-child {
+  padding-left: 0;
+}
 .dnb-upload__subtitle.dnb-p {
   color: var(--upload-text--secondary);
 }

package/components/upload/style/dnb-upload.min.css

@@ -1 +1 @@
-.dnb-upload{--upload-background:#fff;--upload-background--active:#d3d3d3;--upload-border:gray;--upload-border--active:#000;--upload-list-border:#000;--upload-icon--default:#000;--upload-icon--warning:red;--upload-highlight:#ffffe0;--upload-text--primary:#000;--upload-text--secondary:#000;background-color:var(--upload-background);border-radius:.5rem;display:flex;flex-direction:column;padding:var(--spacing-medium);position:relative}@media screen and (max-width:40em){.dnb-upload{padding:var(--spacing-medium) var(--spacing-small)}}.dnb-upload__outline{stroke:var(--upload-border);stroke-width:.1875rem;border-radius:.5rem;content:"";height:100%;inset:0;pointer-events:none;position:absolute;width:100%}.dnb-upload--active .dnb-upload__outline{stroke:var(--upload-border--active);height:calc(100% + 2px);inset:-1px;width:calc(100% + 2px)}.dnb-upload--active .dnb-upload__outline rect{stroke-width:.25rem;stroke-dasharray:0}.dnb-upload--active{background-color:var(--upload-background--active)}.dnb-upload__file-input{position:absolute;visibility:hidden}.dnb-upload__file-list{list-style:none;margin-bottom:0;margin-top:var(--spacing-medium);padding:0;position:relative}.dnb-upload__file-cell:after,.dnb-upload__file-list:before{background-color:var(--upload-list-border);content:"";height:1px;inset:0;position:absolute}.dnb-upload__file-cell{padding:var(--spacing-small) 0;position:relative;transition:background-color;transition-duration:1.5s;transition-timing-function:var(--easing-default)}.dnb-upload__file-cell:after{top:auto}.dnb-upload__file-cell__content{justify-content:space-between}.dnb-upload__file-cell__content,.dnb-upload__file-cell__content__left{align-items:center;display:flex;flex-direction:row}.dnb-upload__file-cell__content__left .dnb-icon{color:var(--upload-icon--default)}.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon{color:var(--upload-icon--warning)}.dnb-upload__file-cell--highlight{background-color:var(--upload-highlight)}.dnb-upload__file-cell__text-container{display:flex;flex-direction:column;margin-left:var(--spacing-small)}.dnb-upload__file-cell__text-container--loading{font-size:var(--font-size-basis)}.dnb-upload__subtitle.dnb-p,.dnb-upload__text.dnb-p{color:var(--upload-text--secondary)}
+.dnb-upload{--upload-background:#fff;--upload-background--active:#d3d3d3;--upload-border:gray;--upload-border--active:#000;--upload-list-border:#000;--upload-icon--default:#000;--upload-icon--warning:red;--upload-highlight:#ffffe0;--upload-text--primary:#000;--upload-text--secondary:#000;background-color:var(--upload-background);border-radius:.5rem;display:flex;flex-direction:column;padding:var(--spacing-medium);position:relative}@media screen and (max-width:40em){.dnb-upload{padding:var(--spacing-medium) var(--spacing-small)}}.dnb-upload__outline{stroke:var(--upload-border);stroke-width:.1875rem;border-radius:.5rem;content:"";height:100%;inset:0;pointer-events:none;position:absolute;width:100%}.dnb-upload--active .dnb-upload__outline{stroke:var(--upload-border--active);height:calc(100% + 2px);inset:-1px;width:calc(100% + 2px)}.dnb-upload--active .dnb-upload__outline rect{stroke-width:.25rem;stroke-dasharray:0}.dnb-upload--active{background-color:var(--upload-background--active)}.dnb-upload__file-input{position:absolute;visibility:hidden}.dnb-upload__file-list{list-style:none;margin-bottom:0;margin-top:var(--spacing-medium);padding:0;position:relative}.dnb-upload__file-cell:after,.dnb-upload__file-list:before{background-color:var(--upload-list-border);content:"";height:1px;inset:0;position:absolute}.dnb-upload__file-cell{padding:var(--spacing-small) 0;position:relative;transition:background-color;transition-duration:1.5s;transition-timing-function:var(--easing-default)}.dnb-upload__file-cell:after{top:auto}.dnb-upload__file-cell__content{justify-content:space-between}.dnb-upload__file-cell__content,.dnb-upload__file-cell__content__left{align-items:center;display:flex;flex-direction:row}.dnb-upload__file-cell__content__left .dnb-icon{color:var(--upload-icon--default)}.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon{color:var(--upload-icon--warning)}.dnb-upload__file-cell--highlight{background-color:var(--upload-highlight)}.dnb-upload__file-cell__text-container{display:flex;flex-direction:column;margin-left:var(--spacing-small)}.dnb-upload__file-cell__text-container--loading{font-size:var(--font-size-basis)}.dnb-upload__text.dnb-p{color:var(--upload-text--secondary)}.dnb-upload__accepted-file-types-table.dnb-table{width:-moz-fit-content;width:fit-content}.dnb-upload__accepted-file-types-table.dnb-table thead th{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);padding-top:var(--spacing-small)}.dnb-upload__accepted-file-types-table.dnb-table tbody td:first-child,.dnb-upload__accepted-file-types-table.dnb-table thead th:first-child{padding-left:0}.dnb-upload__subtitle.dnb-p{color:var(--upload-text--secondary)}

package/components/upload/style/dnb-upload.scss

@@ -145,6 +145,23 @@
     color: var(--upload-text--secondary);
   }
 
+  &__accepted-file-types-table {
+    &.dnb-table {
+      width: fit-content;
+      & thead th {
+        font-weight: var(--font-weight-medium);
+        font-size: var(--font-size-basis);
+        padding-top: var(--spacing-small);
+        &:first-child {
+          padding-left: 0;
+        }
+      }
+      & tbody td:first-child {
+        padding-left: 0;
+      }
+    }
+  }
+
   &__subtitle.dnb-p {
     color: var(--upload-text--secondary);
   }

package/components/upload/types.d.ts

@@ -2,6 +2,11 @@ import React from 'react';
 import type { SkeletonShow } from '../skeleton/Skeleton';
 import type { LocaleProps, SpacingProps } from '../../shared/types';
 export type UploadAcceptedFileTypes = string[];
+export type UploadAcceptedFileTypesWithFileMaxSize = UploadAcceptedFileTypeObject[];
+export type UploadAcceptedFileTypeObject = {
+    fileType: string;
+    fileMaxSize?: number | false;
+};
 export type UploadProps = {
     /**
      * unique id used with the useUpload hook to manage the files
@@ -10,7 +15,7 @@ export type UploadProps = {
     /**
      * list of accepted file types.
      */
-    acceptedFileTypes: UploadAcceptedFileTypes;
+    acceptedFileTypes: UploadAcceptedFileTypes | UploadAcceptedFileTypesWithFileMaxSize;
     /**
      * Skeleton should be applied when loading content
      * Default: null
@@ -22,10 +27,10 @@ export type UploadProps = {
      */
     filesAmountLimit?: number;
     /**
-     * fileMaxSize is max size of each file in MB
+     * Defines the max file size of each file in MB. Use either `0` or `false` to disable.
      * Default: 5 MB
      */
-    fileMaxSize?: number;
+    fileMaxSize?: number | false;
     /**
      * will be called on `files` changes made by the user. Access the files with `{ files }`.
      */
@@ -43,6 +48,7 @@ export type UploadProps = {
      */
     title?: React.ReactNode;
     text?: React.ReactNode;
+    fileTypeTableCaption?: React.ReactNode;
     fileTypeDescription?: React.ReactNode;
     fileSizeDescription?: React.ReactNode;
     fileAmountDescription?: React.ReactNode;

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'\n\nexport type UploadAcceptedFileTypes = string[]\n\nexport type UploadProps = {\n  /**\n   * unique id used with the useUpload hook to manage the files\n   */\n  id: string\n\n  /**\n   * list of accepted file types.\n   */\n  acceptedFileTypes: UploadAcceptedFileTypes\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   * fileMaxSize is max size of each file in MB\n   * Default: 5 MB\n   */\n  fileMaxSize?: number\n\n  /**\n   * will be called on `files` changes made by the user. Access the files with `{ files }`.\n   */\n  onChange?: ({ files }: { files: 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?: ({ fileItem }: { fileItem: UploadFile }) => void\n\n  /**\n   * Custom text properties\n   */\n  title?: React.ReactNode\n  text?: 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: UploadFile[]) => void\n} & Partial<UploadProps>\n\nexport type UploadFile = {\n  file: File\n  errorMessage?: React.ReactNode\n  isLoading?: boolean\n  exists?: boolean\n  id?: string\n}\n"],"mappings":""}
+{"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'\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: string\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: 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?: ({ fileItem }: { fileItem: UploadFile }) => void\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: UploadFile[]) => void\n} & Partial<UploadProps>\n\nexport type UploadFile = {\n  file: File\n  errorMessage?: React.ReactNode\n  isLoading?: boolean\n  exists?: boolean\n  id?: string\n}\n"],"mappings":""}

package/es/components/autocomplete/Autocomplete.d.ts

@@ -147,7 +147,7 @@ export interface AutocompleteProps {
   status_props?: FormStatusProps;
   status_no_animation?: boolean;
   /**
-   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).
    */
   globalStatus?: GlobalStatusConfigObject;
   /**
@@ -163,7 +163,7 @@ export interface AutocompleteProps {
    */
   disable_highlighting?: boolean;
   /**
-   * Use `true` to show a Autocomplete button to toggle the <a href="/uilib/components/fragments/drawer-list">DrawerList</a>. Defaults to `false`.
+   * Use `true` to show a Autocomplete button to toggle the [DrawerList](/uilib/components/fragments/drawer-list). Defaults to `false`.
    */
   show_submit_button?: boolean;
   /**

package/es/components/autocomplete/AutocompleteDocs.js

@@ -105,7 +105,7 @@ export const autocompleteProperties = {
     status: 'optional'
   },
   show_submit_button: {
-    doc: 'Use `true` to show a Autocomplete button to toggle the <a href="/uilib/components/fragments/drawer-list">DrawerList</a>. Defaults to `false`.',
+    doc: 'Use `true` to show a Autocomplete button to toggle the [DrawerList](/uilib/components/fragments/drawer-list). Defaults to `false`.',
     type: 'boolean',
     status: 'optional'
   },
@@ -195,7 +195,7 @@ export const autocompleteProperties = {
     status: 'optional'
   },
   globalStatus: {
-    doc: 'The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.',
+    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',
     type: 'object',
     status: 'optional'
   },
@@ -247,27 +247,27 @@ export const autocompleteProperties = {
 };
 export const AutocompleteEvents = {
   on_type: {
-    doc: 'Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.',
+    doc: 'Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data)',
     type: 'function',
     status: 'optional'
   },
   on_focus: {
-    doc: 'Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.',
+    doc: 'Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',
     type: 'function',
     status: 'optional'
   },
   on_blur: {
-    doc: 'Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.',
+    doc: 'Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',
     type: 'function',
     status: 'optional'
   },
   on_change: {
-    doc: 'Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.',
+    doc: 'Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',
     type: 'function',
     status: 'optional'
   },
   on_select: {
-    doc: 'Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>. The "active_item" property is the currently selected item by keyboard navigation',
+    doc: 'Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data). The "active_item" property is the currently selected item by keyboard navigation',
     type: 'function',
     status: 'optional'
   },

package/es/components/autocomplete/AutocompleteDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteDocs.js","names":["autocompleteProperties","mode","doc","type","status","input_value","placeholder","title","disable_filter","disable_highlighting","disable_reorder","search_numbers","search_in_word_index","keep_value","keep_selection","keep_value_and_selection","prevent_selection","show_clear_button","icon","icon_size","icon_position","input_icon","triangle_position","size","drawer_class","show_submit_button","align_autocomplete","no_options","aria_live_options","show_all","indicator_label","show_options_sr","selected_sr","submit_button_title","submit_button_icon","submit_element","opened","open_on_focus","stretch","skip_portal","status_state","status_props","globalStatus","label","label_direction","label_sr_only","suffix","skeleton","input_ref","input_element","AutocompleteEvents","on_type","on_focus","on_blur","on_change","on_select","on_show","on_hide"],"sources":["../../../../src/components/autocomplete/AutocompleteDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const autocompleteProperties: PropertiesTableProps = {\n  mode: {\n    doc: 'If set to `async`, it prevents showing the \"no options\" message during typing / filtering. Defaults to `sync`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_value: {\n    doc: 'Lets you define a custom input value.',\n    type: 'string',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Use this to define the pre-filled placeholder text in the input. Defaults to `title=\"Skriv og velg\"`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Give a title to let the user know what they have to do. Defaults to `Skriv og få alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  disable_filter: {\n    doc: 'If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_highlighting: {\n    doc: 'If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_reorder: {\n    doc: 'If set to `true`, reordering of search results will be disabled. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_numbers: {\n    doc: 'If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_in_word_index: {\n    doc: 'This gives you the possibility to change the threshold number, which defines from what word on we search \"inside words\". Defaults to `3`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value: {\n    doc: 'Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_selection: {\n    doc: 'Use `true` to not remove selected item on input blur, when the input value is empty. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value_and_selection: {\n    doc: 'Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_selection: {\n    doc: 'If set to `true`, no permanent selection will be made. Also, the typed value will not disappear on input blur (like `keep_value`). Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  show_clear_button: {\n    doc: 'If set to `true`, a clear button is shown inside the input field. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the autocomplete input.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Change the size of the icon pragmatically.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_icon: {\n    doc: 'Same as `icon`.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  triangle_position: {\n    doc: 'Position of icon arrow / triangle the drawer. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.',\n    type: 'string',\n    status: 'optional',\n  },\n  drawer_class: {\n    doc: 'Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  show_submit_button: {\n    doc: 'Use `true` to show a Autocomplete button to toggle the <a href=\"/uilib/components/fragments/drawer-list\">DrawerList</a>. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align_autocomplete: {\n    doc: 'Use `right` to change the options alignment direction. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  no_options: {\n    doc: 'Text show in the \"no options\" item. Defaults to `Ingen alternativer`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  aria_live_options: {\n    doc: 'Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_all: {\n    doc: 'Text that lets a user unravel all the available options. Defaults to `Vis alt`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Text show on indicator \"options\" item. Defaults to `Henter data ...`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_options_sr: {\n    doc: 'Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.',\n    type: 'string',\n    status: 'optional',\n  },\n  selected_sr: {\n    doc: 'Only for screen readers (VoiceOver). The label used to announce the selected item. Defaults to `Valgt:`.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_button_title: {\n    doc: 'Title on submit button. Defaults to `Vis alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  submit_button_icon: {\n    doc: 'The icon used in the submit button. Defaults to `chevron_down`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  submit_element: {\n    doc: 'Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  opened: {\n    doc: 'If set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  open_on_focus: {\n    doc: 'Use `true` to auto open the list once the user is entering the input field with the keyboard.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the autocomplete will be 100% in available `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skip_portal: {\n    doc: 'Set to `true` to disable the React Portal behavior. Defaults to `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The <a href=\"/uilib/components/global-status/properties/#configuration-object\">configuration</a> used for the target <a href=\"/uilib/components/global-status\">GlobalStatus</a>.',\n    type: 'object',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  input_ref: {\n    doc: 'Use a React.Ref to get access to the `input` DOM element.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  input_element: {\n    doc: 'Lets you provide a custom React element as the input HTML element.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  '[DrawerList](/uilib/components/fragments/drawer-list/properties)': {\n    doc: 'all DrawerList properties.',\n    type: 'Various',\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 AutocompleteEvents: PropertiesTableProps = {\n  on_type: {\n    doc: 'Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_blur: {\n    doc: 'Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_change: {\n    doc: 'Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_select: {\n    doc: 'Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including <a href=\"/uilib/components/autocomplete/events#dynamically-change-data\">these methods</a>. The \"active_item\" property is the currently selected item by keyboard navigation',\n    type: 'function',\n    status: 'optional',\n  },\n  on_show: {\n    doc: 'Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_hide: {\n    doc: 'Will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,sBAA4C,GAAG;EAC1DC,IAAI,EAAE;IACJC,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,WAAW,EAAE;IACXH,GAAG,EAAE,uCAAuC;IAC5CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,iGAAiG;IACtGC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDI,cAAc,EAAE;IACdN,GAAG,EAAE,qHAAqH;IAC1HC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,oBAAoB,EAAE;IACpBP,GAAG,EAAE,qHAAqH;IAC1HC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,eAAe,EAAE;IACfR,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,cAAc,EAAE;IACdT,GAAG,EAAE,gKAAgK;IACrKC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,oBAAoB,EAAE;IACpBV,GAAG,EAAE,2IAA2I;IAChJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,0NAA0N;IAC/NC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,cAAc,EAAE;IACdZ,GAAG,EAAE,2GAA2G;IAChHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,wBAAwB,EAAE;IACxBb,GAAG,EAAE,2JAA2J;IAChKC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,iBAAiB,EAAE;IACjBd,GAAG,EAAE,yJAAyJ;IAC9JC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDa,iBAAiB,EAAE;IACjBf,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDc,IAAI,EAAE;IACJhB,GAAG,EAAE,2CAA2C;IAChDC,IAAI,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC;IAC9BC,MAAM,EAAE;EACV,CAAC;EACDe,SAAS,EAAE;IACTjB,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDgB,aAAa,EAAE;IACblB,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDiB,UAAU,EAAE;IACVnB,GAAG,EAAE,iBAAiB;IACtBC,IAAI,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC;IAC9BC,MAAM,EAAE;EACV,CAAC;EACDkB,iBAAiB,EAAE;IACjBpB,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDmB,IAAI,EAAE;IACJrB,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDoB,YAAY,EAAE;IACZtB,GAAG,EAAE,+LAA+L;IACpMC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDqB,kBAAkB,EAAE;IAClBvB,GAAG,EAAE,+IAA+I;IACpJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDsB,kBAAkB,EAAE;IAClBxB,GAAG,EAAE,4EAA4E;IACjFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDuB,UAAU,EAAE;IACVzB,GAAG,EAAE,uEAAuE;IAC5EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDwB,iBAAiB,EAAE;IACjB1B,GAAG,EAAE,kJAAkJ;IACvJC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDyB,QAAQ,EAAE;IACR3B,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD0B,eAAe,EAAE;IACf5B,GAAG,EAAE,uEAAuE;IAC5EC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD2B,eAAe,EAAE;IACf7B,GAAG,EAAE,qNAAqN;IAC1NC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACD4B,WAAW,EAAE;IACX9B,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACD6B,mBAAmB,EAAE;IACnB/B,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD8B,kBAAkB,EAAE;IAClBhC,GAAG,EAAE,iEAAiE;IACtEC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,MAAM,EAAE;EACV,CAAC;EACD+B,cAAc,EAAE;IACdjC,GAAG,EAAE,oLAAoL;IACzLC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDgC,MAAM,EAAE;IACNlC,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDiC,aAAa,EAAE;IACbnC,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDkC,OAAO,EAAE;IACPpC,GAAG,EAAE,4EAA4E;IACjFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDmC,WAAW,EAAE;IACXrC,GAAG,EAAE,0EAA0E;IAC/EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDoC,YAAY,EAAE;IACZtC,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDqC,YAAY,EAAE;IACZvC,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDsC,YAAY,EAAE;IACZxC,GAAG,EAAE,kLAAkL;IACvLC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDuC,KAAK,EAAE;IACLzC,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDwC,eAAe,EAAE;IACf1C,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDyC,aAAa,EAAE;IACb3C,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD0C,MAAM,EAAE;IACN5C,GAAG,EAAE,oKAAoK;IACzKC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD2C,QAAQ,EAAE;IACR7C,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD4C,SAAS,EAAE;IACT9C,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACD6C,aAAa,EAAE;IACb/C,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;IACjCC,MAAM,EAAE;EACV,CAAC;EACD,kEAAkE,EAAE;IAClEF,GAAG,EAAE,4BAA4B;IACjCC,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,MAAM8C,kBAAwC,GAAG;EACtDC,OAAO,EAAE;IACPjD,GAAG,EAAE,0OAA0O;IAC/OC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDgD,QAAQ,EAAE;IACRlD,GAAG,EAAE,oOAAoO;IACzOC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDiD,OAAO,EAAE;IACPnD,GAAG,EAAE,mOAAmO;IACxOC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDkD,SAAS,EAAE;IACTpD,GAAG,EAAE,iPAAiP;IACtPC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDmD,SAAS,EAAE;IACTrD,GAAG,EAAE,8WAA8W;IACnXC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDoD,OAAO,EAAE;IACPtD,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDqD,OAAO,EAAE;IACPvD,GAAG,EAAE,sIAAsI;IAC3IC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"AutocompleteDocs.js","names":["autocompleteProperties","mode","doc","type","status","input_value","placeholder","title","disable_filter","disable_highlighting","disable_reorder","search_numbers","search_in_word_index","keep_value","keep_selection","keep_value_and_selection","prevent_selection","show_clear_button","icon","icon_size","icon_position","input_icon","triangle_position","size","drawer_class","show_submit_button","align_autocomplete","no_options","aria_live_options","show_all","indicator_label","show_options_sr","selected_sr","submit_button_title","submit_button_icon","submit_element","opened","open_on_focus","stretch","skip_portal","status_state","status_props","globalStatus","label","label_direction","label_sr_only","suffix","skeleton","input_ref","input_element","AutocompleteEvents","on_type","on_focus","on_blur","on_change","on_select","on_show","on_hide"],"sources":["../../../../src/components/autocomplete/AutocompleteDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const autocompleteProperties: PropertiesTableProps = {\n  mode: {\n    doc: 'If set to `async`, it prevents showing the \"no options\" message during typing / filtering. Defaults to `sync`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_value: {\n    doc: 'Lets you define a custom input value.',\n    type: 'string',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Use this to define the pre-filled placeholder text in the input. Defaults to `title=\"Skriv og velg\"`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Give a title to let the user know what they have to do. Defaults to `Skriv og få alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  disable_filter: {\n    doc: 'If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_highlighting: {\n    doc: 'If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disable_reorder: {\n    doc: 'If set to `true`, reordering of search results will be disabled. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_numbers: {\n    doc: 'If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  search_in_word_index: {\n    doc: 'This gives you the possibility to change the threshold number, which defines from what word on we search \"inside words\". Defaults to `3`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value: {\n    doc: 'Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_selection: {\n    doc: 'Use `true` to not remove selected item on input blur, when the input value is empty. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keep_value_and_selection: {\n    doc: 'Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_selection: {\n    doc: 'If set to `true`, no permanent selection will be made. Also, the typed value will not disappear on input blur (like `keep_value`). Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  show_clear_button: {\n    doc: 'If set to `true`, a clear button is shown inside the input field. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  icon: {\n    doc: 'To be included in the autocomplete input.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  icon_size: {\n    doc: 'Change the size of the icon pragmatically.',\n    type: 'string',\n    status: 'optional',\n  },\n  icon_position: {\n    doc: 'Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  input_icon: {\n    doc: 'Same as `icon`.',\n    type: ['string', 'React.Node'],\n    status: 'optional',\n  },\n  triangle_position: {\n    doc: 'Position of icon arrow / triangle the drawer. Set to `left` or `right`. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.',\n    type: 'string',\n    status: 'optional',\n  },\n  drawer_class: {\n    doc: 'Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  show_submit_button: {\n    doc: 'Use `true` to show a Autocomplete button to toggle the [DrawerList](/uilib/components/fragments/drawer-list). Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  align_autocomplete: {\n    doc: 'Use `right` to change the options alignment direction. Defaults to `left`.',\n    type: 'string',\n    status: 'optional',\n  },\n  no_options: {\n    doc: 'Text show in the \"no options\" item. Defaults to `Ingen alternativer`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  aria_live_options: {\n    doc: 'Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_all: {\n    doc: 'Text that lets a user unravel all the available options. Defaults to `Vis alt`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Text show on indicator \"options\" item. Defaults to `Henter data ...`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  show_options_sr: {\n    doc: 'Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.',\n    type: 'string',\n    status: 'optional',\n  },\n  selected_sr: {\n    doc: 'Only for screen readers (VoiceOver). The label used to announce the selected item. Defaults to `Valgt:`.',\n    type: 'string',\n    status: 'optional',\n  },\n  submit_button_title: {\n    doc: 'Title on submit button. Defaults to `Vis alternativer`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  submit_button_icon: {\n    doc: 'The icon used in the submit button. Defaults to `chevron_down`.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  submit_element: {\n    doc: 'Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  opened: {\n    doc: 'If set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  open_on_focus: {\n    doc: 'Use `true` to auto open the list once the user is entering the input field with the keyboard.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the autocomplete will be 100% in available `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skip_portal: {\n    doc: 'Set to `true` to disable the React Portal behavior. Defaults to `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_state: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  status_props: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'object',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_direction: {\n    doc: 'Use `label_direction=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  label_sr_only: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  input_ref: {\n    doc: 'Use a React.Ref to get access to the `input` DOM element.',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  input_element: {\n    doc: 'Lets you provide a custom React element as the input HTML element.',\n    type: ['string', 'React.Element'],\n    status: 'optional',\n  },\n  '[DrawerList](/uilib/components/fragments/drawer-list/properties)': {\n    doc: 'all DrawerList properties.',\n    type: 'Various',\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 AutocompleteEvents: PropertiesTableProps = {\n  on_type: {\n    doc: 'Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data)',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_blur: {\n    doc: 'Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_change: {\n    doc: 'Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data).',\n    type: 'function',\n    status: 'optional',\n  },\n  on_select: {\n    doc: 'Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including [these methods](/uilib/components/autocomplete/events#dynamically-change-data). The \"active_item\" property is the currently selected item by keyboard navigation',\n    type: 'function',\n    status: 'optional',\n  },\n  on_show: {\n    doc: 'Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_hide: {\n    doc: 'Will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}