@dnb/eufemia 10.58.0 → 10.60.0

package/es/extensions/forms/Field/Upload/Upload.js

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 const _excluded = ["id", "className", "width", "value", "label", "labelDescription", "help", "htmlAttributes", "handleChange", "handleFocus", "handleBlur", "fileHandler"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
 import { useFieldProps, useTranslation as useFormsTranslation } from '../../hooks';
@@ -75,12 +75,17 @@ function UploadComponent(props) {
     filesAmountLimit = 100,
     fileMaxSize = 5,
     skeleton,
-    onFileDelete
+    onFileDelete,
+    onFileClick
   } = rest;
   const {
     files: fileContext,
     setFiles
   } = useUpload(id);
+  const filesRef = useRef();
+  useEffect(() => {
+    filesRef.current = fileContext;
+  }, [fileContext]);
   useEffect(() => {
     const hasInvalidFiles = value === null || value === void 0 ? void 0 : value.some(({
       file
@@ -89,19 +94,24 @@ function UploadComponent(props) {
       setFiles(value);
     }
   }, [setFiles, value]);
-  const handleChangeAsync = useCallback(async files => {
+  const handleChangeAsync = useCallback(async existingFiles => {
     const existingFileIds = (fileContext === null || fileContext === void 0 ? void 0 : fileContext.map(file => file.id)) || [];
-    const newFiles = files.filter(file => !existingFileIds.includes(file.id));
+    const newFiles = existingFiles.filter(file => !existingFileIds.includes(file.id));
     if (newFiles.length > 0) {
       setFiles([...fileContext, ...updateFileLoadingState(newFiles, {
         isLoading: true
       })]);
-      const uploadedFiles = updateFileLoadingState(await fileHandler(newFiles), {
+      const incomingFiles = await fileHandler(newFiles);
+      const uploadedFiles = updateFileLoadingState(incomingFiles, {
         isLoading: false
       });
-      handleChange([...fileContext, ...uploadedFiles]);
+      const indexOfFirstNewFile = filesRef.current.findIndex(({
+        id
+      }) => id === newFiles[0].id);
+      const updatedFiles = [...filesRef.current.slice(0, indexOfFirstNewFile), ...uploadedFiles, ...filesRef.current.slice(indexOfFirstNewFile + newFiles.length)];
+      handleChange(updatedFiles);
     } else {
-      handleChange(files);
+      handleChange(existingFiles);
     }
   }, [fileContext, setFiles, fileHandler, handleChange]);
   const changeHandler = useCallback(({
@@ -132,6 +142,7 @@ function UploadComponent(props) {
     skeleton: skeleton,
     onChange: changeHandler,
     onFileDelete: onFileDelete,
+    onFileClick: onFileClick,
     title: label !== null && label !== void 0 ? label : title,
     text: help ? React.createElement(React.Fragment, null, labelDescription !== null && labelDescription !== void 0 ? labelDescription : text, React.createElement(HelpButtonInline, {
       contentId: `${id}-help`,

package/es/extensions/forms/Field/Upload/Upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","classnames","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","Upload","useUpload","pickSpacingProps","HelpButtonInline","HelpButtonInlineContent","useSharedTranslation","FormError","validateRequired","value","required","isChanged","error","hasError","some","file","errorMessage","hasFiles","length","undefined","updateFileLoadingState","files","isLoading","map","_objectSpread","UploadComponent","props","sharedTr","formsTr","errorMessages","errorRequired","preparedProps","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","fileHandler","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","fileContext","setFiles","hasInvalidFiles","name","handleChangeAsync","existingFileIds","newFiles","filter","includes","uploadedFiles","changeHandler","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","contentId","left","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react'\nimport classnames from 'classnames'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport {\n  useFieldProps,\n  useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport { FieldProps } from '../../types'\nimport Upload, {\n  UploadFile,\n  UploadFileNative,\n  UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n} from '../../../../components/help-button/HelpButtonInline'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\nimport { FormError } from '../../utils'\n\nexport type UploadValue = Array<UploadFile | UploadFileNative>\nexport type Props = Omit<\n  FieldProps<UploadValue, UploadValue | undefined>,\n  'name'\n> &\n  SpacingProps & {\n    width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n  } & Pick<\n    Partial<UploadProps>,\n    | 'title'\n    | 'text'\n    | 'acceptedFileTypes'\n    | 'filesAmountLimit'\n    | 'fileMaxSize'\n    | 'onFileDelete'\n    | 'skeleton'\n  > & {\n    fileHandler?: (\n      newFiles: UploadValue\n    ) => UploadValue | Promise<UploadValue>\n  }\n\nconst validateRequired = (\n  value: UploadValue,\n  { required, isChanged, error }\n) => {\n  const hasError = value?.some((file) => file.errorMessage)\n  if (hasError) {\n    return new FormError('Upload.errorInvalidFiles')\n  }\n\n  const hasFiles = value?.length > 0\n  if (required && ((!isChanged && !hasFiles) || !hasFiles)) {\n    return error\n  }\n\n  return undefined\n}\n\nconst updateFileLoadingState = (\n  files: UploadValue,\n  { isLoading } = { isLoading: false }\n) => {\n  return files.map((file) => ({ ...file, isLoading }))\n}\n\nfunction UploadComponent(props: Props) {\n  const sharedTr = useSharedTranslation().Upload\n  const formsTr = useFormsTranslation().Upload\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': formsTr.errorRequired,\n    }),\n    [formsTr.errorRequired]\n  )\n\n  const preparedProps = {\n    errorMessages,\n    validateRequired,\n    ...props,\n  }\n\n  const {\n    id,\n    className,\n    width: widthProp = 'stretch',\n    value,\n    label,\n    labelDescription,\n    help,\n    htmlAttributes,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    fileHandler,\n    ...rest\n  } = useFieldProps(preparedProps, {\n    executeOnChangeRegardlessOfError: true,\n  })\n\n  // Upload props\n  const {\n    title = sharedTr.title,\n    text = sharedTr.text,\n    acceptedFileTypes = ['pdf', 'png', 'jpg', 'jpeg'],\n    filesAmountLimit = 100,\n    fileMaxSize = 5,\n    skeleton,\n    onFileDelete,\n  } = rest\n\n  const { files: fileContext, setFiles } = useUpload(id)\n\n  useEffect(() => {\n    // Files stored in session storage will not have a property (due to serialization).\n    const hasInvalidFiles = value?.some(({ file }) => !file?.name)\n    if (!hasInvalidFiles) {\n      setFiles(value)\n    }\n  }, [setFiles, value])\n\n  const handleChangeAsync = useCallback(\n    async (files: UploadValue) => {\n      // Filter out existing files\n      const existingFileIds = fileContext?.map((file) => file.id) || []\n      const newFiles = files.filter(\n        (file) => !existingFileIds.includes(file.id)\n      )\n\n      if (newFiles.length > 0) {\n        // Set loading\n        setFiles([\n          ...fileContext,\n          ...updateFileLoadingState(newFiles, { isLoading: true }),\n        ])\n\n        const uploadedFiles = updateFileLoadingState(\n          await fileHandler(newFiles),\n          { isLoading: false }\n        )\n\n        // Set error, if any\n        handleChange([...fileContext, ...uploadedFiles])\n      } else {\n        handleChange(files)\n      }\n    },\n    [fileContext, setFiles, fileHandler, handleChange]\n  )\n\n  const changeHandler = useCallback(\n    ({ files }: { files: UploadValue }) => {\n      // Prevents the form-status from showing up\n      handleBlur()\n      handleFocus()\n\n      if (fileHandler) {\n        handleChangeAsync(files)\n      } else {\n        handleChange(files)\n      }\n    },\n    [handleBlur, handleFocus, fileHandler, handleChangeAsync, handleChange]\n  )\n\n  const width = widthProp as FieldBlockWidth\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    forId: `${id}-input`,\n    labelSrOnly: true,\n    className: classnames('dnb-forms-field-upload', className),\n    width,\n    help: undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Upload\n        id={id}\n        acceptedFileTypes={acceptedFileTypes}\n        filesAmountLimit={filesAmountLimit}\n        fileMaxSize={fileMaxSize}\n        skeleton={skeleton}\n        onChange={changeHandler}\n        onFileDelete={onFileDelete}\n        title={label ?? title}\n        text={\n          help ? (\n            <>\n              {labelDescription ?? text}\n              <HelpButtonInline\n                contentId={`${id}-help`}\n                left={text ? 'x-small' : false}\n                help={help}\n              />\n            </>\n          ) : (\n            labelDescription ?? text\n          )\n        }\n        {...htmlAttributes}\n      >\n        {help && (\n          <HelpButtonInlineContent contentId={`${id}-help`} help={help} />\n        )}\n      </Upload>\n    </FieldBlock>\n  )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","useRef","classnames","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","Upload","useUpload","pickSpacingProps","HelpButtonInline","HelpButtonInlineContent","useSharedTranslation","FormError","validateRequired","value","required","isChanged","error","hasError","some","file","errorMessage","hasFiles","length","undefined","updateFileLoadingState","files","isLoading","map","_objectSpread","UploadComponent","props","sharedTr","formsTr","errorMessages","errorRequired","preparedProps","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","fileHandler","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","onFileClick","fileContext","setFiles","filesRef","current","hasInvalidFiles","name","handleChangeAsync","existingFiles","existingFileIds","newFiles","filter","includes","incomingFiles","uploadedFiles","indexOfFirstNewFile","findIndex","updatedFiles","slice","changeHandler","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","contentId","left","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport {\n  useFieldProps,\n  useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport { FieldProps } from '../../types'\nimport Upload, {\n  UploadFile,\n  UploadFileNative,\n  UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n} from '../../../../components/help-button/HelpButtonInline'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\nimport { FormError } from '../../utils'\n\nexport type UploadValue = Array<UploadFile | UploadFileNative>\nexport type Props = Omit<\n  FieldProps<UploadValue, UploadValue | undefined>,\n  'name'\n> &\n  SpacingProps & {\n    width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n  } & Pick<\n    Partial<UploadProps>,\n    | 'title'\n    | 'text'\n    | 'acceptedFileTypes'\n    | 'filesAmountLimit'\n    | 'fileMaxSize'\n    | 'onFileDelete'\n    | 'onFileClick'\n    | 'skeleton'\n    | 'download'\n  > & {\n    fileHandler?: (\n      newFiles: UploadValue\n    ) => UploadValue | Promise<UploadValue>\n  }\n\nconst validateRequired = (\n  value: UploadValue,\n  { required, isChanged, error }\n) => {\n  const hasError = value?.some((file) => file.errorMessage)\n  if (hasError) {\n    return new FormError('Upload.errorInvalidFiles')\n  }\n\n  const hasFiles = value?.length > 0\n  if (required && ((!isChanged && !hasFiles) || !hasFiles)) {\n    return error\n  }\n\n  return undefined\n}\n\nconst updateFileLoadingState = (\n  files: UploadValue,\n  { isLoading } = { isLoading: false }\n) => {\n  return files.map((file) => ({ ...file, isLoading }))\n}\n\nfunction UploadComponent(props: Props) {\n  const sharedTr = useSharedTranslation().Upload\n  const formsTr = useFormsTranslation().Upload\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': formsTr.errorRequired,\n    }),\n    [formsTr.errorRequired]\n  )\n\n  const preparedProps = {\n    errorMessages,\n    validateRequired,\n    ...props,\n  }\n\n  const {\n    id,\n    className,\n    width: widthProp = 'stretch',\n    value,\n    label,\n    labelDescription,\n    help,\n    htmlAttributes,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    fileHandler,\n    ...rest\n  } = useFieldProps(preparedProps, {\n    executeOnChangeRegardlessOfError: true,\n  })\n\n  // Upload props\n  const {\n    title = sharedTr.title,\n    text = sharedTr.text,\n    acceptedFileTypes = ['pdf', 'png', 'jpg', 'jpeg'],\n    filesAmountLimit = 100,\n    fileMaxSize = 5,\n    skeleton,\n    onFileDelete,\n    onFileClick,\n  } = rest\n\n  const { files: fileContext, setFiles } = useUpload(id)\n\n  const filesRef = useRef<Array<UploadFile>>()\n\n  useEffect(() => {\n    filesRef.current = fileContext\n  }, [fileContext])\n\n  useEffect(() => {\n    // Files stored in session storage will not have a property (due to serialization).\n    const hasInvalidFiles = value?.some(({ file }) => !file?.name)\n    if (!hasInvalidFiles) {\n      setFiles(value)\n    }\n  }, [setFiles, value])\n\n  const handleChangeAsync = useCallback(\n    async (existingFiles: UploadValue) => {\n      // Filter out existing files\n      const existingFileIds = fileContext?.map((file) => file.id) || []\n      const newFiles = existingFiles.filter(\n        (file) => !existingFileIds.includes(file.id)\n      )\n\n      if (newFiles.length > 0) {\n        // Set loading\n        setFiles([\n          ...fileContext,\n          ...updateFileLoadingState(newFiles, { isLoading: true }),\n        ])\n\n        const incomingFiles = await fileHandler(newFiles)\n\n        const uploadedFiles = updateFileLoadingState(incomingFiles, {\n          isLoading: false,\n        })\n\n        const indexOfFirstNewFile = filesRef.current.findIndex(\n          ({ id }) => id === newFiles[0].id\n        )\n\n        const updatedFiles = [\n          ...filesRef.current.slice(0, indexOfFirstNewFile),\n          ...uploadedFiles,\n          ...filesRef.current.slice(indexOfFirstNewFile + newFiles.length),\n        ]\n\n        // Set error, if any\n        handleChange(updatedFiles)\n      } else {\n        handleChange(existingFiles)\n      }\n    },\n    [fileContext, setFiles, fileHandler, handleChange]\n  )\n\n  const changeHandler = useCallback(\n    ({ files }: { files: UploadValue }) => {\n      // Prevents the form-status from showing up\n      handleBlur()\n      handleFocus()\n\n      if (fileHandler) {\n        handleChangeAsync(files)\n      } else {\n        handleChange(files)\n      }\n    },\n    [handleBlur, handleFocus, fileHandler, handleChangeAsync, handleChange]\n  )\n\n  const width = widthProp as FieldBlockWidth\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    forId: `${id}-input`,\n    labelSrOnly: true,\n    className: classnames('dnb-forms-field-upload', className),\n    width,\n    help: undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Upload\n        id={id}\n        acceptedFileTypes={acceptedFileTypes}\n        filesAmountLimit={filesAmountLimit}\n        fileMaxSize={fileMaxSize}\n        skeleton={skeleton}\n        onChange={changeHandler}\n        onFileDelete={onFileDelete}\n        onFileClick={onFileClick}\n        title={label ?? title}\n        text={\n          help ? (\n            <>\n              {labelDescription ?? text}\n              <HelpButtonInline\n                contentId={`${id}-help`}\n                left={text ? 'x-small' : false}\n                help={help}\n              />\n            </>\n          ) : (\n            labelDescription ?? text\n          )\n        }\n        {...htmlAttributes}\n      >\n        {help && (\n          <HelpButtonInlineContent contentId={`${id}-help`} help={help} />\n        )}\n      </Upload>\n    </FieldBlock>\n  )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/extensions/forms/Form/Element/Element.js

@@ -57,7 +57,7 @@ export default function FormElement(props) {
       key: key,
       state: key,
       id: `${id}-form-status-${key}`,
-      className: "dnb-forms-status",
+      className: "dnb-forms-form__status-message",
       show: Boolean(value),
       no_animation: false,
       shellSpace: {

package/es/extensions/forms/Form/Element/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","names":["React","useCallback","useContext","useRef","classnames","DataContext","Space","useId","FormStatus","combineLabelledBy","FormElement","props","id","dataContext","submitState","restHandlerProps","states","Object","entries","filter","value","_ref","_objectSpread","children","className","onSubmit","restProps","_objectWithoutProperties","_excluded","hasElementRef","current","onSubmitHandler","event","preventDefault","formElement","target","hasContext","formElementRef","handleSubmit","createElement","_extends","element","map","key","undefined","state","show","Boolean","no_animation","shellSpace","top","String"],"sources":["../../../../../../src/extensions/forms/Form/Element/Element.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport classnames from 'classnames'\nimport DataContext from '../../DataContext/Context'\nimport Space from '../../../../components/space/Space'\nimport useId from '../../../../shared/helpers/useId'\nimport type { SpacingProps } from '../../../../shared/types'\nimport { FormStatus } from '../../../../components'\nimport { combineLabelledBy } from '../../../../shared/component-helper'\n\nexport type Props = Omit<\n  React.HTMLProps<HTMLFormElement>,\n  'ref' | 'autoComplete'\n> &\n  SpacingProps\n\nexport default function FormElement(props: Props) {\n  const id = useId()\n  const dataContext = useContext(DataContext)\n  const { submitState, restHandlerProps } = dataContext || {}\n  const states = Object.entries(submitState || {}).filter(\n    ([, value]) => value\n  )\n\n  const { children, className, onSubmit, ...restProps } = {\n    ...restHandlerProps,\n    ...props,\n  } as Props\n\n  /**\n   * Set to true,\n   * this way we prevent \"handleSubmit\" to be called twice when the SubmitButton is pressed.\n   */\n  const hasElementRef = useRef(false)\n  if (!dataContext.hasElementRef) {\n    dataContext.hasElementRef = hasElementRef\n  }\n  dataContext.hasElementRef.current = true\n\n  const onSubmitHandler = useCallback(\n    (event: React.SyntheticEvent<HTMLFormElement>) => {\n      event?.preventDefault()\n\n      const formElement = event.target as HTMLFormElement\n\n      if (dataContext.hasContext) {\n        dataContext.formElementRef.current = formElement\n        dataContext.handleSubmit()\n      }\n\n      if (typeof onSubmit === 'function') {\n        onSubmit(event)\n      }\n    },\n    [dataContext, onSubmit]\n  )\n\n  return (\n    <Space\n      element=\"form\"\n      className={classnames('dnb-forms-form', className)}\n      onSubmit={onSubmitHandler}\n      aria-labelledby={\n        combineLabelledBy(\n          restProps,\n          states.map(([key]) => {\n            return `${id}-form-status-${key}`\n          })\n        ) || undefined\n      }\n      {...restProps}\n    >\n      {children}\n\n      {['error', 'warning', 'info'].map((key) => {\n        const value = submitState?.[key]\n        return (\n          <FormStatus\n            key={key}\n            state={key}\n            id={`${id}-form-status-${key}`}\n            className=\"dnb-forms-status\"\n            show={Boolean(value)}\n            no_animation={false}\n            shellSpace={{ top: 'small' }}\n          >\n            {String(value?.['message'] || value || '')}\n          </FormStatus>\n        )\n      })}\n    </Space>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Element.js","names":["React","useCallback","useContext","useRef","classnames","DataContext","Space","useId","FormStatus","combineLabelledBy","FormElement","props","id","dataContext","submitState","restHandlerProps","states","Object","entries","filter","value","_ref","_objectSpread","children","className","onSubmit","restProps","_objectWithoutProperties","_excluded","hasElementRef","current","onSubmitHandler","event","preventDefault","formElement","target","hasContext","formElementRef","handleSubmit","createElement","_extends","element","map","key","undefined","state","show","Boolean","no_animation","shellSpace","top","String"],"sources":["../../../../../../src/extensions/forms/Form/Element/Element.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport classnames from 'classnames'\nimport DataContext from '../../DataContext/Context'\nimport Space from '../../../../components/space/Space'\nimport useId from '../../../../shared/helpers/useId'\nimport type { SpacingProps } from '../../../../shared/types'\nimport { FormStatus } from '../../../../components'\nimport { combineLabelledBy } from '../../../../shared/component-helper'\n\nexport type Props = Omit<\n  React.HTMLProps<HTMLFormElement>,\n  'ref' | 'autoComplete'\n> &\n  SpacingProps\n\nexport default function FormElement(props: Props) {\n  const id = useId()\n  const dataContext = useContext(DataContext)\n  const { submitState, restHandlerProps } = dataContext || {}\n  const states = Object.entries(submitState || {}).filter(\n    ([, value]) => value\n  )\n\n  const { children, className, onSubmit, ...restProps } = {\n    ...restHandlerProps,\n    ...props,\n  } as Props\n\n  /**\n   * Set to true,\n   * this way we prevent \"handleSubmit\" to be called twice when the SubmitButton is pressed.\n   */\n  const hasElementRef = useRef(false)\n  if (!dataContext.hasElementRef) {\n    dataContext.hasElementRef = hasElementRef\n  }\n  dataContext.hasElementRef.current = true\n\n  const onSubmitHandler = useCallback(\n    (event: React.SyntheticEvent<HTMLFormElement>) => {\n      event?.preventDefault()\n\n      const formElement = event.target as HTMLFormElement\n\n      if (dataContext.hasContext) {\n        dataContext.formElementRef.current = formElement\n        dataContext.handleSubmit()\n      }\n\n      if (typeof onSubmit === 'function') {\n        onSubmit(event)\n      }\n    },\n    [dataContext, onSubmit]\n  )\n\n  return (\n    <Space\n      element=\"form\"\n      className={classnames('dnb-forms-form', className)}\n      onSubmit={onSubmitHandler}\n      aria-labelledby={\n        combineLabelledBy(\n          restProps,\n          states.map(([key]) => {\n            return `${id}-form-status-${key}`\n          })\n        ) || undefined\n      }\n      {...restProps}\n    >\n      {children}\n\n      {['error', 'warning', 'info'].map((key) => {\n        const value = submitState?.[key]\n        return (\n          <FormStatus\n            key={key}\n            state={key}\n            id={`${id}-form-status-${key}`}\n            className=\"dnb-forms-form__status-message\"\n            show={Boolean(value)}\n            no_animation={false}\n            shellSpace={{ top: 'small' }}\n          >\n            {String(value?.['message'] || value || '')}\n          </FormStatus>\n        )\n      })}\n    </Space>\n  )\n}\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,KAAK,MAAM,oCAAoC;AACtD,OAAOC,KAAK,MAAM,kCAAkC;AAEpD,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,iBAAiB,QAAQ,qCAAqC;AAQvE,eAAe,SAASC,WAAWA,CAACC,KAAY,EAAE;EAChD,MAAMC,EAAE,GAAGL,KAAK,CAAC,CAAC;EAClB,MAAMM,WAAW,GAAGX,UAAU,CAACG,WAAW,CAAC;EAC3C,MAAM;IAAES,WAAW;IAAEC;EAAiB,CAAC,GAAGF,WAAW,IAAI,CAAC,CAAC;EAC3D,MAAMG,MAAM,GAAGC,MAAM,CAACC,OAAO,CAACJ,WAAW,IAAI,CAAC,CAAC,CAAC,CAACK,MAAM,CACrD,CAAC,GAAGC,KAAK,CAAC,KAAKA,KACjB,CAAC;EAED,MAAAC,IAAA,GAAAC,aAAA,CAAAA,aAAA,KACKP,gBAAgB,GAChBJ,KAAK;IAFJ;MAAEY,QAAQ;MAAEC,SAAS;MAAEC;IAAuB,CAAC,GAAAJ,IAAA;IAAXK,SAAS,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EASnD,MAAMC,aAAa,GAAG1B,MAAM,CAAC,KAAK,CAAC;EACnC,IAAI,CAACU,WAAW,CAACgB,aAAa,EAAE;IAC9BhB,WAAW,CAACgB,aAAa,GAAGA,aAAa;EAC3C;EACAhB,WAAW,CAACgB,aAAa,CAACC,OAAO,GAAG,IAAI;EAExC,MAAMC,eAAe,GAAG9B,WAAW,CAChC+B,KAA4C,IAAK;IAChDA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,cAAc,CAAC,CAAC;IAEvB,MAAMC,WAAW,GAAGF,KAAK,CAACG,MAAyB;IAEnD,IAAItB,WAAW,CAACuB,UAAU,EAAE;MAC1BvB,WAAW,CAACwB,cAAc,CAACP,OAAO,GAAGI,WAAW;MAChDrB,WAAW,CAACyB,YAAY,CAAC,CAAC;IAC5B;IAEA,IAAI,OAAOb,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACO,KAAK,CAAC;IACjB;EACF,CAAC,EACD,CAACnB,WAAW,EAAEY,QAAQ,CACxB,CAAC;EAED,OACEzB,KAAA,CAAAuC,aAAA,CAACjC,KAAK,EAAAkC,QAAA;IACJC,OAAO,EAAC,MAAM;IACdjB,SAAS,EAAEpB,UAAU,CAAC,gBAAgB,EAAEoB,SAAS,CAAE;IACnDC,QAAQ,EAAEM,eAAgB;IAC1B,mBACEtB,iBAAiB,CACfiB,SAAS,EACTV,MAAM,CAAC0B,GAAG,CAAC,CAAC,CAACC,GAAG,CAAC,KAAK;MACpB,OAAQ,GAAE/B,EAAG,gBAAe+B,GAAI,EAAC;IACnC,CAAC,CACH,CAAC,IAAIC;EACN,GACGlB,SAAS,GAEZH,QAAQ,EAER,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAACmB,GAAG,CAAEC,GAAG,IAAK;IACzC,MAAMvB,KAAK,GAAGN,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAG6B,GAAG,CAAC;IAChC,OACE3C,KAAA,CAAAuC,aAAA,CAAC/B,UAAU;MACTmC,GAAG,EAAEA,GAAI;MACTE,KAAK,EAAEF,GAAI;MACX/B,EAAE,EAAG,GAAEA,EAAG,gBAAe+B,GAAI,EAAE;MAC/BnB,SAAS,EAAC,gCAAgC;MAC1CsB,IAAI,EAAEC,OAAO,CAAC3B,KAAK,CAAE;MACrB4B,YAAY,EAAE,KAAM;MACpBC,UAAU,EAAE;QAAEC,GAAG,EAAE;MAAQ;IAAE,GAE5BC,MAAM,CAAC,CAAA/B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,SAAS,CAAC,KAAIA,KAAK,IAAI,EAAE,CAC/B,CAAC;EAEjB,CAAC,CACI,CAAC;AAEZ"}

package/es/extensions/forms/Form/InfoOverlay/InfoOverlay.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { SharedStateId } from '../../../../shared/helpers/useSharedState';
+import { InfoOverlayContent } from './setContent';
+export type Props = {
+    /**
+     * The content to show.
+     * If not given, the children will be shown.
+     * Can be `success`, `error` or a custom content.
+     */
+    content?: InfoOverlayContent;
+    onCancel?: () => void;
+    /** Predefined content */
+    success?: {
+        title?: React.ReactNode;
+        description?: React.ReactNode;
+        buttonText?: React.ReactNode;
+        buttonHref?: string;
+        buttonClickHandler?: () => void;
+    };
+    /** Predefined content */
+    error?: {
+        title?: React.ReactNode;
+        description?: React.ReactNode;
+        retryButton?: React.ReactNode;
+        cancelButton?: React.ReactNode;
+    };
+    id?: SharedStateId;
+    children: React.ReactNode;
+    className?: string;
+};
+declare function InfoOverlay(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace InfoOverlay {
+    var setContent: typeof import("./setContent").default;
+    var _supportsSpacingProps: boolean;
+}
+export default InfoOverlay;

package/es/extensions/forms/Form/InfoOverlay/InfoOverlay.js

@@ -0,0 +1,122 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "content", "success", "error", "onCancel", "className", "children"];
+import React, { useCallback, useContext, useRef } from 'react';
+import classnames from 'classnames';
+import Visibility from '../Visibility';
+import DataContext from '../../DataContext/Context';
+import { useSharedState } from '../../../../shared/helpers/useSharedState';
+import useMounted from '../../../../shared/helpers/useMounted';
+import setContent from './setContent';
+import { Button, Flex, HeightAnimation, Section } from '../../../../components';
+import { P } from '../../../../elements';
+import { useTranslation } from '../../hooks';
+import MainHeading from '../MainHeading';
+import SubmitButton from '../SubmitButton';
+function InfoOverlay(props) {
+  const {
+    id: idProp,
+    formState
+  } = useContext(DataContext);
+  const {
+      id = idProp,
+      content: contentProp,
+      success,
+      error,
+      onCancel,
+      className,
+      children
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  const {
+    data
+  } = useSharedState(id);
+  const {
+    content = contentProp
+  } = data || {};
+  const translations = useTranslation();
+  const mountedRef = useMounted();
+  const innerRef = useRef(null);
+  const onAnimationEnd = useCallback(state => {
+    if (mountedRef.current && state === 'opened') {
+      var _innerRef$current$foc, _innerRef$current;
+      (_innerRef$current$foc = (_innerRef$current = innerRef.current).focus) === null || _innerRef$current$foc === void 0 ? void 0 : _innerRef$current$foc.call(_innerRef$current);
+    }
+  }, [mountedRef]);
+  const currentContentRef = useRef();
+  if (content) {
+    currentContentRef.current = content;
+  }
+  const onCancelHandler = useCallback(() => {
+    if (id) {
+      setContent(id, undefined);
+    }
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [id, onCancel]);
+  const childrenAreVisible = typeof content !== 'undefined' ? !(content === content) : undefined;
+  const statusContentIsVisible = typeof content !== 'undefined' ? content === content : false;
+  const status = typeof content === 'string' && !content.includes(' ') ? content : undefined;
+  let statusContent = content;
+  if (currentContentRef.current === 'success') {
+    const tr = translations.InfoOverlaySuccess;
+    const {
+      title,
+      description,
+      buttonText,
+      buttonHref,
+      buttonClickHandler
+    } = success || {};
+    statusContent = React.createElement(Section, _extends({
+      variant: "info",
+      innerSpace: {
+        top: 'large',
+        bottom: 'xx-large'
+      }
+    }, restProps), React.createElement(Flex.Stack, {
+      gap: "large"
+    }, React.createElement(MainHeading, null, title !== null && title !== void 0 ? title : tr.title), React.createElement(P, null, description !== null && description !== void 0 ? description : tr.description), React.createElement(Button, {
+      href: buttonClickHandler ? undefined : buttonHref !== null && buttonHref !== void 0 ? buttonHref : '/',
+      on_click: buttonClickHandler
+    }, buttonText !== null && buttonText !== void 0 ? buttonText : tr.buttonText)));
+  } else if (currentContentRef.current === 'error') {
+    const tr = translations.InfoOverlayError;
+    const {
+      title,
+      description,
+      cancelButton,
+      retryButton
+    } = error || {};
+    statusContent = React.createElement(Section, _extends({
+      variant: "transparent",
+      innerSpace: {
+        top: 'large',
+        bottom: 'xx-large'
+      }
+    }, restProps), React.createElement(Flex.Stack, {
+      gap: "large"
+    }, React.createElement(MainHeading, null, title !== null && title !== void 0 ? title : tr.title), React.createElement(HeightAnimation, null, React.createElement(P, null, formState === 'pending' ? tr.retryingText : description !== null && description !== void 0 ? description : tr.description)), React.createElement(Flex.Horizontal, null, React.createElement(Button, {
+      variant: "secondary",
+      onClick: onCancelHandler
+    }, cancelButton !== null && cancelButton !== void 0 ? cancelButton : tr.cancelButton), React.createElement(SubmitButton, null, retryButton !== null && retryButton !== void 0 ? retryButton : tr.retryButton))));
+  }
+  return React.createElement("div", {
+    className: classnames("dnb-forms-info-overlay dnb-no-focus", className, status && `dnb-forms-info-overlay--${status}`),
+    tabIndex: -1,
+    ref: innerRef
+  }, React.createElement(Visibility, {
+    visible: statusContentIsVisible,
+    onAnimationEnd: onAnimationEnd,
+    animate: true
+  }, statusContent), React.createElement(Visibility, {
+    visible: childrenAreVisible,
+    onAnimationEnd: onAnimationEnd,
+    animate: true,
+    keepInDOM: true
+  }, children));
+}
+InfoOverlay.setContent = setContent;
+InfoOverlay._supportsSpacingProps = true;
+export default InfoOverlay;
+//# sourceMappingURL=InfoOverlay.js.map

package/es/extensions/forms/Form/InfoOverlay/InfoOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoOverlay.js","names":["React","useCallback","useContext","useRef","classnames","Visibility","DataContext","useSharedState","useMounted","setContent","Button","Flex","HeightAnimation","Section","P","useTranslation","MainHeading","SubmitButton","InfoOverlay","props","id","idProp","formState","content","contentProp","success","error","onCancel","className","children","restProps","_objectWithoutProperties","_excluded","data","translations","mountedRef","innerRef","onAnimationEnd","state","current","_innerRef$current$foc","_innerRef$current","focus","call","currentContentRef","onCancelHandler","undefined","childrenAreVisible","statusContentIsVisible","status","includes","statusContent","tr","InfoOverlaySuccess","title","description","buttonText","buttonHref","buttonClickHandler","createElement","_extends","variant","innerSpace","top","bottom","Stack","gap","href","on_click","InfoOverlayError","cancelButton","retryButton","retryingText","Horizontal","onClick","tabIndex","ref","visible","animate","keepInDOM","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/InfoOverlay/InfoOverlay.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport classnames from 'classnames'\nimport Visibility from '../Visibility'\nimport DataContext from '../../DataContext/Context'\nimport {\n  SharedStateId,\n  useSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport useMounted from '../../../../shared/helpers/useMounted'\nimport setContent, { InfoOverlayContent } from './setContent'\nimport {\n  Button,\n  Flex,\n  HeightAnimation,\n  Section,\n} from '../../../../components'\nimport { HeightAnimationAllProps } from '../../../../components/HeightAnimation'\nimport { P } from '../../../../elements'\nimport { useTranslation } from '../../hooks'\nimport MainHeading from '../MainHeading'\nimport SubmitButton from '../SubmitButton'\n\nexport type Props = {\n  /**\n   * The content to show.\n   * If not given, the children will be shown.\n   * Can be `success`, `error` or a custom content.\n   */\n  content?: InfoOverlayContent\n  onCancel?: () => void\n\n  /** Predefined content */\n  success?: {\n    title?: React.ReactNode\n    description?: React.ReactNode\n    buttonText?: React.ReactNode\n    buttonHref?: string\n    buttonClickHandler?: () => void\n  }\n  /** Predefined content */\n  error?: {\n    title?: React.ReactNode\n    description?: React.ReactNode\n    retryButton?: React.ReactNode\n    cancelButton?: React.ReactNode\n  }\n\n  // Various props\n  id?: SharedStateId\n  children: React.ReactNode\n  className?: string\n}\n\nfunction InfoOverlay(props: Props) {\n  const { id: idProp, formState } = useContext(DataContext)\n\n  const {\n    id = idProp,\n    content: contentProp,\n    success,\n    error,\n    onCancel,\n    className,\n    children,\n    ...restProps\n  } = props\n\n  const { data } = useSharedState<{\n    content?: InfoOverlayContent\n  }>(id)\n  const { content = contentProp } = data || {}\n\n  const translations = useTranslation()\n  const mountedRef = useMounted()\n  const innerRef = useRef<HTMLDivElement>(null)\n  const onAnimationEnd: HeightAnimationAllProps['onAnimationEnd'] =\n    useCallback(\n      (state) => {\n        if (mountedRef.current && state === 'opened') {\n          innerRef.current.focus?.()\n        }\n      },\n      [mountedRef]\n    )\n\n  // To keep the content visible while hiding it with the HightAnimation\n  const currentContentRef = useRef<InfoOverlayContent>()\n  if (content) {\n    currentContentRef.current = content\n  }\n\n  const onCancelHandler = useCallback(() => {\n    if (id) {\n      setContent(id, undefined)\n    }\n    onCancel?.()\n  }, [id, onCancel])\n\n  const childrenAreVisible =\n    typeof content !== 'undefined' ? !(content === content) : undefined\n  const statusContentIsVisible =\n    typeof content !== 'undefined' ? content === content : false\n  const status =\n    typeof content === 'string' && !content.includes(' ')\n      ? content\n      : undefined\n\n  let statusContent = content\n\n  if (currentContentRef.current === 'success') {\n    const tr = translations.InfoOverlaySuccess\n    const {\n      title,\n      description,\n      buttonText,\n      buttonHref,\n      buttonClickHandler,\n    } = success || {}\n\n    statusContent = (\n      <Section\n        variant=\"info\"\n        innerSpace={{ top: 'large', bottom: 'xx-large' }}\n        {...restProps}\n      >\n        <Flex.Stack gap=\"large\">\n          <MainHeading>{title ?? tr.title}</MainHeading>\n          <P>{description ?? tr.description}</P>\n          <Button\n            href={buttonClickHandler ? undefined : buttonHref ?? '/'}\n            on_click={buttonClickHandler}\n          >\n            {buttonText ?? tr.buttonText}\n          </Button>\n        </Flex.Stack>\n      </Section>\n    )\n  } else if (currentContentRef.current === 'error') {\n    const tr = translations.InfoOverlayError\n    const { title, description, cancelButton, retryButton } = error || {}\n\n    statusContent = (\n      <Section\n        variant=\"transparent\"\n        innerSpace={{ top: 'large', bottom: 'xx-large' }}\n        {...restProps}\n      >\n        <Flex.Stack gap=\"large\">\n          <MainHeading>{title ?? tr.title}</MainHeading>\n          <HeightAnimation>\n            <P>\n              {formState === 'pending'\n                ? tr.retryingText\n                : description ?? tr.description}\n            </P>\n          </HeightAnimation>\n          <Flex.Horizontal>\n            <Button variant=\"secondary\" onClick={onCancelHandler}>\n              {cancelButton ?? tr.cancelButton}\n            </Button>\n            <SubmitButton>{retryButton ?? tr.retryButton}</SubmitButton>\n          </Flex.Horizontal>\n        </Flex.Stack>\n      </Section>\n    )\n  }\n\n  return (\n    <div\n      className={classnames(\n        'dnb-forms-info-overlay',\n        status && `dnb-forms-info-overlay--${status}`,\n        'dnb-no-focus',\n        className\n      )}\n      tabIndex={-1}\n      ref={innerRef}\n    >\n      <Visibility\n        visible={statusContentIsVisible}\n        onAnimationEnd={onAnimationEnd}\n        animate\n      >\n        {statusContent}\n      </Visibility>\n\n      <Visibility\n        visible={childrenAreVisible}\n        onAnimationEnd={onAnimationEnd}\n        animate\n        keepInDOM\n      >\n        {children}\n      </Visibility>\n    </div>\n  )\n}\n\nInfoOverlay.setContent = setContent\nInfoOverlay._supportsSpacingProps = true\n\nexport default InfoOverlay\n"],"mappings":"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"}

package/es/extensions/forms/Form/InfoOverlay/InfoOverlayDocs.d.ts

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

package/es/extensions/forms/Form/InfoOverlay/InfoOverlayDocs.js

@@ -0,0 +1,60 @@
+export const InfoOverlaySuccessProperties = {
+  title: {
+    doc: 'The title of the component.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  description: {
+    doc: 'The description of the component.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  buttonText: {
+    doc: 'The text of the button.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  buttonHref: {
+    doc: 'The href of the button.',
+    type: 'string',
+    status: 'optional'
+  },
+  buttonClickHandler: {
+    doc: 'The click handler of the button.',
+    type: 'function',
+    status: 'optional'
+  },
+  '[Section](/uilib/components/section/properties)': {
+    doc: 'All Section properties.',
+    type: 'various',
+    status: 'optional'
+  }
+};
+export const InfoOverlayErrorProperties = {
+  title: {
+    doc: 'The title of the component.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  description: {
+    doc: 'The description of the component.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  cancelButton: {
+    doc: 'The text of the cancel button.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  retryButton: {
+    doc: 'The text of the retry button.',
+    type: 'React.Node',
+    status: 'optional'
+  },
+  '[Section](/uilib/components/section/properties)': {
+    doc: 'All Section properties.',
+    type: 'various',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=InfoOverlayDocs.js.map

package/es/extensions/forms/Form/InfoOverlay/InfoOverlayDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoOverlayDocs.js","names":["InfoOverlaySuccessProperties","title","doc","type","status","description","buttonText","buttonHref","buttonClickHandler","InfoOverlayErrorProperties","cancelButton","retryButton"],"sources":["../../../../../../src/extensions/forms/Form/InfoOverlay/InfoOverlayDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const InfoOverlaySuccessProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the component.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  description: {\n    doc: 'The description of the component.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  buttonText: {\n    doc: 'The text of the button.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  buttonHref: {\n    doc: 'The href of the button.',\n    type: 'string',\n    status: 'optional',\n  },\n  buttonClickHandler: {\n    doc: 'The click handler of the button.',\n    type: 'function',\n    status: 'optional',\n  },\n  '[Section](/uilib/components/section/properties)': {\n    doc: 'All Section properties.',\n    type: 'various',\n    status: 'optional',\n  },\n}\n\nexport const InfoOverlayErrorProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the component.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  description: {\n    doc: 'The description of the component.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  cancelButton: {\n    doc: 'The text of the cancel button.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  retryButton: {\n    doc: 'The text of the retry button.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  '[Section](/uilib/components/section/properties)': {\n    doc: 'All Section properties.',\n    type: 'various',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,4BAAkD,GAAG;EAChEC,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,WAAW,EAAE;IACXH,GAAG,EAAE,mCAAmC;IACxCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDG,UAAU,EAAE;IACVL,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,kBAAkB,EAAE;IAClBN,GAAG,EAAE,kCAAkC;IACvCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACD,iDAAiD,EAAE;IACjDF,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMK,0BAAgD,GAAG;EAC9DR,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,WAAW,EAAE;IACXH,GAAG,EAAE,mCAAmC;IACxCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDM,YAAY,EAAE;IACZR,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDO,WAAW,EAAE;IACXT,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,iDAAiD,EAAE;IACjDF,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/Form/InfoOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './InfoOverlay';
+export * from './InfoOverlay';

package/es/extensions/forms/Form/InfoOverlay/index.js

@@ -0,0 +1,3 @@
+export { default } from './InfoOverlay';
+export * from './InfoOverlay';
+//# sourceMappingURL=index.js.map

package/es/extensions/forms/Form/InfoOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../src/extensions/forms/Form/InfoOverlay/index.ts"],"sourcesContent":["export { default } from './InfoOverlay'\nexport * from './InfoOverlay'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAe;AACvC,cAAc,eAAe"}

package/es/extensions/forms/Form/InfoOverlay/setContent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SharedStateId } from '../../../../shared/helpers/useSharedState';
+export type InfoOverlayContent = 'success' | 'error' | React.ReactNode | undefined;
+export default function setContent(id: SharedStateId, content: InfoOverlayContent): void;

package/es/extensions/forms/Form/InfoOverlay/setContent.js

@@ -0,0 +1,8 @@
+import { createSharedState } from '../../../../shared/helpers/useSharedState';
+export default function setContent(id, content) {
+  const sharedState = createSharedState(id);
+  sharedState.extend({
+    content
+  });
+}
+//# sourceMappingURL=setContent.js.map

package/es/extensions/forms/Form/InfoOverlay/setContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setContent.js","names":["createSharedState","setContent","id","content","sharedState","extend"],"sources":["../../../../../../src/extensions/forms/Form/InfoOverlay/setContent.ts"],"sourcesContent":["import {\n  SharedStateId,\n  createSharedState,\n} from '../../../../shared/helpers/useSharedState'\n\nexport type InfoOverlayContent =\n  | 'success'\n  | 'error'\n  | React.ReactNode\n  | undefined\n\nexport default function setContent(\n  id: SharedStateId,\n  content: InfoOverlayContent\n) {\n  const sharedState = createSharedState(id)\n  sharedState.extend({ content })\n}\n"],"mappings":"AAAA,SAEEA,iBAAiB,QACZ,2CAA2C;AAQlD,eAAe,SAASC,UAAUA,CAChCC,EAAiB,EACjBC,OAA2B,EAC3B;EACA,MAAMC,WAAW,GAAGJ,iBAAiB,CAACE,EAAE,CAAC;EACzCE,WAAW,CAACC,MAAM,CAAC;IAAEF;EAAQ,CAAC,CAAC;AACjC"}

package/es/extensions/forms/Form/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","useCallback","useContext","useMemo","SectionContext","DataContext","Provider","FieldPropsProvider","SectionContainerProvider","ViewContainer","EditContainer","Toolbar","SectionComponent","props","_path$startsWith","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","validateInitially","containerMode","onChange","errorPrioritization","children","startsWith","call","Error","hasContext","addOnChangeHandler","nestedPath","nestedProps","handleChange","args","identifier","fieldProps","undefined","createElement","sectionProps","value","_extends","_objectSpread","substring","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Section/Section.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport SectionContext, { SectionContextState } from './SectionContext'\nimport DataContext from '../../DataContext/Context'\nimport Provider from '../../DataContext/Provider/Provider'\nimport FieldPropsProvider from '../../Field/Provider'\nimport SectionContainerProvider from './containers/SectionContainerProvider'\nimport ViewContainer from './ViewContainer'\nimport EditContainer from './EditContainer'\n\nimport type { Props as DataContextProps } from '../../DataContext/Provider'\nimport type { ContainerMode } from './containers/SectionContainer'\nimport type { Path, FieldProps, OnChange } from '../../types'\nimport type { JsonObject } from '../../utils/json-pointer'\nimport type { SharedFieldBlockProps } from '../../FieldBlock'\nimport Toolbar from './Toolbar'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]:\n    | (FieldProps & SharedFieldBlockProps)\n    | OverwritePropsDefaults\n}\nexport type SectionProps<\n  overwriteProps = OverwritePropsDefaults,\n  Data extends JsonObject = JsonObject,\n> = {\n  /**\n   * Path to the section.\n   * When defined, fields inside the section will get this path as a prefix of their own path.\n   */\n  path?: Path\n\n  /**\n   * Overwrite field props for the section.\n   */\n  overwriteProps?: overwriteProps | OverwritePropsDefaults\n\n  /**\n   * Makes all fields inside it required.\n   */\n  required?: boolean\n\n  /**\n   * If set to `true`, the whole section will be validated initially. All fields will then automatically get `validateInitially` and show their error messages. Can be useful in combination with `containerMode=\"auto\"`.\n   */\n  validateInitially?: boolean\n\n  /**\n   * Defines the container mode. Can be `view`, `edit` or `auto`.\n   * When set to `auto`, the mode will initially be \"edit\" if fields contain errors.\n   * Defaults to `auto`.\n   */\n  containerMode?: ContainerMode\n\n  /**\n   * Only for internal use and undocumented for now.\n   * Prioritize error techniques for the section.\n   * Can be `fieldSchema`, `sectionSchema` or `contextSchema.\n   */\n  errorPrioritization?: SectionContextState['errorPrioritization']\n} & Pick<\n  DataContextProps<Data>,\n  'data' | 'defaultData' | 'onChange' | 'translations'\n>\n\nexport type LocalProps<overwriteProps = OverwritePropsDefaults> =\n  SectionProps<overwriteProps> & {\n    children: React.ReactNode\n  }\n\nfunction SectionComponent<overwriteProps = OverwritePropsDefaults>(\n  props: LocalProps<overwriteProps>\n) {\n  const {\n    path,\n    overwriteProps,\n    translations,\n    required,\n    data,\n    defaultData,\n    validateInitially,\n    containerMode = 'auto',\n    onChange,\n    errorPrioritization = ['contextSchema'],\n    children,\n  } = props\n\n  if (path && !path.startsWith?.('/')) {\n    throw new Error(`path=\"${path}\" must start with a slash`)\n  }\n\n  const { hasContext, addOnChangeHandler } = useContext(DataContext)\n\n  const { path: nestedPath, props: nestedProps } =\n    useContext(SectionContext) || {}\n\n  const handleChange = useCallback<OnChange>(\n    (...args) => onChange?.(...args),\n    [onChange]\n  )\n  addOnChangeHandler?.(handleChange)\n\n  const identifier = useMemo(() => {\n    return `${nestedPath && nestedPath !== '/' ? nestedPath : ''}${\n      path || ''\n    }`\n  }, [path, nestedPath])\n  const fieldProps = required ? { required: true } : undefined\n\n  if (!hasContext) {\n    return (\n      <Provider data={data} defaultData={defaultData}>\n        <SectionComponent {...props} />\n      </Provider>\n    )\n  }\n\n  const sectionProps = props as SectionProps\n\n  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        props: sectionProps,\n      }}\n    >\n      <SectionContainerProvider\n        validateInitially={validateInitially}\n        containerMode={containerMode}\n      >\n        <FieldPropsProvider\n          overwriteProps={{\n            ...overwriteProps,\n            ...(nestedProps?.overwriteProps?.[\n              path.substring(1)\n            ] as OverwritePropsDefaults),\n          }}\n          translations={translations}\n          {...fieldProps}\n        >\n          {children}\n        </FieldPropsProvider>\n      </SectionContainerProvider>\n    </SectionContext.Provider>\n  )\n}\n\nSectionComponent.Toolbar = Toolbar\nSectionComponent.ViewContainer = ViewContainer\nSectionComponent.EditContainer = EditContainer\n\nSectionComponent._supportsSpacingProps = undefined\nexport default SectionComponent\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["React","useCallback","useContext","useMemo","SectionContext","DataContext","Provider","FieldPropsProvider","SectionContainerProvider","ViewContainer","EditContainer","Toolbar","SectionComponent","props","_path$startsWith","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","validateInitially","containerMode","onChange","errorPrioritization","children","startsWith","call","Error","hasContext","addOnChangeHandler","nestedPath","nestedProps","handleChange","args","identifier","fieldProps","undefined","createElement","sectionProps","value","_extends","_objectSpread","substring","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Section/Section.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport SectionContext, { SectionContextState } from './SectionContext'\nimport DataContext from '../../DataContext/Context'\nimport Provider from '../../DataContext/Provider/Provider'\nimport FieldPropsProvider from '../../Field/Provider'\nimport SectionContainerProvider from './containers/SectionContainerProvider'\nimport ViewContainer from './ViewContainer'\nimport EditContainer from './EditContainer'\nimport Toolbar from './Toolbar'\n\nimport type { Props as DataContextProps } from '../../DataContext/Provider'\nimport type { ContainerMode } from './containers/SectionContainer'\nimport type { Path, FieldProps, OnChange } from '../../types'\nimport type { JsonObject } from '../../utils/json-pointer'\nimport type { SharedFieldBlockProps } from '../../FieldBlock'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]:\n    | (FieldProps & SharedFieldBlockProps)\n    | OverwritePropsDefaults\n}\nexport type SectionProps<\n  overwriteProps = OverwritePropsDefaults,\n  Data extends JsonObject = JsonObject,\n> = {\n  /**\n   * Path to the section.\n   * When defined, fields inside the section will get this path as a prefix of their own path.\n   */\n  path?: Path\n\n  /**\n   * Overwrite field props for the section.\n   */\n  overwriteProps?: overwriteProps | OverwritePropsDefaults\n\n  /**\n   * Makes all fields inside it required.\n   */\n  required?: boolean\n\n  /**\n   * If set to `true`, the whole section will be validated initially. All fields will then automatically get `validateInitially` and show their error messages. Can be useful in combination with `containerMode=\"auto\"`.\n   */\n  validateInitially?: boolean\n\n  /**\n   * Defines the container mode. Can be `view`, `edit` or `auto`.\n   * When set to `auto`, the mode will initially be \"edit\" if fields contain errors.\n   * Defaults to `auto`.\n   */\n  containerMode?: ContainerMode\n\n  /**\n   * Only for internal use and undocumented for now.\n   * Prioritize error techniques for the section.\n   * Can be `fieldSchema`, `sectionSchema` or `contextSchema.\n   */\n  errorPrioritization?: SectionContextState['errorPrioritization']\n} & Pick<\n  DataContextProps<Data>,\n  'data' | 'defaultData' | 'onChange' | 'translations'\n>\n\nexport type LocalProps<overwriteProps = OverwritePropsDefaults> =\n  SectionProps<overwriteProps> & {\n    children: React.ReactNode\n  }\n\nfunction SectionComponent<overwriteProps = OverwritePropsDefaults>(\n  props: LocalProps<overwriteProps>\n) {\n  const {\n    path,\n    overwriteProps,\n    translations,\n    required,\n    data,\n    defaultData,\n    validateInitially,\n    containerMode = 'auto',\n    onChange,\n    errorPrioritization = ['contextSchema'],\n    children,\n  } = props\n\n  if (path && !path.startsWith?.('/')) {\n    throw new Error(`path=\"${path}\" must start with a slash`)\n  }\n\n  const { hasContext, addOnChangeHandler } = useContext(DataContext)\n\n  const { path: nestedPath, props: nestedProps } =\n    useContext(SectionContext) || {}\n\n  const handleChange = useCallback<OnChange>(\n    (...args) => onChange?.(...args),\n    [onChange]\n  )\n  addOnChangeHandler?.(handleChange)\n\n  const identifier = useMemo(() => {\n    return `${nestedPath && nestedPath !== '/' ? nestedPath : ''}${\n      path || ''\n    }`\n  }, [path, nestedPath])\n  const fieldProps = required ? { required: true } : undefined\n\n  if (!hasContext) {\n    return (\n      <Provider data={data} defaultData={defaultData}>\n        <SectionComponent {...props} />\n      </Provider>\n    )\n  }\n\n  const sectionProps = props as SectionProps\n\n  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        props: sectionProps,\n      }}\n    >\n      <SectionContainerProvider\n        validateInitially={validateInitially}\n        containerMode={containerMode}\n      >\n        <FieldPropsProvider\n          overwriteProps={{\n            ...overwriteProps,\n            ...(nestedProps?.overwriteProps?.[\n              path.substring(1)\n            ] as OverwritePropsDefaults),\n          }}\n          translations={translations}\n          {...fieldProps}\n        >\n          {children}\n        </FieldPropsProvider>\n      </SectionContainerProvider>\n    </SectionContext.Provider>\n  )\n}\n\nSectionComponent.Toolbar = Toolbar\nSectionComponent.ViewContainer = ViewContainer\nSectionComponent.EditContainer = EditContainer\n\nSectionComponent._supportsSpacingProps = undefined\nexport default SectionComponent\n"],"mappings":"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"}

package/es/extensions/forms/Form/Section/style/themes/ui.js

@@ -1 +1 @@
-import "./dnb-section-theme-ui.min.css";
+import "./dnb-form-section-theme-ui.min.css";

package/es/extensions/forms/Form/Section/style/themes/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","names":[],"sources":["../../../../../../../../src/extensions/forms/Form/Section/style/themes/ui.js"],"sourcesContent":["/**\n * Imports the default theme\n *\n */\n\nimport './dnb-section-theme-ui.scss'\n"],"mappings":"AAKA,OAAO,gCAA6B"}
+{"version":3,"file":"ui.js","names":[],"sources":["../../../../../../../../src/extensions/forms/Form/Section/style/themes/ui.js"],"sourcesContent":["/**\n * Imports the default theme\n *\n */\n\nimport './dnb-form-section-theme-ui.scss'\n"],"mappings":"AAKA,OAAO,qCAAkC"}

package/es/extensions/forms/Form/Visibility/Visibility.d.ts

@@ -1,5 +1,5 @@
 import React, { AriaAttributes } from 'react';
-import { HeightAnimationProps } from '../../../../components/HeightAnimation';
+import { HeightAnimationAllProps } from '../../../../components/HeightAnimation';
 import type { Path, UseFieldProps } from '../../types';
 import type { DataAttributes } from '../../hooks/useFieldProps';
 import { FilterData } from '../../DataContext';
@@ -60,18 +60,22 @@ export type Props = {
     animate?: boolean;
     /** Keep the content in the DOM, even if it's not visible */
     keepInDOM?: boolean;
+    /** Callback for when the content gets visible. */
+    onVisible?: HeightAnimationAllProps['onOpen'];
+    /** Callback for when animation has ended */
+    onAnimationEnd?: HeightAnimationAllProps['onAnimationEnd'];
     /** To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`. */
-    compensateForGap?: HeightAnimationProps['compensateForGap'];
+    compensateForGap?: HeightAnimationAllProps['compensateForGap'];
     /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */
     fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes;
-    element?: HeightAnimationProps['element'];
+    element?: HeightAnimationAllProps['element'];
     children: React.ReactNode;
     /** @deprecated Use `visibleWhen` instead */
     pathValue?: string;
     /** @deprecated Use `visibleWhen` instead */
     whenValue?: unknown;
 };
-declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, visibleWhen, visibleWhenNot, inferData, filterData, animate, keepInDOM, compensateForGap, fieldPropsWhenHidden, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, visibleWhen, visibleWhenNot, inferData, filterData, onVisible, onAnimationEnd, animate, keepInDOM, compensateForGap, fieldPropsWhenHidden, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Visibility {
     var _supportsSpacingProps: string;
 }

package/es/extensions/forms/Form/Visibility/Visibility.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["visible", "pathDefined", "pathUndefined", "pathTruthy", "pathFalsy", "pathTrue", "pathFalse", "pathValue", "whenValue", "visibleWhen", "visibleWhenNot", "inferData", "filterData", "animate", "keepInDOM", "compensateForGap", "fieldPropsWhenHidden", "children"];
-import React from 'react';
+const _excluded = ["visible", "pathDefined", "pathUndefined", "pathTruthy", "pathFalsy", "pathTrue", "pathFalse", "pathValue", "whenValue", "visibleWhen", "visibleWhenNot", "inferData", "filterData", "onVisible", "onAnimationEnd", "animate", "keepInDOM", "compensateForGap", "fieldPropsWhenHidden", "children"];
+import React, { useCallback } from 'react';
 import { warn } from '../../../../shared/helpers';
 import useMountEffect from '../../../../shared/helpers/useMountEffect';
+import useMounted from '../../../../shared/helpers/useMounted';
 import HeightAnimation from '../../../../components/HeightAnimation';
 import FieldProvider from '../../Field/Provider';
 import useVisibility from './useVisibility';
@@ -23,6 +24,8 @@ function Visibility(_ref) {
       visibleWhenNot,
       inferData,
       filterData,
+      onVisible,
+      onAnimationEnd,
       animate,
       keepInDOM,
       compensateForGap,
@@ -58,15 +61,26 @@ function Visibility(_ref) {
       isVisible: open
     }
   }, children);
+  const mountedRef = useMounted();
+  const onOpen = useCallback(state => {
+    if (mountedRef.current) {
+      onVisible === null || onVisible === void 0 ? void 0 : onVisible(state);
+    }
+  }, [mountedRef, onVisible]);
   if (animate) {
     const props = !open ? fieldPropsWhenHidden : null;
     return React.createElement(HeightAnimation, _extends({
       open: open,
+      onAnimationEnd: onAnimationEnd,
+      onOpen: onOpen,
       keepInDOM: Boolean(keepInDOM),
       className: "dnb-forms-visibility",
       compensateForGap: compensateForGap
     }, rest), React.createElement(FieldProvider, props, content));
   }
+  if (mountedRef.current) {
+    onVisible === null || onVisible === void 0 ? void 0 : onVisible(open);
+  }
   if (keepInDOM) {
     const props = !open ? fieldPropsWhenHidden : null;
     return React.createElement("span", {