@dnb/eufemia 10.58.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":"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"}

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/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","_len","arguments","length","args","Array","_key","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","_len","arguments","length","args","Array","_key","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/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/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/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;