@dnb/eufemia 10.40.0 → 10.41.0

package/components/upload/UploadDropzone.js

@@ -1,8 +1,10 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _svg;
 const _excluded = ["children", "className"];
-import React from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import HeightAnimation from '../height-animation/HeightAnimation';
 import { UploadContext } from './UploadContext';
@@ -13,14 +15,14 @@ export default function UploadDropzone(_ref) {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const props = rest;
-  const context = React.useContext(UploadContext);
-  const [hover, setHover] = React.useState(false);
-  const hoverTimeout = React.useRef();
+  const context = useContext(UploadContext);
+  const [hover, setHover] = useState(false);
+  const hoverTimeout = useRef();
   const {
     onInputUpload,
     id
   } = context;
-  const getFiles = event => {
+  const getFiles = useCallback(event => {
     const fileData = event.dataTransfer;
     const files = [];
     Array.from(fileData.files).forEach(file => {
@@ -29,28 +31,28 @@ export default function UploadDropzone(_ref) {
       });
     });
     return files;
-  };
-  const hoverHandler = (event, state) => {
+  }, []);
+  const clearTimers = useCallback(() => {
+    clearTimeout(hoverTimeout.current);
+  }, []);
+  const hoverHandler = useCallback((event, state) => {
     event.stopPropagation();
     event.preventDefault();
     clearTimers();
     setHover(state);
-  };
-  const dropHandler = event => {
+  }, [clearTimers]);
+  const dropHandler = useCallback(event => {
     const files = getFiles(event);
     onInputUpload(files);
     hoverHandler(event, false);
-  };
-  const dragEnterHandler = event => {
+  }, [getFiles, onInputUpload, hoverHandler]);
+  const dragEnterHandler = useCallback(event => {
     hoverHandler(event, true);
-  };
-  const dragLeaveHandler = event => {
+  }, [hoverHandler]);
+  const dragLeaveHandler = useCallback(event => {
     hoverHandler(event, false);
-  };
-  const clearTimers = () => {
-    clearTimeout(hoverTimeout.current);
-  };
-  React.useEffect(() => {
+  }, [hoverHandler]);
+  useEffect(() => {
     const elem = document.body;
     const execute = () => {
       try {
@@ -77,7 +79,7 @@ export default function UploadDropzone(_ref) {
         }
       } catch (e) {}
     };
-  }, []);
+  }, [clearTimers, dragEnterHandler, dragLeaveHandler, dropHandler, id]);
   return React.createElement(HeightAnimation, _extends({
     className: classnames(className, hover && 'dnb-upload--active'),
     onDrop: dropHandler,

package/components/upload/UploadDropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadDropzone.js","names":["React","classnames","HeightAnimation","UploadContext","UploadDropzone","_ref","children","className","rest","_objectWithoutProperties","_excluded","props","context","useContext","hover","setHover","useState","hoverTimeout","useRef","onInputUpload","id","getFiles","event","fileData","dataTransfer","files","Array","from","forEach","file","push","hoverHandler","state","stopPropagation","preventDefault","clearTimers","dropHandler","dragEnterHandler","dragLeaveHandler","clearTimeout","current","useEffect","elem","document","body","execute","hasAttribute","add","addEventListener","setAttribute","e","timeoutId","setTimeout","getAttribute","remove","removeEventListener","removeAttribute","createElement","_extends","onDrop","onDragOver","onDragLeave","_svg","xmlns","fill","width","height","rx","ry","strokeWidth","strokeDashoffset","strokeDasharray"],"sources":["../../../../src/components/upload/UploadDropzone.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { UploadContext } from './UploadContext'\nimport type { UploadAllProps, UploadFile, UploadProps } from './types'\n\nexport type UploadDragEvent = React.DragEvent | DragEvent\n\nexport default function UploadDropzone({\n  children,\n  className,\n  ...rest\n}: Partial<UploadAllProps>) {\n  const props = rest as Omit<UploadProps, 'title' | 'onChange'>\n  const context = React.useContext(UploadContext)\n  const [hover, setHover] = React.useState(false)\n  const hoverTimeout = React.useRef<NodeJS.Timer>()\n\n  const { onInputUpload, id } = context\n\n  const getFiles = (event: UploadDragEvent) => {\n    const fileData = event.dataTransfer\n\n    const files: UploadFile[] = []\n\n    Array.from(fileData.files).forEach((file) => {\n      files.push({ file })\n    })\n\n    return files\n  }\n\n  const hoverHandler = (event: UploadDragEvent, state: boolean) => {\n    event.stopPropagation()\n    event.preventDefault()\n    clearTimers()\n    setHover(state)\n  }\n\n  const dropHandler = (event: UploadDragEvent) => {\n    const files = getFiles(event)\n\n    onInputUpload(files)\n    hoverHandler(event, false)\n  }\n\n  const dragEnterHandler = (event: UploadDragEvent) => {\n    hoverHandler(event, true)\n  }\n\n  const dragLeaveHandler = (event: UploadDragEvent) => {\n    hoverHandler(event, false)\n  }\n\n  const clearTimers = () => {\n    clearTimeout(hoverTimeout.current)\n  }\n\n  React.useEffect(() => {\n    const elem = document.body\n    const execute = () => {\n      try {\n        if (!elem.hasAttribute('data-upload-drop-zone')) {\n          const add = elem.addEventListener\n          add('drop', dropHandler)\n          add('dragover', dragEnterHandler)\n          add('dragleave', dragLeaveHandler)\n          elem.setAttribute('data-upload-drop-zone', id)\n        }\n      } catch (e) {\n        //\n      }\n    }\n    const timeoutId = setTimeout(execute, 10) // Add the listeners delayed (ms) without prioritization, in case of re-renders\n\n    return () => {\n      clearTimers()\n      clearTimeout(timeoutId)\n      try {\n        if (elem.getAttribute('data-upload-drop-zone') === id) {\n          const remove = elem.removeEventListener\n          remove('drop', dropHandler)\n          remove('dragover', dragEnterHandler)\n          remove('dragleave', dragLeaveHandler)\n          elem.removeAttribute('data-upload-drop-zone')\n        }\n      } catch (e) {\n        //\n      }\n    }\n  }, [])\n\n  return (\n    <HeightAnimation\n      className={classnames(className, hover && 'dnb-upload--active')}\n      onDrop={dropHandler}\n      onDragOver={dragEnterHandler}\n      onDragLeave={dragLeaveHandler}\n      {...props}\n    >\n      {children}\n\n      <svg\n        className=\"dnb-upload__outline\"\n        aria-hidden\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n      >\n        <rect\n          width=\"100%\"\n          height=\"100%\"\n          rx=\"0.5rem\"\n          ry=\"0.5rem\"\n          strokeWidth=\"3\"\n          strokeDashoffset=\"4\"\n          strokeDasharray=\"8 8\"\n        />\n      </svg>\n    </HeightAnimation>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"UploadDropzone.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","HeightAnimation","UploadContext","UploadDropzone","_ref","children","className","rest","_objectWithoutProperties","_excluded","props","context","hover","setHover","hoverTimeout","onInputUpload","id","getFiles","event","fileData","dataTransfer","files","Array","from","forEach","file","push","clearTimers","clearTimeout","current","hoverHandler","state","stopPropagation","preventDefault","dropHandler","dragEnterHandler","dragLeaveHandler","elem","document","body","execute","hasAttribute","add","addEventListener","setAttribute","e","timeoutId","setTimeout","getAttribute","remove","removeEventListener","removeAttribute","createElement","_extends","onDrop","onDragOver","onDragLeave","_svg","xmlns","fill","width","height","rx","ry","strokeWidth","strokeDashoffset","strokeDasharray"],"sources":["../../../../src/components/upload/UploadDropzone.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport classnames from 'classnames'\n\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { UploadContext } from './UploadContext'\nimport type { UploadAllProps, UploadFile, UploadProps } from './types'\n\nexport type UploadDragEvent = React.DragEvent | DragEvent\n\nexport default function UploadDropzone({\n  children,\n  className,\n  ...rest\n}: Partial<UploadAllProps>) {\n  const props = rest as Omit<UploadProps, 'title' | 'onChange'>\n  const context = useContext(UploadContext)\n  const [hover, setHover] = useState(false)\n  const hoverTimeout = useRef<NodeJS.Timer>()\n\n  const { onInputUpload, id } = context\n\n  const getFiles = useCallback((event: UploadDragEvent) => {\n    const fileData = event.dataTransfer\n\n    const files: UploadFile[] = []\n\n    Array.from(fileData.files).forEach((file) => {\n      files.push({ file })\n    })\n\n    return files\n  }, [])\n\n  const clearTimers = useCallback(() => {\n    clearTimeout(hoverTimeout.current)\n  }, [])\n\n  const hoverHandler = useCallback(\n    (event: UploadDragEvent, state: boolean) => {\n      event.stopPropagation()\n      event.preventDefault()\n      clearTimers()\n      setHover(state)\n    },\n    [clearTimers]\n  )\n\n  const dropHandler = useCallback(\n    (event: UploadDragEvent) => {\n      const files = getFiles(event)\n\n      onInputUpload(files)\n      hoverHandler(event, false)\n    },\n    [getFiles, onInputUpload, hoverHandler]\n  )\n\n  const dragEnterHandler = useCallback(\n    (event: UploadDragEvent) => {\n      hoverHandler(event, true)\n    },\n    [hoverHandler]\n  )\n\n  const dragLeaveHandler = useCallback(\n    (event: UploadDragEvent) => {\n      hoverHandler(event, false)\n    },\n    [hoverHandler]\n  )\n\n  useEffect(() => {\n    const elem = document.body\n    const execute = () => {\n      try {\n        if (!elem.hasAttribute('data-upload-drop-zone')) {\n          const add = elem.addEventListener\n          add('drop', dropHandler)\n          add('dragover', dragEnterHandler)\n          add('dragleave', dragLeaveHandler)\n          elem.setAttribute('data-upload-drop-zone', id)\n        }\n      } catch (e) {\n        //\n      }\n    }\n    const timeoutId = setTimeout(execute, 10) // Add the listeners delayed (ms) without prioritization, in case of re-renders\n\n    return () => {\n      clearTimers()\n      clearTimeout(timeoutId)\n      try {\n        if (elem.getAttribute('data-upload-drop-zone') === id) {\n          const remove = elem.removeEventListener\n          remove('drop', dropHandler)\n          remove('dragover', dragEnterHandler)\n          remove('dragleave', dragLeaveHandler)\n          elem.removeAttribute('data-upload-drop-zone')\n        }\n      } catch (e) {\n        //\n      }\n    }\n  }, [clearTimers, dragEnterHandler, dragLeaveHandler, dropHandler, id])\n\n  return (\n    <HeightAnimation\n      className={classnames(className, hover && 'dnb-upload--active')}\n      onDrop={dropHandler}\n      onDragOver={dragEnterHandler}\n      onDragLeave={dragLeaveHandler}\n      {...props}\n    >\n      {children}\n\n      <svg\n        className=\"dnb-upload__outline\"\n        aria-hidden\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n      >\n        <rect\n          width=\"100%\"\n          height=\"100%\"\n          rx=\"0.5rem\"\n          ry=\"0.5rem\"\n          strokeWidth=\"3\"\n          strokeDashoffset=\"4\"\n          strokeDasharray=\"8 8\"\n        />\n      </svg>\n    </HeightAnimation>\n  )\n}\n"],"mappings":"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"}

package/components/upload/UploadInfo.js

@@ -17,20 +17,21 @@ const UploadInfo = () => {
     fileAmountDescription,
     fileSizeContent,
     filesAmountLimit,
-    fileMaxSize
+    fileMaxSize,
+    children
   } = context;
-  const prettyfiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
+  const prettifiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
   return React.createElement(React.Fragment, null, React.createElement(Lead, {
     space: "0"
   }, title), React.createElement(P, {
     top: "xx-small",
     className: "dnb-upload__text"
-  }, text), React.createElement(Dl, {
+  }, text), children, React.createElement(Dl, {
     top: "small",
     bottom: 0,
     layout: "horizontal",
     className: "dnb-upload__condition-list"
-  }, prettyfiedAcceptedFileFormats && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), 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))));
+  }, 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))));
 };
 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","prettyfiedAcceptedFileFormats","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  } = context\n\n  const prettyfiedAcceptedFileFormats = 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      <Dl\n        top=\"small\"\n        bottom={0}\n        layout=\"horizontal\"\n        className=\"dnb-upload__condition-list\"\n      >\n        {prettyfiedAcceptedFileFormats && (\n          <Dl.Item>\n            <Dt>{fileTypeDescription}</Dt>\n            <Dd>{prettyfiedAcceptedFileFormats}</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;EACF,CAAC,GAAGV,OAAO;EAEX,MAAMW,6BAA6B,GAAGP,iBAAiB,CACpDQ,IAAI,CAAC,IAAI,CAAC,CACVC,WAAW,CAAC,CAAC;EAEhB,OACEvB,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACEzB,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IAACuB,KAAK,EAAC;EAAG,GAAEd,KAAY,CAAC,EAE9BZ,KAAA,CAAAwB,aAAA,CAACpB,CAAC;IAACuB,GAAG,EAAC,UAAU;IAACC,SAAS,EAAC;EAAkB,GAC3Cf,IACA,CAAC,EAEJb,KAAA,CAAAwB,aAAA,CAACnB,EAAE;IACDsB,GAAG,EAAC,OAAO;IACXE,MAAM,EAAE,CAAE;IACVC,MAAM,EAAC,YAAY;IACnBF,SAAS,EAAC;EAA4B,GAErCP,6BAA6B,IAC5BrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAES,mBAAwB,CAAC,EAC9Bf,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QAAEc,6BAAkC,CAChC,CACV,EAEDrB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEU,mBAAwB,CAAC,EAC9BhB,KAAA,CAAAwB,aAAA,CAACjB,EAAE,QACAyB,MAAM,CAACd,eAAe,CAAC,CAACe,OAAO,CAC9B,OAAO,EACPzB,MAAM,CAACY,WAAW,CAAC,CAACc,QAAQ,CAAC,CAC/B,CACE,CACG,CAAC,EAETf,gBAAgB,GAAGlB,YAAY,CAACkB,gBAAgB,IAC/CnB,KAAA,CAAAwB,aAAA,CAACnB,EAAE,CAAC0B,IAAI,QACN/B,KAAA,CAAAwB,aAAA,CAAClB,EAAE,QAAEW,qBAA0B,CAAC,EAChCjB,KAAA,CAAAwB,aAAA,CAACjB,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","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"}

package/components/upload/UploadVerify.d.ts

@@ -1,4 +1,5 @@
 import { UploadFile, UploadContextProps, UploadAcceptedFileTypes } 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;

package/components/upload/UploadVerify.js

@@ -1,5 +1,5 @@
 import { format } from '../number-format/NumberUtils';
-const BYTES_IN_A_MEGA_BYTE = 1048576;
+export const BYTES_IN_A_MEGA_BYTE = 1048576;
 export function verifyFiles(files, context) {
   const {
     fileMaxSize,

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\nconst 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":"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"}
+{"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":"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"}

package/components/upload/types.d.ts

@@ -54,8 +54,9 @@ export type UploadProps = {
     loadingText?: React.ReactNode;
     deleteButton?: React.ReactNode;
     fileListAriaLabel?: string;
+    children?: React.ReactNode;
 };
-export type UploadAllProps = UploadProps & SpacingProps & LocaleProps & Omit<React.HTMLProps<HTMLElement>, 'onChange'>;
+export type UploadAllProps = UploadProps & SpacingProps & LocaleProps & Omit<React.HTMLProps<HTMLElement>, 'onChange' | 'title'>;
 export type UploadContextProps = {
     id?: string;
     onInputUpload: (files: UploadFile[]) => void;

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}\n\nexport type UploadAllProps = UploadProps &\n  SpacingProps &\n  LocaleProps &\n  Omit<React.HTMLProps<HTMLElement>, 'onChange'>\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 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":""}

package/components/upload/useUpload.js

@@ -1,22 +1,23 @@
+import { useCallback, useMemo } from 'react';
 import { useSharedState } from '../../shared/helpers/useSharedState';
 function useUpload(id) {
   const {
     data,
     extend
   } = useSharedState(id);
-  const setFiles = files => {
+  const setFiles = useCallback(files => {
     extend({
       files
     });
-  };
-  const setInternalFiles = internalFiles => {
+  }, [extend]);
+  const setInternalFiles = useCallback(internalFiles => {
     extend({
       internalFiles
     });
-  };
-  const files = (data === null || data === void 0 ? void 0 : data.files) || [];
-  const internalFiles = (data === null || data === void 0 ? void 0 : data.internalFiles) || [];
-  const getExistingFile = function (file) {
+  }, [extend]);
+  const files = useMemo(() => (data === null || data === void 0 ? void 0 : data.files) || [], [data === null || data === void 0 ? void 0 : data.files]);
+  const internalFiles = useMemo(() => (data === null || data === void 0 ? void 0 : data.internalFiles) || [], [data === null || data === void 0 ? void 0 : data.internalFiles]);
+  const getExistingFile = useCallback(function (file) {
     let fileItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : files;
     return fileItems.find(_ref => {
       let {
@@ -24,7 +25,7 @@ function useUpload(id) {
       } = _ref;
       return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
     });
-  };
+  }, [files]);
   return {
     files,
     setFiles,

package/components/upload/useUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUpload.js","names":["useSharedState","useUpload","id","data","extend","setFiles","files","setInternalFiles","internalFiles","getExistingFile","file","fileItems","arguments","length","undefined","find","_ref","f","name","size","lastModified"],"sources":["../../../../src/components/upload/useUpload.ts"],"sourcesContent":["import { useSharedState } from '../../shared/helpers/useSharedState'\nimport type { UploadFile } from './types'\n\nexport type useUploadReturn = {\n  files: UploadFile[]\n  setFiles: (files: UploadFile[]) => void\n  internalFiles: UploadFile[]\n  setInternalFiles: (files: UploadFile[]) => void\n  getExistingFile: (file: File, fileItems?: UploadFile[]) => UploadFile\n}\n\n/**\n * Use together with Upload with the same id to manage the files from outside the component.\n */\nfunction useUpload(id: string): useUploadReturn {\n  const { data, extend } = useSharedState<{\n    files?: UploadFile[]\n    internalFiles?: UploadFile[]\n  }>(id)\n\n  const setFiles = (files: UploadFile[]) => {\n    extend({ files })\n  }\n\n  const setInternalFiles = (internalFiles: UploadFile[]) => {\n    extend({ internalFiles })\n  }\n\n  const files = data?.files || []\n  const internalFiles = data?.internalFiles || []\n\n  const getExistingFile = (\n    file: File,\n    fileItems: UploadFile[] = files\n  ) => {\n    return fileItems.find(({ file: f }) => {\n      return (\n        f.name === file.name &&\n        f.size === file.size &&\n        f.lastModified === file.lastModified\n      )\n    })\n  }\n\n  return {\n    files,\n    setFiles,\n    internalFiles,\n    setInternalFiles,\n    getExistingFile,\n  }\n}\n\nexport default useUpload\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,qCAAqC;AAcpE,SAASC,SAASA,CAACC,EAAU,EAAmB;EAC9C,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGJ,cAAc,CAGpCE,EAAE,CAAC;EAEN,MAAMG,QAAQ,GAAIC,KAAmB,IAAK;IACxCF,MAAM,CAAC;MAAEE;IAAM,CAAC,CAAC;EACnB,CAAC;EAED,MAAMC,gBAAgB,GAAIC,aAA2B,IAAK;IACxDJ,MAAM,CAAC;MAAEI;IAAc,CAAC,CAAC;EAC3B,CAAC;EAED,MAAMF,KAAK,GAAG,CAAAH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,KAAI,EAAE;EAC/B,MAAME,aAAa,GAAG,CAAAL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,KAAI,EAAE;EAE/C,MAAMC,eAAe,GAAG,SAAAA,CACtBC,IAAU,EAEP;IAAA,IADHC,SAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,KAAK;IAE/B,OAAOK,SAAS,CAACI,IAAI,CAACC,IAAA,IAAiB;MAAA,IAAhB;QAAEN,IAAI,EAAEO;MAAE,CAAC,GAAAD,IAAA;MAChC,OACEC,CAAC,CAACC,IAAI,KAAKR,IAAI,CAACQ,IAAI,IACpBD,CAAC,CAACE,IAAI,KAAKT,IAAI,CAACS,IAAI,IACpBF,CAAC,CAACG,YAAY,KAAKV,IAAI,CAACU,YAAY;IAExC,CAAC,CAAC;EACJ,CAAC;EAED,OAAO;IACLd,KAAK;IACLD,QAAQ;IACRG,aAAa;IACbD,gBAAgB;IAChBE;EACF,CAAC;AACH;AAEA,eAAeR,SAAS"}
+{"version":3,"file":"useUpload.js","names":["useCallback","useMemo","useSharedState","useUpload","id","data","extend","setFiles","files","setInternalFiles","internalFiles","getExistingFile","file","fileItems","arguments","length","undefined","find","_ref","f","name","size","lastModified"],"sources":["../../../../src/components/upload/useUpload.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { useSharedState } from '../../shared/helpers/useSharedState'\nimport type { UploadFile } from './types'\n\nexport type useUploadReturn = {\n  files: UploadFile[]\n  setFiles: (files: UploadFile[]) => void\n  internalFiles: UploadFile[]\n  setInternalFiles: (files: UploadFile[]) => void\n  getExistingFile: (file: File, fileItems?: UploadFile[]) => UploadFile\n}\n\n/**\n * Use together with Upload with the same id to manage the files from outside the component.\n */\nfunction useUpload(id: string): useUploadReturn {\n  const { data, extend } = useSharedState<{\n    files?: UploadFile[]\n    internalFiles?: UploadFile[]\n  }>(id)\n\n  const setFiles = useCallback(\n    (files: UploadFile[]) => {\n      extend({ files })\n    },\n    [extend]\n  )\n\n  const setInternalFiles = useCallback(\n    (internalFiles: UploadFile[]) => {\n      extend({ internalFiles })\n    },\n    [extend]\n  )\n\n  const files = useMemo(() => data?.files || [], [data?.files])\n  const internalFiles = useMemo(\n    () => data?.internalFiles || [],\n    [data?.internalFiles]\n  )\n\n  const getExistingFile = useCallback(\n    (file: File, fileItems: UploadFile[] = files) => {\n      return fileItems.find(({ file: f }) => {\n        return (\n          f.name === file.name &&\n          f.size === file.size &&\n          f.lastModified === file.lastModified\n        )\n      })\n    },\n    [files]\n  )\n\n  return {\n    files,\n    setFiles,\n    internalFiles,\n    setInternalFiles,\n    getExistingFile,\n  }\n}\n\nexport default useUpload\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,cAAc,QAAQ,qCAAqC;AAcpE,SAASC,SAASA,CAACC,EAAU,EAAmB;EAC9C,MAAM;IAAEC,IAAI;IAAEC;EAAO,CAAC,GAAGJ,cAAc,CAGpCE,EAAE,CAAC;EAEN,MAAMG,QAAQ,GAAGP,WAAW,CACzBQ,KAAmB,IAAK;IACvBF,MAAM,CAAC;MAAEE;IAAM,CAAC,CAAC;EACnB,CAAC,EACD,CAACF,MAAM,CACT,CAAC;EAED,MAAMG,gBAAgB,GAAGT,WAAW,CACjCU,aAA2B,IAAK;IAC/BJ,MAAM,CAAC;MAAEI;IAAc,CAAC,CAAC;EAC3B,CAAC,EACD,CAACJ,MAAM,CACT,CAAC;EAED,MAAME,KAAK,GAAGP,OAAO,CAAC,MAAM,CAAAI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,KAAI,EAAE,EAAE,CAACH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,CAAC,CAAC;EAC7D,MAAME,aAAa,GAAGT,OAAO,CAC3B,MAAM,CAAAI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,KAAI,EAAE,EAC/B,CAACL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,aAAa,CACtB,CAAC;EAED,MAAMC,eAAe,GAAGX,WAAW,CACjC,UAACY,IAAU,EAAsC;IAAA,IAApCC,SAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,KAAK;IAC1C,OAAOK,SAAS,CAACI,IAAI,CAACC,IAAA,IAAiB;MAAA,IAAhB;QAAEN,IAAI,EAAEO;MAAE,CAAC,GAAAD,IAAA;MAChC,OACEC,CAAC,CAACC,IAAI,KAAKR,IAAI,CAACQ,IAAI,IACpBD,CAAC,CAACE,IAAI,KAAKT,IAAI,CAACS,IAAI,IACpBF,CAAC,CAACG,YAAY,KAAKV,IAAI,CAACU,YAAY;IAExC,CAAC,CAAC;EACJ,CAAC,EACD,CAACd,KAAK,CACR,CAAC;EAED,OAAO;IACLA,KAAK;IACLD,QAAQ;IACRG,aAAa;IACbD,gBAAgB;IAChBE;EACF,CAAC;AACH;AAEA,eAAeR,SAAS"}

package/es/components/upload/Upload.d.ts

@@ -1,6 +1,7 @@
 import useUpload from './useUpload';
 import { defaultProps } from './UploadContext';
 import type { UploadAllProps } from './types';
+export type * from './types';
 export { defaultProps };
 declare const Upload: {
     (localProps: UploadAllProps): import("react/jsx-runtime").JSX.Element;

package/es/components/upload/Upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","useCallback","classnames","createSpacingClasses","Provider","Context","extendPropsWithContext","makeUniqueId","UploadFileInput","useUpload","UploadDropzone","UploadContext","defaultProps","verifyFiles","UploadFileList","UploadInfo","Upload","localProps","context","useContext","_context$getTranslati","getTranslation","buttonTextSingular","textSingular","translations","_objectWithoutProperties","_excluded","filesAmountLimit","buttonText","text","extendedProps","skeleton","id","className","acceptedFileTypes","fileMaxSize","onChange","onFileDelete","title","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","loadingText","errorLargeFile","errorUnsupportedFile","errorAmountLimit","deleteButton","fileListAriaLabel","props","_excluded2","spacingClasses","files","setFiles","setInternalFiles","getExistingFile","onInputUpload","newFiles","mergedFiles","map","fileItem","file","existingFile","exists","Boolean","verifiedFiles","filter","validFiles","slice","createElement","value","_objectSpread","_extends","_UploadInfo","_UploadFileInput","_UploadFileList","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/upload/Upload.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Provider from '../../shared/Provider'\nimport Context from '../../shared/Context'\nimport {\n  extendPropsWithContext,\n  makeUniqueId,\n} from '../../shared/component-helper'\n\n// Internal\nimport UploadFileInput from './UploadFileInput'\nimport useUpload from './useUpload'\nimport UploadDropzone from './UploadDropzone'\nimport { UploadContext, defaultProps } from './UploadContext'\nimport { verifyFiles } from './UploadVerify'\n\nimport type { UploadFile, UploadAllProps } from './types'\nimport UploadFileList from './UploadFileList'\nimport UploadInfo from './UploadInfo'\n\nexport { defaultProps }\n\nconst Upload = (localProps: UploadAllProps) => {\n  const context = React.useContext(Context)\n\n  const { buttonTextSingular, textSingular, ...translations } =\n    context.getTranslation(localProps).Upload\n\n  if (localProps?.filesAmountLimit === 1) {\n    translations.buttonText = buttonTextSingular\n    translations.text = textSingular\n  }\n\n  const extendedProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    translations,\n    context.Upload\n  )\n\n  const {\n    id,\n    skeleton,\n    className,\n    acceptedFileTypes,\n    filesAmountLimit,\n    fileMaxSize,\n    onChange,\n    onFileDelete, // eslint-disable-line\n    title, // eslint-disable-line\n    text, // eslint-disable-line\n    fileTypeDescription, // eslint-disable-line\n    fileSizeDescription, // eslint-disable-line\n    fileAmountDescription, // eslint-disable-line\n    fileSizeContent, // eslint-disable-line\n    buttonText, // eslint-disable-line\n    loadingText, // eslint-disable-line\n    errorLargeFile,\n    errorUnsupportedFile,\n    errorAmountLimit, // eslint-disable-line\n    deleteButton, // eslint-disable-line\n    fileListAriaLabel, // eslint-disable-line\n    ...props\n  } = extendedProps\n\n  const spacingClasses = createSpacingClasses(props)\n\n  const { files, setFiles, setInternalFiles, getExistingFile } =\n    useUpload(id)\n\n  const onInputUpload = useCallback(\n    (newFiles: UploadFile[]) => {\n      const mergedFiles = [\n        ...files,\n        ...newFiles.map((fileItem) => {\n          const { file } = fileItem\n\n          const existingFile = getExistingFile(file, files)\n\n          fileItem.exists = Boolean(existingFile)\n          fileItem.id = fileItem.exists ? existingFile.id : makeUniqueId()\n\n          return fileItem\n        }),\n      ]\n\n      const verifiedFiles = verifyFiles(\n        mergedFiles.filter(({ exists }) => !exists),\n        {\n          fileMaxSize,\n          acceptedFileTypes,\n          errorUnsupportedFile,\n          errorLargeFile,\n        }\n      )\n\n      const validFiles = [...verifiedFiles].slice(0, filesAmountLimit)\n\n      setFiles(validFiles)\n      setInternalFiles(mergedFiles)\n\n      if (typeof onChange === 'function') {\n        onChange({ files: validFiles })\n      }\n\n      return validFiles\n    },\n    [\n      acceptedFileTypes,\n      errorLargeFile,\n      errorUnsupportedFile,\n      fileMaxSize,\n      files,\n      filesAmountLimit,\n      getExistingFile,\n      onChange,\n      setFiles,\n      setInternalFiles,\n    ]\n  )\n\n  return (\n    <UploadContext.Provider\n      value={{\n        ...extendedProps,\n        id,\n        onInputUpload,\n      }}\n    >\n      <Provider skeleton={skeleton}>\n        <UploadDropzone\n          className={classnames('dnb-upload', spacingClasses, className)}\n          {...props}\n        >\n          <UploadInfo />\n\n          <UploadFileInput />\n\n          <UploadFileList />\n        </UploadDropzone>\n      </Provider>\n    </UploadContext.Provider>\n  )\n}\n\nUpload.useUpload = useUpload\n\nUpload._formElement = true\nUpload._supportsSpacingProps = true\n\nexport default Upload\n"],"mappings":"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"}
+{"version":3,"file":"Upload.js","names":["React","useCallback","classnames","createSpacingClasses","Provider","Context","extendPropsWithContext","makeUniqueId","UploadFileInput","useUpload","UploadDropzone","UploadContext","defaultProps","verifyFiles","UploadFileList","UploadInfo","Upload","localProps","context","useContext","_context$getTranslati","getTranslation","buttonTextSingular","textSingular","translations","_objectWithoutProperties","_excluded","filesAmountLimit","buttonText","text","extendedProps","skeleton","id","className","acceptedFileTypes","fileMaxSize","onChange","onFileDelete","title","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","loadingText","errorLargeFile","errorUnsupportedFile","errorAmountLimit","deleteButton","fileListAriaLabel","props","_excluded2","spacingClasses","files","setFiles","setInternalFiles","getExistingFile","onInputUpload","newFiles","mergedFiles","map","fileItem","file","existingFile","exists","Boolean","verifiedFiles","filter","validFiles","slice","createElement","value","_objectSpread","_extends","_UploadInfo","_UploadFileInput","_UploadFileList","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/upload/Upload.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Provider from '../../shared/Provider'\nimport Context from '../../shared/Context'\nimport {\n  extendPropsWithContext,\n  makeUniqueId,\n} from '../../shared/component-helper'\n\n// Internal\nimport UploadFileInput from './UploadFileInput'\nimport useUpload from './useUpload'\nimport UploadDropzone from './UploadDropzone'\nimport { UploadContext, defaultProps } from './UploadContext'\nimport { verifyFiles } from './UploadVerify'\n\nimport type { UploadFile, UploadAllProps } from './types'\nimport UploadFileList from './UploadFileList'\nimport UploadInfo from './UploadInfo'\n\nexport type * from './types'\nexport { defaultProps }\n\nconst Upload = (localProps: UploadAllProps) => {\n  const context = React.useContext(Context)\n\n  const { buttonTextSingular, textSingular, ...translations } =\n    context.getTranslation(localProps).Upload\n\n  if (localProps?.filesAmountLimit === 1) {\n    translations.buttonText = buttonTextSingular\n    translations.text = textSingular\n  }\n\n  const extendedProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    translations,\n    context.Upload\n  )\n\n  const {\n    id,\n    skeleton,\n    className,\n    acceptedFileTypes,\n    filesAmountLimit,\n    fileMaxSize,\n    onChange,\n    onFileDelete, // eslint-disable-line\n    title, // eslint-disable-line\n    text, // eslint-disable-line\n    fileTypeDescription, // eslint-disable-line\n    fileSizeDescription, // eslint-disable-line\n    fileAmountDescription, // eslint-disable-line\n    fileSizeContent, // eslint-disable-line\n    buttonText, // eslint-disable-line\n    loadingText, // eslint-disable-line\n    errorLargeFile,\n    errorUnsupportedFile,\n    errorAmountLimit, // eslint-disable-line\n    deleteButton, // eslint-disable-line\n    fileListAriaLabel, // eslint-disable-line\n    ...props\n  } = extendedProps\n\n  const spacingClasses = createSpacingClasses(props)\n\n  const { files, setFiles, setInternalFiles, getExistingFile } =\n    useUpload(id)\n\n  const onInputUpload = useCallback(\n    (newFiles: UploadFile[]) => {\n      const mergedFiles = [\n        ...files,\n        ...newFiles.map((fileItem) => {\n          const { file } = fileItem\n\n          const existingFile = getExistingFile(file, files)\n\n          fileItem.exists = Boolean(existingFile)\n          fileItem.id = fileItem.exists ? existingFile.id : makeUniqueId()\n\n          return fileItem\n        }),\n      ]\n\n      const verifiedFiles = verifyFiles(\n        mergedFiles.filter(({ exists }) => !exists),\n        {\n          fileMaxSize,\n          acceptedFileTypes,\n          errorUnsupportedFile,\n          errorLargeFile,\n        }\n      )\n\n      const validFiles = [...verifiedFiles].slice(0, filesAmountLimit)\n\n      setFiles(validFiles)\n      setInternalFiles(mergedFiles)\n\n      if (typeof onChange === 'function') {\n        onChange({ files: validFiles })\n      }\n\n      return validFiles\n    },\n    [\n      acceptedFileTypes,\n      errorLargeFile,\n      errorUnsupportedFile,\n      fileMaxSize,\n      files,\n      filesAmountLimit,\n      getExistingFile,\n      onChange,\n      setFiles,\n      setInternalFiles,\n    ]\n  )\n\n  return (\n    <UploadContext.Provider\n      value={{\n        ...extendedProps,\n        id,\n        onInputUpload,\n      }}\n    >\n      <Provider skeleton={skeleton}>\n        <UploadDropzone\n          className={classnames('dnb-upload', spacingClasses, className)}\n          {...props}\n        >\n          <UploadInfo />\n\n          <UploadFileInput />\n\n          <UploadFileList />\n        </UploadDropzone>\n      </Provider>\n    </UploadContext.Provider>\n  )\n}\n\nUpload.useUpload = useUpload\n\nUpload._formElement = true\nUpload._supportsSpacingProps = true\n\nexport default Upload\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,UAAU,MAAM,YAAY;AAGnC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SACEC,sBAAsB,EACtBC,YAAY,QACP,+BAA+B;AAGtC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,aAAa,EAAEC,YAAY,QAAQ,iBAAiB;AAC7D,SAASC,WAAW,QAAQ,gBAAgB;AAG5C,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,UAAU,MAAM,cAAc;AAGrC,SAASH,YAAY;AAErB,MAAMI,MAAM,GAAIC,UAA0B,IAAK;EAC7C,MAAMC,OAAO,GAAGlB,KAAK,CAACmB,UAAU,CAACd,OAAO,CAAC;EAEzC,MAAAe,qBAAA,GACEF,OAAO,CAACG,cAAc,CAACJ,UAAU,CAAC,CAACD,MAAM;IADrC;MAAEM,kBAAkB;MAAEC;IAA8B,CAAC,GAAAH,qBAAA;IAAdI,YAAY,GAAAC,wBAAA,CAAAL,qBAAA,EAAAM,SAAA;EAGzD,IAAI,CAAAT,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEU,gBAAgB,MAAK,CAAC,EAAE;IACtCH,YAAY,CAACI,UAAU,GAAGN,kBAAkB;IAC5CE,YAAY,CAACK,IAAI,GAAGN,YAAY;EAClC;EAEA,MAAMO,aAAa,GAAGxB,sBAAsB,CAC1CW,UAAU,EACVL,YAAY,EACZ;IAAEmB,QAAQ,EAAEb,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEa;EAAS,CAAC,EAC/BP,YAAY,EACZN,OAAO,CAACF,MACV,CAAC;EAED,MAAM;MACJgB,EAAE;MACFD,QAAQ;MACRE,SAAS;MACTC,iBAAiB;MACjBP,gBAAgB;MAChBQ,WAAW;MACXC,QAAQ;MACRC,YAAY;MACZC,KAAK;MACLT,IAAI;MACJU,mBAAmB;MACnBC,mBAAmB;MACnBC,qBAAqB;MACrBC,eAAe;MACfd,UAAU;MACVe,WAAW;MACXC,cAAc;MACdC,oBAAoB;MACpBC,gBAAgB;MAChBC,YAAY;MACZC;IAEF,CAAC,GAAGlB,aAAa;IADZmB,KAAK,GAAAxB,wBAAA,CACNK,aAAa,EAAAoB,UAAA;EAEjB,MAAMC,cAAc,GAAGhD,oBAAoB,CAAC8C,KAAK,CAAC;EAElD,MAAM;IAAEG,KAAK;IAAEC,QAAQ;IAAEC,gBAAgB;IAAEC;EAAgB,CAAC,GAC1D9C,SAAS,CAACuB,EAAE,CAAC;EAEf,MAAMwB,aAAa,GAAGvD,WAAW,CAC9BwD,QAAsB,IAAK;IAC1B,MAAMC,WAAW,GAAG,CAClB,GAAGN,KAAK,EACR,GAAGK,QAAQ,CAACE,GAAG,CAAEC,QAAQ,IAAK;MAC5B,MAAM;QAAEC;MAAK,CAAC,GAAGD,QAAQ;MAEzB,MAAME,YAAY,GAAGP,eAAe,CAACM,IAAI,EAAET,KAAK,CAAC;MAEjDQ,QAAQ,CAACG,MAAM,GAAGC,OAAO,CAACF,YAAY,CAAC;MACvCF,QAAQ,CAAC5B,EAAE,GAAG4B,QAAQ,CAACG,MAAM,GAAGD,YAAY,CAAC9B,EAAE,GAAGzB,YAAY,CAAC,CAAC;MAEhE,OAAOqD,QAAQ;IACjB,CAAC,CAAC,CACH;IAED,MAAMK,aAAa,GAAGpD,WAAW,CAC/B6C,WAAW,CAACQ,MAAM,CAAC,CAAC;MAAEH;IAAO,CAAC,KAAK,CAACA,MAAM,CAAC,EAC3C;MACE5B,WAAW;MACXD,iBAAiB;MACjBW,oBAAoB;MACpBD;IACF,CACF,CAAC;IAED,MAAMuB,UAAU,GAAG,CAAC,GAAGF,aAAa,CAAC,CAACG,KAAK,CAAC,CAAC,EAAEzC,gBAAgB,CAAC;IAEhE0B,QAAQ,CAACc,UAAU,CAAC;IACpBb,gBAAgB,CAACI,WAAW,CAAC;IAE7B,IAAI,OAAOtB,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAAC;QAAEgB,KAAK,EAAEe;MAAW,CAAC,CAAC;IACjC;IAEA,OAAOA,UAAU;EACnB,CAAC,EACD,CACEjC,iBAAiB,EACjBU,cAAc,EACdC,oBAAoB,EACpBV,WAAW,EACXiB,KAAK,EACLzB,gBAAgB,EAChB4B,eAAe,EACfnB,QAAQ,EACRiB,QAAQ,EACRC,gBAAgB,CAEpB,CAAC;EAED,OACEtD,KAAA,CAAAqE,aAAA,CAAC1D,aAAa,CAACP,QAAQ;IACrBkE,KAAK,EAAAC,aAAA,CAAAA,aAAA,KACAzC,aAAa;MAChBE,EAAE;MACFwB;IAAa;EACb,GAEFxD,KAAA,CAAAqE,aAAA,CAACjE,QAAQ;IAAC2B,QAAQ,EAAEA;EAAS,GAC3B/B,KAAA,CAAAqE,aAAA,CAAC3D,cAAc,EAAA8D,QAAA;IACbvC,SAAS,EAAE/B,UAAU,CAAC,YAAY,EAAEiD,cAAc,EAAElB,SAAS;EAAE,GAC3DgB,KAAK,GAAAwB,WAAA,KAAAA,WAAA,GAETzE,KAAA,CAAAqE,aAAA,CAACtD,UAAU,MAAE,CAAC,GAAA2D,gBAAA,KAAAA,gBAAA,GAEd1E,KAAA,CAAAqE,aAAA,CAAC7D,eAAe,MAAE,CAAC,GAAAmE,eAAA,KAAAA,eAAA,GAEnB3E,KAAA,CAAAqE,aAAA,CAACvD,cAAc,MAAE,CAAC,CACJ,CACR,CACY,CAAC;AAE7B,CAAC;AAEDE,MAAM,CAACP,SAAS,GAAGA,SAAS;AAE5BO,MAAM,CAAC4D,YAAY,GAAG,IAAI;AAC1B5D,MAAM,CAAC6D,qBAAqB,GAAG,IAAI;AAEnC,eAAe7D,MAAM"}

package/es/components/upload/UploadDocs.d.ts

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

package/es/components/upload/UploadDocs.js

@@ -0,0 +1,50 @@
+export const UploadProperties = {
+  acceptedFileTypes: {
+    doc: 'List of accepted file types.',
+    type: 'Array<string>',
+    status: 'required'
+  },
+  filesAmountLimit: {
+    doc: 'Defines the amount of files the user can select and upload. Defaults to 100.',
+    type: 'number',
+    status: 'optional'
+  },
+  fileMaxSize: {
+    doc: '`fileMaxSize` is max size of each file in MB. Defaults to 5 MB.',
+    type: 'number',
+    status: 'optional'
+  },
+  title: {
+    doc: 'Custom text property. Replaces the default title.',
+    type: 'string',
+    status: 'optional'
+  },
+  text: {
+    doc: 'Custom text property. Replaces the default text.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'Skeleton should be applied when loading content.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    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`).',
+    type: 'function',
+    status: 'optional'
+  },
+  onFileDelete: {
+    doc: 'Will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=UploadDocs.js.map

package/es/components/upload/UploadDocs.js.map

@@ -0,0 +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"}

package/es/components/upload/UploadDropzone.js

@@ -1,8 +1,10 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _svg;
 const _excluded = ["children", "className"];
-import React from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import HeightAnimation from '../height-animation/HeightAnimation';
 import { UploadContext } from './UploadContext';
@@ -13,14 +15,14 @@ export default function UploadDropzone(_ref) {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const props = rest;
-  const context = React.useContext(UploadContext);
-  const [hover, setHover] = React.useState(false);
-  const hoverTimeout = React.useRef();
+  const context = useContext(UploadContext);
+  const [hover, setHover] = useState(false);
+  const hoverTimeout = useRef();
   const {
     onInputUpload,
     id
   } = context;
-  const getFiles = event => {
+  const getFiles = useCallback(event => {
     const fileData = event.dataTransfer;
     const files = [];
     Array.from(fileData.files).forEach(file => {
@@ -29,28 +31,28 @@ export default function UploadDropzone(_ref) {
       });
     });
     return files;
-  };
-  const hoverHandler = (event, state) => {
+  }, []);
+  const clearTimers = useCallback(() => {
+    clearTimeout(hoverTimeout.current);
+  }, []);
+  const hoverHandler = useCallback((event, state) => {
     event.stopPropagation();
     event.preventDefault();
     clearTimers();
     setHover(state);
-  };
-  const dropHandler = event => {
+  }, [clearTimers]);
+  const dropHandler = useCallback(event => {
     const files = getFiles(event);
     onInputUpload(files);
     hoverHandler(event, false);
-  };
-  const dragEnterHandler = event => {
+  }, [getFiles, onInputUpload, hoverHandler]);
+  const dragEnterHandler = useCallback(event => {
     hoverHandler(event, true);
-  };
-  const dragLeaveHandler = event => {
+  }, [hoverHandler]);
+  const dragLeaveHandler = useCallback(event => {
     hoverHandler(event, false);
-  };
-  const clearTimers = () => {
-    clearTimeout(hoverTimeout.current);
-  };
-  React.useEffect(() => {
+  }, [hoverHandler]);
+  useEffect(() => {
     const elem = document.body;
     const execute = () => {
       try {
@@ -77,7 +79,7 @@ export default function UploadDropzone(_ref) {
         }
       } catch (e) {}
     };
-  }, []);
+  }, [clearTimers, dragEnterHandler, dragLeaveHandler, dropHandler, id]);
   return React.createElement(HeightAnimation, _extends({
     className: classnames(className, hover && 'dnb-upload--active'),
     onDrop: dropHandler,

package/es/components/upload/UploadDropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadDropzone.js","names":["React","classnames","HeightAnimation","UploadContext","UploadDropzone","_ref","children","className","rest","_objectWithoutProperties","_excluded","props","context","useContext","hover","setHover","useState","hoverTimeout","useRef","onInputUpload","id","getFiles","event","fileData","dataTransfer","files","Array","from","forEach","file","push","hoverHandler","state","stopPropagation","preventDefault","clearTimers","dropHandler","dragEnterHandler","dragLeaveHandler","clearTimeout","current","useEffect","elem","document","body","execute","hasAttribute","add","addEventListener","setAttribute","e","timeoutId","setTimeout","getAttribute","remove","removeEventListener","removeAttribute","createElement","_extends","onDrop","onDragOver","onDragLeave","_svg","xmlns","fill","width","height","rx","ry","strokeWidth","strokeDashoffset","strokeDasharray"],"sources":["../../../../src/components/upload/UploadDropzone.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { UploadContext } from './UploadContext'\nimport type { UploadAllProps, UploadFile, UploadProps } from './types'\n\nexport type UploadDragEvent = React.DragEvent | DragEvent\n\nexport default function UploadDropzone({\n  children,\n  className,\n  ...rest\n}: Partial<UploadAllProps>) {\n  const props = rest as Omit<UploadProps, 'title' | 'onChange'>\n  const context = React.useContext(UploadContext)\n  const [hover, setHover] = React.useState(false)\n  const hoverTimeout = React.useRef<NodeJS.Timer>()\n\n  const { onInputUpload, id } = context\n\n  const getFiles = (event: UploadDragEvent) => {\n    const fileData = event.dataTransfer\n\n    const files: UploadFile[] = []\n\n    Array.from(fileData.files).forEach((file) => {\n      files.push({ file })\n    })\n\n    return files\n  }\n\n  const hoverHandler = (event: UploadDragEvent, state: boolean) => {\n    event.stopPropagation()\n    event.preventDefault()\n    clearTimers()\n    setHover(state)\n  }\n\n  const dropHandler = (event: UploadDragEvent) => {\n    const files = getFiles(event)\n\n    onInputUpload(files)\n    hoverHandler(event, false)\n  }\n\n  const dragEnterHandler = (event: UploadDragEvent) => {\n    hoverHandler(event, true)\n  }\n\n  const dragLeaveHandler = (event: UploadDragEvent) => {\n    hoverHandler(event, false)\n  }\n\n  const clearTimers = () => {\n    clearTimeout(hoverTimeout.current)\n  }\n\n  React.useEffect(() => {\n    const elem = document.body\n    const execute = () => {\n      try {\n        if (!elem.hasAttribute('data-upload-drop-zone')) {\n          const add = elem.addEventListener\n          add('drop', dropHandler)\n          add('dragover', dragEnterHandler)\n          add('dragleave', dragLeaveHandler)\n          elem.setAttribute('data-upload-drop-zone', id)\n        }\n      } catch (e) {\n        //\n      }\n    }\n    const timeoutId = setTimeout(execute, 10) // Add the listeners delayed (ms) without prioritization, in case of re-renders\n\n    return () => {\n      clearTimers()\n      clearTimeout(timeoutId)\n      try {\n        if (elem.getAttribute('data-upload-drop-zone') === id) {\n          const remove = elem.removeEventListener\n          remove('drop', dropHandler)\n          remove('dragover', dragEnterHandler)\n          remove('dragleave', dragLeaveHandler)\n          elem.removeAttribute('data-upload-drop-zone')\n        }\n      } catch (e) {\n        //\n      }\n    }\n  }, [])\n\n  return (\n    <HeightAnimation\n      className={classnames(className, hover && 'dnb-upload--active')}\n      onDrop={dropHandler}\n      onDragOver={dragEnterHandler}\n      onDragLeave={dragLeaveHandler}\n      {...props}\n    >\n      {children}\n\n      <svg\n        className=\"dnb-upload__outline\"\n        aria-hidden\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n      >\n        <rect\n          width=\"100%\"\n          height=\"100%\"\n          rx=\"0.5rem\"\n          ry=\"0.5rem\"\n          strokeWidth=\"3\"\n          strokeDashoffset=\"4\"\n          strokeDasharray=\"8 8\"\n        />\n      </svg>\n    </HeightAnimation>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"UploadDropzone.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","HeightAnimation","UploadContext","UploadDropzone","_ref","children","className","rest","_objectWithoutProperties","_excluded","props","context","hover","setHover","hoverTimeout","onInputUpload","id","getFiles","event","fileData","dataTransfer","files","Array","from","forEach","file","push","clearTimers","clearTimeout","current","hoverHandler","state","stopPropagation","preventDefault","dropHandler","dragEnterHandler","dragLeaveHandler","elem","document","body","execute","hasAttribute","add","addEventListener","setAttribute","e","timeoutId","setTimeout","getAttribute","remove","removeEventListener","removeAttribute","createElement","_extends","onDrop","onDragOver","onDragLeave","_svg","xmlns","fill","width","height","rx","ry","strokeWidth","strokeDashoffset","strokeDasharray"],"sources":["../../../../src/components/upload/UploadDropzone.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport classnames from 'classnames'\n\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { UploadContext } from './UploadContext'\nimport type { UploadAllProps, UploadFile, UploadProps } from './types'\n\nexport type UploadDragEvent = React.DragEvent | DragEvent\n\nexport default function UploadDropzone({\n  children,\n  className,\n  ...rest\n}: Partial<UploadAllProps>) {\n  const props = rest as Omit<UploadProps, 'title' | 'onChange'>\n  const context = useContext(UploadContext)\n  const [hover, setHover] = useState(false)\n  const hoverTimeout = useRef<NodeJS.Timer>()\n\n  const { onInputUpload, id } = context\n\n  const getFiles = useCallback((event: UploadDragEvent) => {\n    const fileData = event.dataTransfer\n\n    const files: UploadFile[] = []\n\n    Array.from(fileData.files).forEach((file) => {\n      files.push({ file })\n    })\n\n    return files\n  }, [])\n\n  const clearTimers = useCallback(() => {\n    clearTimeout(hoverTimeout.current)\n  }, [])\n\n  const hoverHandler = useCallback(\n    (event: UploadDragEvent, state: boolean) => {\n      event.stopPropagation()\n      event.preventDefault()\n      clearTimers()\n      setHover(state)\n    },\n    [clearTimers]\n  )\n\n  const dropHandler = useCallback(\n    (event: UploadDragEvent) => {\n      const files = getFiles(event)\n\n      onInputUpload(files)\n      hoverHandler(event, false)\n    },\n    [getFiles, onInputUpload, hoverHandler]\n  )\n\n  const dragEnterHandler = useCallback(\n    (event: UploadDragEvent) => {\n      hoverHandler(event, true)\n    },\n    [hoverHandler]\n  )\n\n  const dragLeaveHandler = useCallback(\n    (event: UploadDragEvent) => {\n      hoverHandler(event, false)\n    },\n    [hoverHandler]\n  )\n\n  useEffect(() => {\n    const elem = document.body\n    const execute = () => {\n      try {\n        if (!elem.hasAttribute('data-upload-drop-zone')) {\n          const add = elem.addEventListener\n          add('drop', dropHandler)\n          add('dragover', dragEnterHandler)\n          add('dragleave', dragLeaveHandler)\n          elem.setAttribute('data-upload-drop-zone', id)\n        }\n      } catch (e) {\n        //\n      }\n    }\n    const timeoutId = setTimeout(execute, 10) // Add the listeners delayed (ms) without prioritization, in case of re-renders\n\n    return () => {\n      clearTimers()\n      clearTimeout(timeoutId)\n      try {\n        if (elem.getAttribute('data-upload-drop-zone') === id) {\n          const remove = elem.removeEventListener\n          remove('drop', dropHandler)\n          remove('dragover', dragEnterHandler)\n          remove('dragleave', dragLeaveHandler)\n          elem.removeAttribute('data-upload-drop-zone')\n        }\n      } catch (e) {\n        //\n      }\n    }\n  }, [clearTimers, dragEnterHandler, dragLeaveHandler, dropHandler, id])\n\n  return (\n    <HeightAnimation\n      className={classnames(className, hover && 'dnb-upload--active')}\n      onDrop={dropHandler}\n      onDragOver={dragEnterHandler}\n      onDragLeave={dragLeaveHandler}\n      {...props}\n    >\n      {children}\n\n      <svg\n        className=\"dnb-upload__outline\"\n        aria-hidden\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n      >\n        <rect\n          width=\"100%\"\n          height=\"100%\"\n          rx=\"0.5rem\"\n          ry=\"0.5rem\"\n          strokeWidth=\"3\"\n          strokeDashoffset=\"4\"\n          strokeDasharray=\"8 8\"\n        />\n      </svg>\n    </HeightAnimation>\n  )\n}\n"],"mappings":"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"}

package/es/components/upload/UploadInfo.js

@@ -17,20 +17,21 @@ const UploadInfo = () => {
     fileAmountDescription,
     fileSizeContent,
     filesAmountLimit,
-    fileMaxSize
+    fileMaxSize,
+    children
   } = context;
-  const prettyfiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
+  const prettifiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
   return React.createElement(React.Fragment, null, React.createElement(Lead, {
     space: "0"
   }, title), React.createElement(P, {
     top: "xx-small",
     className: "dnb-upload__text"
-  }, text), React.createElement(Dl, {
+  }, text), children, React.createElement(Dl, {
     top: "small",
     bottom: 0,
     layout: "horizontal",
     className: "dnb-upload__condition-list"
-  }, prettyfiedAcceptedFileFormats && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), 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))));
+  }, 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))));
 };
 export default UploadInfo;
 //# sourceMappingURL=UploadInfo.js.map