npm - @dnb/eufemia - Versions diffs - 10.53.0 → 10.54.1 - Mend

@dnb/eufemia 10.53.0 → 10.54.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (816) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadFileListCell.js","names":["React","useRef","classnames","Button","Icon","FormStatus","ProgressIndicator","P","trash","TrashIcon","exclamation_medium","ExclamationIcon","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","warn","useUpload","getFileTypeFromExtension","images","UploadFileListCell","id","uploadFile","onDelete","loadingText","deleteButtonText","_div","_P","_FormStatus","errorMessage","isLoading","hasWarning","fileType","humanFileType","toUpperCase","imageUrl","URL","createObjectURL","cellRef","exists","useExistsHighlight","handleDisappearFocus","cellElement","current","focusElement","querySelector","focus","e","onDeleteHandler","createElement","className","ref","getIcon","getTitle","icon","variant","onClick","icon_position","getWarning","_ProgressIndicator","_Icon","iconFileType","mimeParts","type","split","Object","prototype","hasOwnProperty","call","target","href","rel","name","size","top","text","stretch","internalFiles","updateExists","useState","timerRef","clearTimers","clearTimeout","useEffect","some","f","setTimeout"],"sources":["../../../../src/components/upload/UploadFileListCell.tsx"],"sourcesContent":["import React, { 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'\nimport P from '../../elements/P'\n\n// Icons\nimport {\n trash as TrashIcon,\n exclamation_medium as ExclamationIcon,\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 } from './types'\n\n// Shared\nimport { getPreviousSibling, warn } from '../../shared/component-helper'\nimport useUpload from './useUpload'\nimport { getFileTypeFromExtension } from './UploadVerify'\n\nconst images = {\n pdf,\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\n\n /\n Calls onDelete when clicking the delete button\n /\n onDelete: () => void\n\n /\n Text\n */\n loadingText: React.ReactNode\n deleteButtonText: React.ReactNode\n}\n\nconst UploadFileListCell = ({\n id,\n uploadFile,\n onDelete,\n loadingText,\n deleteButtonText,\n}: UploadFileListCellProps) => {\n const { file, errorMessage, isLoading } = uploadFile\n const hasWarning = errorMessage != null\n\n const fileType = getFileTypeFromExtension(file)\n const humanFileType = fileType.toUpperCase()\n\n const imageUrl = URL.createObjectURL(file)\n const cellRef = useRef<HTMLLIElement>()\n const exists = useExistsHighlight(id, file)\n\n const handleDisappearFocus = () => {\n try {\n const cellElement = cellRef.current\n const focusElement = getPreviousSibling(\n '.dnb-upload',\n cellElement\n ).querySelector(\n '.dnb-upload__file-input-button'\n ) as HTMLButtonElement\n focusElement.focus()\n } catch (e) {\n warn(e)\n }\n }\n\n const onDeleteHandler = () => {\n handleDisappearFocus()\n\n onDelete()\n }\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 {getIcon()}\n {getTitle()}\n </div>\n <div>\n <Button\n icon={TrashIcon}\n variant=\"tertiary\"\n onClick={onDeleteHandler}\n icon_position=\"left\"\n >\n {deleteButtonText}\n </Button>\n </div>\n </div>\n\n {getWarning()}\n </li>\n )\n\n function getIcon() {\n if (isLoading) {\n return <ProgressIndicator />\n }\n\n if (hasWarning) return <Icon icon={ExclamationIcon} />\n\n let iconFileType = fileType\n\n if (!iconFileType) {\n const mimeParts = file.type.split('/')\n iconFileType = images[mimeParts[0]] \|\| images[mimeParts[1]]\n }\n\n if (!Object.prototype.hasOwnProperty.call(images, iconFileType)) {\n iconFileType = 'file'\n }\n\n return <Icon icon={images[iconFileType]} />\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 <a\n target=\"_blank\"\n href={imageUrl}\n className={classnames(\n 'dnb-anchor',\n 'dnb-upload__file-cell__title'\n )}\n rel=\"noopener noreferrer\"\n >\n {file.name}\n </a>\n <P\n className=\"dnb-upload__file-cell__subtitle\"\n size=\"x-small\"\n top=\"xx-small\"\n >\n {humanFileType}\n </P>\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"],"mappings":"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"}
1	+ {"version":3,"file":"UploadFileListCell.js","names":["React","useRef","classnames","Button","Icon","FormStatus","ProgressIndicator","trash","TrashIcon","exclamation_medium","ExclamationIcon","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","warn","useUpload","getFileTypeFromExtension","images","UploadFileListCell","id","uploadFile","onDelete","loadingText","deleteButtonText","_div","_FormStatus","errorMessage","isLoading","hasWarning","fileType","imageUrl","URL","createObjectURL","cellRef","exists","useExistsHighlight","handleDisappearFocus","cellElement","current","focusElement","querySelector","focus","e","onDeleteHandler","createElement","className","ref","getIcon","getTitle","icon","variant","onClick","icon_position","getWarning","_ProgressIndicator","_Icon","iconFileType","mimeParts","type","split","Object","prototype","hasOwnProperty","call","target","href","rel","name","top","text","stretch","internalFiles","updateExists","useState","timerRef","clearTimers","clearTimeout","useEffect","some","f","size","setTimeout"],"sources":["../../../../src/components/upload/UploadFileListCell.tsx"],"sourcesContent":["import React, { 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_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 } from './types'\n\n// Shared\nimport { getPreviousSibling, warn } from '../../shared/component-helper'\nimport useUpload from './useUpload'\nimport { getFileTypeFromExtension } from './UploadVerify'\n\nconst images = {\n pdf,\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\n\n /\n Calls onDelete when clicking the delete button\n /\n onDelete: () => void\n\n /\n Text\n */\n loadingText: React.ReactNode\n deleteButtonText: React.ReactNode\n}\n\nconst UploadFileListCell = ({\n id,\n uploadFile,\n onDelete,\n loadingText,\n deleteButtonText,\n}: UploadFileListCellProps) => {\n const { file, errorMessage, isLoading } = uploadFile\n const hasWarning = errorMessage != null\n\n const fileType = getFileTypeFromExtension(file)\n\n const imageUrl = URL.createObjectURL(file)\n const cellRef = useRef<HTMLLIElement>()\n const exists = useExistsHighlight(id, file)\n\n const handleDisappearFocus = () => {\n try {\n const cellElement = cellRef.current\n const focusElement = getPreviousSibling(\n '.dnb-upload',\n cellElement\n ).querySelector(\n '.dnb-upload__file-input-button'\n ) as HTMLButtonElement\n focusElement.focus()\n } catch (e) {\n warn(e)\n }\n }\n\n const onDeleteHandler = () => {\n handleDisappearFocus()\n\n onDelete()\n }\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 {getIcon()}\n {getTitle()}\n </div>\n <div>\n <Button\n icon={TrashIcon}\n variant=\"tertiary\"\n onClick={onDeleteHandler}\n icon_position=\"left\"\n >\n {deleteButtonText}\n </Button>\n </div>\n </div>\n\n {getWarning()}\n </li>\n )\n\n function getIcon() {\n if (isLoading) {\n return <ProgressIndicator />\n }\n\n if (hasWarning) return <Icon icon={ExclamationIcon} />\n\n let iconFileType = fileType\n\n if (!iconFileType) {\n const mimeParts = file.type.split('/')\n iconFileType = images[mimeParts[0]] \|\| images[mimeParts[1]]\n }\n\n if (!Object.prototype.hasOwnProperty.call(images, iconFileType)) {\n iconFileType = 'file'\n }\n\n return <Icon icon={images[iconFileType]} />\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 <a\n target=\"_blank\"\n href={imageUrl}\n className={classnames(\n 'dnb-anchor',\n 'dnb-upload__file-cell__title'\n )}\n rel=\"noopener noreferrer\"\n >\n {file.name}\n </a>\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"],"mappings":"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"}

package/es/components/upload/UploadInfo.js CHANGED Viewed

@@ -12,6 +12,7 @@ import Table from '../Table';
 import Tr from '../table/TableTr';
 import Th from '../table/TableTh';
 import Td from '../table/TableTd';
+import Flex from '../../components/Flex';
 const prettifyAcceptedFileFormats = acceptedFileTypes => acceptedFileTypes.sort().join(', ').toUpperCase();
 const UploadInfo = () => {
   const context = React.useContext(UploadContext);
@@ -32,15 +33,17 @@ const UploadInfo = () => {
   const displayAcceptedFileFormatsListItem = isAcceptedFileTypeListOfStrings && prettifiedAcceptedFileFormats;
   const displayFileMaxSizeItem = isAcceptedFileTypeListOfStrings && fileMaxSize;
   const displayFilesAmountLimitItem = filesAmountLimit < defaultProps.filesAmountLimit;
-  const displayAcceptedFileFormatsTable = isArrayOfObjects(acceptedFileTypes);
+  const displayAcceptedFileFormatsTable = !displayAcceptedFileFormatsListItem && isArrayOfObjects(acceptedFileTypes);
   const displayDl = displayAcceptedFileFormatsListItem || displayFileMaxSizeItem || displayFilesAmountLimitItem;
-  return React.createElement(React.Fragment, null, React.createElement(Lead, {
+  return React.createElement(Flex.Stack, {
+    gap: "small"
+  }, (title || text) && React.createElement(Flex.Stack, {
+    gap: "xx-small"
+  }, title && React.createElement(Lead, {
     space: "0"
-  }, title), React.createElement(P, {
-    top: "xx-small",
+  }, title), text && React.createElement(P, {
     className: "dnb-upload__text"
-  }, text), children, displayDl && React.createElement(Dl, {
-    top: "small",
+  }, text)), children, displayDl && React.createElement(Dl, {
     bottom: 0,
     layout: "horizontal"
   }, displayAcceptedFileFormatsListItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettifiedAcceptedFileFormats)), displayFileMaxSizeItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), displayFilesAmountLimitItem && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))), displayAcceptedFileFormatsTable && (_UploadInfoAcceptedFi || (_UploadInfoAcceptedFi = React.createElement(UploadInfoAcceptedFileTypesTable, null))));

package/es/components/upload/UploadInfo.js.map CHANGED Viewed

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

package/es/components/upload/style/dnb-upload.css CHANGED Viewed

@@ -119,7 +119,7 @@
 .dnb-upload__accepted-file-types-table.dnb-table thead th {
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-basis);
-  padding-top: var(--spacing-small);
+  padding-top: 0;
 }
 .dnb-upload__accepted-file-types-table.dnb-table thead th:first-child {
   padding-left: 0;

package/es/components/upload/style/dnb-upload.min.css CHANGED Viewed

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

package/es/components/upload/style/dnb-upload.scss CHANGED Viewed

@@ -151,7 +151,7 @@
       & thead th {
         font-weight: var(--font-weight-medium);
         font-size: var(--font-size-basis);
-        padding-top: var(--spacing-small);
+        padding-top: 0;
         &:first-child {
           padding-left: 0;
         }

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Ajv } from '../utils/ajv';
-import { AllJSONSchemaVersions, CustomErrorMessagesWithPaths, SubmitState, Path, EventStateObject, EventReturnWithStateObject, Identifier, FieldProps, FormError, ValueProps, OnChange, OnSubmitParams } from '../types';
+import { Ajv, FormError } from '../utils';
+import { AllJSONSchemaVersions, GlobalErrorMessagesWithPaths, SubmitState, Path, EventStateObject, EventReturnWithStateObject, Identifier, FieldProps, ValueProps, OnChange, OnSubmitParams } from '../types';
 import { Props as ProviderProps } from './Provider';
 import { SnapshotName } from '../Form/Snapshot';
 export type MountState = {
@@ -31,6 +31,8 @@ export type FilterDataHandlerParameters = FilterDataPathConditionParameters & {
 export type FilterDataPathCondition<Data = unknown> = (parameters: FilterDataPathConditionParameters<Data>) => boolean | undefined;
 export type FilterDataPathConditionParameters<Data = unknown> = {
     value: unknown;
+    displayValue: undefined | React.ReactNode | Array<React.ReactNode>;
+    label: React.ReactNode;
     props: FieldProps;
     data: Data;
     internal: {
@@ -54,7 +56,7 @@ export interface ContextState {
     data: any;
     internalDataRef?: React.MutableRefObject<any>;
     /** Should the form validate data before submitting? */
-    errors?: Record<string, Error>;
+    errors?: Record<Path, Error>;
     /** Will set autoComplete="on" on each nested Field.String and Field.Number */
     autoComplete?: boolean;
     handlePathChange: (path: Path, value?: any) => EventReturnWithStateObject | unknown | Promise<EventReturnWithStateObject | unknown>;
@@ -74,8 +76,8 @@ export interface ContextState {
     hasErrors: () => boolean;
     hasFieldState: (state: SubmitState) => boolean;
     hasFieldError: (path: Path) => boolean;
-    setFieldState: (path: Path, fieldState: SubmitState) => void;
-    setFieldError: (path: Path, error: Error | FormError) => void;
+    setFieldState?: (path: Path, fieldState: SubmitState) => void;
+    setFieldError?: (path: Path, error: Error | FormError) => void;
     setMountedFieldState: (path: Path, options: MountState) => void;
     setFormState?: (state: SubmitState, options?: {
         keepPending?: boolean;
@@ -89,7 +91,7 @@ export interface ContextState {
         skipErrorCheck?: boolean;
     }) => Promise<EventStateObject | undefined>;
     getSubmitData?: () => unknown;
-    getSubmitOptions?: () => OnSubmitParams;
+    getSubmitParams?: () => OnSubmitParams;
     setFieldEventListener?: (path: EventListenerCall['path'], type: EventListenerCall['type'], callback: EventListenerCall['callback']) => void;
     setVisibleError?: (path: Path, hasError: boolean) => void;
     setFieldProps?: (path: Path, props: unknown) => void;
@@ -99,8 +101,9 @@ export interface ContextState {
     }) => void;
     setFieldConnection?: (path: Path, connections: FieldConnections) => void;
     isEmptyDataRef?: React.MutableRefObject<boolean>;
-    fieldPropsRef?: React.MutableRefObject<Record<string, FieldProps>>;
-    valuePropsRef?: React.MutableRefObject<Record<string, ValueProps>>;
+    fieldDisplayValueRef?: React.MutableRefObject<Record<Path, React.ReactNode>>;
+    fieldPropsRef?: React.MutableRefObject<Record<Path, FieldProps>>;
+    valuePropsRef?: React.MutableRefObject<Record<Path, ValueProps>>;
     fieldConnectionsRef?: React.RefObject<Record<Path, FieldConnections>>;
     mountedFieldsRef?: React.MutableRefObject<Record<Path, MountState>>;
     snapshotsRef?: React.MutableRefObject<Map<SnapshotName, Map<Path, unknown>>>;
@@ -111,7 +114,7 @@ export interface ContextState {
     hasVisibleError: boolean;
     formState: SubmitState;
     ajvInstance: Ajv;
-    contextErrorMessages: CustomErrorMessagesWithPaths;
+    contextErrorMessages: GlobalErrorMessagesWithPaths;
     schema: AllJSONSchemaVersions;
     path?: Path;
     disabled?: boolean;

package/es/extensions/forms/DataContext/Context.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeAjvInstance } from '../utils/ajv';
+import { makeAjvInstance } from '../utils';
 export const defaultContextState = {
   hasContext: false,
   data: undefined,
@@ -23,8 +23,6 @@ export const defaultContextState = {
   hasErrors: () => false,
   hasFieldState: () => false,
   hasFieldError: () => false,
-  setFieldState: () => null,
-  setFieldError: () => null,
   ajvInstance: makeAjvInstance(),
   contextErrorMessages: undefined,
   isInsideFormElement: false,

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

	@@ -1 +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","~~setFieldState","setFieldError","~~ajvInstance","contextErrorMessages","isInsideFormElement","props","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils~~/ajv~~'\nimport {\n AllJSONSchemaVersions,\n ~~CustomErrorMessagesWithPaths~~,\n SubmitState,\n Path,\n EventStateObject,\n EventReturnWithStateObject,\n Identifier,\n FieldProps,\n ~~FormError,\n~~ ValueProps,\n OnChange,\n OnSubmitParams,\n} from '../types'\nimport { Props as ProviderProps } from './Provider'\nimport { SnapshotName } from '../Form/Snapshot'\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' \| '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 =\n FilterDataPathConditionParameters & {\n path: Path\n }\nexport type FilterDataPathCondition<Data = unknown> = (\n parameters: FilterDataPathConditionParameters<Data>\n) => boolean \| undefined\nexport type FilterDataPathConditionParameters<Data = unknown> = {\n value: unknown\n props: FieldProps\n data: Data\n internal: {\n error: Error \| undefined\n }\n}\nexport type FilterDataPathObject<Data> = Record<\n Path,\n FilterDataPathCondition<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}\n\nexport interface ContextState {\n id?: Identifier\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<~~string~~, 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 ~~getSubmitOptions~~?: () => OnSubmitParams\n setFieldEventListener?: (\n path: EventListenerCall['path'],\n type: EventListenerCall['type'],\n callback: EventListenerCall['callback']\n ) => void\n setVisibleError?: (path: Path, hasError: boolean) => void\n setFieldProps?: (path: Path, props: unknown) => void\n setValueProps?: (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 fieldPropsRef?: React.MutableRefObject<Record<~~string~~, FieldProps>>\n valuePropsRef?: React.MutableRefObject<Record<~~string~~, ValueProps>>\n fieldConnectionsRef?: React.RefObject<Record<Path, FieldConnections>>\n mountedFieldsRef?: React.MutableRefObject<Record<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\n hasVisibleError: boolean\n formState: SubmitState\n ajvInstance: Ajv\n contextErrorMessages: ~~CustomErrorMessagesWithPaths~~\n schema: AllJSONSchemaVersions\n path?: Path\n disabled?: boolean\n required?: boolean\n submitState: Partial<EventStateObject>\n isInsideFormElement?: boolean\n prerenderFieldProps?: boolean\n props: ProviderProps<unknown>\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 ~~setFieldState: () => null,\n setFieldError: () => null,\n~~ ajvInstance: makeAjvInstance(),\n contextErrorMessages: undefined,\n isInsideFormElement: false,\n props: null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,~~SAAcC~~,eAAe,QAAQ,~~cAAc~~;~~AAuLnD~~,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,~~aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,~~WAAW,~~EAAE3B~~,eAAe,CAAC,CAAC;~~EAC9B4B~~,oBAAoB,~~EAAExB~~,SAAS;EAC/~~ByB~~,mBAAmB,EAAE,KAAK;EAC1BC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,OAAO,~~GAAGhC~~,KAAK,~~CAACiC~~,aAAa,~~CAAe/B~~,mBAAmB,CAAC;AAEtE,~~eAAe8B~~,OAAO"}
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","isInsideFormElement","props","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, FormError, makeAjvInstance } from '../utils'\nimport {\n AllJSONSchemaVersions,\n GlobalErrorMessagesWithPaths,\n SubmitState,\n Path,\n EventStateObject,\n EventReturnWithStateObject,\n Identifier,\n FieldProps,\n ValueProps,\n OnChange,\n OnSubmitParams,\n} from '../types'\nimport { Props as ProviderProps } from './Provider'\nimport { SnapshotName } from '../Form/Snapshot'\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' \| '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 =\n FilterDataPathConditionParameters & {\n path: Path\n }\nexport type FilterDataPathCondition<Data = unknown> = (\n parameters: FilterDataPathConditionParameters<Data>\n) => boolean \| undefined\nexport type FilterDataPathConditionParameters<Data = unknown> = {\n value: unknown\n displayValue: undefined \| React.ReactNode \| Array<React.ReactNode>\n label: React.ReactNode\n props: FieldProps\n data: Data\n internal: {\n error: Error \| undefined\n }\n}\nexport type FilterDataPathObject<Data> = Record<\n Path,\n FilterDataPathCondition<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}\n\nexport interface ContextState {\n id?: Identifier\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 setVisibleError?: (path: Path, hasError: boolean) => void\n setFieldProps?: (path: Path, props: unknown) => void\n setValueProps?: (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 fieldDisplayValueRef?: React.MutableRefObject<\n Record<Path, React.ReactNode>\n >\n fieldPropsRef?: React.MutableRefObject<Record<Path, FieldProps>>\n valuePropsRef?: React.MutableRefObject<Record<Path, ValueProps>>\n fieldConnectionsRef?: React.RefObject<Record<Path, FieldConnections>>\n mountedFieldsRef?: React.MutableRefObject<Record<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\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 submitState: Partial<EventStateObject>\n isInsideFormElement?: boolean\n prerenderFieldProps?: boolean\n props: ProviderProps<unknown>\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 isInsideFormElement: false,\n props: null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyBC,eAAe,QAAQ,UAAU;AA2L1D,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,mBAAmB,EAAE,KAAK;EAC1BC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,OAAO,GAAG9B,KAAK,CAAC+B,aAAa,CAAe7B,mBAAmB,CAAC;AAEtE,eAAe4B,OAAO"}

package/es/extensions/forms/DataContext/Provider/Provider.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { JsonObject } from '../../utils/json-pointer';
-import { Ajv } from '../../utils/ajv';
-import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, Path, OnSubmit, OnChange, EventReturnWithStateObject } from '../../types';
+import { Ajv } from '../../utils';
+import { GlobalErrorMessagesWithPaths, AllJSONSchemaVersions, Path, OnSubmit, OnChange, EventReturnWithStateObject } from '../../types';
 import type { IsolationProviderProps } from '../../Form/Isolation/Isolation';
 import { ContextProps } from '../../../../shared/Context';
 import { ContextState, FilterData, FilterDataHandler, TransformData, VisibleDataHandler } from '../Context';
@@ -48,7 +48,7 @@ export interface Props<Data extends JsonObject> extends IsolationProviderProps<D
     /**
      * Custom error messages for the whole data set
      */
-    errorMessages?: CustomErrorMessagesWithPaths;
+    errorMessages?: GlobalErrorMessagesWithPaths;
     /**
      * @deprecated Use the `filterData` in the second event parameter in the `onSubmit` or `onChange` events.
      */

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

@@ -7,14 +7,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef, useMemo, useCallback, useReducer, useEffect, useContext } from 'react';
 import pointer from '../../utils/json-pointer';
-import { makeAjvInstance, ajvErrorsToFormErrors } from '../../utils/ajv';
+import { makeAjvInstance, ajvErrorsToFormErrors } from '../../utils';
 import { debounce } from '../../../../shared/helpers';
 import FieldPropsProvider from '../../Field/Provider';
 import useUpdateEffect from '../../../../shared/helpers/useUpdateEffect';
 import { isAsync } from '../../../../shared/helpers/isAsync';
 import { useSharedState } from '../../../../shared/helpers/useSharedState';
+import SharedContext from '../../../../shared/Context';
 import useTranslation from '../../hooks/useTranslation';
-import Context from '../Context';
+import DataContext from '../Context';
 import structuredClone from '@ungap/structured-clone';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 const isArrayJsonPointer = /^\/\d+(\/|$)/;
@@ -46,7 +47,7 @@ export default function Provider(props) {
       locale,
       translations,
       required,
-      errorMessages: contextErrorMessages,
+      errorMessages,
       isolate,
       children
     } = props,
@@ -56,11 +57,14 @@ export default function Provider(props) {
   }
   const {
     hasContext
-  } = useContext(Context) || {};
+  } = useContext(DataContext) || {};
   if (hasContext && !isolate) {
     throw new Error('DataContext (Form.Handler) can not be nested');
   }
   const formElementRef = useRef(null);
+  const {
+    locale: sharedLocale
+  } = useContext(SharedContext) || {};
   const translation = useTranslation().Field;
   const ajvRef = useRef(makeAjvInstance(ajvInstance));
   const mountedFieldsRef = useRef({});
@@ -162,7 +166,7 @@ export default function Provider(props) {
       forceUpdate();
     }
   }, []);
-  const mutateDataHandler = useCallback((data, filter, remove = false) => {
+  const mutateDataHandler = useCallback((data, handler, remove = false) => {
     const mutate = (path, result) => {
       if (remove) {
         if (result === false) {
@@ -176,18 +180,21 @@ export default function Provider(props) {
         }
       }
     };
-    if (typeof filter === 'function') {
+    if (typeof handler === 'function') {
       Object.entries(fieldPropsRef.current).forEach(([path, props]) => {
         const exists = pointer.has(data, path);
         if (exists) {
           var _fieldErrorRef$curren;
           const value = pointer.get(data, path);
+          const displayValue = fieldDisplayValueRef.current[path];
           const internal = {
             error: (_fieldErrorRef$curren = fieldErrorRef.current) === null || _fieldErrorRef$curren === void 0 ? void 0 : _fieldErrorRef$curren[path]
           };
-          const result = filter({
+          const result = handler({
             path,
             value,
+            displayValue,
+            label: props.label,
             data: internalDataRef.current,
             props,
             internal
@@ -196,16 +203,16 @@ export default function Provider(props) {
         }
       });
       return data;
-    } else if (filter) {
+    } else if (handler) {
       const runFilter = ({
         path,
         condition
       }) => {
         const exists = pointer.has(data, path);
         if (exists) {
-          var _fieldPropsRef$curren, _fieldErrorRef$curren2;
+          var _fieldErrorRef$curren2;
           const value = pointer.get(data, path);
-          const props = (_fieldPropsRef$curren = fieldPropsRef.current) === null || _fieldPropsRef$curren === void 0 ? void 0 : _fieldPropsRef$curren[path];
+          const props = fieldPropsRef.current[path];
           const internal = {
             error: (_fieldErrorRef$curren2 = fieldErrorRef.current) === null || _fieldErrorRef$curren2 === void 0 ? void 0 : _fieldErrorRef$curren2[path]
           };
@@ -219,7 +226,7 @@ export default function Provider(props) {
         }
       };
       const wildcardPaths = [];
-      Object.entries(filter).forEach(([path, condition]) => {
+      Object.entries(handler).forEach(([path, condition]) => {
         if (path.includes('*')) {
           const parts = path.split(/\/\*/g);
           const exists = pointer.has(data, parts[0]);
@@ -282,6 +289,7 @@ export default function Provider(props) {
   const filterData = useCallback((filter, data = internalDataRef.current) => {
     return filterDataHandler(data, filter);
   }, [filterDataHandler]);
+  const fieldDisplayValueRef = useRef({});
   const fieldConnectionsRef = useRef({});
   const setFieldConnection = useCallback((path, connections) => {
     fieldConnectionsRef.current[path] = connections;
@@ -625,14 +633,18 @@ export default function Provider(props) {
     const filteredData = filterSubmitData ? filterDataHandler(mutatedData, filterSubmitData) : mutatedData;
     return filteredData;
   }, [filterDataHandler, filterSubmitData, mutateDataHandler, transformOut]);
-  const getSubmitOptions = useCallback(() => {
+  const getSubmitParams = useCallback(() => {
     const reduceToVisibleFields = (data, options) => {
       return visibleDataHandler(transformOut ? mutateDataHandler(data, transformOut) : data, options);
     };
+    const transformData = (data, handler) => {
+      return mutateDataHandler(data, handler);
+    };
     const formElement = formElementRef.current;
-    const options = {
+    const params = {
       filterData,
       reduceToVisibleFields,
+      transformData,
       resetForm: () => {
         var _formElement$reset;
         formElement === null || formElement === void 0 ? void 0 : (_formElement$reset = formElement.reset) === null || _formElement$reset === void 0 ? void 0 : _formElement$reset.call(formElement);
@@ -645,7 +657,7 @@ export default function Provider(props) {
       },
       clearData
     };
-    return options;
+    return params;
   }, [clearData, filterData, mutateDataHandler, sessionStorageId, transformOut, visibleDataHandler]);
   const handleSubmit = useCallback(async () => {
     return await handleSubmitCall({
@@ -655,7 +667,7 @@ export default function Provider(props) {
           return;
         }
         const data = getSubmitData();
-        const options = getSubmitOptions();
+        const options = getSubmitParams();
         let result = undefined;
         if (isAsync(onSubmit)) {
           result = await onSubmit(data, options);
@@ -672,7 +684,7 @@ export default function Provider(props) {
         return result;
       }
     });
-  }, [getSubmitData, getSubmitOptions, handleSubmitCall, handleSubmitListeners, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit]);
+  }, [getSubmitData, getSubmitParams, handleSubmitCall, handleSubmitListeners, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit]);
   const fieldEventListenersRef = useRef([]);
   const setFieldEventListener = useCallback((path, type, callback) => {
     fieldEventListenersRef.current = fieldEventListenersRef.current.filter(({
@@ -730,6 +742,7 @@ export default function Provider(props) {
   });
   const submitState = submitStateRef.current;
   const disabled = typeof (rest === null || rest === void 0 ? void 0 : rest['disabled']) === 'boolean' ? rest === null || rest === void 0 ? void 0 : rest['disabled'] : formState === 'pending' === true ? true : undefined;
+  const contextErrorMessages = (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages[locale !== null && locale !== void 0 ? locale : sharedLocale]) || errorMessages;
   const contextValue = _objectSpread({
     handlePathChange,
     handlePathChangeUnvalidated,
@@ -756,7 +769,7 @@ export default function Provider(props) {
     visibleDataHandler,
     filterDataHandler,
     getSubmitData,
-    getSubmitOptions,
+    getSubmitParams,
     addOnChangeHandler,
     setHandleSubmit,
     scrollToTop,
@@ -771,6 +784,7 @@ export default function Provider(props) {
     showAllErrors: showAllErrorsRef.current,
     hasVisibleError: Object.keys(hasVisibleErrorRef.current).length > 0,
     fieldConnectionsRef,
+    fieldDisplayValueRef,
     fieldPropsRef,
     valuePropsRef,
     mountedFieldsRef,
@@ -788,7 +802,7 @@ export default function Provider(props) {
   if (id) {
     sharedDataContext.set(contextValue);
   }
-  return React.createElement(Context.Provider, {
+  return React.createElement(DataContext.Provider, {
     value: contextValue
   }, React.createElement(FieldPropsProvider, {
     FormStatus: globalStatusId ? {