@dnb/eufemia 10.51.2 → 10.52.0

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

@@ -1 +1 @@
-{"version":3,"file":"Array.js","names":["React","useMemo","useRef","useEffect","useReducer","createRef","useContext","classnames","pointer","useFieldProps","makeUniqueId","Flex","FormStatus","HeightAnimation","pickSpacingProps","useMountEffect","pickFlexContainerProps","IterateItemContext","SummaryListContext","ValueBlockContext","FieldBoundaryProvider","useDataValue","useArrayLimit","useSwitchContainerMode","getMessage","structuredClone","ArrayComponent","props","_props$value","salt","forceUpdate","summaryListContext","valueBlockContext","setLimitProps","error","limitWarning","path","getValueByPath","preparedProps","countPath","countPathLimit","Infinity","countPathTransform","arrayValue","countValue","parseFloat","length","newValue","i","l","value","push","index","_objectSpread","required","limit","withoutFlex","emptyValue","placeholder","containerMode","animate","handleChange","setChanged","onChange","children","updateContextDataInSync","idsRef","isNewRef","modesRef","valueWhileClosingRef","valueCountRef","containerRef","hadPushRef","innerRefs","omitFlex","current","getNextContainerMode","arrayItems","_ref","list","limitedList","slice","map","_valueCountRef$curren","_modesRef$current$id","id","hasNewItems","isNew","_getNextContainerMode","itemContext","previousContainerMode","previous","initialContainerMode","modeOptions","options","switchContainerMode","mode","_isNewRef$current","arguments","undefined","newArrayValue","set","handlePush","element","handleRemove","keepItems","splice","fulfillRemove","_modesRef$current","_isNewRef$current2","findIndex","indexOf","restoreOriginalValue","total","last","flexProps","className","innerRef","arrayElements","itemProps","elementRef","renderChildren","elementChild","contextValue","content","Array","isArray","child","createElement","Provider","key","Item","tabIndex","Stack","Fragment","show","Boolean","state","shellSpace","top","bottom","no_animation","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useRef,\n  useEffect,\n  useReducer,\n  createRef,\n  useContext,\n} from 'react'\nimport classnames from 'classnames'\nimport pointer from '../../utils/json-pointer'\nimport { useFieldProps } from '../../hooks'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport { Flex, FormStatus, HeightAnimation } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport {\n  BasicProps as FlexContainerProps,\n  Props as FlexContainerAllProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport IterateItemContext, {\n  IterateItemContextState,\n} from '../IterateItemContext'\nimport SummaryListContext from '../../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from '../../ValueBlock/ValueBlockContext'\nimport FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider'\nimport useDataValue from '../../hooks/useDataValue'\nimport { useArrayLimit, useSwitchContainerMode } from '../hooks'\nimport { getMessage } from '../../FieldBlock'\n\nimport type { ContainerMode, ElementChild, Props, Value } from './types'\nimport type { Identifier } from '../../types'\n\n/**\n * Deprecated, as it is supported by all major browsers and Node.js >=v18\n * So its a question of time, when we will remove this polyfill\n */\nimport structuredClone from '@ungap/structured-clone'\n\nexport type * from './types'\n\nfunction ArrayComponent(props: Props) {\n  const [salt, forceUpdate] = useReducer(() => ({}), {})\n\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n  const { setLimitProps, error: limitWarning } = useArrayLimit({\n    path: props.path,\n  })\n\n  const { getValueByPath } = useDataValue()\n  const preparedProps = useMemo(() => {\n    const {\n      path,\n      countPath,\n      countPathLimit = Infinity,\n      countPathTransform,\n    } = props\n\n    if (countPath) {\n      const arrayValue = getValueByPath(path)\n      let countValue = parseFloat(getValueByPath(countPath))\n      if (!(countValue >= 0)) {\n        countValue = 0\n      }\n      if (countValue > countPathLimit) {\n        countValue = countPathLimit\n      }\n      if (arrayValue?.length !== countValue) {\n        const newValue = []\n        for (let i = 0, l = countValue; i < l; i++) {\n          const value = arrayValue?.[i]\n          newValue.push(countPathTransform?.({ value, index: i }))\n        }\n\n        return {\n          required: false,\n          ...props,\n          value: newValue,\n        }\n      }\n    }\n\n    return { required: false, ...props }\n  }, [getValueByPath, props])\n\n  const {\n    path,\n    value: arrayValue,\n    limit,\n    error,\n    withoutFlex,\n    emptyValue,\n    placeholder,\n    containerMode,\n    animate,\n    handleChange,\n    setChanged,\n    onChange,\n    children,\n  } = useFieldProps(preparedProps, {\n    // To ensure the defaultValue set on the Iterate.Array is set in the data context,\n    // and will not overwrite defaultValues set by fields inside the Iterate.Array.\n    updateContextDataInSync: true,\n  })\n\n  useMountEffect(() => {\n    // To ensure the validator is called when a new item is added\n    setChanged(true)\n  })\n\n  const idsRef = useRef<Array<Identifier>>([])\n  const isNewRef = useRef<Record<string, boolean>>({})\n  const modesRef = useRef<\n    Record<\n      Identifier,\n      {\n        current: ContainerMode\n        previous?: ContainerMode\n        options?: { omitFocusManagement?: boolean }\n      }\n    >\n  >({})\n  const valueWhileClosingRef = useRef<Value>()\n  const valueCountRef = useRef(arrayValue)\n  const containerRef = useRef<HTMLDivElement>()\n  const hadPushRef = useRef<boolean>()\n  const innerRefs = useRef<\n    Record<string, React.RefObject<HTMLDivElement>>\n  >({})\n\n  const omitFlex = withoutFlex ?? (summaryListContext || valueBlockContext)\n\n  useEffect(() => {\n    // Update inside the useEffect, to support React.StrictMode\n    valueCountRef.current = arrayValue || []\n  }, [arrayValue])\n\n  const { getNextContainerMode } = useSwitchContainerMode()\n\n  const arrayItems = useMemo(() => {\n    const list = (valueWhileClosingRef.current || arrayValue) ?? []\n    const limitedList =\n      typeof limit === 'number' ? list.slice(0, limit) : list\n\n    return limitedList.map((value, index) => {\n      const id = idsRef.current[index] || makeUniqueId()\n\n      const hasNewItems =\n        arrayValue?.length > valueCountRef.current?.length\n\n      if (!idsRef.current[index]) {\n        isNewRef.current[id] = hasNewItems\n        idsRef.current.push(id)\n      }\n\n      const isNew = isNewRef.current[id] || false\n      if (!modesRef.current[id]?.current) {\n        modesRef.current[id] = {\n          current:\n            containerMode ??\n            (isNew ? getNextContainerMode() ?? 'edit' : 'auto'),\n        }\n      }\n\n      const itemContext: IterateItemContextState = {\n        id,\n        path,\n        value,\n        index,\n        arrayValue,\n        containerRef,\n        isNew,\n        containerMode: modesRef.current[id].current,\n        previousContainerMode: modesRef.current[id].previous,\n        initialContainerMode: containerMode || 'auto',\n        modeOptions: modesRef.current[id].options,\n        switchContainerMode: (mode, options = {}) => {\n          modesRef.current[id].previous = modesRef.current[id].current\n          modesRef.current[id].current = mode\n          modesRef.current[id].options = options\n          delete isNewRef.current?.[id]\n          forceUpdate()\n        },\n        handleChange: (path, value) => {\n          const newArrayValue = structuredClone(arrayValue)\n\n          // Make sure we have a new object reference,\n          // else two new objects will be the same\n          newArrayValue[index] = { ...newArrayValue[index] }\n\n          pointer.set(newArrayValue, path, value)\n          handleChange(newArrayValue)\n        },\n        handlePush: (element) => {\n          hadPushRef.current = true\n          handleChange([...(arrayValue || []), element])\n        },\n        handleRemove: ({ keepItems = false } = {}) => {\n          if (keepItems) {\n            // Add a backup as the array value while animating\n            valueWhileClosingRef.current = arrayValue\n          }\n\n          const newArrayValue = structuredClone(arrayValue)\n          newArrayValue.splice(index, 1)\n          handleChange(newArrayValue)\n        },\n\n        // - Called after animation end\n        fulfillRemove: () => {\n          valueWhileClosingRef.current = null\n          delete modesRef.current?.[id]\n          delete isNewRef.current?.[id]\n          const findIndex = idsRef.current.indexOf(id)\n          idsRef.current.splice(findIndex, 1)\n          forceUpdate()\n        },\n\n        // - Called when cancel button press\n        restoreOriginalValue: (value) => {\n          if (value) {\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue[index] = value\n            handleChange(newArrayValue)\n          }\n        },\n      }\n\n      return itemContext\n    })\n\n    // In order to update \"valueWhileClosingRef\" we need to have \"salt\" in the deps array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [salt, arrayValue, limit, path, handleChange])\n\n  const total = arrayItems.length\n  useEffect(() => {\n    if (limit) {\n      setLimitProps({ limit, total })\n    }\n  }, [total, limit, setLimitProps])\n\n  // - Call the onChange callback when a new element is added without calling \"handlePush\"\n  useMemo(() => {\n    const last = arrayItems?.[arrayItems.length - 1]\n    if (last?.isNew && !hadPushRef.current) {\n      onChange?.(arrayValue)\n    } else {\n      hadPushRef.current = false\n    }\n  }, [arrayValue, arrayItems, onChange])\n\n  const flexProps: FlexContainerProps & {\n    innerRef: FlexContainerAllProps['innerRef']\n  } = {\n    className: classnames(\n      'dnb-forms-iterate',\n      'dnb-forms-section',\n      props?.className\n    ),\n    ...pickFlexContainerProps(props as FlexContainerProps),\n    ...pickSpacingProps(props),\n    innerRef: containerRef,\n  }\n\n  const arrayElements =\n    arrayValue === emptyValue || props?.value?.length === 0\n      ? placeholder\n      : arrayItems.map((itemProps) => {\n          const { id, value, index } = itemProps\n          const elementRef = (innerRefs.current[id] =\n            innerRefs.current[id] || createRef<HTMLDivElement>())\n\n          const renderChildren = (elementChild: ElementChild) => {\n            return typeof elementChild === 'function'\n              ? elementChild(value, index)\n              : elementChild\n          }\n\n          const contextValue = {\n            ...itemProps,\n            elementRef,\n          }\n\n          const content = Array.isArray(children)\n            ? children.map((child) => renderChildren(child))\n            : renderChildren(children)\n\n          if (omitFlex) {\n            return (\n              <IterateItemContext.Provider\n                key={`element-${id}`}\n                value={contextValue}\n              >\n                <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n              </IterateItemContext.Provider>\n            )\n          }\n\n          return (\n            <Flex.Item\n              className=\"dnb-forms-iterate__element\"\n              tabIndex={-1}\n              innerRef={elementRef}\n              key={`element-${id}`}\n            >\n              <IterateItemContext.Provider value={contextValue}>\n                <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n              </IterateItemContext.Provider>\n            </Flex.Item>\n          )\n        })\n\n  const content = omitFlex ? (\n    arrayElements\n  ) : (\n    <Flex.Stack {...flexProps}>{arrayElements}</Flex.Stack>\n  )\n\n  return (\n    <>\n      {animate ? <HeightAnimation>{content}</HeightAnimation> : content}\n\n      <FormStatus\n        show={Boolean(error || limitWarning)}\n        state={!error && limitWarning ? 'warning' : undefined}\n        shellSpace={{ top: 0, bottom: 'medium' }}\n        no_animation={false}\n      >\n        {getMessage({ content: error || limitWarning })}\n      </FormStatus>\n    </>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}
+{"version":3,"file":"Array.js","names":["React","useMemo","useRef","useEffect","useReducer","createRef","useContext","classnames","pointer","useFieldProps","makeUniqueId","Flex","FormStatus","HeightAnimation","pickSpacingProps","useMountEffect","pickFlexContainerProps","IterateItemContext","SummaryListContext","ValueBlockContext","FieldBoundaryProvider","useDataValue","useArrayLimit","useSwitchContainerMode","getMessage","structuredClone","ArrayComponent","props","_props$value","salt","forceUpdate","summaryListContext","valueBlockContext","setLimitProps","error","limitWarning","path","getValueByPath","preparedProps","countPath","countPathLimit","Infinity","countPathTransform","arrayValue","countValue","parseFloat","length","newValue","i","l","value","push","index","_objectSpread","required","limit","withoutFlex","emptyValue","placeholder","containerMode","animate","handleChange","setChanged","onChange","children","updateContextDataInSync","idsRef","isNewRef","modesRef","valueWhileClosingRef","valueCountRef","containerRef","hadPushRef","innerRefs","omitFlex","current","getNextContainerMode","arrayItems","_ref","list","limitedList","slice","map","_valueCountRef$curren","_modesRef$current$id","id","hasNewItems","isNew","_getNextContainerMode","itemContext","previousContainerMode","previous","initialContainerMode","modeOptions","options","switchContainerMode","mode","_isNewRef$current","arguments","undefined","preventUpdate","newArrayValue","set","handlePush","element","handleRemove","keepItems","splice","fulfillRemove","_modesRef$current","_isNewRef$current2","findIndex","indexOf","restoreOriginalValue","total","last","flexProps","className","innerRef","arrayElements","itemProps","elementRef","renderChildren","elementChild","contextValue","content","Array","isArray","child","createElement","Provider","key","Item","tabIndex","Stack","Fragment","show","Boolean","state","shellSpace","top","bottom","no_animation","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useRef,\n  useEffect,\n  useReducer,\n  createRef,\n  useContext,\n} from 'react'\nimport classnames from 'classnames'\nimport pointer from '../../utils/json-pointer'\nimport { useFieldProps } from '../../hooks'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport { Flex, FormStatus, HeightAnimation } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport {\n  BasicProps as FlexContainerProps,\n  Props as FlexContainerAllProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport IterateItemContext, {\n  IterateItemContextState,\n  ModeOptions,\n} from '../IterateItemContext'\nimport SummaryListContext from '../../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from '../../ValueBlock/ValueBlockContext'\nimport FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider'\nimport useDataValue from '../../hooks/useDataValue'\nimport { useArrayLimit, useSwitchContainerMode } from '../hooks'\nimport { getMessage } from '../../FieldBlock'\n\nimport type { ContainerMode, ElementChild, Props, Value } from './types'\nimport type { Identifier } from '../../types'\n\n/**\n * Deprecated, as it is supported by all major browsers and Node.js >=v18\n * So its a question of time, when we will remove this polyfill\n */\nimport structuredClone from '@ungap/structured-clone'\n\nexport type * from './types'\n\nfunction ArrayComponent(props: Props) {\n  const [salt, forceUpdate] = useReducer(() => ({}), {})\n\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n  const { setLimitProps, error: limitWarning } = useArrayLimit({\n    path: props.path,\n  })\n\n  const { getValueByPath } = useDataValue()\n  const preparedProps = useMemo(() => {\n    const {\n      path,\n      countPath,\n      countPathLimit = Infinity,\n      countPathTransform,\n    } = props\n\n    if (countPath) {\n      const arrayValue = getValueByPath(path)\n      let countValue = parseFloat(getValueByPath(countPath))\n      if (!(countValue >= 0)) {\n        countValue = 0\n      }\n      if (countValue > countPathLimit) {\n        countValue = countPathLimit\n      }\n      if (arrayValue?.length !== countValue) {\n        const newValue = []\n        for (let i = 0, l = countValue; i < l; i++) {\n          const value = arrayValue?.[i]\n          newValue.push(countPathTransform?.({ value, index: i }))\n        }\n\n        return {\n          required: false,\n          ...props,\n          value: newValue,\n        }\n      }\n    }\n\n    return { required: false, ...props }\n  }, [getValueByPath, props])\n\n  const {\n    path,\n    value: arrayValue,\n    limit,\n    error,\n    withoutFlex,\n    emptyValue,\n    placeholder,\n    containerMode,\n    animate,\n    handleChange,\n    setChanged,\n    onChange,\n    children,\n  } = useFieldProps(preparedProps, {\n    // To ensure the defaultValue set on the Iterate.Array is set in the data context,\n    // and will not overwrite defaultValues set by fields inside the Iterate.Array.\n    updateContextDataInSync: true,\n  })\n\n  useMountEffect(() => {\n    // To ensure the validator is called when a new item is added\n    setChanged(true)\n  })\n\n  const idsRef = useRef<Array<Identifier>>([])\n  const isNewRef = useRef<Record<string, boolean>>({})\n  const modesRef = useRef<\n    Record<\n      Identifier,\n      {\n        current: ContainerMode\n        previous?: ContainerMode\n        options?: ModeOptions\n      }\n    >\n  >({})\n  const valueWhileClosingRef = useRef<Value>()\n  const valueCountRef = useRef(arrayValue)\n  const containerRef = useRef<HTMLDivElement>()\n  const hadPushRef = useRef<boolean>()\n  const innerRefs = useRef<\n    Record<string, React.RefObject<HTMLDivElement>>\n  >({})\n\n  const omitFlex = withoutFlex ?? (summaryListContext || valueBlockContext)\n\n  useEffect(() => {\n    // Update inside the useEffect, to support React.StrictMode\n    valueCountRef.current = arrayValue || []\n  }, [arrayValue])\n\n  const { getNextContainerMode } = useSwitchContainerMode()\n\n  const arrayItems = useMemo(() => {\n    const list = (valueWhileClosingRef.current || arrayValue) ?? []\n    const limitedList =\n      typeof limit === 'number' ? list.slice(0, limit) : list\n\n    return limitedList.map((value, index) => {\n      const id = idsRef.current[index] || makeUniqueId()\n\n      const hasNewItems =\n        arrayValue?.length > valueCountRef.current?.length\n\n      if (!idsRef.current[index]) {\n        isNewRef.current[id] = hasNewItems\n        idsRef.current.push(id)\n      }\n\n      const isNew = isNewRef.current[id] || false\n      if (!modesRef.current[id]?.current) {\n        modesRef.current[id] = {\n          current:\n            containerMode ??\n            (isNew ? getNextContainerMode() ?? 'edit' : 'auto'),\n        }\n      }\n\n      const itemContext: IterateItemContextState = {\n        id,\n        path,\n        value,\n        index,\n        arrayValue,\n        containerRef,\n        isNew,\n        containerMode: modesRef.current[id].current,\n        previousContainerMode: modesRef.current[id].previous,\n        initialContainerMode: containerMode || 'auto',\n        modeOptions: modesRef.current[id].options,\n        switchContainerMode: (mode, options = {}) => {\n          modesRef.current[id].previous = modesRef.current[id].current\n          modesRef.current[id].current = mode\n          modesRef.current[id].options = options\n          delete isNewRef.current?.[id]\n          if (options?.preventUpdate !== true) {\n            forceUpdate()\n          }\n        },\n        handleChange: (path, value) => {\n          const newArrayValue = structuredClone(arrayValue)\n\n          // Make sure we have a new object reference,\n          // else two new objects will be the same\n          newArrayValue[index] = { ...newArrayValue[index] }\n\n          pointer.set(newArrayValue, path, value)\n          handleChange(newArrayValue)\n        },\n        handlePush: (element) => {\n          hadPushRef.current = true\n          handleChange([...(arrayValue || []), element])\n        },\n        handleRemove: ({ keepItems = false } = {}) => {\n          if (keepItems) {\n            // Add a backup as the array value while animating\n            valueWhileClosingRef.current = arrayValue\n          }\n\n          const newArrayValue = structuredClone(arrayValue)\n          newArrayValue.splice(index, 1)\n          handleChange(newArrayValue)\n        },\n\n        // - Called after animation end\n        fulfillRemove: () => {\n          valueWhileClosingRef.current = null\n          delete modesRef.current?.[id]\n          delete isNewRef.current?.[id]\n          const findIndex = idsRef.current.indexOf(id)\n          idsRef.current.splice(findIndex, 1)\n          forceUpdate()\n        },\n\n        // - Called when cancel button press\n        restoreOriginalValue: (value) => {\n          if (value) {\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue[index] = value\n            handleChange(newArrayValue)\n          }\n        },\n      }\n\n      return itemContext\n    })\n\n    // In order to update \"valueWhileClosingRef\" we need to have \"salt\" in the deps array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [salt, arrayValue, limit, path, handleChange])\n\n  const total = arrayItems.length\n  useEffect(() => {\n    if (limit) {\n      setLimitProps({ limit, total })\n    }\n  }, [total, limit, setLimitProps])\n\n  // - Call the onChange callback when a new element is added without calling \"handlePush\"\n  useMemo(() => {\n    const last = arrayItems?.[arrayItems.length - 1]\n    if (last?.isNew && !hadPushRef.current) {\n      onChange?.(arrayValue)\n    } else {\n      hadPushRef.current = false\n    }\n  }, [arrayValue, arrayItems, onChange])\n\n  const flexProps: FlexContainerProps & {\n    innerRef: FlexContainerAllProps['innerRef']\n  } = {\n    className: classnames(\n      'dnb-forms-iterate',\n      'dnb-forms-section',\n      props?.className\n    ),\n    ...pickFlexContainerProps(props as FlexContainerProps),\n    ...pickSpacingProps(props),\n    innerRef: containerRef,\n  }\n\n  const arrayElements =\n    arrayValue === emptyValue || props?.value?.length === 0\n      ? placeholder\n      : arrayItems.map((itemProps) => {\n          const { id, value, index } = itemProps\n          const elementRef = (innerRefs.current[id] =\n            innerRefs.current[id] || createRef<HTMLDivElement>())\n\n          const renderChildren = (elementChild: ElementChild) => {\n            return typeof elementChild === 'function'\n              ? elementChild(value, index)\n              : elementChild\n          }\n\n          const contextValue = {\n            ...itemProps,\n            elementRef,\n          }\n\n          const content = Array.isArray(children)\n            ? children.map((child) => renderChildren(child))\n            : renderChildren(children)\n\n          if (omitFlex) {\n            return (\n              <IterateItemContext.Provider\n                key={`element-${id}`}\n                value={contextValue}\n              >\n                <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n              </IterateItemContext.Provider>\n            )\n          }\n\n          return (\n            <Flex.Item\n              className=\"dnb-forms-iterate__element\"\n              tabIndex={-1}\n              innerRef={elementRef}\n              key={`element-${id}`}\n            >\n              <IterateItemContext.Provider value={contextValue}>\n                <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n              </IterateItemContext.Provider>\n            </Flex.Item>\n          )\n        })\n\n  const content = omitFlex ? (\n    arrayElements\n  ) : (\n    <Flex.Stack {...flexProps}>{arrayElements}</Flex.Stack>\n  )\n\n  return (\n    <>\n      {animate ? <HeightAnimation>{content}</HeightAnimation> : content}\n\n      <FormStatus\n        show={Boolean(error || limitWarning)}\n        state={!error && limitWarning ? 'warning' : undefined}\n        shellSpace={{ top: 0, bottom: 'medium' }}\n        no_animation={false}\n      >\n        {getMessage({ content: error || limitWarning })}\n      </FormStatus>\n    </>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}

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

@@ -3,12 +3,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["mode", "open", "ariaLabel", "onAnimationEnd", "className", "children", "openDelay", "variant"];
-import React, { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
+import React, { useCallback, useContext, useReducer, useRef } from 'react';
 import classnames from 'classnames';
 import { Flex, HeightAnimation } from '../../../../components';
 import IterateItemContext from '../IterateItemContext';
 import ArrayItemAreaContext from './ArrayItemAreaContext';
 import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext';
+const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 function ArrayItemArea(props) {
   const [, forceUpdate] = useReducer(() => ({}), {});
   const {
@@ -30,31 +31,43 @@ function ArrayItemArea(props) {
   localContextRef.current = useContext(IterateItemContext) || {};
   const nextFocusElementRef = useRef();
   const {
-    isNew,
-    value
+    isNew
   } = localContextRef.current;
-  if (hasSubmitError || !value) {
+  const determineMode = useCallback(() => {
+    const {
+      value,
+      initialContainerMode
+    } = localContextRef.current;
+    if (initialContainerMode === 'auto') {
+      if (hasSubmitError || hasError || !value || typeof value === 'object' && Object.keys(value).length === 0) {
+        return 'edit';
+      }
+    }
+  }, [hasError, hasSubmitError]);
+  if (determineMode() === 'edit') {
     localContextRef.current.containerMode = 'edit';
+    if (!localContextRef.current.modeOptions) {
+      localContextRef.current.modeOptions = {};
+    }
+    localContextRef.current.modeOptions.omitFocusManagement = true;
   }
   if (localContextRef.current.containerMode === 'auto') {
     localContextRef.current.containerMode = 'view';
   }
-  const determineMode = useCallback(() => {
-    const {
-      initialContainerMode,
-      switchContainerMode
-    } = localContextRef.current;
-    if (mode === 'edit' && !hasSubmitError && initialContainerMode === 'auto') {
-      if (hasError && !isNew) {
-        switchContainerMode('edit', {
-          omitFocusManagement: true
+  useLayoutEffect(() => {
+    if (mode === 'edit') {
+      const editMode = determineMode();
+      if (editMode) {
+        const {
+          switchContainerMode
+        } = localContextRef.current;
+        switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode(editMode, {
+          omitFocusManagement: true,
+          preventUpdate: true
         });
       }
     }
-  }, [hasError, hasSubmitError, isNew, mode]);
-  useEffect(() => {
-    determineMode();
-  }, [determineMode]);
+  }, [determineMode, mode]);
   const {
     handleRemove,
     index,
@@ -67,7 +80,7 @@ function ArrayItemArea(props) {
     openRef.current = open;
     forceUpdate();
   }, []);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!isRemoving.current) {
       if (typeof open !== 'undefined') {
         setOpenState(open);

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayItemArea.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","IterateItemContext","ArrayItemAreaContext","FieldBoundaryContext","ArrayItemArea","props","forceUpdate","mode","open","ariaLabel","onAnimationEnd","className","children","openDelay","variant","restProps","_objectWithoutProperties","_excluded","localContextRef","hasError","hasSubmitError","current","nextFocusElementRef","isNew","value","containerMode","determineMode","initialContainerMode","switchContainerMode","omitFocusManagement","handleRemove","index","previousContainerMode","openRef","isRemoving","setOpenState","setTimeout","setFocus","state","_localContextRef$curr","modeOptions","_localContextRef$curr2","_localContextRef$curr3","_localContextRef$curr4","elementRef","focus","call","_nextFocusElementRef$","_nextFocusElementRef$2","handleAnimationEnd","_localContextRef$curr5","_localContextRef$curr6","fulfillRemove","handleRemoveItem","Array","from","parentElement","childNodes","at","e","keepItems","createElement","Provider","duration","keepInDOM","Stack","_extends","element","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/ArrayItemArea.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 IterateItemContext, {\n  IterateItemContextState,\n} from '../IterateItemContext'\nimport ArrayItemAreaContext from './ArrayItemAreaContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { ContainerMode } from './types'\n\nexport type ArrayItemAreaProps = {\n  /**\n   * Defines the variant of the ViewContainer, EditContainer or PushContainer. Can be `outline` or `basic`.\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  openDelay?: number\n} & ArrayItemAreaProps\n\nfunction ArrayItemArea(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    openDelay = 100,\n    variant = 'outline',\n    ...restProps\n  } = props\n\n  const localContextRef = useRef<IterateItemContextState>()\n  const { hasError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n  localContextRef.current = useContext(IterateItemContext) || {}\n  const nextFocusElementRef = useRef<HTMLElement>()\n  const { isNew, value } = localContextRef.current\n  if (hasSubmitError || !value) {\n    localContextRef.current.containerMode = 'edit'\n  }\n  if (localContextRef.current.containerMode === 'auto') {\n    localContextRef.current.containerMode = 'view'\n  }\n\n  const determineMode = useCallback(() => {\n    const { initialContainerMode, switchContainerMode } =\n      localContextRef.current\n    if (\n      mode === 'edit' &&\n      !hasSubmitError &&\n      initialContainerMode === 'auto'\n    ) {\n      // - Set the container mode to \"edit\" if we have an error\n      if (hasError && !isNew) {\n        switchContainerMode('edit', { omitFocusManagement: true })\n      }\n    }\n  }, [hasError, hasSubmitError, isNew, mode])\n\n  useEffect(() => {\n    determineMode()\n  }, [determineMode])\n\n  const { handleRemove, index, previousContainerMode, containerMode } =\n    localContextRef.current\n\n  const openRef = useRef(open ?? (containerMode === mode && !isNew))\n  const isRemoving = useRef(false)\n\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    if (!isRemoving.current) {\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          if (isNew) {\n            setTimeout(() => {\n              setOpenState(containerMode === mode)\n            }, openDelay) // in order to apply the animation\n          } else {\n            setOpenState(containerMode === mode)\n          }\n        }\n      }\n    }\n  }, [containerMode, isNew, mode, open, openDelay, setOpenState])\n\n  const setFocus = useCallback(\n    (state) => {\n      if (\n        localContextRef.current.modeOptions?.omitFocusManagement !==\n          true &&\n        !hasSubmitError &&\n        containerMode === mode && // ensure we match the correct mode\n        containerMode !== previousContainerMode // ensure we have a new mode\n      ) {\n        if (state === 'opened') {\n          localContextRef.current.elementRef?.current?.focus?.()\n        } else if (state === 'closed') {\n          nextFocusElementRef.current?.focus?.()\n        }\n      }\n    },\n    [containerMode, hasSubmitError, mode, previousContainerMode]\n  )\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      if (!openRef.current && isRemoving.current) {\n        isRemoving.current = false\n        localContextRef.current.fulfillRemove?.()\n      }\n\n      setFocus(state)\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, setFocus]\n  )\n\n  const handleRemoveItem = useCallback(() => {\n    try {\n      // Because \"previousElementSibling\" did not work in Jest/JSDOM\n      nextFocusElementRef.current = Array.from(\n        localContextRef.current.elementRef.current.parentElement.childNodes\n      ).at(index - 1) as HTMLElement\n    } catch (e) {\n      //\n    }\n    isRemoving.current = true\n    handleRemove?.({ keepItems: true })\n    setOpenState(false)\n  }, [handleRemove, index, setOpenState])\n\n  return (\n    <ArrayItemAreaContext.Provider value={{ handleRemoveItem }}>\n      <HeightAnimation\n        className={classnames(\n          'dnb-forms-section-block',\n          variant && `dnb-forms-section-block--variant-${variant}`,\n          isNew && 'dnb-forms-section-block--new',\n          hasSubmitError && '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        >\n          {children}\n        </Flex.Stack>\n      </HeightAnimation>\n    </ArrayItemAreaContext.Provider>\n  )\n}\n\nArrayItemArea._supportsSpacingProps = true\nexport default ArrayItemArea\n"],"mappings":"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"}
+{"version":3,"file":"ArrayItemArea.js","names":["React","useCallback","useContext","useReducer","useRef","classnames","Flex","HeightAnimation","IterateItemContext","ArrayItemAreaContext","FieldBoundaryContext","useLayoutEffect","window","useEffect","ArrayItemArea","props","forceUpdate","mode","open","ariaLabel","onAnimationEnd","className","children","openDelay","variant","restProps","_objectWithoutProperties","_excluded","localContextRef","hasError","hasSubmitError","current","nextFocusElementRef","isNew","determineMode","value","initialContainerMode","Object","keys","length","containerMode","modeOptions","omitFocusManagement","editMode","switchContainerMode","preventUpdate","handleRemove","index","previousContainerMode","openRef","isRemoving","setOpenState","setTimeout","setFocus","state","_localContextRef$curr","_localContextRef$curr2","_localContextRef$curr3","_localContextRef$curr4","elementRef","focus","call","_nextFocusElementRef$","_nextFocusElementRef$2","handleAnimationEnd","_localContextRef$curr5","_localContextRef$curr6","fulfillRemove","handleRemoveItem","Array","from","parentElement","childNodes","at","e","keepItems","createElement","Provider","duration","keepInDOM","Stack","_extends","element","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/ArrayItemArea.tsx"],"sourcesContent":["import React, { useCallback, useContext, useReducer, useRef } from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../components'\nimport IterateItemContext, {\n  IterateItemContextState,\n} from '../IterateItemContext'\nimport ArrayItemAreaContext from './ArrayItemAreaContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { ContainerMode } from './types'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type ArrayItemAreaProps = {\n  /**\n   * Defines the variant of the ViewContainer, EditContainer or PushContainer. Can be `outline` or `basic`.\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  openDelay?: number\n} & ArrayItemAreaProps\n\nfunction ArrayItemArea(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    openDelay = 100,\n    variant = 'outline',\n    ...restProps\n  } = props\n\n  const localContextRef = useRef<IterateItemContextState>()\n  const { hasError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n  localContextRef.current = useContext(IterateItemContext) || {}\n  const nextFocusElementRef = useRef<HTMLElement>()\n  const { isNew } = localContextRef.current\n\n  const determineMode = useCallback(() => {\n    const { value, initialContainerMode } = localContextRef.current\n    if (initialContainerMode === 'auto') {\n      // - Set the container mode to \"edit\" if we have an error\n      if (\n        hasSubmitError ||\n        hasError ||\n        !value ||\n        (typeof value === 'object' && Object.keys(value).length === 0)\n      ) {\n        return 'edit'\n      }\n    }\n  }, [hasError, hasSubmitError])\n\n  if (determineMode() === 'edit') {\n    localContextRef.current.containerMode = 'edit'\n    if (!localContextRef.current.modeOptions) {\n      localContextRef.current.modeOptions = {}\n    }\n    localContextRef.current.modeOptions.omitFocusManagement = true\n  }\n  if (localContextRef.current.containerMode === 'auto') {\n    localContextRef.current.containerMode = 'view'\n  }\n\n  useLayoutEffect(() => {\n    if (mode === 'edit') {\n      const editMode = determineMode()\n      if (editMode) {\n        const { switchContainerMode } = localContextRef.current\n        switchContainerMode?.(editMode, {\n          omitFocusManagement: true,\n          preventUpdate: true,\n        })\n      }\n    }\n  }, [determineMode, mode])\n\n  const { handleRemove, index, previousContainerMode, containerMode } =\n    localContextRef.current\n\n  const openRef = useRef(open ?? (containerMode === mode && !isNew))\n  const isRemoving = useRef(false)\n\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useLayoutEffect(() => {\n    if (!isRemoving.current) {\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          if (isNew) {\n            setTimeout(() => {\n              setOpenState(containerMode === mode)\n            }, openDelay) // in order to apply the animation\n          } else {\n            setOpenState(containerMode === mode)\n          }\n        }\n      }\n    }\n  }, [containerMode, isNew, mode, open, openDelay, setOpenState])\n\n  const setFocus = useCallback(\n    (state) => {\n      if (\n        localContextRef.current.modeOptions?.omitFocusManagement !==\n          true &&\n        !hasSubmitError &&\n        containerMode === mode && // ensure we match the correct mode\n        containerMode !== previousContainerMode // ensure we have a new mode\n      ) {\n        if (state === 'opened') {\n          localContextRef.current.elementRef?.current?.focus?.()\n        } else if (state === 'closed') {\n          nextFocusElementRef.current?.focus?.()\n        }\n      }\n    },\n    [containerMode, hasSubmitError, mode, previousContainerMode]\n  )\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      if (!openRef.current && isRemoving.current) {\n        isRemoving.current = false\n        localContextRef.current.fulfillRemove?.()\n      }\n\n      setFocus(state)\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, setFocus]\n  )\n\n  const handleRemoveItem = useCallback(() => {\n    try {\n      // Because \"previousElementSibling\" did not work in Jest/JSDOM\n      nextFocusElementRef.current = Array.from(\n        localContextRef.current.elementRef.current.parentElement.childNodes\n      ).at(index - 1) as HTMLElement\n    } catch (e) {\n      //\n    }\n    isRemoving.current = true\n    handleRemove?.({ keepItems: true })\n    setOpenState(false)\n  }, [handleRemove, index, setOpenState])\n\n  return (\n    <ArrayItemAreaContext.Provider value={{ handleRemoveItem }}>\n      <HeightAnimation\n        className={classnames(\n          'dnb-forms-section-block',\n          variant && `dnb-forms-section-block--variant-${variant}`,\n          isNew && 'dnb-forms-section-block--new',\n          hasSubmitError && '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        >\n          {children}\n        </Flex.Stack>\n      </HeightAnimation>\n    </ArrayItemAreaContext.Provider>\n  )\n}\n\nArrayItemArea._supportsSpacingProps = true\nexport default ArrayItemArea\n"],"mappings":"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"}

package/extensions/forms/Iterate/EditContainer/EditContainer.js

@@ -15,6 +15,7 @@ import Toolbar from '../Toolbar';
 import { useSwitchContainerMode } from '../hooks';
 import DoneButton from './DoneButton';
 import CancelButton, { useWasNew } from './CancelButton';
+import { replaceItemNo } from '../ItemNo';
 export default function EditContainer(props) {
   var _toolbarElement;
   const {
@@ -57,18 +58,16 @@ export function EditContainerWithoutToolbar(props) {
     isNew,
     containerMode
   });
-  let itemTitle = wasNew && titleWhenNew ? titleWhenNew : title;
-  let ariaLabel = useMemo(() => convertJsxToString(itemTitle), [itemTitle]);
-  if (ariaLabel.includes('{itemN')) {
-    itemTitle = ariaLabel = ariaLabel.replace(/\{itemN(r|o)\}/g, String(index + 1));
-  }
+  const itemTitle = useMemo(() => {
+    return replaceItemNo(wasNew && titleWhenNew ? titleWhenNew : title, index);
+  }, [index, title, titleWhenNew, wasNew]);
   useSwitchContainerMode({
     path
   });
   return React.createElement(ArrayItemArea, _extends({
     mode: "edit",
     className: classnames('dnb-forms-section-edit-block', className),
-    ariaLabel: ariaLabel
+    ariaLabel: convertJsxToString(itemTitle)
   }, restProps), itemTitle && React.createElement(Lead, {
     size: "basis"
   }, itemTitle), children, toolbar);

package/extensions/forms/Iterate/EditContainer/EditContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditContainer.js","names":["React","useContext","useMemo","classnames","convertJsxToString","Lead","IterateItemContext","ArrayItemArea","Toolbar","useSwitchContainerMode","DoneButton","CancelButton","useWasNew","EditContainer","props","_toolbarElement","toolbar","toolbarVariant","children","rest","_objectWithoutProperties","_excluded","arrayValue","toolbarElement","length","createElement","Fragment","hasToolbar","Children","toArray","some","child","EditContainerWithoutToolbar","_extends","_Toolbar","containerMode","isNew","index","path","_ref","className","title","titleWhenNew","restProps","_excluded2","wasNew","itemTitle","ariaLabel","includes","replace","String","mode","size","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditContainer.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Lead } from '../../../../elements'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport IterateItemContext from '../IterateItemContext'\nimport ArrayItemArea, { ArrayItemAreaProps } from '../Array/ArrayItemArea'\nimport Toolbar from '../Toolbar'\nimport { useSwitchContainerMode } from '../hooks'\nimport DoneButton from './DoneButton'\nimport CancelButton, { useWasNew } from './CancelButton'\n\nexport type Props = {\n  /**\n   * The title of the EditContainer.\n   */\n  title?: React.ReactNode\n\n  /**\n   * The title for a new item show within the EditContainer.\n   */\n  titleWhenNew?: React.ReactNode\n\n  /**\n   * If the EditContainer is open or not.\n   */\n  open?: boolean\n\n  /**\n   * An alternative toolbar to be shown in the EditContainer.\n   */\n  toolbar?: React.ReactNode\n  /**\n   * The variant of the toolbar.\n   */\n  toolbarVariant?: 'minimumOneItem'\n}\n\nexport type AllProps = Props & FlexContainerProps & ArrayItemAreaProps\n\nexport default function EditContainer(props: AllProps) {\n  const { toolbar, toolbarVariant, children, ...rest } = props\n  const { arrayValue } = useContext(IterateItemContext)\n\n  let toolbarElement = toolbar\n  if (toolbarVariant === 'minimumOneItem' && arrayValue.length <= 1) {\n    toolbarElement = <></>\n  }\n\n  const hasToolbar =\n    !toolbarElement &&\n    React.Children.toArray(children).some((child) => {\n      return child?.['type'] === Toolbar\n    })\n\n  return (\n    <EditContainerWithoutToolbar\n      toolbar={\n        hasToolbar\n          ? null\n          : toolbarElement ?? (\n              <Toolbar>\n                <DoneButton />\n                <CancelButton />\n              </Toolbar>\n            )\n      }\n      {...rest}\n    >\n      {children}\n    </EditContainerWithoutToolbar>\n  )\n}\n\nexport function EditContainerWithoutToolbar(\n  props: Props & FlexContainerProps & { toolbar?: React.ReactNode }\n) {\n  const { containerMode, isNew, index, path } =\n    useContext(IterateItemContext)\n\n  const {\n    children,\n    className,\n    title,\n    titleWhenNew,\n    toolbar,\n    ...restProps\n  } = props || {}\n\n  const wasNew = useWasNew({ isNew, containerMode })\n  let itemTitle = wasNew && titleWhenNew ? titleWhenNew : title\n  let ariaLabel = useMemo(() => convertJsxToString(itemTitle), [itemTitle])\n  if (ariaLabel.includes('{itemN')) {\n    /**\n     * {itemNr} is deprecated, and can be removed in v11 in favor of {itemNo}\n     * So in v11 we can use '{itemNo}' instead of a regex\n     */\n    itemTitle = ariaLabel = ariaLabel.replace(\n      /\\{itemN(r|o)\\}/g,\n      String(index + 1)\n    )\n  }\n\n  useSwitchContainerMode({ path })\n\n  return (\n    <ArrayItemArea\n      mode=\"edit\"\n      className={classnames('dnb-forms-section-edit-block', className)}\n      ariaLabel={ariaLabel}\n      {...restProps}\n    >\n      {itemTitle && <Lead size=\"basis\">{itemTitle}</Lead>}\n      {children}\n      {toolbar}\n    </ArrayItemArea>\n  )\n}\n\nEditContainer.DoneButton = DoneButton\nEditContainer.CancelButton = CancelButton\n\nEditContainer._supportsSpacingProps = true\nEditContainerWithoutToolbar._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"EditContainer.js","names":["React","useContext","useMemo","classnames","convertJsxToString","Lead","IterateItemContext","ArrayItemArea","Toolbar","useSwitchContainerMode","DoneButton","CancelButton","useWasNew","replaceItemNo","EditContainer","props","_toolbarElement","toolbar","toolbarVariant","children","rest","_objectWithoutProperties","_excluded","arrayValue","toolbarElement","length","createElement","Fragment","hasToolbar","Children","toArray","some","child","EditContainerWithoutToolbar","_extends","_Toolbar","containerMode","isNew","index","path","_ref","className","title","titleWhenNew","restProps","_excluded2","wasNew","itemTitle","mode","ariaLabel","size","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditContainer.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Lead } from '../../../../elements'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport IterateItemContext from '../IterateItemContext'\nimport ArrayItemArea, { ArrayItemAreaProps } from '../Array/ArrayItemArea'\nimport Toolbar from '../Toolbar'\nimport { useSwitchContainerMode } from '../hooks'\nimport DoneButton from './DoneButton'\nimport CancelButton, { useWasNew } from './CancelButton'\nimport { replaceItemNo } from '../ItemNo'\n\nexport type Props = {\n  /**\n   * The title of the EditContainer.\n   */\n  title?: React.ReactNode\n\n  /**\n   * The title for a new item show within the EditContainer.\n   */\n  titleWhenNew?: React.ReactNode\n\n  /**\n   * If the EditContainer is open or not.\n   */\n  open?: boolean\n\n  /**\n   * An alternative toolbar to be shown in the EditContainer.\n   */\n  toolbar?: React.ReactNode\n  /**\n   * The variant of the toolbar.\n   */\n  toolbarVariant?: 'minimumOneItem'\n}\n\nexport type AllProps = Props & FlexContainerProps & ArrayItemAreaProps\n\nexport default function EditContainer(props: AllProps) {\n  const { toolbar, toolbarVariant, children, ...rest } = props\n  const { arrayValue } = useContext(IterateItemContext)\n\n  let toolbarElement = toolbar\n  if (toolbarVariant === 'minimumOneItem' && arrayValue.length <= 1) {\n    toolbarElement = <></>\n  }\n\n  const hasToolbar =\n    !toolbarElement &&\n    React.Children.toArray(children).some((child) => {\n      return child?.['type'] === Toolbar\n    })\n\n  return (\n    <EditContainerWithoutToolbar\n      toolbar={\n        hasToolbar\n          ? null\n          : toolbarElement ?? (\n              <Toolbar>\n                <DoneButton />\n                <CancelButton />\n              </Toolbar>\n            )\n      }\n      {...rest}\n    >\n      {children}\n    </EditContainerWithoutToolbar>\n  )\n}\n\nexport function EditContainerWithoutToolbar(\n  props: Props & FlexContainerProps & { toolbar?: React.ReactNode }\n) {\n  const { containerMode, isNew, index, path } =\n    useContext(IterateItemContext)\n\n  const {\n    children,\n    className,\n    title,\n    titleWhenNew,\n    toolbar,\n    ...restProps\n  } = props || {}\n\n  const wasNew = useWasNew({ isNew, containerMode })\n  const itemTitle = useMemo(() => {\n    return replaceItemNo(\n      wasNew && titleWhenNew ? titleWhenNew : title,\n      index\n    )\n  }, [index, title, titleWhenNew, wasNew])\n\n  useSwitchContainerMode({ path })\n\n  return (\n    <ArrayItemArea\n      mode=\"edit\"\n      className={classnames('dnb-forms-section-edit-block', className)}\n      ariaLabel={convertJsxToString(itemTitle)}\n      {...restProps}\n    >\n      {itemTitle && <Lead size=\"basis\">{itemTitle}</Lead>}\n      {children}\n      {toolbar}\n    </ArrayItemArea>\n  )\n}\n\nEditContainer.DoneButton = DoneButton\nEditContainer.CancelButton = CancelButton\n\nEditContainer._supportsSpacingProps = true\nEditContainerWithoutToolbar._supportsSpacingProps = true\n"],"mappings":"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"}

package/extensions/forms/Iterate/ItemNo/ItemNo.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare function ItemNo({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ItemNo {
+    var _supportsSpacingProps: boolean;
+}
+export declare function replaceItemNo(children: React.ReactNode, index: number): string | React.ReactNode;
+export default ItemNo;

package/extensions/forms/Iterate/ItemNo/ItemNo.js

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import { useItem } from '../hooks';
+import { convertJsxToString } from '../../../../shared/component-helper';
+function ItemNo(_ref) {
+  let {
+    children
+  } = _ref;
+  const {
+    index
+  } = useItem();
+  children = useMemo(() => replaceItemNo(children, index), [children, index]);
+  return React.createElement(React.Fragment, null, replaceItemNo(children, index));
+}
+export function replaceItemNo(children, index) {
+  const text = typeof children !== 'string' ? convertJsxToString(children) : children;
+  if (text.includes('{itemN')) {
+    return text.replace(/\{itemN(r|o)\}/g, String(index + 1));
+  }
+  return children;
+}
+ItemNo._supportsSpacingProps = false;
+export default ItemNo;
+//# sourceMappingURL=ItemNo.js.map

package/extensions/forms/Iterate/ItemNo/ItemNo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemNo.js","names":["React","useMemo","useItem","convertJsxToString","ItemNo","_ref","children","index","replaceItemNo","createElement","Fragment","text","includes","replace","String","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ItemNo/ItemNo.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { useItem } from '../hooks'\nimport { convertJsxToString } from '../../../../shared/component-helper'\n\nfunction ItemNo({ children }) {\n  const { index } = useItem()\n\n  children = useMemo(\n    () => replaceItemNo(children, index),\n    [children, index]\n  )\n\n  return <>{replaceItemNo(children, index)}</>\n}\n\nexport function replaceItemNo(\n  children: React.ReactNode,\n  index: number\n): string | React.ReactNode {\n  const text =\n    typeof children !== 'string' ? convertJsxToString(children) : children\n\n  if (text.includes('{itemN')) {\n    /**\n     * {itemNr} is deprecated, and can be removed in v11 in favor of {itemNo}\n     * So in v11 we can use '{itemNo}' instead of a regex\n     */\n    return text.replace(/\\{itemN(r|o)\\}/g, String(index + 1))\n  }\n\n  return children\n}\n\nItemNo._supportsSpacingProps = false\nexport default ItemNo\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,OAAO,QAAQ,UAAU;AAClC,SAASC,kBAAkB,QAAQ,qCAAqC;AAExE,SAASC,MAAMA,CAAAC,IAAA,EAAe;EAAA,IAAd;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAC1B,MAAM;IAAEE;EAAM,CAAC,GAAGL,OAAO,CAAC,CAAC;EAE3BI,QAAQ,GAAGL,OAAO,CAChB,MAAMO,aAAa,CAACF,QAAQ,EAAEC,KAAK,CAAC,EACpC,CAACD,QAAQ,EAAEC,KAAK,CAClB,CAAC;EAED,OAAOP,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QAAGF,aAAa,CAACF,QAAQ,EAAEC,KAAK,CAAI,CAAC;AAC9C;AAEA,OAAO,SAASC,aAAaA,CAC3BF,QAAyB,EACzBC,KAAa,EACa;EAC1B,MAAMI,IAAI,GACR,OAAOL,QAAQ,KAAK,QAAQ,GAAGH,kBAAkB,CAACG,QAAQ,CAAC,GAAGA,QAAQ;EAExE,IAAIK,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAK3B,OAAOD,IAAI,CAACE,OAAO,CAAC,iBAAiB,EAAEC,MAAM,CAACP,KAAK,GAAG,CAAC,CAAC,CAAC;EAC3D;EAEA,OAAOD,QAAQ;AACjB;AAEAF,MAAM,CAACW,qBAAqB,GAAG,KAAK;AACpC,eAAeX,MAAM"}

package/extensions/forms/Iterate/ItemNo/index.d.ts

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

package/extensions/forms/Iterate/ItemNo/index.js

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

package/extensions/forms/Iterate/ItemNo/index.js.map

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

package/extensions/forms/Iterate/IterateItemContext.d.ts

@@ -3,6 +3,7 @@ import { Path } from '../types';
 import { ContainerMode } from './Array/types';
 export type ModeOptions = {
     omitFocusManagement?: boolean;
+    preventUpdate?: boolean;
 };
 export interface IterateItemContextState {
     id?: string;

package/extensions/forms/Iterate/IterateItemContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"IterateItemContext.js","names":["React","IterateItemContext","createContext","undefined"],"sources":["../../../../../src/extensions/forms/Iterate/IterateItemContext.ts"],"sourcesContent":["import React from 'react'\nimport { Path } from '../types'\nimport { ContainerMode } from './Array/types'\n\nexport type ModeOptions = {\n  omitFocusManagement?: boolean\n}\n\nexport interface IterateItemContextState {\n  id?: string\n  index?: number\n  value?: unknown\n  isNew?: boolean\n  path?: Path\n  arrayValue?: Array<unknown>\n  containerMode?: ContainerMode\n  previousContainerMode?: ContainerMode\n  initialContainerMode?: ContainerMode\n  containerRef?: React.RefObject<HTMLDivElement>\n  elementRef?: React.RefObject<HTMLDivElement>\n  modeOptions?: ModeOptions\n  switchContainerMode?: (\n    mode: ContainerMode,\n    options?: ModeOptions\n  ) => void\n  handleChange?: (path: Path, value: unknown) => void\n  handleRemove?: ({ keepItems }?: { keepItems?: boolean }) => void\n  handlePush?: (value: unknown) => void\n  restoreOriginalValue?: (value: unknown) => void\n  fulfillRemove?: () => void\n}\n\nconst IterateItemContext = React.createContext<\n  IterateItemContextState | undefined\n>(undefined)\n\nexport default IterateItemContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAgCzB,MAAMC,kBAAkB,GAAGD,KAAK,CAACE,aAAa,CAE5CC,SAAS,CAAC;AAEZ,eAAeF,kBAAkB"}
+{"version":3,"file":"IterateItemContext.js","names":["React","IterateItemContext","createContext","undefined"],"sources":["../../../../../src/extensions/forms/Iterate/IterateItemContext.ts"],"sourcesContent":["import React from 'react'\nimport { Path } from '../types'\nimport { ContainerMode } from './Array/types'\n\nexport type ModeOptions = {\n  omitFocusManagement?: boolean\n  preventUpdate?: boolean\n}\n\nexport interface IterateItemContextState {\n  id?: string\n  index?: number\n  value?: unknown\n  isNew?: boolean\n  path?: Path\n  arrayValue?: Array<unknown>\n  containerMode?: ContainerMode\n  previousContainerMode?: ContainerMode\n  initialContainerMode?: ContainerMode\n  containerRef?: React.RefObject<HTMLDivElement>\n  elementRef?: React.RefObject<HTMLDivElement>\n  modeOptions?: ModeOptions\n  switchContainerMode?: (\n    mode: ContainerMode,\n    options?: ModeOptions\n  ) => void\n  handleChange?: (path: Path, value: unknown) => void\n  handleRemove?: ({ keepItems }?: { keepItems?: boolean }) => void\n  handlePush?: (value: unknown) => void\n  restoreOriginalValue?: (value: unknown) => void\n  fulfillRemove?: () => void\n}\n\nconst IterateItemContext = React.createContext<\n  IterateItemContextState | undefined\n>(undefined)\n\nexport default IterateItemContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAiCzB,MAAMC,kBAAkB,GAAGD,KAAK,CAACE,aAAa,CAE5CC,SAAS,CAAC;AAEZ,eAAeF,kBAAkB"}

package/extensions/forms/Iterate/PushContainer/PushContainer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Path } from '../../types';
+import { OnCommit, Path } from '../../types';
 import { SpacingProps } from '../../../../shared/types';
 import { ArrayItemAreaProps } from '../Array/ArrayItemArea';
 export type Props = {
@@ -21,13 +21,29 @@ export type Props = {
      */
     showOpenButtonWhen?: (list: unknown[]) => boolean;
     /**
-     * Prefilled data to add to the fields.
+     * Prefilled data to add to the fields. The data will be put into this path: "/pushContainerItems/0".
      */
     data?: unknown | Record<string, unknown>;
+    /**
+     * Prefilled data to add to the fields. The data will be put into this path: "/pushContainerItems/0".
+     */
+    defaultData?: unknown | Record<string, unknown>;
+    /**
+     * Provide additional data that will be put into the root of the isolated data context (parallel to "/pushContainerItems/0").
+     */
+    isolatedData?: Record<string, unknown>;
+    /**
+     * Prevent the form from being submitted when there are fields with errors inside the PushContainer.
+     */
+    bubbleValidation?: boolean;
     /**
      * A custom toolbar to be shown below the container.
      */
     toolbar?: React.ReactNode;
+    /**
+     * Will be called when the user clicks on the "Done" button.
+     */
+    onCommit?: OnCommit;
     /**
      * The container contents.
      */

package/extensions/forms/Iterate/PushContainer/PushContainer.js

@@ -1,9 +1,9 @@
 "use client";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["data", "path", "title", "children", "openButton", "showOpenButtonWhen"],
+const _excluded = ["data", "defaultData", "isolatedData", "bubbleValidation", "path", "title", "children", "openButton", "showOpenButtonWhen", "onCommit"],
   _excluded2 = ["title", "openButton", "showOpenButton", "switchContainerModeRef", "cancelHandler", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -20,14 +20,19 @@ import { Flex, HeightAnimation } from '../../../../components';
 import { useArrayLimit, useSwitchContainerMode } from '../hooks';
 import Toolbar from '../Toolbar';
 import { useTranslation } from '../../hooks';
+import { clearedData } from '../../DataContext/Provider';
 function PushContainer(props) {
   const {
-      data = null,
+      data: dataProp,
+      defaultData: defaultDataProp,
+      isolatedData,
+      bubbleValidation,
       path,
       title,
       children,
       openButton,
-      showOpenButtonWhen
+      showOpenButtonWhen,
+      onCommit
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const commitHandleRef = useRef();
@@ -61,26 +66,46 @@ function PushContainer(props) {
     commitHandleRef,
     switchContainerMode: switchContainerModeRef.current
   };
+  const data = useMemo(() => {
+    if (defaultDataProp) {
+      return;
+    }
+    return _objectSpread(_objectSpread({}, isolatedData), {}, {
+      pushContainerItems: [dataProp !== null && dataProp !== void 0 ? dataProp : clearedData]
+    });
+  }, [dataProp, defaultDataProp, isolatedData]);
   const defaultData = useMemo(() => {
-    return {
-      newItems: [data]
-    };
-  }, [data]);
+    return _objectSpread(_objectSpread({}, !dataProp ? isolatedData : null), {}, {
+      pushContainerItems: [defaultDataProp !== null && defaultDataProp !== void 0 ? defaultDataProp : clearedData]
+    });
+  }, [dataProp, defaultDataProp, isolatedData]);
+  const emptyData = useCallback(data => {
+    var _data$pushContainerIt;
+    const firstItem = (_data$pushContainerIt = data.pushContainerItems) === null || _data$pushContainerIt === void 0 ? void 0 : _data$pushContainerIt[0];
+    if (firstItem === null || typeof firstItem !== 'object') {
+      return _objectSpread(_objectSpread({}, isolatedData), {}, {
+        pushContainerItems: [null]
+      });
+    }
+    return defaultData;
+  }, [defaultData, isolatedData]);
   return React.createElement(Isolation, {
+    data: data,
     defaultData: defaultData,
-    emptyData: defaultData,
+    emptyData: emptyData,
+    bubbleValidation: bubbleValidation,
     commitHandleRef: commitHandleRef,
     transformOnCommit: _ref => {
       let {
-        newItems
+        pushContainerItems
       } = _ref;
-      return moveValueToPath(path, [...entries, ...newItems]);
+      return moveValueToPath(path, [...entries, ...pushContainerItems]);
     },
-    onCommit: (data, _ref2) => {
-      let {
+    onCommit: (data, options) => {
+      const {
         clearData,
         preventCommit
-      } = _ref2;
+      } = options;
       if (hasReachedLimit) {
         preventCommit();
         setShowStatus(true);
@@ -90,11 +115,12 @@ function PushContainer(props) {
         (_switchContainerModeR = switchContainerModeRef.current) === null || _switchContainerModeR === void 0 ? void 0 : _switchContainerModeR.call(switchContainerModeRef, 'view');
         clearData();
       }
+      onCommit === null || onCommit === void 0 ? void 0 : onCommit(data, options);
     }
   }, React.createElement(PushContainerContext.Provider, {
     value: newItemContextProps
   }, React.createElement(IterateArray, {
-    path: "/newItems",
+    path: "/pushContainerItems",
     containerMode: showOpenButton ? 'view' : 'edit'
   }, React.createElement(NewContainer, _extends({
     title: title,
@@ -104,7 +130,7 @@ function PushContainer(props) {
     cancelHandler: cancelHandler
   }, rest), children))));
 }
-function NewContainer(_ref3) {
+function NewContainer(_ref2) {
   var _DoneButton, _CancelButton;
   let {
       title,
@@ -113,8 +139,8 @@ function NewContainer(_ref3) {
       switchContainerModeRef,
       cancelHandler,
       children
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded2);
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   const {
     containerMode,
     switchContainerMode