@dnb/eufemia 10.47.0 → 10.48.0

package/extensions/forms/Form/Section/EditContainer/EditToolbarTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useState","Button","Flex","FormStatus","useTranslation","SectionContainerContext","FieldBoundaryContext","check","close","useContainerDataStore","useEditContainerToolbar","EditToolbarTools","restoreOriginalData","switchContainerMode","hasVisibleError","hasSubmitError","hasError","setShowBoundaryErrors","translation","SectionEditContainer","showError","setShowError","cancelHandler","doneHandler","createElement","Fragment","show","no_animation","errorInSection","Horizontal","gap","variant","icon","icon_position","on_click","doneButton","cancelButton"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from 'react'\nimport { Button, Flex, FormStatus } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { check, close } from '../../../../../icons'\nimport useContainerDataStore from './useContainerDataStore'\nimport useEditContainerToolbar from './useEditContainerToolbar'\n\nexport default function EditToolbarTools() {\n  useEditContainerToolbar()\n  const { restoreOriginalData } = useContainerDataStore()\n\n  const { switchContainerMode } = useContext(SectionContainerContext) || {}\n  const {\n    hasVisibleError,\n    hasSubmitError,\n    hasError,\n    setShowBoundaryErrors,\n  } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().SectionEditContainer\n\n  const [showError, setShowError] = useState(false)\n\n  const cancelHandler = useCallback(() => {\n    if (hasSubmitError) {\n      setShowError(true)\n      setShowBoundaryErrors?.(true)\n    } else {\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      restoreOriginalData()\n      switchContainerMode?.('view')\n    }\n  }, [\n    hasSubmitError,\n    restoreOriginalData,\n    setShowBoundaryErrors,\n    switchContainerMode,\n  ])\n  const doneHandler = useCallback(() => {\n    if (hasError) {\n      setShowBoundaryErrors?.(true)\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      switchContainerMode?.('view')\n    }\n  }, [\n    hasVisibleError,\n    hasError,\n    setShowBoundaryErrors,\n    switchContainerMode,\n  ])\n\n  return (\n    <>\n      <FormStatus show={showError && hasVisibleError} no_animation={false}>\n        {translation.errorInSection}\n      </FormStatus>\n      <Flex.Horizontal gap=\"large\">\n        <Button\n          variant=\"tertiary\"\n          icon={check}\n          icon_position=\"left\"\n          on_click={doneHandler}\n        >\n          {translation.doneButton}\n        </Button>\n\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancelButton}\n        </Button>\n      </Flex.Horizontal>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useState","Button","Flex","FormStatus","useTranslation","SectionContainerContext","FieldBoundaryContext","check","close","useContainerDataStore","useEditContainerToolbar","EditToolbarTools","restoreOriginalData","switchContainerMode","initialContainerMode","hasVisibleError","hasSubmitError","hasError","setShowBoundaryErrors","translation","SectionEditContainer","showError","setShowError","cancelHandler","Date","now","doneHandler","createElement","Fragment","Horizontal","gap","variant","icon","icon_position","on_click","doneButton","cancelButton","show","shellSpace","top","no_animation","errorInSection"],"sources":["../../../../../../../src/extensions/forms/Form/Section/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from 'react'\nimport { Button, Flex, FormStatus } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { check, close } from '../../../../../icons'\nimport useContainerDataStore from './useContainerDataStore'\nimport useEditContainerToolbar from './useEditContainerToolbar'\n\nexport default function EditToolbarTools() {\n  useEditContainerToolbar()\n  const { restoreOriginalData } = useContainerDataStore()\n\n  const { switchContainerMode, initialContainerMode } =\n    useContext(SectionContainerContext) || {}\n  const {\n    hasVisibleError,\n    hasSubmitError,\n    hasError,\n    setShowBoundaryErrors,\n  } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().SectionEditContainer\n\n  const [showError, setShowError] = useState(false)\n\n  const cancelHandler = useCallback(() => {\n    if (hasSubmitError || (initialContainerMode === 'auto' && hasError)) {\n      setShowBoundaryErrors?.(Date.now())\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      restoreOriginalData()\n      switchContainerMode?.('view')\n    }\n  }, [\n    hasSubmitError,\n    initialContainerMode,\n    hasError,\n    setShowBoundaryErrors,\n    hasVisibleError,\n    restoreOriginalData,\n    switchContainerMode,\n  ])\n  const doneHandler = useCallback(() => {\n    if (hasError) {\n      setShowBoundaryErrors?.(Date.now())\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      switchContainerMode?.('view')\n    }\n  }, [\n    hasVisibleError,\n    hasError,\n    setShowBoundaryErrors,\n    switchContainerMode,\n  ])\n\n  return (\n    <>\n      <Flex.Horizontal gap=\"large\">\n        <Button\n          variant=\"tertiary\"\n          icon={check}\n          icon_position=\"left\"\n          on_click={doneHandler}\n        >\n          {translation.doneButton}\n        </Button>\n\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancelButton}\n        </Button>\n      </Flex.Horizontal>\n\n      <FormStatus\n        show={showError && hasVisibleError}\n        shellSpace={{ top: 'x-small' }}\n        no_animation={false}\n      >\n        {translation.errorInSection}\n      </FormStatus>\n    </>\n  )\n}\n"],"mappings":"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"}

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

@@ -21,8 +21,13 @@ export type SectionProps<overwriteProps = OverwritePropsDefaults> = {
      */
     required?: boolean;
     /**
-     * Defines the container mode. Can be `view` or `edit`.
-     * Defaults to `view`.
+     * 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"`.
+     */
+    validateInitially?: boolean;
+    /**
+     * Defines the container mode. Can be `view`, `edit` or `auto`.
+     * When set to `auto`, the mode will initially be "edit" if fields contain errors.
+     * Defaults to `auto`.
      */
     containerMode?: ContainerMode;
     /**

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

@@ -21,7 +21,8 @@ function SectionComponent(props) {
     required,
     data,
     defaultData,
-    containerMode = 'view',
+    validateInitially,
+    containerMode = 'auto',
     onChange,
     errorPrioritization = ['contextSchema'],
     children
@@ -63,6 +64,7 @@ function SectionComponent(props) {
       props
     }
   }, React.createElement(SectionContainerProvider, {
+    validateInitially: validateInitially,
     containerMode: containerMode
   }, React.createElement(FieldPropsProvider, _extends({
     overwriteProps: _objectSpread(_objectSpread({}, overwriteProps), nestedProps === null || nestedProps === void 0 ? void 0 : (_nestedProps$overwrit = nestedProps.overwriteProps) === null || _nestedProps$overwrit === void 0 ? void 0 : _nestedProps$overwrit[path.substring(1)]),

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","SectionComponent","props","_path$startsWith","_nestedProps$overwrit","path","overwriteProps","translations","required","data","defaultData","containerMode","onChange","errorPrioritization","children","startsWith","call","Error","hasContext","addOnChangeHandler","nestedPath","nestedProps","handleChange","_len","arguments","length","args","Array","_key","identifier","fieldProps","undefined","createElement","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 '../FieldProps'\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 {\n  FieldBlockProps,\n  Path,\n  FieldProps,\n  OnChange,\n} from '../../types'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]: (FieldProps & FieldBlockProps) | OverwritePropsDefaults\n}\nexport type SectionProps<overwriteProps = OverwritePropsDefaults> = {\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   * Defines the container mode. Can be `view` or `edit`.\n   * Defaults to `view`.\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<unknown>,\n  'data' | 'defaultData' | 'onChange' | 'translations'\n>\n\nexport type LocalProps = SectionProps & {\n  children: React.ReactNode\n}\n\nfunction SectionComponent(props: LocalProps) {\n  const {\n    path,\n    overwriteProps,\n    translations,\n    required,\n    data,\n    defaultData,\n    containerMode = 'view',\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  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        props,\n      }}\n    >\n      <SectionContainerProvider containerMode={containerMode}>\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.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","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","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 '../FieldProps'\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 {\n  FieldBlockProps,\n  Path,\n  FieldProps,\n  OnChange,\n} from '../../types'\n\nexport type OverwritePropsDefaults = {\n  [key: Path]: (FieldProps & FieldBlockProps) | OverwritePropsDefaults\n}\nexport type SectionProps<overwriteProps = OverwritePropsDefaults> = {\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<unknown>,\n  'data' | 'defaultData' | 'onChange' | 'translations'\n>\n\nexport type LocalProps = SectionProps & {\n  children: React.ReactNode\n}\n\nfunction SectionComponent(props: LocalProps) {\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  return (\n    <SectionContext.Provider\n      value={{\n        path: identifier,\n        errorPrioritization,\n        props,\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.ViewContainer = ViewContainer\nSectionComponent.EditContainer = EditContainer\n\nSectionComponent._supportsSpacingProps = undefined\nexport default SectionComponent\n"],"mappings":"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"}

package/extensions/forms/Form/Section/SectionDocs.js

@@ -19,6 +19,11 @@ export const SectionProperties = {
     type: 'boolean',
     status: 'optional'
   },
+  validateInitially: {
+    doc: '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"`.',
+    type: 'boolean',
+    status: 'optional'
+  },
   defaultData: {
     doc: 'Provide default data to the section fields and values, in case the data context (Form.Handler) is not available.',
     type: 'object',
@@ -30,7 +35,7 @@ export const SectionProperties = {
     status: 'optional'
   },
   containerMode: {
-    doc: 'Defines the container mode. Can be `view` or `edit`. Defaults to `view`.',
+    doc: 'Defines the container mode. Can be `view`, `edit` or `auto`. When set to `auto`, the mode will initially be "edit" if fields contain errors. Defaults to `auto`.',
     type: 'string',
     status: 'optional'
   },

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

@@ -1 +1 @@
-{"version":3,"file":"SectionDocs.js","names":["SectionProperties","path","doc","type","status","overwriteProps","translation","required","defaultData","data","containerMode","children","SectionEvents","onChange"],"sources":["../../../../../../src/extensions/forms/Form/Section/SectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SectionProperties: PropertiesTableProps = {\n  path: {\n    doc: 'A path to the section (JSON Pointer). When defined, fields inside the section will get this path as a prefix of their own path.',\n    type: 'string',\n    status: 'optional',\n  },\n  overwriteProps: {\n    doc: 'Overwrite field props for the section.',\n    type: 'object',\n    status: 'optional',\n  },\n  translation: {\n    doc: \"Provide a translation for the section (e.g. `{'nb-NO': { MySection: { MyField: { label: 'Custom' }}}}`).\",\n    type: 'object',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Makes all fields inside it required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  defaultData: {\n    doc: 'Provide default data to the section fields and values, in case the data context (Form.Handler) is not available.',\n    type: 'object',\n    status: 'optional',\n  },\n  data: {\n    doc: 'Provide data to the section fields and values, in case the data context (Form.Handler) is not available.',\n    type: 'object',\n    status: 'optional',\n  },\n  containerMode: {\n    doc: 'Defines the container mode. Can be `view` or `edit`. Defaults to `view`.',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'All the fields and values inside the section.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n\nexport const SectionEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,iBAAuC,GAAG;EACrDC,IAAI,EAAE;IACJC,GAAG,EAAE,iIAAiI;IACtIC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdH,GAAG,EAAE,wCAAwC;IAC7CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,aAAa,EAAE;IACbR,GAAG,EAAE,0EAA0E;IAC/EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,QAAQ,EAAE;IACRT,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMQ,aAAmC,GAAG;EACjDC,QAAQ,EAAE;IACRX,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"SectionDocs.js","names":["SectionProperties","path","doc","type","status","overwriteProps","translation","required","validateInitially","defaultData","data","containerMode","children","SectionEvents","onChange"],"sources":["../../../../../../src/extensions/forms/Form/Section/SectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SectionProperties: PropertiesTableProps = {\n  path: {\n    doc: 'A path to the section (JSON Pointer). When defined, fields inside the section will get this path as a prefix of their own path.',\n    type: 'string',\n    status: 'optional',\n  },\n  overwriteProps: {\n    doc: 'Overwrite field props for the section.',\n    type: 'object',\n    status: 'optional',\n  },\n  translation: {\n    doc: \"Provide a translation for the section (e.g. `{'nb-NO': { MySection: { MyField: { label: 'Custom' }}}}`).\",\n    type: 'object',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Makes all fields inside it required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  validateInitially: {\n    doc: '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    type: 'boolean',\n    status: 'optional',\n  },\n  defaultData: {\n    doc: 'Provide default data to the section fields and values, in case the data context (Form.Handler) is not available.',\n    type: 'object',\n    status: 'optional',\n  },\n  data: {\n    doc: 'Provide data to the section fields and values, in case the data context (Form.Handler) is not available.',\n    type: 'object',\n    status: 'optional',\n  },\n  containerMode: {\n    doc: 'Defines the container mode. Can be `view`, `edit` or `auto`. When set to `auto`, the mode will initially be \"edit\" if fields contain errors. Defaults to `auto`.',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'All the fields and values inside the section.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n\nexport const SectionEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,iBAAuC,GAAG;EACrDC,IAAI,EAAE;IACJC,GAAG,EAAE,iIAAiI;IACtIC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdH,GAAG,EAAE,wCAAwC;IAC7CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,iBAAiB,EAAE;IACjBN,GAAG,EAAE,sNAAsN;IAC3NC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,WAAW,EAAE;IACXP,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,IAAI,EAAE;IACJR,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,aAAa,EAAE;IACbT,GAAG,EAAE,kKAAkK;IACvKC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,aAAmC,GAAG;EACjDC,QAAQ,EAAE;IACRZ,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Form/Section/containers/SectionContainer.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { Props as FlexContainerProps } from '../../../../../components/flex/Container';
-export type ContainerMode = 'view' | 'edit';
+export type ContainerMode = 'view' | 'edit' | 'auto';
 export type SectionContainerProps = {
     /**
      * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.
@@ -11,6 +12,7 @@ export type Props = {
     mode: ContainerMode;
     open?: boolean | undefined;
     ariaLabel?: string;
+    omitFocusManagementRef?: React.MutableRefObject<boolean>;
 } & SectionContainerProps;
 declare function SectionContainer(props: Props & FlexContainerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SectionContainer {

package/extensions/forms/Form/Section/containers/SectionContainer.js

@@ -2,13 +2,26 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["mode", "open", "ariaLabel", "onAnimationEnd", "className", "children", "variant"];
+const _excluded = ["mode", "open", "ariaLabel", "onAnimationEnd", "className", "children", "variant", "omitFocusManagementRef"];
 import React, { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
 import classnames from 'classnames';
 import { Flex, HeightAnimation } from '../../../../../components';
 import SectionContainerContext from './SectionContainerContext';
 import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
 function SectionContainer(props) {
+  const {
+      mode,
+      open,
+      ariaLabel,
+      onAnimationEnd,
+      className,
+      children,
+      variant = 'outline',
+      omitFocusManagementRef = {
+        current: undefined
+      }
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
   const [, forceUpdate] = useReducer(() => ({}), {});
   const containerRef = useRef();
   const contextRef = useRef();
@@ -23,19 +36,8 @@ function SectionContainer(props) {
     contextRef.current.containerMode = 'edit';
   }
   const {
-    switchContainerMode,
     containerMode
   } = contextRef.current;
-  const {
-      mode,
-      open,
-      ariaLabel,
-      onAnimationEnd,
-      className,
-      children,
-      variant = 'outline'
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded);
   const openRef = useRef(open !== null && open !== void 0 ? open : containerMode === mode);
   const setOpenState = useCallback(open => {
     openRef.current = open;
@@ -50,21 +52,21 @@ function SectionContainer(props) {
       }
     }
   }, [containerMode, mode, open, setOpenState]);
-  const handleAnimationEnd = useCallback(state => {
-    if (contextRef.current.hasSubmitError) {
-      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
-    }
+  const setFocus = useCallback(state => {
     if (state === 'opened') {
-      const preventFocusOnErrorOpening = !contextRef.current.hasSubmitError;
-      if (preventFocusOnErrorOpening) {
+      if (!omitFocusManagementRef.current && !contextRef.current.hasSubmitError) {
         var _containerRef$current, _containerRef$current2;
         containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.focus) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.call(_containerRef$current);
       }
+      omitFocusManagementRef.current = false;
     }
+  }, [omitFocusManagementRef]);
+  const handleAnimationEnd = useCallback(state => {
+    setFocus(state);
     onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd(state);
-  }, [onAnimationEnd, switchContainerMode]);
+  }, [onAnimationEnd, setFocus]);
   return React.createElement(HeightAnimation, {
-    className: classnames('dnb-forms-section-block', className, variant && `dnb-forms-section-block--variant-${variant}`, contextRef.current.hasSubmitError && 'dnb-forms-section-block--error'),
+    className: classnames('dnb-forms-section-block', className, variant && `dnb-forms-section-block--variant-${variant}`, omitFocusManagementRef.current && 'dnb-forms-section-block--no-animation', contextRef.current.hasSubmitError && 'dnb-forms-section-block--error'),
     open: openRef.current,
     onAnimationEnd: handleAnimationEnd,
     duration: 450,

package/extensions/forms/Form/Section/containers/SectionContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainer.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","SectionContainerContext","FieldBoundaryContext","SectionContainer","props","forceUpdate","containerRef","contextRef","current","hasError","hasSubmitError","containerMode","switchContainerMode","mode","open","ariaLabel","onAnimationEnd","className","children","variant","restProps","_objectWithoutProperties","_excluded","openRef","setOpenState","handleAnimationEnd","state","preventFocusOnErrorOpening","_containerRef$current","_containerRef$current2","focus","call","createElement","duration","keepInDOM","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainer.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../../components'\nimport SectionContainerContext, {\n  SectionContainerContextState,\n} from './SectionContainerContext'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport type ContainerMode = 'view' | 'edit'\nexport type SectionContainerProps = {\n  /**\n   * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.\n   * Defaults to `outline`.\n   */\n  variant?: 'outline' | 'basic'\n}\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n} & SectionContainerProps\n\nfunction SectionContainer(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const containerRef = useRef<HTMLDivElement>()\n  const contextRef = useRef<\n    SectionContainerContextState & {\n      hasError?: boolean\n      hasSubmitError?: boolean\n    }\n  >()\n  contextRef.current = useContext(SectionContainerContext) || {}\n\n  const { hasError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasSubmitError = hasSubmitError\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasSubmitError) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { switchContainerMode, containerMode } = contextRef.current\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    variant = 'outline',\n    ...restProps\n  } = props\n\n  const openRef = useRef(open ?? containerMode === mode)\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    // - Set the open state, if it's controlled\n    if (typeof open !== 'undefined') {\n      setOpenState(open)\n    } else {\n      // - Open the block with animation, if it's in the right mode\n      if (openRef.current !== (containerMode === mode)) {\n        setOpenState(containerMode === mode)\n      }\n    }\n  }, [containerMode, mode, open, setOpenState])\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      // - Keep the block open if we have an error\n      if (contextRef.current.hasSubmitError) {\n        switchContainerMode?.('edit')\n      }\n\n      if (state === 'opened') {\n        const preventFocusOnErrorOpening =\n          !contextRef.current.hasSubmitError\n        if (preventFocusOnErrorOpening) {\n          containerRef?.current?.focus?.()\n        }\n      }\n\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, switchContainerMode]\n  )\n\n  return (\n    <HeightAnimation\n      className={classnames(\n        'dnb-forms-section-block',\n        variant && `dnb-forms-section-block--variant-${variant}`,\n        contextRef.current.hasSubmitError &&\n          'dnb-forms-section-block--error',\n        className\n      )}\n      open={openRef.current}\n      onAnimationEnd={handleAnimationEnd}\n      duration={450}\n      keepInDOM // Ensure fields get mounted so they will sync with the data context\n    >\n      <Flex.Stack\n        className=\"dnb-forms-section-block__inner\"\n        {...restProps}\n        element=\"section\"\n        aria-label={ariaLabel}\n        innerRef={containerRef}\n        tabIndex={-1}\n      >\n        {children}\n      </Flex.Stack>\n    </HeightAnimation>\n  )\n}\n\nSectionContainer._supportsSpacingProps = true\nexport default SectionContainer\n"],"mappings":"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"}
+{"version":3,"file":"SectionContainer.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","SectionContainerContext","FieldBoundaryContext","SectionContainer","props","mode","open","ariaLabel","onAnimationEnd","className","children","variant","omitFocusManagementRef","current","undefined","restProps","_objectWithoutProperties","_excluded","forceUpdate","containerRef","contextRef","hasError","hasSubmitError","containerMode","openRef","setOpenState","setFocus","state","_containerRef$current","_containerRef$current2","focus","call","handleAnimationEnd","createElement","duration","keepInDOM","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainer.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../../components'\nimport SectionContainerContext, {\n  SectionContainerContextState,\n} from './SectionContainerContext'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport type ContainerMode = 'view' | 'edit' | 'auto'\nexport type SectionContainerProps = {\n  /**\n   * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.\n   * Defaults to `outline`.\n   */\n  variant?: 'outline' | 'basic'\n}\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n  omitFocusManagementRef?: React.MutableRefObject<boolean>\n} & SectionContainerProps\n\nfunction SectionContainer(props: Props & FlexContainerProps) {\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    variant = 'outline',\n    omitFocusManagementRef = { current: undefined },\n    ...restProps\n  } = props\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const containerRef = useRef<HTMLDivElement>()\n  const contextRef = useRef<\n    SectionContainerContextState & {\n      hasError?: boolean\n      hasSubmitError?: boolean\n    }\n  >()\n  contextRef.current = useContext(SectionContainerContext) || {}\n\n  const { hasError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasSubmitError = hasSubmitError\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasSubmitError) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { containerMode } = contextRef.current\n\n  const openRef = useRef(open ?? containerMode === mode)\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    // - Set the open state, if it's controlled\n    if (typeof open !== 'undefined') {\n      setOpenState(open)\n    } else {\n      // - Open the block with animation, if it's in the right mode\n      if (openRef.current !== (containerMode === mode)) {\n        setOpenState(containerMode === mode)\n      }\n    }\n  }, [containerMode, mode, open, setOpenState])\n\n  const setFocus = useCallback(\n    (state) => {\n      if (state === 'opened') {\n        if (\n          !omitFocusManagementRef.current &&\n          !contextRef.current.hasSubmitError\n        ) {\n          containerRef?.current?.focus?.()\n        }\n        omitFocusManagementRef.current = false\n      }\n    },\n    [omitFocusManagementRef]\n  )\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      setFocus(state)\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, setFocus]\n  )\n\n  return (\n    <HeightAnimation\n      className={classnames(\n        'dnb-forms-section-block',\n        variant && `dnb-forms-section-block--variant-${variant}`,\n        omitFocusManagementRef.current &&\n          'dnb-forms-section-block--no-animation',\n        contextRef.current.hasSubmitError &&\n          'dnb-forms-section-block--error',\n        className\n      )}\n      open={openRef.current}\n      onAnimationEnd={handleAnimationEnd}\n      duration={450}\n      keepInDOM // Ensure fields get mounted so they will sync with the data context\n    >\n      <Flex.Stack\n        className=\"dnb-forms-section-block__inner\"\n        {...restProps}\n        element=\"section\"\n        aria-label={ariaLabel}\n        innerRef={containerRef}\n        tabIndex={-1}\n      >\n        {children}\n      </Flex.Stack>\n    </HeightAnimation>\n  )\n}\n\nSectionContainer._supportsSpacingProps = true\nexport default SectionContainer\n"],"mappings":"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"}

package/extensions/forms/Form/Section/containers/SectionContainerContext.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { ContainerMode } from './SectionContainer';
 export interface SectionContainerContextState {
+    validateInitially?: boolean;
     containerMode?: ContainerMode;
+    initialContainerMode?: ContainerMode;
     switchContainerMode?: (mode: ContainerMode) => void;
 }
 declare const SectionContainerContext: React.Context<SectionContainerContextState>;

package/extensions/forms/Form/Section/containers/SectionContainerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainerContext.js","names":["React","SectionContainerContext","createContext","undefined"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerContext.ts"],"sourcesContent":["import React from 'react'\nimport { ContainerMode } from './SectionContainer'\n\nexport interface SectionContainerContextState {\n  containerMode?: ContainerMode\n  switchContainerMode?: (mode: ContainerMode) => void\n}\n\nconst SectionContainerContext = React.createContext<\n  SectionContainerContextState | undefined\n>(undefined)\n\nexport default SectionContainerContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,uBAAuB,GAAGD,KAAK,CAACE,aAAa,CAEjDC,SAAS,CAAC;AAEZ,eAAeF,uBAAuB"}
+{"version":3,"file":"SectionContainerContext.js","names":["React","SectionContainerContext","createContext","undefined"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerContext.ts"],"sourcesContent":["import React from 'react'\nimport { ContainerMode } from './SectionContainer'\n\nexport interface SectionContainerContextState {\n  validateInitially?: boolean\n  containerMode?: ContainerMode\n  initialContainerMode?: ContainerMode\n  switchContainerMode?: (mode: ContainerMode) => void\n}\n\nconst SectionContainerContext = React.createContext<\n  SectionContainerContextState | undefined\n>(undefined)\n\nexport default SectionContainerContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAUzB,MAAMC,uBAAuB,GAAGD,KAAK,CAACE,aAAa,CAEjDC,SAAS,CAAC;AAEZ,eAAeF,uBAAuB"}

package/extensions/forms/Form/Section/containers/SectionContainerProvider.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ContainerMode } from './SectionContainer';
 export type Props = {
+    validateInitially?: boolean;
     containerMode?: ContainerMode;
     children: React.ReactNode;
 };

package/extensions/forms/Form/Section/containers/SectionContainerProvider.js

@@ -5,17 +5,20 @@ import SectionContainerContext from './SectionContainerContext';
 function SectionContainerProvider(props) {
   const [, forceUpdate] = useReducer(() => ({}), {});
   const {
+    validateInitially,
     containerMode,
     children
   } = props;
-  const containerModeRef = useRef(containerMode);
+  const containerModeRef = useRef(containerMode === 'auto' ? 'view' : containerMode);
   const switchContainerMode = useCallback(mode => {
     containerModeRef.current = mode;
     forceUpdate();
   }, []);
   return React.createElement(SectionContainerContext.Provider, {
     value: {
+      validateInitially,
       containerMode: containerModeRef.current,
+      initialContainerMode: containerMode,
       switchContainerMode
     }
   }, children);

package/extensions/forms/Form/Section/containers/SectionContainerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainerProvider.js","names":["React","useCallback","useReducer","useRef","SectionContainerContext","SectionContainerProvider","props","forceUpdate","containerMode","children","containerModeRef","switchContainerMode","mode","current","createElement","Provider","value"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerProvider.tsx"],"sourcesContent":["import React, { useCallback, useReducer, useRef } from 'react'\nimport SectionContainerContext from './SectionContainerContext'\nimport { ContainerMode } from './SectionContainer'\n\nexport type Props = {\n  containerMode?: ContainerMode\n  children: React.ReactNode\n}\n\nfunction SectionContainerProvider(props: Props) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const { containerMode, children } = props\n\n  const containerModeRef = useRef<ContainerMode>(containerMode)\n\n  const switchContainerMode = useCallback((mode: ContainerMode) => {\n    containerModeRef.current = mode\n    forceUpdate()\n  }, [])\n\n  return (\n    <SectionContainerContext.Provider\n      value={{\n        containerMode: containerModeRef.current,\n        switchContainerMode,\n      }}\n    >\n      {children}\n    </SectionContainerContext.Provider>\n  )\n}\n\nexport default SectionContainerProvider\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,uBAAuB,MAAM,2BAA2B;AAQ/D,SAASC,wBAAwBA,CAACC,KAAY,EAAE;EAC9C,MAAM,GAAGC,WAAW,CAAC,GAAGL,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAElD,MAAM;IAAEM,aAAa;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAEzC,MAAMI,gBAAgB,GAAGP,MAAM,CAAgBK,aAAa,CAAC;EAE7D,MAAMG,mBAAmB,GAAGV,WAAW,CAAEW,IAAmB,IAAK;IAC/DF,gBAAgB,CAACG,OAAO,GAAGD,IAAI;IAC/BL,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAEN,OACEP,KAAA,CAAAc,aAAA,CAACV,uBAAuB,CAACW,QAAQ;IAC/BC,KAAK,EAAE;MACLR,aAAa,EAAEE,gBAAgB,CAACG,OAAO;MACvCF;IACF;EAAE,GAEDF,QAC+B,CAAC;AAEvC;AAEA,eAAeJ,wBAAwB"}
+{"version":3,"file":"SectionContainerProvider.js","names":["React","useCallback","useReducer","useRef","SectionContainerContext","SectionContainerProvider","props","forceUpdate","validateInitially","containerMode","children","containerModeRef","switchContainerMode","mode","current","createElement","Provider","value","initialContainerMode"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerProvider.tsx"],"sourcesContent":["import React, { useCallback, useReducer, useRef } from 'react'\nimport SectionContainerContext from './SectionContainerContext'\nimport { ContainerMode } from './SectionContainer'\n\nexport type Props = {\n  validateInitially?: boolean\n  containerMode?: ContainerMode\n  children: React.ReactNode\n}\n\nfunction SectionContainerProvider(props: Props) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const { validateInitially, containerMode, children } = props\n\n  const containerModeRef = useRef<ContainerMode>(\n    containerMode === 'auto' ? 'view' : containerMode\n  )\n\n  const switchContainerMode = useCallback((mode: ContainerMode) => {\n    containerModeRef.current = mode\n    forceUpdate()\n  }, [])\n\n  return (\n    <SectionContainerContext.Provider\n      value={{\n        validateInitially,\n        containerMode: containerModeRef.current,\n        initialContainerMode: containerMode,\n        switchContainerMode,\n      }}\n    >\n      {children}\n    </SectionContainerContext.Provider>\n  )\n}\n\nexport default SectionContainerProvider\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,uBAAuB,MAAM,2BAA2B;AAS/D,SAASC,wBAAwBA,CAACC,KAAY,EAAE;EAC9C,MAAM,GAAGC,WAAW,CAAC,GAAGL,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAElD,MAAM;IAAEM,iBAAiB;IAAEC,aAAa;IAAEC;EAAS,CAAC,GAAGJ,KAAK;EAE5D,MAAMK,gBAAgB,GAAGR,MAAM,CAC7BM,aAAa,KAAK,MAAM,GAAG,MAAM,GAAGA,aACtC,CAAC;EAED,MAAMG,mBAAmB,GAAGX,WAAW,CAAEY,IAAmB,IAAK;IAC/DF,gBAAgB,CAACG,OAAO,GAAGD,IAAI;IAC/BN,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAEN,OACEP,KAAA,CAAAe,aAAA,CAACX,uBAAuB,CAACY,QAAQ;IAC/BC,KAAK,EAAE;MACLT,iBAAiB;MACjBC,aAAa,EAAEE,gBAAgB,CAACG,OAAO;MACvCI,oBAAoB,EAAET,aAAa;MACnCG;IACF;EAAE,GAEDF,QAC+B,CAAC;AAEvC;AAEA,eAAeL,wBAAwB"}

package/extensions/forms/Form/Section/style/dnb-form-section.css

@@ -37,6 +37,9 @@
 .dnb-forms-section-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
+.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner {
+  transform: translateY(0);
+}
 .dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner {
   transform: translateY(-0.5rem);
 }

package/extensions/forms/Form/Section/style/dnb-form-section.min.css

@@ -1 +1 @@
-.dnb-forms-section-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-section-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-section-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner,.dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner{transform:translateY(-.5rem)}.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner{transform:translateY(0)}
+.dnb-forms-section-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-section-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-section-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner,.dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner{transform:translateY(0)}.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner{transform:translateY(-.5rem)}.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner{transform:translateY(0)}

package/extensions/forms/Form/Section/style/dnb-form-section.scss

@@ -53,6 +53,10 @@
       }
     }
 
+    &--no-animation &__inner {
+      transform: translateY(0);
+    }
+
     &.dnb-height-animation--is-visible &__inner {
       transform: translateY(-0.5rem);
     }

package/extensions/forms/Iterate/Array/Array.js

@@ -8,14 +8,18 @@ import classnames from 'classnames';
 import pointer from 'json-pointer';
 import { useFieldProps } from '../../hooks';
 import { makeUniqueId } from '../../../../shared/component-helper';
-import { Flex } from '../../../../components';
+import { Flex, FormStatus } from '../../../../components';
 import { pickSpacingProps } from '../../../../components/flex/utils';
+import useMountEffect from '../../../../shared/helpers/useMountEffect';
 import { pickFlexContainerProps } from '../../../../components/flex/Container';
 import IterateItemContext from '../IterateItemContext';
 import SummaryListContext from '../../Value/SummaryList/SummaryListContext';
 import ValueBlockContext from '../../ValueBlock/ValueBlockContext';
 import FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider';
+import DataContext from '../../DataContext/Context';
 import useDataValue from '../../hooks/useDataValue';
+import { useSwitchContainerMode } from '../hooks';
+import { getMessage } from '../../FieldBlock';
 import structuredClone from '@ungap/structured-clone';
 function ArrayComponent(props) {
   var _props$value;
@@ -60,13 +64,20 @@ function ArrayComponent(props) {
   const {
     path,
     value: arrayValue,
+    error,
+    defaultValue,
     withoutFlex,
     emptyValue,
     placeholder,
+    containerMode,
     handleChange,
+    setChanged,
     onChange,
     children
   } = useFieldProps(preparedProps);
+  useMountEffect(() => {
+    setChanged(true);
+  });
   const idsRef = useRef([]);
   const isNewRef = useRef({});
   const modesRef = useRef({});
@@ -76,26 +87,38 @@ function ArrayComponent(props) {
   const hadPushRef = useRef();
   const innerRefs = useRef({});
   const omitFlex = withoutFlex !== null && withoutFlex !== void 0 ? withoutFlex : summaryListContext || valueBlockContext;
+  const {
+    handlePathChange
+  } = useContext(DataContext) || {};
+  useMountEffect(() => {
+    if (defaultValue) {
+      handlePathChange === null || handlePathChange === void 0 ? void 0 : handlePathChange(path, defaultValue);
+    }
+  });
   useEffect(() => {
     valueCountRef.current = arrayValue || [];
   }, [arrayValue]);
-  const elementData = useMemo(() => {
-    var _ref;
-    return ((_ref = valueWhileClosingRef.current || arrayValue) !== null && _ref !== void 0 ? _ref : []).map((value, index) => {
-      var _valueCountRef$curren;
+  const {
+    getNextContainerMode
+  } = useSwitchContainerMode();
+  const arrayItems = useMemo(() => {
+    const list = valueWhileClosingRef.current || arrayValue;
+    return (list !== null && list !== void 0 ? list : []).map((value, index) => {
+      var _valueCountRef$curren, _modesRef$current$id;
       const id = idsRef.current[index] || makeUniqueId();
-      const hasNewItems = arrayValue.length > ((_valueCountRef$curren = valueCountRef.current) === null || _valueCountRef$curren === void 0 ? void 0 : _valueCountRef$curren.length);
+      const hasNewItems = (arrayValue === null || arrayValue === void 0 ? void 0 : arrayValue.length) > ((_valueCountRef$curren = valueCountRef.current) === null || _valueCountRef$curren === void 0 ? void 0 : _valueCountRef$curren.length);
       if (!idsRef.current[index]) {
         isNewRef.current[id] = hasNewItems;
         idsRef.current.push(id);
       }
       const isNew = isNewRef.current[id] || false;
-      if (!modesRef.current[id]) {
-        var _value$__containerMod;
-        modesRef.current[id] = (_value$__containerMod = value === null || value === void 0 ? void 0 : value['__containerMode']) !== null && _value$__containerMod !== void 0 ? _value$__containerMod : isNew ? 'edit' : 'view';
-        value === null || value === void 0 ? true : delete value['__containerMode'];
+      if (!((_modesRef$current$id = modesRef.current[id]) !== null && _modesRef$current$id !== void 0 && _modesRef$current$id.current)) {
+        var _getNextContainerMode;
+        modesRef.current[id] = {
+          current: containerMode !== null && containerMode !== void 0 ? containerMode : isNew ? (_getNextContainerMode = getNextContainerMode()) !== null && _getNextContainerMode !== void 0 ? _getNextContainerMode : 'edit' : 'auto'
+        };
       }
-      return {
+      const itemContext = {
         id,
         path,
         value,
@@ -103,10 +126,16 @@ function ArrayComponent(props) {
         arrayValue,
         containerRef,
         isNew,
-        containerMode: modesRef.current[id],
-        switchContainerMode: mode => {
+        containerMode: modesRef.current[id].current,
+        previousContainerMode: modesRef.current[id].previous,
+        initialContainerMode: containerMode || 'auto',
+        modeOptions: modesRef.current[id].options,
+        switchContainerMode: function (mode) {
           var _isNewRef$current;
-          modesRef.current[id] = mode;
+          let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          modesRef.current[id].previous = modesRef.current[id].current;
+          modesRef.current[id].current = mode;
+          modesRef.current[id].options = options;
           (_isNewRef$current = isNewRef.current) === null || _isNewRef$current === void 0 ? true : delete _isNewRef$current[id];
           forceUpdate();
         },
@@ -118,7 +147,7 @@ function ArrayComponent(props) {
         },
         handlePush: element => {
           hadPushRef.current = true;
-          handleChange([...(arrayValue !== null && arrayValue !== void 0 ? arrayValue : []), element]);
+          handleChange([...(arrayValue || []), element]);
         },
         handleRemove: function () {
           let {
@@ -141,38 +170,41 @@ function ArrayComponent(props) {
           forceUpdate();
         },
         restoreOriginalValue: value => {
-          const newArrayValue = structuredClone(arrayValue);
-          newArrayValue[index] = value;
-          handleChange(newArrayValue);
+          if (value) {
+            const newArrayValue = structuredClone(arrayValue);
+            newArrayValue[index] = value;
+            handleChange(newArrayValue);
+          }
         }
       };
+      return itemContext;
     });
   }, [salt, arrayValue, path, handleChange]);
   useMemo(() => {
-    const last = elementData === null || elementData === void 0 ? void 0 : elementData[elementData.length - 1];
+    const last = arrayItems === null || arrayItems === void 0 ? void 0 : arrayItems[arrayItems.length - 1];
     if (last !== null && last !== void 0 && last.isNew && !hadPushRef.current) {
       onChange === null || onChange === void 0 ? void 0 : onChange(arrayValue);
     } else {
       hadPushRef.current = false;
     }
-  }, [arrayValue, elementData, onChange]);
+  }, [arrayValue, arrayItems, onChange]);
   const flexProps = _objectSpread(_objectSpread(_objectSpread({
     className: classnames("dnb-forms-iterate dnb-forms-section", props === null || props === void 0 ? void 0 : props.className)
   }, pickFlexContainerProps(props)), pickSpacingProps(props)), {}, {
     innerRef: containerRef
   });
   const WrapperElement = omitFlex ? Fragment : Flex.Stack;
-  return React.createElement(WrapperElement, omitFlex ? null : flexProps, arrayValue === emptyValue || (props === null || props === void 0 ? void 0 : (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) === 0 ? placeholder : elementData.map(elementProps => {
+  return React.createElement(React.Fragment, null, React.createElement(WrapperElement, omitFlex ? null : flexProps, arrayValue === emptyValue || (props === null || props === void 0 ? void 0 : (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) === 0 ? placeholder : arrayItems.map(itemProps => {
     const {
       id,
       value,
       index
-    } = elementProps;
+    } = itemProps;
     const elementRef = innerRefs.current[id] = innerRefs.current[id] || createRef();
     const renderChildren = elementChild => {
       return typeof elementChild === 'function' ? elementChild(value, index) : elementChild;
     };
-    const contextValue = _objectSpread(_objectSpread({}, elementProps), {}, {
+    const contextValue = _objectSpread(_objectSpread({}, itemProps), {}, {
       elementRef
     });
     const content = Array.isArray(children) ? children.map(child => renderChildren(child)) : renderChildren(children);
@@ -190,8 +222,19 @@ function ArrayComponent(props) {
     }, React.createElement(IterateItemContext.Provider, {
       value: contextValue
     }, React.createElement(FieldBoundaryProvider, null, content)));
-  }));
+  })), React.createElement(FormStatus, {
+    top: 0,
+    bottom: 0,
+    show: Boolean(error),
+    no_animation: false,
+    shellSpace: {
+      top: true,
+      bottom: true
+    }
+  }, getMessage({
+    content: error
+  })));
 }
-ArrayComponent._supportsSpacingProps = true;
+ArrayComponent._supportsSpacingProps = false;
 export default ArrayComponent;
 //# sourceMappingURL=Array.js.map