@dnb/eufemia 10.69.1 → 10.70.0

package/es/components/upload/UploadFileListCell.js

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

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

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

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

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

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

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

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

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

package/es/components/upload/useUpload.js

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

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

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

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

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

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

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

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

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

package/es/extensions/forms/DataContext/Context.d.ts

@@ -13,9 +13,11 @@ export type MountState = {
 };
 export type EventListenerCall = {
     path?: Path;
-    type?: 'onSubmit' | 'onSubmitRequest' | 'onPathChange' | 'onMount';
+    type?: 'onSubmit' | 'onSubmitCall' | 'onSubmitRequest' | 'onPathChange' | 'onMount';
     callback: (params?: {
         value: unknown;
+    } | {
+        preventSubmit: () => void;
     }) => void | Promise<void | Error>;
 };
 export type VisibleDataHandler<Data> = (data?: Data, options?: VisibleDataOptions) => Partial<Data>;
@@ -109,13 +111,12 @@ export interface ContextState {
     }) => Promise<EventStateObject | undefined>;
     getSubmitData?: () => unknown;
     getSubmitParams?: () => OnSubmitParams;
-    setFieldEventListener?: (path: EventListenerCall['path'], type: EventListenerCall['type'], callback: EventListenerCall['callback']) => void;
+    setFieldEventListener?: (path: EventListenerCall['path'], type: EventListenerCall['type'], callback: EventListenerCall['callback'], params?: {
+        remove?: boolean;
+    }) => void;
     revealError?: (path: Path, hasError: boolean) => void;
     setFieldInternals?: (path: Path, props: unknown, id?: string) => void;
     setValueInternals?: (path: Path, props: unknown) => void;
-    setHandleSubmit?: (callback: HandleSubmitCallback, params?: {
-        remove?: boolean;
-    }) => void;
     setFieldConnection?: (path: Path, connections: FieldConnections) => void;
     isEmptyDataRef?: React.MutableRefObject<boolean>;
     addSetShowAllErrorsRef?: React.MutableRefObject<Array<(showAllErrors: boolean) => void>>;

package/es/extensions/forms/DataContext/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","makeAjvInstance","defaultContextState","hasContext","data","undefined","schema","submitState","handlePathChange","handlePathChangeUnvalidated","updateDataValue","setData","validateData","handleSubmit","scrollToTop","showAllErrors","hasVisibleError","formState","setFormState","setSubmitState","handleSubmitCall","setShowAllErrors","setMountedFieldState","hasErrors","hasFieldState","hasFieldError","ajvInstance","contextErrorMessages","props","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, FormError, JsonObject, makeAjvInstance } from '../utils'\nimport {\n  AllJSONSchemaVersions,\n  GlobalErrorMessagesWithPaths,\n  SubmitState,\n  Path,\n  EventStateObject,\n  EventReturnWithStateObject,\n  FieldProps,\n  ValueProps,\n  OnChange,\n  OnSubmitParams,\n  CountryCode,\n} from '../types'\nimport { Props as ProviderProps } from './Provider'\nimport { SnapshotName } from '../Form/Snapshot'\nimport { SharedStateId } from '../../../shared/helpers/useSharedState'\n\nexport type MountState = {\n  isPreMounted?: boolean\n  isMounted?: boolean\n  isVisible?: boolean\n  isFocused?: boolean\n  wasStepChange?: boolean\n}\n\nexport type EventListenerCall = {\n  path?: Path\n  type?: 'onSubmit' | 'onSubmitRequest' | 'onPathChange' | 'onMount'\n  callback: (params?: { value: unknown }) => void | Promise<void | Error>\n}\n\nexport type VisibleDataHandler<Data> = (\n  data?: Data,\n  options?: VisibleDataOptions\n) => Partial<Data>\nexport type VisibleDataOptions = {\n  keepPaths?: Array<Path>\n  removePaths?: Array<Path>\n}\nexport type MutateDataHandler<Data> = (\n  data: Data,\n  mutate: TransformData\n) => Partial<Data>\nexport type FilterDataHandler<Data> = (\n  data: Data,\n  filter: FilterData\n) => Partial<Data>\nexport type FilterDataHandlerCallback<R> = (\n  parameters: FilterDataHandlerParameters\n) => R\nexport type FilterDataHandlerParameters = DataPathHandlerParameters & {\n  path: Path\n}\nexport type DataPathHandler<Data = unknown> = (\n  parameters: DataPathHandlerParameters<Data>\n) => boolean | undefined\nexport type DataPathHandlerParameters<Data = unknown> = {\n  path: Path\n  value: unknown\n  displayValue: undefined | React.ReactNode | Array<React.ReactNode>\n  label: React.ReactNode\n  props: FieldProps\n  error: Error | undefined\n\n  /**\n   * Used in the \"filterData\" given by the \"useData\" hook.\n   */\n  data: Data\n\n  /** @deprecated – can be removed in v11 */\n  internal: {\n    error: Error | undefined\n  }\n}\nexport type FilterDataPathObject<Data> = Record<\n  Path,\n  DataPathHandler<Data> | boolean | undefined\n>\nexport type FilterData<Data = unknown> =\n  | FilterDataPathObject<Data>\n  | FilterDataHandlerCallback<boolean | undefined>\nexport type VisibleData<Data = unknown> = Partial<Data>\nexport type TransformData = FilterDataHandlerCallback<unknown>\nexport type HandleSubmitCallback = ({\n  preventSubmit,\n}: {\n  preventSubmit: () => void\n}) => void\nexport type FieldConnections = {\n  setEventResult?: (status: EventStateObject) => void\n}\nexport type FieldInternalsRefProps =\n  | (FieldProps & { children: unknown })\n  | undefined\nexport type FieldInternalsRef = Record<\n  Path,\n  {\n    props: FieldInternalsRefProps\n    id: string | undefined\n  }\n>\nexport type ValueInternalsRef = Record<\n  Path,\n  { props: ValueProps | undefined }\n>\n\nexport interface ContextState {\n  id?: SharedStateId\n  hasContext: boolean\n  /** The dataset for the form / form wizard */\n  data: any\n  internalDataRef?: React.MutableRefObject<any>\n  /** Should the form validate data before submitting? */\n  errors?: Record<Path, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (\n    path: Path,\n    value?: any\n  ) =>\n    | EventReturnWithStateObject\n    | unknown\n    | Promise<EventReturnWithStateObject | unknown>\n  handlePathChangeUnvalidated: (path: Path, value: any) => void\n  updateDataValue: (\n    path: Path,\n    value: any,\n    options?: { preventUpdate?: boolean }\n  ) => void\n  setData: (data: any) => void\n  clearData?: () => void\n  mutateDataHandler?: MutateDataHandler<unknown>\n  filterDataHandler?: FilterDataHandler<unknown>\n  visibleDataHandler?: VisibleDataHandler<unknown>\n  validateData: () => void\n  handleSubmit: () => Promise<EventStateObject | undefined>\n  scrollToTop: () => void\n  setShowAllErrors: (showAllErrors: boolean) => void\n  hasErrors: () => boolean\n  hasFieldState: (state: SubmitState) => boolean\n  hasFieldError: (path: Path) => boolean\n  setFieldState?: (path: Path, fieldState: SubmitState) => void\n  setFieldError?: (path: Path, error: Error | FormError) => void\n  setMountedFieldState: (path: Path, options: MountState) => void\n  setFormState?: (\n    state: SubmitState,\n    options?: { keepPending?: boolean }\n  ) => void\n  setSubmitState?: (state: EventStateObject) => void\n  addOnChangeHandler?: (callback: OnChange) => void\n  handleSubmitCall: ({\n    onSubmit,\n    enableAsyncBehavior,\n    skipFieldValidation,\n    skipErrorCheck,\n  }: {\n    onSubmit: () =>\n      | EventReturnWithStateObject\n      | void\n      | Promise<EventReturnWithStateObject | void>\n    enableAsyncBehavior: boolean\n    skipFieldValidation?: boolean\n    skipErrorCheck?: boolean\n  }) => Promise<EventStateObject | undefined>\n  getSubmitData?: () => unknown\n  getSubmitParams?: () => OnSubmitParams\n  setFieldEventListener?: (\n    path: EventListenerCall['path'],\n    type: EventListenerCall['type'],\n    callback: EventListenerCall['callback']\n  ) => void\n  revealError?: (path: Path, hasError: boolean) => void\n  setFieldInternals?: (path: Path, props: unknown, id?: string) => void\n  setValueInternals?: (path: Path, props: unknown) => void\n  setHandleSubmit?: (\n    callback: HandleSubmitCallback,\n    params?: { remove?: boolean }\n  ) => void\n  setFieldConnection?: (path: Path, connections: FieldConnections) => void\n  isEmptyDataRef?: React.MutableRefObject<boolean>\n  addSetShowAllErrorsRef?: React.MutableRefObject<\n    Array<(showAllErrors: boolean) => void>\n  >\n  fieldDisplayValueRef?: React.MutableRefObject<\n    Record<Path, { type: 'field'; value?: React.ReactNode }>\n  >\n  fieldInternalsRef?: React.MutableRefObject<FieldInternalsRef>\n  valueInternalsRef?: React.MutableRefObject<ValueInternalsRef>\n  fieldConnectionsRef?: React.RefObject<Record<Path, FieldConnections>>\n  mountedFieldsRef?: React.MutableRefObject<Map<Path, MountState>>\n  snapshotsRef?: React.MutableRefObject<\n    Map<SnapshotName, Map<Path, unknown>>\n  >\n  existingFieldsRef?: React.MutableRefObject<Map<Path, boolean>>\n  formElementRef?: React.MutableRefObject<HTMLFormElement>\n  fieldErrorRef?: React.MutableRefObject<Record<Path, Error>>\n  showAllErrors: boolean | number\n  hasVisibleError: boolean\n  formState: SubmitState\n  ajvInstance: Ajv\n  contextErrorMessages: GlobalErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  path?: Path\n  disabled?: boolean\n  required?: boolean\n  countryCode?: CountryCode\n  submitState: Partial<EventStateObject>\n  prerenderFieldProps?: boolean\n  decoupleForm?: boolean\n  hasElementRef?: React.MutableRefObject<boolean>\n  restHandlerProps?: Record<string, unknown>\n  props: ProviderProps<JsonObject>\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  submitState: undefined,\n  handlePathChange: () => null,\n  handlePathChangeUnvalidated: () => null,\n  updateDataValue: () => null,\n  setData: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  hasVisibleError: false,\n  formState: undefined,\n  setFormState: () => null,\n  setSubmitState: () => null,\n  handleSubmitCall: () => null,\n  setShowAllErrors: () => null,\n  setMountedFieldState: () => null,\n  hasErrors: () => false,\n  hasFieldState: () => false,\n  hasFieldError: () => false,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  props: null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAqCC,eAAe,QAAQ,UAAU;AAuNtE,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,WAAW,EAAEF,SAAS;EACtBG,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;EACvCC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,OAAO,EAAEA,CAAA,KAAM,IAAI;EACnBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,eAAe,EAAE,KAAK;EACtBC,SAAS,EAAEZ,SAAS;EACpBa,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,WAAW,EAAEzB,eAAe,CAAC,CAAC;EAC9B0B,oBAAoB,EAAEtB,SAAS;EAC/BuB,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,OAAO,GAAG7B,KAAK,CAAC8B,aAAa,CAAe5B,mBAAmB,CAAC;AAEtE,eAAe2B,OAAO","ignoreList":[]}
+{"version":3,"file":"Context.js","names":["React","makeAjvInstance","defaultContextState","hasContext","data","undefined","schema","submitState","handlePathChange","handlePathChangeUnvalidated","updateDataValue","setData","validateData","handleSubmit","scrollToTop","showAllErrors","hasVisibleError","formState","setFormState","setSubmitState","handleSubmitCall","setShowAllErrors","setMountedFieldState","hasErrors","hasFieldState","hasFieldError","ajvInstance","contextErrorMessages","props","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, FormError, JsonObject, makeAjvInstance } from '../utils'\nimport {\n  AllJSONSchemaVersions,\n  GlobalErrorMessagesWithPaths,\n  SubmitState,\n  Path,\n  EventStateObject,\n  EventReturnWithStateObject,\n  FieldProps,\n  ValueProps,\n  OnChange,\n  OnSubmitParams,\n  CountryCode,\n} from '../types'\nimport { Props as ProviderProps } from './Provider'\nimport { SnapshotName } from '../Form/Snapshot'\nimport { SharedStateId } from '../../../shared/helpers/useSharedState'\n\nexport type MountState = {\n  isPreMounted?: boolean\n  isMounted?: boolean\n  isVisible?: boolean\n  isFocused?: boolean\n  wasStepChange?: boolean\n}\n\nexport type EventListenerCall = {\n  path?: Path\n  type?:\n    | 'onSubmit'\n    | 'onSubmitCall'\n    | 'onSubmitRequest'\n    | 'onPathChange'\n    | 'onMount'\n  callback: (\n    params?: { value: unknown } | { preventSubmit: () => void }\n  ) => void | Promise<void | Error>\n}\n\nexport type VisibleDataHandler<Data> = (\n  data?: Data,\n  options?: VisibleDataOptions\n) => Partial<Data>\nexport type VisibleDataOptions = {\n  keepPaths?: Array<Path>\n  removePaths?: Array<Path>\n}\nexport type MutateDataHandler<Data> = (\n  data: Data,\n  mutate: TransformData\n) => Partial<Data>\nexport type FilterDataHandler<Data> = (\n  data: Data,\n  filter: FilterData\n) => Partial<Data>\nexport type FilterDataHandlerCallback<R> = (\n  parameters: FilterDataHandlerParameters\n) => R\nexport type FilterDataHandlerParameters = DataPathHandlerParameters & {\n  path: Path\n}\nexport type DataPathHandler<Data = unknown> = (\n  parameters: DataPathHandlerParameters<Data>\n) => boolean | undefined\nexport type DataPathHandlerParameters<Data = unknown> = {\n  path: Path\n  value: unknown\n  displayValue: undefined | React.ReactNode | Array<React.ReactNode>\n  label: React.ReactNode\n  props: FieldProps\n  error: Error | undefined\n\n  /**\n   * Used in the \"filterData\" given by the \"useData\" hook.\n   */\n  data: Data\n\n  /** @deprecated – can be removed in v11 */\n  internal: {\n    error: Error | undefined\n  }\n}\nexport type FilterDataPathObject<Data> = Record<\n  Path,\n  DataPathHandler<Data> | boolean | undefined\n>\nexport type FilterData<Data = unknown> =\n  | FilterDataPathObject<Data>\n  | FilterDataHandlerCallback<boolean | undefined>\nexport type VisibleData<Data = unknown> = Partial<Data>\nexport type TransformData = FilterDataHandlerCallback<unknown>\nexport type HandleSubmitCallback = ({\n  preventSubmit,\n}: {\n  preventSubmit: () => void\n}) => void\nexport type FieldConnections = {\n  setEventResult?: (status: EventStateObject) => void\n}\nexport type FieldInternalsRefProps =\n  | (FieldProps & { children: unknown })\n  | undefined\nexport type FieldInternalsRef = Record<\n  Path,\n  {\n    props: FieldInternalsRefProps\n    id: string | undefined\n  }\n>\nexport type ValueInternalsRef = Record<\n  Path,\n  { props: ValueProps | undefined }\n>\n\nexport interface ContextState {\n  id?: SharedStateId\n  hasContext: boolean\n  /** The dataset for the form / form wizard */\n  data: any\n  internalDataRef?: React.MutableRefObject<any>\n  /** Should the form validate data before submitting? */\n  errors?: Record<Path, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (\n    path: Path,\n    value?: any\n  ) =>\n    | EventReturnWithStateObject\n    | unknown\n    | Promise<EventReturnWithStateObject | unknown>\n  handlePathChangeUnvalidated: (path: Path, value: any) => void\n  updateDataValue: (\n    path: Path,\n    value: any,\n    options?: { preventUpdate?: boolean }\n  ) => void\n  setData: (data: any) => void\n  clearData?: () => void\n  mutateDataHandler?: MutateDataHandler<unknown>\n  filterDataHandler?: FilterDataHandler<unknown>\n  visibleDataHandler?: VisibleDataHandler<unknown>\n  validateData: () => void\n  handleSubmit: () => Promise<EventStateObject | undefined>\n  scrollToTop: () => void\n  setShowAllErrors: (showAllErrors: boolean) => void\n  hasErrors: () => boolean\n  hasFieldState: (state: SubmitState) => boolean\n  hasFieldError: (path: Path) => boolean\n  setFieldState?: (path: Path, fieldState: SubmitState) => void\n  setFieldError?: (path: Path, error: Error | FormError) => void\n  setMountedFieldState: (path: Path, options: MountState) => void\n  setFormState?: (\n    state: SubmitState,\n    options?: { keepPending?: boolean }\n  ) => void\n  setSubmitState?: (state: EventStateObject) => void\n  addOnChangeHandler?: (callback: OnChange) => void\n  handleSubmitCall: ({\n    onSubmit,\n    enableAsyncBehavior,\n    skipFieldValidation,\n    skipErrorCheck,\n  }: {\n    onSubmit: () =>\n      | EventReturnWithStateObject\n      | void\n      | Promise<EventReturnWithStateObject | void>\n    enableAsyncBehavior: boolean\n    skipFieldValidation?: boolean\n    skipErrorCheck?: boolean\n  }) => Promise<EventStateObject | undefined>\n  getSubmitData?: () => unknown\n  getSubmitParams?: () => OnSubmitParams\n  setFieldEventListener?: (\n    path: EventListenerCall['path'],\n    type: EventListenerCall['type'],\n    callback: EventListenerCall['callback'],\n    params?: { remove?: boolean }\n  ) => void\n  revealError?: (path: Path, hasError: boolean) => void\n  setFieldInternals?: (path: Path, props: unknown, id?: string) => void\n  setValueInternals?: (path: Path, props: unknown) => void\n  setFieldConnection?: (path: Path, connections: FieldConnections) => void\n  isEmptyDataRef?: React.MutableRefObject<boolean>\n  addSetShowAllErrorsRef?: React.MutableRefObject<\n    Array<(showAllErrors: boolean) => void>\n  >\n  fieldDisplayValueRef?: React.MutableRefObject<\n    Record<Path, { type: 'field'; value?: React.ReactNode }>\n  >\n  fieldInternalsRef?: React.MutableRefObject<FieldInternalsRef>\n  valueInternalsRef?: React.MutableRefObject<ValueInternalsRef>\n  fieldConnectionsRef?: React.RefObject<Record<Path, FieldConnections>>\n  mountedFieldsRef?: React.MutableRefObject<Map<Path, MountState>>\n  snapshotsRef?: React.MutableRefObject<\n    Map<SnapshotName, Map<Path, unknown>>\n  >\n  existingFieldsRef?: React.MutableRefObject<Map<Path, boolean>>\n  formElementRef?: React.MutableRefObject<HTMLFormElement>\n  fieldErrorRef?: React.MutableRefObject<Record<Path, Error>>\n  showAllErrors: boolean | number\n  hasVisibleError: boolean\n  formState: SubmitState\n  ajvInstance: Ajv\n  contextErrorMessages: GlobalErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  path?: Path\n  disabled?: boolean\n  required?: boolean\n  countryCode?: CountryCode\n  submitState: Partial<EventStateObject>\n  prerenderFieldProps?: boolean\n  decoupleForm?: boolean\n  hasElementRef?: React.MutableRefObject<boolean>\n  restHandlerProps?: Record<string, unknown>\n  props: ProviderProps<JsonObject>\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  submitState: undefined,\n  handlePathChange: () => null,\n  handlePathChangeUnvalidated: () => null,\n  updateDataValue: () => null,\n  setData: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  hasVisibleError: false,\n  formState: undefined,\n  setFormState: () => null,\n  setSubmitState: () => null,\n  handleSubmitCall: () => null,\n  setShowAllErrors: () => null,\n  setMountedFieldState: () => null,\n  hasErrors: () => false,\n  hasFieldState: () => false,\n  hasFieldError: () => false,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  props: null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAqCC,eAAe,QAAQ,UAAU;AA2NtE,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,WAAW,EAAEF,SAAS;EACtBG,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;EACvCC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,OAAO,EAAEA,CAAA,KAAM,IAAI;EACnBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,eAAe,EAAE,KAAK;EACtBC,SAAS,EAAEZ,SAAS;EACpBa,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,WAAW,EAAEzB,eAAe,CAAC,CAAC;EAC9B0B,oBAAoB,EAAEtB,SAAS;EAC/BuB,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,OAAO,GAAG7B,KAAK,CAAC8B,aAAa,CAAe5B,mBAAmB,CAAC;AAEtE,eAAe2B,OAAO","ignoreList":[]}

package/es/extensions/forms/DataContext/Provider/Provider.js

@@ -535,7 +535,7 @@ export default function Provider(props) {
           type,
           callback
         } = item;
-        if (type === 'onSubmit' && (_mountedFieldsRef$cur2 = mountedFieldsRef.current.get(path)) !== null && _mountedFieldsRef$cur2 !== void 0 && _mountedFieldsRef$cur2.isMounted) {
+        if (type === 'onSubmitCall' && (_mountedFieldsRef$cur2 = mountedFieldsRef.current.get(path)) !== null && _mountedFieldsRef$cur2 !== void 0 && _mountedFieldsRef$cur2.isMounted) {
           if (asyncBehaviorIsEnabled) {
             await callback();
           } else {
@@ -582,9 +582,8 @@ export default function Provider(props) {
       }
     } else {
       if (asyncBehaviorIsEnabled) {
-        window.requestAnimationFrame(() => {
-          setFormState(undefined);
-        });
+        await new Promise(resolve => window.requestAnimationFrame(resolve));
+        setFormState(undefined);
         if (!skipFieldValidation) {
           onSubmitContinueRef.current = () => {
             window.requestAnimationFrame(() => {
@@ -611,27 +610,6 @@ export default function Provider(props) {
     }
     return result;
   }, [clearData, getDataPathHandlerParameters, hasErrors, hasFieldState, hasFieldWithAsyncValidator, isolate, onCommit, onSubmitRequest, setFormState, setShowAllErrors, setSubmitState]);
-  const handleSubmitListenersRef = useRef([]);
-  const setHandleSubmit = useCallback((callback, {
-    remove = false
-  } = {}) => {
-    const listeners = handleSubmitListenersRef.current;
-    if (remove) {
-      handleSubmitListenersRef.current = listeners.filter(item => item !== callback);
-    } else if (!listeners.includes(callback)) {
-      listeners.push(callback);
-    }
-  }, []);
-  const handleSubmitListeners = useCallback(() => {
-    let stop = false;
-    const preventSubmit = () => stop = true;
-    handleSubmitListenersRef.current.forEach(cb => {
-      cb({
-        preventSubmit
-      });
-    });
-    return stop;
-  }, []);
   const getSubmitData = useCallback(() => {
     const data = internalDataRef.current;
     const mutatedData = transformOut ? mutateDataHandler(data, transformOut) : data;
@@ -673,7 +651,20 @@ export default function Provider(props) {
     return await handleSubmitCall({
       enableAsyncBehavior: isAsync(onSubmit),
       onSubmit: async () => {
-        if (handleSubmitListeners()) {
+        let stop = false;
+        const preventSubmit = () => stop = true;
+        for (const item of fieldEventListenersRef.current) {
+          const {
+            type,
+            callback
+          } = item;
+          if (type === 'onSubmit') {
+            callback({
+              preventSubmit
+            });
+          }
+        }
+        if (stop) {
           return;
         }
         const data = getSubmitData();
@@ -694,9 +685,11 @@ export default function Provider(props) {
         return result;
       }
     });
-  }, [getSubmitData, getSubmitParams, handleSubmitCall, handleSubmitListeners, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit]);
+  }, [getSubmitData, getSubmitParams, handleSubmitCall, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit]);
   const fieldEventListenersRef = useRef([]);
-  const setFieldEventListener = useCallback((path, type, callback) => {
+  const setFieldEventListener = useCallback((path, type, callback, {
+    remove = false
+  } = {}) => {
     fieldEventListenersRef.current = fieldEventListenersRef.current.filter(({
       path: p,
       type: t,
@@ -704,11 +697,13 @@ export default function Provider(props) {
     }) => {
       return !(p === path && t === type && c === callback);
     });
-    fieldEventListenersRef.current.push({
-      path,
-      type,
-      callback
-    });
+    if (!remove) {
+      fieldEventListenersRef.current.push({
+        path,
+        type,
+        callback
+      });
+    }
   }, []);
   const onSubmitContinueRef = useRef(null);
   if (!hasFieldState('pending')) {
@@ -819,7 +814,6 @@ export default function Provider(props) {
     getSubmitData,
     getSubmitParams,
     addOnChangeHandler,
-    setHandleSubmit,
     scrollToTop,
     schema,
     disabled,