@dnb/eufemia 10.59.0 → 10.60.0

package/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","_ref","required","isChanged","error","hasError","some","file","errorMessage","hasFiles","length","undefined","updateFileLoadingState","files","isLoading","arguments","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","_ref2","name","handleChangeAsync","existingFileIds","newFiles","filter","includes","uploadedFiles","changeHandler","_ref3","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","_ref","required","isChanged","error","hasError","some","file","errorMessage","hasFiles","length","undefined","updateFileLoadingState","files","isLoading","arguments","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","_ref2","name","handleChangeAsync","existingFiles","existingFileIds","newFiles","filter","includes","incomingFiles","uploadedFiles","indexOfFirstNewFile","findIndex","_ref3","updatedFiles","slice","changeHandler","_ref4","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/extensions/forms/Form/Element/Element.js

@@ -61,7 +61,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/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","_ref","value","_ref2","_objectSpread","children","className","onSubmit","restProps","_objectWithoutProperties","_excluded","hasElementRef","current","onSubmitHandler","event","preventDefault","formElement","target","hasContext","formElementRef","handleSubmit","createElement","_extends","element","map","_ref3","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","_ref","value","_ref2","_objectSpread","children","className","onSubmit","restProps","_objectWithoutProperties","_excluded","hasElementRef","current","onSubmitHandler","event","preventDefault","formElement","target","hasContext","formElementRef","handleSubmit","createElement","_extends","element","map","_ref3","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":"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"}

package/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/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/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":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,SAEEC,cAAc,QACT,2CAA2C;AAClD,OAAOC,UAAU,MAAM,uCAAuC;AAC9D,OAAOC,UAAU,MAA8B,cAAc;AAC7D,SACEC,MAAM,EACNC,IAAI,EACJC,eAAe,EACfC,OAAO,QACF,wBAAwB;AAE/B,SAASC,CAAC,QAAQ,sBAAsB;AACxC,SAASC,cAAc,QAAQ,aAAa;AAC5C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,YAAY,MAAM,iBAAiB;AAiC1C,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAM;IAAEC,EAAE,EAAEC,MAAM;IAAEC;EAAU,CAAC,GAAGpB,UAAU,CAACI,WAAW,CAAC;EAEzD,MAAM;MACJc,EAAE,GAAGC,MAAM;MACXE,OAAO,EAAEC,WAAW;MACpBC,OAAO;MACPC,KAAK;MACLC,QAAQ;MACRC,SAAS;MACTC;IAEF,CAAC,GAAGV,KAAK;IADJW,SAAS,GAAAC,wBAAA,CACVZ,KAAK,EAAAa,SAAA;EAET,MAAM;IAAEC;EAAK,CAAC,GAAG1B,cAAc,CAE5Ba,EAAE,CAAC;EACN,MAAM;IAAEG,OAAO,GAAGC;EAAY,CAAC,GAAGS,IAAI,IAAI,CAAC,CAAC;EAE5C,MAAMC,YAAY,GAAGnB,cAAc,CAAC,CAAC;EACrC,MAAMoB,UAAU,GAAG3B,UAAU,CAAC,CAAC;EAC/B,MAAM4B,QAAQ,GAAGjC,MAAM,CAAiB,IAAI,CAAC;EAC7C,MAAMkC,cAAyD,GAC7DpC,WAAW,CACRqC,KAAK,IAAK;IACT,IAAIH,UAAU,CAACI,OAAO,IAAID,KAAK,KAAK,QAAQ,EAAE;MAAA,IAAAE,qBAAA,EAAAC,iBAAA;MAC5C,CAAAD,qBAAA,IAAAC,iBAAA,GAAAL,QAAQ,CAACG,OAAO,EAACG,KAAK,cAAAF,qBAAA,uBAAtBA,qBAAA,CAAAG,IAAA,CAAAF,iBAAyB,CAAC;IAC5B;EACF,CAAC,EACD,CAACN,UAAU,CACb,CAAC;EAGH,MAAMS,iBAAiB,GAAGzC,MAAM,CAAqB,CAAC;EACtD,IAAIoB,OAAO,EAAE;IACXqB,iBAAiB,CAACL,OAAO,GAAGhB,OAAO;EACrC;EAEA,MAAMsB,eAAe,GAAG5C,WAAW,CAAC,MAAM;IACxC,IAAImB,EAAE,EAAE;MACNX,UAAU,CAACW,EAAE,EAAE0B,SAAS,CAAC;IAC3B;IACAnB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,CAAC;EACd,CAAC,EAAE,CAACP,EAAE,EAAEO,QAAQ,CAAC,CAAC;EAElB,MAAMoB,kBAAkB,GACtB,OAAOxB,OAAO,KAAK,WAAW,GAAG,EAAEA,OAAO,KAAKA,OAAO,CAAC,GAAGuB,SAAS;EACrE,MAAME,sBAAsB,GAC1B,OAAOzB,OAAO,KAAK,WAAW,GAAGA,OAAO,KAAKA,OAAO,GAAG,KAAK;EAC9D,MAAM0B,MAAM,GACV,OAAO1B,OAAO,KAAK,QAAQ,IAAI,CAACA,OAAO,CAAC2B,QAAQ,CAAC,GAAG,CAAC,GACjD3B,OAAO,GACPuB,SAAS;EAEf,IAAIK,aAAa,GAAG5B,OAAO;EAE3B,IAAIqB,iBAAiB,CAACL,OAAO,KAAK,SAAS,EAAE;IAC3C,MAAMa,EAAE,GAAGlB,YAAY,CAACmB,kBAAkB;IAC1C,MAAM;MACJC,KAAK;MACLC,WAAW;MACXC,UAAU;MACVC,UAAU;MACVC;IACF,CAAC,GAAGjC,OAAO,IAAI,CAAC,CAAC;IAEjB0B,aAAa,GACXnD,KAAA,CAAA2D,aAAA,CAAC9C,OAAO,EAAA+C,QAAA;MACNC,OAAO,EAAC,MAAM;MACdC,UAAU,EAAE;QAAEC,GAAG,EAAE,OAAO;QAAEC,MAAM,EAAE;MAAW;IAAE,GAC7ClC,SAAS,GAEb9B,KAAA,CAAA2D,aAAA,CAAChD,IAAI,CAACsD,KAAK;MAACC,GAAG,EAAC;IAAO,GACrBlE,KAAA,CAAA2D,aAAA,CAAC3C,WAAW,QAAEsC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIF,EAAE,CAACE,KAAmB,CAAC,EAC9CtD,KAAA,CAAA2D,aAAA,CAAC7C,CAAC,QAAEyC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAIH,EAAE,CAACG,WAAe,CAAC,EACtCvD,KAAA,CAAA2D,aAAA,CAACjD,MAAM;MACLyD,IAAI,EAAET,kBAAkB,GAAGZ,SAAS,GAAGW,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,GAAI;MACzDW,QAAQ,EAAEV;IAAmB,GAE5BF,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIJ,EAAE,CAACI,UACZ,CACE,CACL,CACV;EACH,CAAC,MAAM,IAAIZ,iBAAiB,CAACL,OAAO,KAAK,OAAO,EAAE;IAChD,MAAMa,EAAE,GAAGlB,YAAY,CAACmC,gBAAgB;IACxC,MAAM;MAAEf,KAAK;MAAEC,WAAW;MAAEe,YAAY;MAAEC;IAAY,CAAC,GAAG7C,KAAK,IAAI,CAAC,CAAC;IAErEyB,aAAa,GACXnD,KAAA,CAAA2D,aAAA,CAAC9C,OAAO,EAAA+C,QAAA;MACNC,OAAO,EAAC,aAAa;MACrBC,UAAU,EAAE;QAAEC,GAAG,EAAE,OAAO;QAAEC,MAAM,EAAE;MAAW;IAAE,GAC7ClC,SAAS,GAEb9B,KAAA,CAAA2D,aAAA,CAAChD,IAAI,CAACsD,KAAK;MAACC,GAAG,EAAC;IAAO,GACrBlE,KAAA,CAAA2D,aAAA,CAAC3C,WAAW,QAAEsC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIF,EAAE,CAACE,KAAmB,CAAC,EAC9CtD,KAAA,CAAA2D,aAAA,CAAC/C,eAAe,QACdZ,KAAA,CAAA2D,aAAA,CAAC7C,CAAC,QACCQ,SAAS,KAAK,SAAS,GACpB8B,EAAE,CAACoB,YAAY,GACfjB,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAIH,EAAE,CAACG,WACrB,CACY,CAAC,EAClBvD,KAAA,CAAA2D,aAAA,CAAChD,IAAI,CAAC8D,UAAU,QACdzE,KAAA,CAAA2D,aAAA,CAACjD,MAAM;MAACmD,OAAO,EAAC,WAAW;MAACa,OAAO,EAAE7B;IAAgB,GAClDyB,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAIlB,EAAE,CAACkB,YACd,CAAC,EACTtE,KAAA,CAAA2D,aAAA,CAAC1C,YAAY,QAAEsD,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAInB,EAAE,CAACmB,WAA0B,CAC5C,CACP,CACL,CACV;EACH;EAEA,OACEvE,KAAA,CAAA2D,aAAA;IACE/B,SAAS,EAAExB,UAAU,wCAInBwB,SAAS,EAFTqB,MAAM,IAAK,2BAA0BA,MAAO,EAG9C,CAAE;IACF0B,QAAQ,EAAE,CAAC,CAAE;IACbC,GAAG,EAAExC;EAAS,GAEdpC,KAAA,CAAA2D,aAAA,CAACtD,UAAU;IACTwE,OAAO,EAAE7B,sBAAuB;IAChCX,cAAc,EAAEA,cAAe;IAC/ByC,OAAO;EAAA,GAEN3B,aACS,CAAC,EAEbnD,KAAA,CAAA2D,aAAA,CAACtD,UAAU;IACTwE,OAAO,EAAE9B,kBAAmB;IAC5BV,cAAc,EAAEA,cAAe;IAC/ByC,OAAO;IACPC,SAAS;EAAA,GAERlD,QACS,CACT,CAAC;AAEV;AAEAX,WAAW,CAACT,UAAU,GAAGA,UAAU;AACnCS,WAAW,CAAC8D,qBAAqB,GAAG,IAAI;AAExC,eAAe9D,WAAW"}

package/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/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/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/extensions/forms/Form/InfoOverlay/index.d.ts

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

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

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

package/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/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/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/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/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/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", {

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

@@ -1 +1 @@
-{"version":3,"file":"Visibility.js","names":["React","warn","useMountEffect","HeightAnimation","FieldProvider","useVisibility","VisibilityContext","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","animate","keepInDOM","compensateForGap","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","check","open","content","createElement","Provider","value","isVisible","props","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProvider from '../../Field/Provider'\nimport useVisibility from './useVisibility'\n\nimport type { Path, UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\nimport VisibilityContext from './VisibilityContext'\n\nexport type VisibleWhen =\n  | {\n      path: Path\n      hasValue: unknown | ((value: unknown) => boolean)\n    }\n  | {\n      itemPath: Path\n      hasValue: unknown | ((value: unknown) => boolean)\n    }\n  | {\n      path: Path\n      isValid: boolean\n      continuousValidation?: boolean\n    }\n  | {\n      itemPath: Path\n      isValid: boolean\n      continuousValidation?: boolean\n    }\n\n  /**\n   * @deprecated Will be removed in v11!\n   */\n  | {\n      path: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n  /**\n   * @deprecated  Will be removed in v11!\n   */\n  | {\n      itemPath: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: Path\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: Path\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: Path\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: Path\n  /** Given data context path must be true to show children */\n  pathTrue?: Path\n  /** Given data context path must be false to show children */\n  pathFalse?: Path\n  /** Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** 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`. */\n  compensateForGap?: HeightAnimationProps['compensateForGap']\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  visibleWhen,\n  visibleWhenNot,\n  inferData,\n  filterData,\n  animate,\n  keepInDOM,\n  compensateForGap,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n  const content = (\n    <VisibilityContext.Provider\n      value={{\n        isVisible: open,\n      }}\n    >\n      {children}\n    </VisibilityContext.Provider>\n  )\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        compensateForGap={compensateForGap}\n        {...rest}\n      >\n        <FieldProvider {...props}>{content}</FieldProvider>\n      </HeightAnimation>\n    )\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProvider {...props}>{content}</FieldProvider>\n      </span>\n    )\n  }\n\n  return <>{open ? content : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAE7C,SAASC,IAAI,QAAQ,4BAA4B;AACjD,OAAOC,cAAc,MAAM,2CAA2C;AACtE,OAAOC,eAAe,MAEf,wCAAwC;AAC/C,OAAOC,aAAa,MAAM,sBAAsB;AAChD,OAAOC,aAAa,MAAM,iBAAiB;AAK3C,OAAOC,iBAAiB,MAAM,qBAAqB;AA8EnD,SAASC,UAAUA,CAAAC,IAAA,EAoBT;EAAA,IApBU;MAClBC,OAAO;MACPC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,WAAW;MACXC,cAAc;MACdC,SAAS;MACTC,UAAU;MACVC,OAAO;MACPC,SAAS;MACTC,gBAAgB;MAChBC,oBAAoB;MACpBC;IAEK,CAAC,GAAAlB,IAAA;IADHmB,IAAI,GAAAC,wBAAA,CAAApB,IAAA,EAAAqB,SAAA;EAEP3B,cAAc,CAAC,MAAM;IACnB,IAAIuB,oBAAoB,IAAI,CAACF,SAAS,EAAE;MACtCtB,IAAI,CAAC,+DAA+D,CAAC;IACvE;EACF,CAAC,CAAC;EAEF,MAAM;IAAE6B;EAAM,CAAC,GAAGzB,aAAa,CAAC;IAC9BI,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC,cAAc;IACdC,SAAS;IACTC;EACF,CAAC,CAAC;EACF,MAAMU,IAAI,GAAGD,KAAK,CAAC,CAAC;EACpB,MAAME,OAAO,GACXhC,KAAA,CAAAiC,aAAA,CAAC3B,iBAAiB,CAAC4B,QAAQ;IACzBC,KAAK,EAAE;MACLC,SAAS,EAAEL;IACb;EAAE,GAEDL,QACyB,CAC7B;EAED,IAAIJ,OAAO,EAAE;IACX,MAAMe,KAAK,GAAG,CAACN,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IAEjD,OACEzB,KAAA,CAAAiC,aAAA,CAAC9B,eAAe,EAAAmC,QAAA;MACdP,IAAI,EAAEA,IAAK;MACXR,SAAS,EAAEgB,OAAO,CAAChB,SAAS,CAAE;MAC9BiB,SAAS,EAAC,sBAAsB;MAChChB,gBAAgB,EAAEA;IAAiB,GAC/BG,IAAI,GAER3B,KAAA,CAAAiC,aAAA,CAAC7B,aAAa,EAAKiC,KAAK,EAAGL,OAAuB,CACnC,CAAC;EAEtB;EAEA,IAAIT,SAAS,EAAE;IACb,MAAMc,KAAK,GAAG,CAACN,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IACjD,OACEzB,KAAA,CAAAiC,aAAA;MAAMO,SAAS,EAAC,sBAAsB;MAACC,MAAM,EAAE,CAACV;IAAK,GACnD/B,KAAA,CAAAiC,aAAA,CAAC7B,aAAa,EAAKiC,KAAK,EAAGL,OAAuB,CAC9C,CAAC;EAEX;EAEA,OAAOhC,KAAA,CAAAiC,aAAA,CAAAjC,KAAA,CAAA0C,QAAA,QAAGX,IAAI,GAAGC,OAAO,GAAG,IAAO,CAAC;AACrC;AAEAzB,UAAU,CAACoC,qBAAqB,GAAG,UAAU;AAC7C,eAAepC,UAAU"}
+{"version":3,"file":"Visibility.js","names":["React","useCallback","warn","useMountEffect","useMounted","HeightAnimation","FieldProvider","useVisibility","VisibilityContext","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","onVisible","onAnimationEnd","animate","keepInDOM","compensateForGap","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","check","open","content","createElement","Provider","value","isVisible","mountedRef","onOpen","state","current","props","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes, useCallback } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport useMounted from '../../../../shared/helpers/useMounted'\nimport HeightAnimation, {\n  HeightAnimationAllProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProvider from '../../Field/Provider'\nimport useVisibility from './useVisibility'\nimport VisibilityContext from './VisibilityContext'\n\nimport type { Path, UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\n\nexport type VisibleWhen =\n  | {\n      path: Path\n      hasValue: unknown | ((value: unknown) => boolean)\n    }\n  | {\n      itemPath: Path\n      hasValue: unknown | ((value: unknown) => boolean)\n    }\n  | {\n      path: Path\n      isValid: boolean\n      continuousValidation?: boolean\n    }\n  | {\n      itemPath: Path\n      isValid: boolean\n      continuousValidation?: boolean\n    }\n\n  /**\n   * @deprecated Will be removed in v11!\n   */\n  | {\n      path: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n  /**\n   * @deprecated  Will be removed in v11!\n   */\n  | {\n      itemPath: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: Path\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: Path\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: Path\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: Path\n  /** Given data context path must be true to show children */\n  pathTrue?: Path\n  /** Given data context path must be false to show children */\n  pathFalse?: Path\n  /** Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** Callback for when the content gets visible. */\n  onVisible?: HeightAnimationAllProps['onOpen']\n  /** Callback for when animation has ended */\n  onAnimationEnd?: HeightAnimationAllProps['onAnimationEnd']\n  /** 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`. */\n  compensateForGap?: HeightAnimationAllProps['compensateForGap']\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationAllProps['element']\n  children: React.ReactNode\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  visibleWhen,\n  visibleWhenNot,\n  inferData,\n  filterData,\n  onVisible,\n  onAnimationEnd,\n  animate,\n  keepInDOM,\n  compensateForGap,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n  const content = (\n    <VisibilityContext.Provider\n      value={{\n        isVisible: open,\n      }}\n    >\n      {children}\n    </VisibilityContext.Provider>\n  )\n  const mountedRef = useMounted()\n\n  const onOpen: HeightAnimationAllProps['onOpen'] = useCallback(\n    (state) => {\n      if (mountedRef.current) {\n        onVisible?.(state)\n      }\n    },\n    [mountedRef, onVisible]\n  )\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        onAnimationEnd={onAnimationEnd}\n        onOpen={onOpen}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        compensateForGap={compensateForGap}\n        {...rest}\n      >\n        <FieldProvider {...props}>{content}</FieldProvider>\n      </HeightAnimation>\n    )\n  }\n\n  if (mountedRef.current) {\n    onVisible?.(open)\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProvider {...props}>{content}</FieldProvider>\n      </span>\n    )\n  }\n\n  return <>{open ? content : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":"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"}

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

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

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

@@ -1,3 +1,4 @@
+import { HeightAnimationEvents } from '../../../../components/height-animation/HeightAnimationDocs';
 export const VisibilityProperties = {
   visibleWhen: {
     doc: 'Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. You can also use `isValid` instead of `hasValue` to only show the children when the field has no errors and has lost focus (blurred). You can change that behavior by using the `continuousValidation` property.',
@@ -85,4 +86,12 @@ export const VisibilityProperties = {
     status: 'required'
   }
 };
+export const VisibilityEvents = {
+  onVisible: {
+    doc: 'Callback for when the content gets visible. Returns a boolean as the first parameter.',
+    type: HeightAnimationEvents.onOpen.type,
+    status: 'optional'
+  },
+  onAnimationEnd: HeightAnimationEvents.onAnimationEnd
+};
 //# sourceMappingURL=VisibilityDocs.js.map

package/extensions/forms/Form/Visibility/VisibilityDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityDocs.js","names":["VisibilityProperties","visibleWhen","doc","type","status","visibleWhenNot","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","inferData","visible","animate","keepInDOM","compensateForGap","filterData","fieldPropsWhenHidden","element","children"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  visibleWhen: {\n    doc: 'Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. You can also use `isValid` instead of `hasValue` to only show the children when the field has no errors and has lost focus (blurred). You can change that behavior by using the `continuousValidation` property.',\n    type: 'object',\n    status: 'optional',\n  },\n  visibleWhenNot: {\n    doc: 'Same as `visibleWhen`, but with inverted logic.',\n    type: 'object',\n    status: 'optional',\n  },\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly using the `visible` prop. When used alongside other conditions, the `visible` prop takes precedence.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: '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`.',\n    type: 'string',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter data based on provided criteria. More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) documentation.',\n    type: ['object', 'function'],\n    status: 'optional',\n  },\n  fieldPropsWhenHidden: {\n    doc: 'When visibility is hidden, and `keepInDOM` is true, pass these props to the children.',\n    type: 'various',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,+XAA+X;IACpYC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdH,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,UAAU,EAAE;IACVN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,kIAAkI;IACvIC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,gBAAgB,EAAE;IAChBd,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,UAAU,EAAE;IACVf,GAAG,EAAE,iLAAiL;IACtLC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDc,oBAAoB,EAAE;IACpBhB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDe,OAAO,EAAE;IACPjB,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDgB,QAAQ,EAAE;IACRlB,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"VisibilityDocs.js","names":["HeightAnimationEvents","VisibilityProperties","visibleWhen","doc","type","status","visibleWhenNot","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","inferData","visible","animate","keepInDOM","compensateForGap","filterData","fieldPropsWhenHidden","element","children","VisibilityEvents","onVisible","onOpen","onAnimationEnd"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { HeightAnimationEvents } from '../../../../components/height-animation/HeightAnimationDocs'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  visibleWhen: {\n    doc: 'Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. You can also use `isValid` instead of `hasValue` to only show the children when the field has no errors and has lost focus (blurred). You can change that behavior by using the `continuousValidation` property.',\n    type: 'object',\n    status: 'optional',\n  },\n  visibleWhenNot: {\n    doc: 'Same as `visibleWhen`, but with inverted logic.',\n    type: 'object',\n    status: 'optional',\n  },\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly using the `visible` prop. When used alongside other conditions, the `visible` prop takes precedence.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: '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`.',\n    type: 'string',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter data based on provided criteria. More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) documentation.',\n    type: ['object', 'function'],\n    status: 'optional',\n  },\n  fieldPropsWhenHidden: {\n    doc: 'When visibility is hidden, and `keepInDOM` is true, pass these props to the children.',\n    type: 'various',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const VisibilityEvents: PropertiesTableProps = {\n  onVisible: {\n    doc: 'Callback for when the content gets visible. Returns a boolean as the first parameter.',\n    type: HeightAnimationEvents.onOpen.type,\n    status: 'optional',\n  },\n  onAnimationEnd: HeightAnimationEvents.onAnimationEnd,\n}\n"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,6DAA6D;AAEnG,OAAO,MAAMC,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,+XAA+X;IACpYC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdH,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,UAAU,EAAE;IACVN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,kIAAkI;IACvIC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,gBAAgB,EAAE;IAChBd,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,UAAU,EAAE;IACVf,GAAG,EAAE,iLAAiL;IACtLC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDc,oBAAoB,EAAE;IACpBhB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDe,OAAO,EAAE;IACPjB,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDgB,QAAQ,EAAE;IACRlB,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMiB,gBAAsC,GAAG;EACpDC,SAAS,EAAE;IACTpB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAEJ,qBAAqB,CAACwB,MAAM,CAACpB,IAAI;IACvCC,MAAM,EAAE;EACV,CAAC;EACDoB,cAAc,EAAEzB,qBAAqB,CAACyB;AACxC,CAAC"}

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

@@ -10,6 +10,7 @@ export { default as MainHeading } from './MainHeading';
 export { default as SubHeading } from './SubHeading';
 export { default as Visibility } from './Visibility';
 export { default as Section } from './Section';
+export { default as InfoOverlay } from './InfoOverlay';
 export { default as Card } from './Card';
 export { default as Isolation } from './Isolation';
 export { default as Snapshot } from './Snapshot';

package/extensions/forms/Form/index.js

@@ -10,6 +10,7 @@ export { default as MainHeading } from './MainHeading';
 export { default as SubHeading } from './SubHeading';
 export { default as Visibility } from './Visibility';
 export { default as Section } from './Section';
+export { default as InfoOverlay } from './InfoOverlay';
 export { default as Card } from './Card';
 export { default as Isolation } from './Isolation';
 export { default as Snapshot } from './Snapshot';