@dnb/eufemia 10.46.0 → 10.48.0

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Path } from '../types';
 import { ContainerMode } from './Array/types';
+export type ModeOptions = {
+    omitFocusManagement?: boolean;
+};
 export interface IterateItemContextState {
     id?: string;
     index?: number;
@@ -9,9 +12,12 @@ export interface IterateItemContextState {
     path?: Path;
     arrayValue?: Array<unknown>;
     containerMode?: ContainerMode;
+    previousContainerMode?: ContainerMode;
+    initialContainerMode?: ContainerMode;
     containerRef?: React.RefObject<HTMLDivElement>;
     elementRef?: React.RefObject<HTMLDivElement>;
-    switchContainerMode?: (mode: ContainerMode) => void;
+    modeOptions?: ModeOptions;
+    switchContainerMode?: (mode: ContainerMode, options?: ModeOptions) => void;
     handleChange?: (path: Path, value: unknown) => void;
     handleRemove?: ({ keepItems }?: {
         keepItems?: boolean;

package/es/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 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  containerRef?: React.RefObject<HTMLDivElement>\n  elementRef?: React.RefObject<HTMLDivElement>\n  switchContainerMode?: (mode: ContainerMode) => 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;AAsBzB,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}\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"}

package/es/extensions/forms/Iterate/PushButton/PushButton.d.ts

@@ -1,7 +1,12 @@
 import { ButtonProps } from '../../../../components/Button';
-import { DataValueReadWriteComponentProps } from '../../types';
-export type Props = ButtonProps & DataValueReadWriteComponentProps<unknown[]> & {
+import { Path } from '../../types';
+export type Props = ButtonProps & {
+    path?: Path;
     pushValue: unknown | ((value: unknown) => void);
+    /**
+     * Used internally
+     */
+    value?: unknown;
 };
 declare function PushButton(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PushButton {

package/es/extensions/forms/Iterate/PushButton/PushButton.js

@@ -2,41 +2,52 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["pushValue", "className"];
+const _excluded = ["pushValue", "className", "path", "children"];
 import React, { useCallback, useContext } from 'react';
 import classnames from 'classnames';
 import { Button } from '../../../../components';
 import IterateItemContext from '../IterateItemContext';
-import { useFieldProps } from '../../hooks';
+import { useSwitchContainerMode } from '../hooks';
 import { omitDataValueReadWriteProps } from '../../types';
 import { add } from '../../../../icons';
+import DataContext from '../../DataContext/Context';
+import useDataValue from '../../hooks/useDataValue';
 function PushButton(props) {
+  const {
+    handlePathChange
+  } = useContext(DataContext) || {};
   const iterateItemContext = useContext(IterateItemContext);
   const {
     handlePush
   } = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
   const {
       pushValue,
-      className
+      className,
+      path,
+      children
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
   const buttonProps = omitDataValueReadWriteProps(restProps);
-  const {
-    value,
-    handleChange,
-    children
-  } = useFieldProps(restProps);
+  const value = useDataValue().getValueByPath(path);
   if (value !== undefined && !Array.isArray(value)) {
     throw new Error('PushButton received a non-array value');
   }
-  const handleClick = useCallback(() => {
+  const {
+    setLastItemContainerMode
+  } = useSwitchContainerMode({
+    path
+  });
+  const handleClick = useCallback(async () => {
     const newValue = typeof pushValue === 'function' ? pushValue(value) : pushValue;
     if (handlePush) {
       handlePush(newValue);
-      return;
+    } else {
+      await (handlePathChange === null || handlePathChange === void 0 ? void 0 : handlePathChange(path, [...(value !== null && value !== void 0 ? value : []), newValue]));
     }
-    handleChange([...(value !== null && value !== void 0 ? value : []), newValue]);
-  }, [value, pushValue, handlePush, handleChange]);
+    setTimeout(() => {
+      setLastItemContainerMode('view');
+    }, 100);
+  }, [handlePathChange, handlePush, path, pushValue, setLastItemContainerMode, value]);
   return React.createElement(Button, _extends({
     className: classnames('dnb-forms-iterate-push-button', className),
     variant: "secondary",

package/es/extensions/forms/Iterate/PushButton/PushButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PushButton.js","names":["React","useCallback","useContext","classnames","Button","IterateItemContext","useFieldProps","omitDataValueReadWriteProps","add","PushButton","props","iterateItemContext","handlePush","pushValue","className","restProps","_objectWithoutProperties","_excluded","buttonProps","value","handleChange","children","undefined","Array","isArray","Error","handleClick","newValue","createElement","_extends","variant","icon","icon_position","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/PushButton/PushButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateItemContext from '../IterateItemContext'\nimport { useFieldProps } from '../../hooks'\nimport {\n  DataValueReadWriteComponentProps,\n  omitDataValueReadWriteProps,\n} from '../../types'\nimport { add } from '../../../../icons'\n\nexport type Props = ButtonProps &\n  DataValueReadWriteComponentProps<unknown[]> & {\n    pushValue: unknown | ((value: unknown) => void)\n  }\n\nfunction PushButton(props: Props) {\n  const iterateItemContext = useContext(IterateItemContext)\n  const { handlePush } = iterateItemContext ?? {}\n\n  const { pushValue, className, ...restProps } = props\n  const buttonProps = omitDataValueReadWriteProps(restProps)\n  const { value, handleChange, children } = useFieldProps(restProps)\n\n  if (value !== undefined && !Array.isArray(value)) {\n    throw new Error('PushButton received a non-array value')\n  }\n\n  const handleClick = useCallback(() => {\n    const newValue =\n      typeof pushValue === 'function' ? pushValue(value) : pushValue\n\n    if (handlePush) {\n      // Inside an Iterate element - make the change through the Iterate component\n      handlePush(newValue)\n      return // stop here\n    }\n\n    // If not inside an iterate, it could still manipulate a source data set through useFieldProps\n    handleChange([...(value ?? []), newValue])\n  }, [value, pushValue, handlePush, handleChange])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-iterate-push-button', className)}\n      variant=\"secondary\"\n      icon={add}\n      icon_position=\"left\"\n      on_click={handleClick}\n      {...buttonProps}\n    >\n      {children}\n    </Button>\n  )\n}\n\nPushButton._supportsSpacingProps = true\nexport default PushButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,SAASC,aAAa,QAAQ,aAAa;AAC3C,SAEEC,2BAA2B,QACtB,aAAa;AACpB,SAASC,GAAG,QAAQ,mBAAmB;AAOvC,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,kBAAkB,GAAGT,UAAU,CAACG,kBAAkB,CAAC;EACzD,MAAM;IAAEO;EAAW,CAAC,GAAGD,kBAAkB,aAAlBA,kBAAkB,cAAlBA,kBAAkB,GAAI,CAAC,CAAC;EAE/C,MAAM;MAAEE,SAAS;MAAEC;IAAwB,CAAC,GAAGJ,KAAK;IAAnBK,SAAS,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EACpD,MAAMC,WAAW,GAAGX,2BAA2B,CAACQ,SAAS,CAAC;EAC1D,MAAM;IAAEI,KAAK;IAAEC,YAAY;IAAEC;EAAS,CAAC,GAAGf,aAAa,CAACS,SAAS,CAAC;EAElE,IAAII,KAAK,KAAKG,SAAS,IAAI,CAACC,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,EAAE;IAChD,MAAM,IAAIM,KAAK,CAAC,uCAAuC,CAAC;EAC1D;EAEA,MAAMC,WAAW,GAAGzB,WAAW,CAAC,MAAM;IACpC,MAAM0B,QAAQ,GACZ,OAAOd,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACM,KAAK,CAAC,GAAGN,SAAS;IAEhE,IAAID,UAAU,EAAE;MAEdA,UAAU,CAACe,QAAQ,CAAC;MACpB;IACF;IAGAP,YAAY,CAAC,CAAC,IAAID,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC,EAAEQ,QAAQ,CAAC,CAAC;EAC5C,CAAC,EAAE,CAACR,KAAK,EAAEN,SAAS,EAAED,UAAU,EAAEQ,YAAY,CAAC,CAAC;EAEhD,OACEpB,KAAA,CAAA4B,aAAA,CAACxB,MAAM,EAAAyB,QAAA;IACLf,SAAS,EAAEX,UAAU,CAAC,+BAA+B,EAAEW,SAAS,CAAE;IAClEgB,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAEvB,GAAI;IACVwB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAClBR,WAAW,GAEdG,QACK,CAAC;AAEb;AAEAZ,UAAU,CAACyB,qBAAqB,GAAG,IAAI;AACvC,eAAezB,UAAU"}
+{"version":3,"file":"PushButton.js","names":["React","useCallback","useContext","classnames","Button","IterateItemContext","useSwitchContainerMode","omitDataValueReadWriteProps","add","DataContext","useDataValue","PushButton","props","handlePathChange","iterateItemContext","handlePush","pushValue","className","path","children","restProps","_objectWithoutProperties","_excluded","buttonProps","value","getValueByPath","undefined","Array","isArray","Error","setLastItemContainerMode","handleClick","newValue","setTimeout","createElement","_extends","variant","icon","icon_position","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/PushButton/PushButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateItemContext from '../IterateItemContext'\nimport { useSwitchContainerMode } from '../hooks'\nimport { omitDataValueReadWriteProps, Path } from '../../types'\nimport { add } from '../../../../icons'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\nexport type Props = ButtonProps & {\n  path?: Path\n  pushValue: unknown | ((value: unknown) => void)\n\n  /**\n   * Used internally\n   */\n  value?: unknown\n}\n\nfunction PushButton(props: Props) {\n  const { handlePathChange } = useContext(DataContext) || {}\n  const iterateItemContext = useContext(IterateItemContext)\n  const { handlePush } = iterateItemContext ?? {}\n\n  const { pushValue, className, path, children, ...restProps } = props\n  const buttonProps = omitDataValueReadWriteProps(restProps)\n  const value = useDataValue().getValueByPath(path)\n\n  if (value !== undefined && !Array.isArray(value)) {\n    throw new Error('PushButton received a non-array value')\n  }\n\n  const { setLastItemContainerMode } = useSwitchContainerMode({\n    path,\n  })\n\n  const handleClick = useCallback(async () => {\n    const newValue =\n      typeof pushValue === 'function' ? pushValue(value) : pushValue\n\n    if (handlePush) {\n      // Inside an Iterate element - make the change through the Iterate component\n      handlePush(newValue)\n    } else {\n      // If not inside an iterate, it could still manipulate a source data set through useFieldProps\n      await handlePathChange?.(path, [...(value ?? []), newValue])\n    }\n\n    setTimeout(() => {\n      setLastItemContainerMode('view')\n    }, 100) // UX improvement because of the \"openDelay\"\n  }, [\n    handlePathChange,\n    handlePush,\n    path,\n    pushValue,\n    setLastItemContainerMode,\n    value,\n  ])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-iterate-push-button', className)}\n      variant=\"secondary\"\n      icon={add}\n      icon_position=\"left\"\n      on_click={handleClick}\n      {...buttonProps}\n    >\n      {children}\n    </Button>\n  )\n}\n\nPushButton._supportsSpacingProps = true\nexport default PushButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,SAASC,sBAAsB,QAAQ,UAAU;AACjD,SAASC,2BAA2B,QAAc,aAAa;AAC/D,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,YAAY,MAAM,0BAA0B;AAYnD,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC;EAAiB,CAAC,GAAGX,UAAU,CAACO,WAAW,CAAC,IAAI,CAAC,CAAC;EAC1D,MAAMK,kBAAkB,GAAGZ,UAAU,CAACG,kBAAkB,CAAC;EACzD,MAAM;IAAEU;EAAW,CAAC,GAAGD,kBAAkB,aAAlBA,kBAAkB,cAAlBA,kBAAkB,GAAI,CAAC,CAAC;EAE/C,MAAM;MAAEE,SAAS;MAAEC,SAAS;MAAEC,IAAI;MAAEC;IAAuB,CAAC,GAAGP,KAAK;IAAnBQ,SAAS,GAAAC,wBAAA,CAAKT,KAAK,EAAAU,SAAA;EACpE,MAAMC,WAAW,GAAGhB,2BAA2B,CAACa,SAAS,CAAC;EAC1D,MAAMI,KAAK,GAAGd,YAAY,CAAC,CAAC,CAACe,cAAc,CAACP,IAAI,CAAC;EAEjD,IAAIM,KAAK,KAAKE,SAAS,IAAI,CAACC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;IAChD,MAAM,IAAIK,KAAK,CAAC,uCAAuC,CAAC;EAC1D;EAEA,MAAM;IAAEC;EAAyB,CAAC,GAAGxB,sBAAsB,CAAC;IAC1DY;EACF,CAAC,CAAC;EAEF,MAAMa,WAAW,GAAG9B,WAAW,CAAC,YAAY;IAC1C,MAAM+B,QAAQ,GACZ,OAAOhB,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACQ,KAAK,CAAC,GAAGR,SAAS;IAEhE,IAAID,UAAU,EAAE;MAEdA,UAAU,CAACiB,QAAQ,CAAC;IACtB,CAAC,MAAM;MAEL,OAAMnB,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAGK,IAAI,EAAE,CAAC,IAAIM,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC,EAAEQ,QAAQ,CAAC,CAAC;IAC9D;IAEAC,UAAU,CAAC,MAAM;MACfH,wBAAwB,CAAC,MAAM,CAAC;IAClC,CAAC,EAAE,GAAG,CAAC;EACT,CAAC,EAAE,CACDjB,gBAAgB,EAChBE,UAAU,EACVG,IAAI,EACJF,SAAS,EACTc,wBAAwB,EACxBN,KAAK,CACN,CAAC;EAEF,OACExB,KAAA,CAAAkC,aAAA,CAAC9B,MAAM,EAAA+B,QAAA;IACLlB,SAAS,EAAEd,UAAU,CAAC,+BAA+B,EAAEc,SAAS,CAAE;IAClEmB,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAE7B,GAAI;IACV8B,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAER;EAAY,GAClBR,WAAW,GAEdJ,QACK,CAAC;AAEb;AAEAR,UAAU,CAAC6B,qBAAqB,GAAG,IAAI;AACvC,eAAe7B,UAAU"}

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

@@ -22,7 +22,11 @@ export type Props = {
     /**
      * Prefilled data to add to the fields.
      */
-    data?: Record<string, unknown>;
+    data?: unknown | Record<string, unknown>;
+    /**
+     * A custom toolbar to be shown below the container.
+     */
+    toolbar?: React.ReactNode;
     /**
      * The container contents.
      */

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

@@ -1,23 +1,29 @@
 "use client";
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["data", "path", "title", "children", "openButton", "showOpenButtonWhen"];
+var _CancelButton;
+const _excluded = ["data", "path", "title", "children", "openButton", "showOpenButtonWhen"],
+  _excluded2 = ["title", "openButton", "showOpenButton", "switchContainerModeRef", "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; }
-import React, { useRef } from 'react';
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
 import Isolation from '../../Form/Isolation';
 import PushContainerContext from './PushContainerContext';
 import IterateItemContext from '../IterateItemContext';
+import DataContext from '../../DataContext/Context';
 import useDataValue from '../../hooks/useDataValue';
-import EditContainer from '../EditContainer';
+import EditContainer, { CancelButton, DoneButton } from '../EditContainer';
 import IterateArray from '../Array';
 import OpenButton from './OpenButton';
-import { HeightAnimation } from '../../../../components';
+import { Flex, HeightAnimation } from '../../../../components';
+import { useSwitchContainerMode } from '../hooks';
+import Toolbar from '../Toolbar';
+import { useTranslation } from '../../hooks';
 function PushContainer(props) {
   const {
-      data = {},
+      data = null,
       path,
       title,
       children,
@@ -33,6 +39,11 @@ function PushContainer(props) {
   } = useDataValue({
     path
   });
+  const {
+    setNextContainerMode
+  } = useSwitchContainerMode({
+    path
+  });
   const showOpenButton = showOpenButtonWhen === null || showOpenButtonWhen === void 0 ? void 0 : showOpenButtonWhen(entries);
   const newItemContextProps = {
     path,
@@ -40,39 +51,83 @@ function PushContainer(props) {
     commitHandleRef,
     switchContainerMode: switchContainerModeRef.current
   };
+  const defaultData = useMemo(() => {
+    return {
+      newItems: [data]
+    };
+  }, [data]);
   return React.createElement(Isolation, {
+    defaultData: defaultData,
+    emptyData: defaultData,
     commitHandleRef: commitHandleRef,
     transformOnCommit: ({
-      newItem
+      newItems
     }) => {
-      return moveValueToPath(path, [...entries, _objectSpread(_objectSpread({}, newItem[0]), {}, {
-        __containerMode: 'view'
-      })]);
+      return moveValueToPath(path, [...entries, ...newItems]);
     },
     onCommit: (data, {
       clearData
     }) => {
       var _switchContainerModeR;
-      clearData();
+      setNextContainerMode('view');
       (_switchContainerModeR = switchContainerModeRef.current) === null || _switchContainerModeR === void 0 ? void 0 : _switchContainerModeR.call(switchContainerModeRef, 'view');
+      clearData();
     }
   }, React.createElement(PushContainerContext.Provider, {
     value: newItemContextProps
   }, React.createElement(IterateArray, {
-    value: [data],
-    path: "/newItem"
-  }, React.createElement(IterateItemContext.Consumer, null, ({
+    path: "/newItems",
+    containerMode: showOpenButton ? 'view' : 'edit'
+  }, React.createElement(NewContainer, _extends({
+    title: title,
+    openButton: openButton,
+    switchContainerModeRef: switchContainerModeRef,
+    showOpenButton: showOpenButton
+  }, rest), children))));
+}
+function NewContainer(_ref) {
+  var _DoneButton;
+  let {
+      title,
+      openButton,
+      showOpenButton,
+      switchContainerModeRef,
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  const {
     containerMode,
     switchContainerMode
-  }) => {
-    switchContainerModeRef.current = switchContainerMode;
-    return React.createElement(React.Fragment, null, React.createElement(EditContainer, _extends({
-      open: !showOpenButton || containerMode === 'edit',
-      title: title
-    }, rest), children), openButton && typeof showOpenButton === 'boolean' && React.createElement(HeightAnimation, {
-      open: showOpenButton && containerMode === 'view'
-    }, openButton));
-  }))));
+  } = useContext(IterateItemContext) || {};
+  switchContainerModeRef.current = switchContainerMode;
+  const {
+    createButton
+  } = useTranslation().IteratePushContainer;
+  const {
+    clearData
+  } = useContext(DataContext) || {};
+  const restoreOriginalValue = useCallback(() => {
+    clearData === null || clearData === void 0 ? void 0 : clearData();
+  }, [clearData]);
+  const toolbar = React.createElement(Toolbar, null, React.createElement(IterateItemContext.Consumer, null, context => {
+    const newItemContextProps = _objectSpread(_objectSpread({}, context), {}, {
+      restoreOriginalValue
+    });
+    return React.createElement(IterateItemContext.Provider, {
+      value: newItemContextProps
+    }, React.createElement(Flex.Horizontal, {
+      gap: "large"
+    }, _DoneButton || (_DoneButton = React.createElement(DoneButton, {
+      text: createButton
+    })), showOpenButton && (_CancelButton || (_CancelButton = React.createElement(CancelButton, null)))));
+  }));
+  return React.createElement(React.Fragment, null, React.createElement(EditContainer, _extends({
+    open: !showOpenButton || containerMode === 'edit',
+    title: title,
+    toolbar: toolbar
+  }, rest), children), openButton && typeof showOpenButton === 'boolean' && React.createElement(HeightAnimation, {
+    open: showOpenButton && containerMode === 'view'
+  }, openButton));
 }
 PushContainer.OpenButton = OpenButton;
 PushContainer._supportsSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"PushContainer.js","names":["React","useRef","Isolation","PushContainerContext","IterateItemContext","useDataValue","EditContainer","IterateArray","OpenButton","HeightAnimation","PushContainer","props","data","path","title","children","openButton","showOpenButtonWhen","rest","_objectWithoutProperties","_excluded","commitHandleRef","switchContainerModeRef","value","entries","moveValueToPath","showOpenButton","newItemContextProps","switchContainerMode","current","createElement","transformOnCommit","newItem","_objectSpread","__containerMode","onCommit","clearData","_switchContainerModeR","call","Provider","Consumer","containerMode","Fragment","_extends","open","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/PushContainer.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport Isolation from '../../Form/Isolation'\nimport PushContainerContext from './PushContainerContext'\nimport IterateItemContext from '../IterateItemContext'\nimport useDataValue from '../../hooks/useDataValue'\nimport EditContainer from '../EditContainer'\nimport IterateArray, { ContainerMode } from '../Array'\nimport OpenButton from './OpenButton'\nimport { HeightAnimation } from '../../../../components'\nimport { Path } from '../../types'\nimport { SpacingProps } from '../../../../shared/types'\n\nexport type Props = {\n  /**\n   * The path to the array to add the new item to.\n   */\n  path: Path\n\n  /**\n   * The title of the container.\n   */\n  title?: React.ReactNode\n\n  /**\n   * The button to open container.\n   */\n  openButton?: React.ReactNode\n\n  /**\n   * Define when the \"open button\" should be shown.\n   * Should be a function that returns a boolean.\n   */\n  showOpenButtonWhen?: (list: unknown[]) => boolean\n\n  /**\n   * Prefilled data to add to the fields.\n   */\n  data?: Record<string, unknown>\n\n  /**\n   * The container contents.\n   */\n  children: React.ReactNode\n}\n\nexport type AllProps = Props & SpacingProps\n\nfunction PushContainer(props: AllProps) {\n  const {\n    data = {},\n    path,\n    title,\n    children,\n    openButton,\n    showOpenButtonWhen,\n    ...rest\n  } = props\n\n  const commitHandleRef = useRef<() => void>()\n  const switchContainerModeRef = useRef<(mode: ContainerMode) => void>()\n  const { value: entries = [], moveValueToPath } = useDataValue<\n    Array<unknown>\n  >({ path })\n\n  const showOpenButton = showOpenButtonWhen?.(entries)\n  const newItemContextProps: PushContainerContext = {\n    path,\n    entries,\n    commitHandleRef,\n    switchContainerMode: switchContainerModeRef.current,\n  }\n\n  return (\n    <Isolation\n      commitHandleRef={commitHandleRef}\n      transformOnCommit={({ newItem }) => {\n        return moveValueToPath(path, [\n          ...entries,\n          { ...newItem[0], __containerMode: 'view' },\n        ])\n      }}\n      onCommit={(data, { clearData }) => {\n        clearData()\n        switchContainerModeRef.current?.('view')\n      }}\n    >\n      <PushContainerContext.Provider value={newItemContextProps}>\n        <IterateArray value={[data]} path=\"/newItem\">\n          <IterateItemContext.Consumer>\n            {({ containerMode, switchContainerMode }) => {\n              switchContainerModeRef.current = switchContainerMode\n\n              return (\n                <>\n                  <EditContainer\n                    open={!showOpenButton || containerMode === 'edit'}\n                    title={title}\n                    {...rest}\n                  >\n                    {children}\n                  </EditContainer>\n\n                  {openButton && typeof showOpenButton === 'boolean' && (\n                    <HeightAnimation\n                      open={showOpenButton && containerMode === 'view'}\n                    >\n                      {openButton}\n                    </HeightAnimation>\n                  )}\n                </>\n              )\n            }}\n          </IterateItemContext.Consumer>\n        </IterateArray>\n      </PushContainerContext.Provider>\n    </Isolation>\n  )\n}\n\nPushContainer.OpenButton = OpenButton\nPushContainer._supportsSpacingProps = true\n\nexport default PushContainer\n"],"mappings":"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"}
+{"version":3,"file":"PushContainer.js","names":["React","useCallback","useContext","useMemo","useRef","Isolation","PushContainerContext","IterateItemContext","DataContext","useDataValue","EditContainer","CancelButton","DoneButton","IterateArray","OpenButton","Flex","HeightAnimation","useSwitchContainerMode","Toolbar","useTranslation","PushContainer","props","data","path","title","children","openButton","showOpenButtonWhen","rest","_objectWithoutProperties","_excluded","commitHandleRef","switchContainerModeRef","value","entries","moveValueToPath","setNextContainerMode","showOpenButton","newItemContextProps","switchContainerMode","current","defaultData","newItems","createElement","emptyData","transformOnCommit","onCommit","clearData","_switchContainerModeR","call","Provider","containerMode","NewContainer","_extends","_ref","_DoneButton","_excluded2","createButton","IteratePushContainer","restoreOriginalValue","toolbar","Consumer","context","_objectSpread","Horizontal","gap","text","_CancelButton","Fragment","open","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/PushContainer.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport Isolation from '../../Form/Isolation'\nimport PushContainerContext from './PushContainerContext'\nimport IterateItemContext from '../IterateItemContext'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport EditContainer, { CancelButton, DoneButton } from '../EditContainer'\nimport IterateArray, { ContainerMode } from '../Array'\nimport OpenButton from './OpenButton'\nimport { Flex, HeightAnimation } from '../../../../components'\nimport { Path } from '../../types'\nimport { SpacingProps } from '../../../../shared/types'\nimport { useSwitchContainerMode } from '../hooks'\nimport Toolbar from '../Toolbar'\nimport { useTranslation } from '../../hooks'\n\nexport type Props = {\n  /**\n   * The path to the array to add the new item to.\n   */\n  path: Path\n\n  /**\n   * The title of the container.\n   */\n  title?: React.ReactNode\n\n  /**\n   * The button to open container.\n   */\n  openButton?: React.ReactNode\n\n  /**\n   * Define when the \"open button\" should be shown.\n   * Should be a function that returns a boolean.\n   */\n  showOpenButtonWhen?: (list: unknown[]) => boolean\n\n  /**\n   * Prefilled data to add to the fields.\n   */\n  data?: unknown | Record<string, unknown>\n\n  /**\n   * A custom toolbar to be shown below the container.\n   */\n  toolbar?: React.ReactNode\n\n  /**\n   * The container contents.\n   */\n  children: React.ReactNode\n}\n\nexport type AllProps = Props & SpacingProps\n\nfunction PushContainer(props: AllProps) {\n  const {\n    data = null,\n    path,\n    title,\n    children,\n    openButton,\n    showOpenButtonWhen,\n    ...rest\n  } = props\n\n  const commitHandleRef = useRef<() => void>()\n  const switchContainerModeRef = useRef<(mode: ContainerMode) => void>()\n  const { value: entries = [], moveValueToPath } = useDataValue<\n    Array<unknown>\n  >({ path })\n\n  const { setNextContainerMode } = useSwitchContainerMode({ path })\n\n  const showOpenButton = showOpenButtonWhen?.(entries)\n  const newItemContextProps: PushContainerContext = {\n    path,\n    entries,\n    commitHandleRef,\n    switchContainerMode: switchContainerModeRef.current,\n  }\n\n  const defaultData = useMemo(() => {\n    return { newItems: [data] }\n  }, [data])\n\n  return (\n    <Isolation\n      defaultData={defaultData}\n      emptyData={defaultData}\n      commitHandleRef={commitHandleRef}\n      transformOnCommit={({ newItems }) => {\n        return moveValueToPath(path, [...entries, ...newItems])\n      }}\n      onCommit={(data, { clearData }) => {\n        setNextContainerMode('view')\n        switchContainerModeRef.current?.('view')\n        clearData()\n      }}\n    >\n      <PushContainerContext.Provider value={newItemContextProps}>\n        <IterateArray\n          path=\"/newItems\"\n          containerMode={showOpenButton ? 'view' : 'edit'}\n        >\n          <NewContainer\n            title={title}\n            openButton={openButton}\n            switchContainerModeRef={switchContainerModeRef}\n            showOpenButton={showOpenButton}\n            {...rest}\n          >\n            {children}\n          </NewContainer>\n        </IterateArray>\n      </PushContainerContext.Provider>\n    </Isolation>\n  )\n}\n\nfunction NewContainer({\n  title,\n  openButton,\n  showOpenButton,\n  switchContainerModeRef,\n  children,\n  ...rest\n}) {\n  const { containerMode, switchContainerMode } =\n    useContext(IterateItemContext) || {}\n  switchContainerModeRef.current = switchContainerMode\n  const { createButton } = useTranslation().IteratePushContainer\n  const { clearData } = useContext(DataContext) || {}\n  const restoreOriginalValue = useCallback(() => {\n    clearData?.()\n  }, [clearData])\n\n  const toolbar = (\n    <Toolbar>\n      <IterateItemContext.Consumer>\n        {(context) => {\n          const newItemContextProps = {\n            ...context,\n            restoreOriginalValue,\n          }\n          return (\n            <IterateItemContext.Provider value={newItemContextProps}>\n              <Flex.Horizontal gap=\"large\">\n                <DoneButton text={createButton} />\n                {showOpenButton && <CancelButton />}\n              </Flex.Horizontal>\n            </IterateItemContext.Provider>\n          )\n        }}\n      </IterateItemContext.Consumer>\n    </Toolbar>\n  )\n\n  return (\n    <>\n      <EditContainer\n        open={!showOpenButton || containerMode === 'edit'}\n        title={title}\n        toolbar={toolbar}\n        {...rest}\n      >\n        {children}\n      </EditContainer>\n\n      {openButton && typeof showOpenButton === 'boolean' && (\n        <HeightAnimation open={showOpenButton && containerMode === 'view'}>\n          {openButton}\n        </HeightAnimation>\n      )}\n    </>\n  )\n}\n\nPushContainer.OpenButton = OpenButton\nPushContainer._supportsSpacingProps = true\n\nexport default PushContainer\n"],"mappings":"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"}

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

@@ -19,6 +19,11 @@ export const PushContainerProperties = {
     type: 'function',
     status: 'optional'
   },
+  toolbar: {
+    doc: 'A custom toolbar to be shown below the container.',
+    type: 'React.Node',
+    status: 'optional'
+  },
   children: {
     doc: 'The container contents.',
     type: 'React.Node',

package/es/extensions/forms/Iterate/PushContainer/PushContainerDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PushContainerDocs.js","names":["PushContainerProperties","path","doc","type","status","title","openButton","showOpenButtonWhen","children","PushContainerEvents"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PushContainerProperties: PropertiesTableProps = {\n  path: {\n    doc: 'The path to the array to add the new item to.',\n    type: 'string',\n    status: 'required',\n  },\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  openButton: {\n    doc: 'The button to open container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  showOpenButtonWhen: {\n    doc: 'Define when the \"open button\" should be shown. Should be a function that returns a boolean.',\n    type: 'function',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The container contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const PushContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,IAAI,EAAE;IACJC,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDG,kBAAkB,EAAE;IAClBL,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMK,mBAAyC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"PushContainerDocs.js","names":["PushContainerProperties","path","doc","type","status","title","openButton","showOpenButtonWhen","toolbar","children","PushContainerEvents"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PushContainerProperties: PropertiesTableProps = {\n  path: {\n    doc: 'The path to the array to add the new item to.',\n    type: 'string',\n    status: 'required',\n  },\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  openButton: {\n    doc: 'The button to open container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  showOpenButtonWhen: {\n    doc: 'Define when the \"open button\" should be shown. Should be a function that returns a boolean.',\n    type: 'function',\n    status: 'optional',\n  },\n  toolbar: {\n    doc: 'A custom toolbar to be shown below the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The container contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const PushContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,IAAI,EAAE;IACJC,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDG,kBAAkB,EAAE;IAClBL,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMM,mBAAyC,GAAG,CAAC,CAAC"}

package/es/extensions/forms/Iterate/RemoveButton/RemoveButton.js

@@ -8,14 +8,14 @@ import classnames from 'classnames';
 import { Button } from '../../../../components';
 import IterateItemContext from '../IterateItemContext';
 import { useFieldProps, useTranslation } from '../../hooks';
-import ElementBlockContext from '../AnimatedContainer/ElementBlockContext';
+import ArrayItemAreaContext from '../Array/ArrayItemAreaContext';
 import { omitDataValueReadWriteProps } from '../../types';
 import { trash } from '../../../../icons';
 function RemoveButton(props) {
   const iterateItemContext = useContext(IterateItemContext);
   const {
     handleRemove
-  } = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
+  } = iterateItemContext || {};
   if (!iterateItemContext) {
     throw new Error('RemoveButton must be inside an Iterate.Array');
   }
@@ -30,17 +30,17 @@ function RemoveButton(props) {
   const buttonProps = omitDataValueReadWriteProps(restProps);
   const translation = useTranslation().RemoveButton;
   const textContent = text || children || translation.text;
-  const elementBlockContext = useContext(ElementBlockContext);
+  const elementBlockContext = useContext(ArrayItemAreaContext);
   const {
-    handleRemoveBlock
-  } = elementBlockContext !== null && elementBlockContext !== void 0 ? elementBlockContext : {};
+    handleRemoveItem
+  } = elementBlockContext || {};
   const handleClick = useCallback(() => {
-    if (handleRemoveBlock) {
-      handleRemoveBlock();
+    if (handleRemoveItem) {
+      handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem();
     } else {
-      handleRemove();
+      handleRemove === null || handleRemove === void 0 ? void 0 : handleRemove();
     }
-  }, [handleRemove, handleRemoveBlock]);
+  }, [handleRemove, handleRemoveItem]);
   return React.createElement(Button, _extends({
     className: classnames('dnb-forms-iterate-remove-element-button', className),
     variant: textContent ? 'tertiary' : 'secondary',

package/es/extensions/forms/Iterate/RemoveButton/RemoveButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoveButton.js","names":["React","useCallback","useContext","classnames","Button","IterateItemContext","useFieldProps","useTranslation","ElementBlockContext","omitDataValueReadWriteProps","trash","RemoveButton","props","iterateItemContext","handleRemove","Error","className","restProps","_objectWithoutProperties","_excluded","children","text","buttonProps","translation","textContent","elementBlockContext","handleRemoveBlock","handleClick","createElement","_extends","variant","icon","icon_position","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateItemContext from '../IterateItemContext'\nimport { useFieldProps, useTranslation } from '../../hooks'\nimport ElementBlockContext from '../AnimatedContainer/ElementBlockContext'\nimport {\n  DataValueReadWriteComponentProps,\n  omitDataValueReadWriteProps,\n} from '../../types'\nimport { trash } from '../../../../icons'\n\nexport type Props = ButtonProps &\n  DataValueReadWriteComponentProps<unknown[]>\n\nfunction RemoveButton(props: Props) {\n  const iterateItemContext = useContext(IterateItemContext)\n  const { handleRemove } = iterateItemContext ?? {}\n\n  if (!iterateItemContext) {\n    throw new Error('RemoveButton must be inside an Iterate.Array')\n  }\n\n  const { className, ...restProps } = props\n  const { children, text } = useFieldProps(restProps)\n  const buttonProps = omitDataValueReadWriteProps(restProps)\n  const translation = useTranslation().RemoveButton\n  const textContent = text || children || translation.text\n\n  const elementBlockContext = useContext(ElementBlockContext)\n  const { handleRemoveBlock } = elementBlockContext ?? {}\n\n  const handleClick = useCallback(() => {\n    if (handleRemoveBlock) {\n      handleRemoveBlock()\n    } else {\n      handleRemove()\n    }\n  }, [handleRemove, handleRemoveBlock])\n\n  return (\n    <Button\n      className={classnames(\n        'dnb-forms-iterate-remove-element-button',\n        className\n      )}\n      variant={textContent ? 'tertiary' : 'secondary'}\n      icon={trash}\n      icon_position=\"left\"\n      on_click={handleClick}\n      {...buttonProps}\n    >\n      {textContent}\n    </Button>\n  )\n}\n\nRemoveButton._supportsSpacingProps = true\nexport default RemoveButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,SAASC,aAAa,EAAEC,cAAc,QAAQ,aAAa;AAC3D,OAAOC,mBAAmB,MAAM,0CAA0C;AAC1E,SAEEC,2BAA2B,QACtB,aAAa;AACpB,SAASC,KAAK,QAAQ,mBAAmB;AAKzC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,kBAAkB,GAAGX,UAAU,CAACG,kBAAkB,CAAC;EACzD,MAAM;IAAES;EAAa,CAAC,GAAGD,kBAAkB,aAAlBA,kBAAkB,cAAlBA,kBAAkB,GAAI,CAAC,CAAC;EAEjD,IAAI,CAACA,kBAAkB,EAAE;IACvB,MAAM,IAAIE,KAAK,CAAC,8CAA8C,CAAC;EACjE;EAEA,MAAM;MAAEC;IAAwB,CAAC,GAAGJ,KAAK;IAAnBK,SAAS,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EACzC,MAAM;IAAEC,QAAQ;IAAEC;EAAK,CAAC,GAAGf,aAAa,CAACW,SAAS,CAAC;EACnD,MAAMK,WAAW,GAAGb,2BAA2B,CAACQ,SAAS,CAAC;EAC1D,MAAMM,WAAW,GAAGhB,cAAc,CAAC,CAAC,CAACI,YAAY;EACjD,MAAMa,WAAW,GAAGH,IAAI,IAAID,QAAQ,IAAIG,WAAW,CAACF,IAAI;EAExD,MAAMI,mBAAmB,GAAGvB,UAAU,CAACM,mBAAmB,CAAC;EAC3D,MAAM;IAAEkB;EAAkB,CAAC,GAAGD,mBAAmB,aAAnBA,mBAAmB,cAAnBA,mBAAmB,GAAI,CAAC,CAAC;EAEvD,MAAME,WAAW,GAAG1B,WAAW,CAAC,MAAM;IACpC,IAAIyB,iBAAiB,EAAE;MACrBA,iBAAiB,CAAC,CAAC;IACrB,CAAC,MAAM;MACLZ,YAAY,CAAC,CAAC;IAChB;EACF,CAAC,EAAE,CAACA,YAAY,EAAEY,iBAAiB,CAAC,CAAC;EAErC,OACE1B,KAAA,CAAA4B,aAAA,CAACxB,MAAM,EAAAyB,QAAA;IACLb,SAAS,EAAEb,UAAU,CACnB,yCAAyC,EACzCa,SACF,CAAE;IACFc,OAAO,EAAEN,WAAW,GAAG,UAAU,GAAG,WAAY;IAChDO,IAAI,EAAErB,KAAM;IACZsB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEN;EAAY,GAClBL,WAAW,GAEdE,WACK,CAAC;AAEb;AAEAb,YAAY,CAACuB,qBAAqB,GAAG,IAAI;AACzC,eAAevB,YAAY"}
+{"version":3,"file":"RemoveButton.js","names":["React","useCallback","useContext","classnames","Button","IterateItemContext","useFieldProps","useTranslation","ArrayItemAreaContext","omitDataValueReadWriteProps","trash","RemoveButton","props","iterateItemContext","handleRemove","Error","className","restProps","_objectWithoutProperties","_excluded","children","text","buttonProps","translation","textContent","elementBlockContext","handleRemoveItem","handleClick","createElement","_extends","variant","icon","icon_position","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateItemContext from '../IterateItemContext'\nimport { useFieldProps, useTranslation } from '../../hooks'\nimport ArrayItemAreaContext from '../Array/ArrayItemAreaContext'\nimport {\n  DataValueReadWriteComponentProps,\n  omitDataValueReadWriteProps,\n} from '../../types'\nimport { trash } from '../../../../icons'\n\nexport type Props = ButtonProps &\n  DataValueReadWriteComponentProps<unknown[]>\n\nfunction RemoveButton(props: Props) {\n  const iterateItemContext = useContext(IterateItemContext)\n  const { handleRemove } = iterateItemContext || {}\n\n  if (!iterateItemContext) {\n    throw new Error('RemoveButton must be inside an Iterate.Array')\n  }\n\n  const { className, ...restProps } = props\n  const { children, text } = useFieldProps(restProps)\n  const buttonProps = omitDataValueReadWriteProps(restProps)\n  const translation = useTranslation().RemoveButton\n  const textContent = text || children || translation.text\n\n  const elementBlockContext = useContext(ArrayItemAreaContext)\n  const { handleRemoveItem } = elementBlockContext || {}\n\n  const handleClick = useCallback(() => {\n    if (handleRemoveItem) {\n      handleRemoveItem?.()\n    } else {\n      handleRemove?.()\n    }\n  }, [handleRemove, handleRemoveItem])\n\n  return (\n    <Button\n      className={classnames(\n        'dnb-forms-iterate-remove-element-button',\n        className\n      )}\n      variant={textContent ? 'tertiary' : 'secondary'}\n      icon={trash}\n      icon_position=\"left\"\n      on_click={handleClick}\n      {...buttonProps}\n    >\n      {textContent}\n    </Button>\n  )\n}\n\nRemoveButton._supportsSpacingProps = true\nexport default RemoveButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,SAASC,aAAa,EAAEC,cAAc,QAAQ,aAAa;AAC3D,OAAOC,oBAAoB,MAAM,+BAA+B;AAChE,SAEEC,2BAA2B,QACtB,aAAa;AACpB,SAASC,KAAK,QAAQ,mBAAmB;AAKzC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,kBAAkB,GAAGX,UAAU,CAACG,kBAAkB,CAAC;EACzD,MAAM;IAAES;EAAa,CAAC,GAAGD,kBAAkB,IAAI,CAAC,CAAC;EAEjD,IAAI,CAACA,kBAAkB,EAAE;IACvB,MAAM,IAAIE,KAAK,CAAC,8CAA8C,CAAC;EACjE;EAEA,MAAM;MAAEC;IAAwB,CAAC,GAAGJ,KAAK;IAAnBK,SAAS,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EACzC,MAAM;IAAEC,QAAQ;IAAEC;EAAK,CAAC,GAAGf,aAAa,CAACW,SAAS,CAAC;EACnD,MAAMK,WAAW,GAAGb,2BAA2B,CAACQ,SAAS,CAAC;EAC1D,MAAMM,WAAW,GAAGhB,cAAc,CAAC,CAAC,CAACI,YAAY;EACjD,MAAMa,WAAW,GAAGH,IAAI,IAAID,QAAQ,IAAIG,WAAW,CAACF,IAAI;EAExD,MAAMI,mBAAmB,GAAGvB,UAAU,CAACM,oBAAoB,CAAC;EAC5D,MAAM;IAAEkB;EAAiB,CAAC,GAAGD,mBAAmB,IAAI,CAAC,CAAC;EAEtD,MAAME,WAAW,GAAG1B,WAAW,CAAC,MAAM;IACpC,IAAIyB,gBAAgB,EAAE;MACpBA,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAG,CAAC;IACtB,CAAC,MAAM;MACLZ,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACA,YAAY,EAAEY,gBAAgB,CAAC,CAAC;EAEpC,OACE1B,KAAA,CAAA4B,aAAA,CAACxB,MAAM,EAAAyB,QAAA;IACLb,SAAS,EAAEb,UAAU,CACnB,yCAAyC,EACzCa,SACF,CAAE;IACFc,OAAO,EAAEN,WAAW,GAAG,UAAU,GAAG,WAAY;IAChDO,IAAI,EAAErB,KAAM;IACZsB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEN;EAAY,GAClBL,WAAW,GAEdE,WACK,CAAC;AAEb;AAEAb,YAAY,CAACuB,qBAAqB,GAAG,IAAI;AACzC,eAAevB,YAAY"}

package/es/extensions/forms/Iterate/Toolbar/Toolbar.d.ts

@@ -1,6 +1,14 @@
+import React from 'react';
 import { SpaceAllProps } from '../../../../components/Space';
-export type Props = SpaceAllProps;
-declare function Toolbar(props: Props): import("react/jsx-runtime").JSX.Element;
+export type ToolbarParams = {
+    index: number;
+    items: Array<unknown>;
+    value: unknown;
+};
+export type Props = Omit<SpaceAllProps, 'children'> & {
+    children?: React.ReactNode | ((params: ToolbarParams) => React.ReactNode);
+};
+declare function Toolbar({ children, className, ...rest }?: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Toolbar {
     var _supportsSpacingProps: boolean;
 }

package/es/extensions/forms/Iterate/Toolbar/Toolbar.js

@@ -1,27 +1,71 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _Hr;
 const _excluded = ["children", "className"];
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import classnames from 'classnames';
 import { Hr } from '../../../../elements';
-import { Flex, Space } from '../../../../components';
-export default function Toolbar(props) {
-  const _ref = props || {},
-    {
+import { Flex, FormStatus, Space } from '../../../../components';
+import IterateItemContext from '../IterateItemContext';
+import ToolbarContext from './ToolbarContext';
+import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext';
+import { useTranslation } from '../../hooks';
+export default function Toolbar(_ref = {}) {
+  let {
       children,
       className
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    index,
+    value,
+    arrayValue: items
+  } = useContext(IterateItemContext) || {};
+  const {
+    errorInContainer
+  } = useTranslation().IterateEditContainer;
+  const {
+    hasError,
+    hasVisibleError
+  } = useContext(FieldBoundaryContext) || {};
+  const [showError, setShowError] = useState(false);
+  useEffect(() => {
+    if (showError && !hasError) {
+      setShowError(false);
+    }
+  }, [hasError, showError]);
+  if (typeof children === 'function') {
+    var _children;
+    children = (_children = children) === null || _children === void 0 ? void 0 : _children({
+      index,
+      items,
+      value
+    });
+  }
+  if (React.Children.count(children) === 0) {
+    return React.createElement(React.Fragment, null);
+  }
   return React.createElement(Space, _extends({
     top: "medium",
     className: classnames('dnb-forms-iterate-toolbar', className)
   }, rest), _Hr || (_Hr = React.createElement(Hr, {
     space: 0
-  })), React.createElement(Flex.Horizontal, {
+  })), React.createElement(ToolbarContext.Provider, {
+    value: {
+      setShowError
+    }
+  }, React.createElement(Flex.Horizontal, {
     top: "x-small",
     gap: "large"
-  }, children));
+  }, children)), React.createElement(FormStatus, {
+    show: showError && hasVisibleError,
+    shellSpace: {
+      top: 'x-small'
+    },
+    no_animation: false
+  }, errorInContainer));
 }
 Toolbar._supportsSpacingProps = true;
 //# sourceMappingURL=Toolbar.js.map

package/es/extensions/forms/Iterate/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","names":["React","classnames","Hr","Flex","Space","Toolbar","props","_ref","children","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","top","_Hr","space","Horizontal","gap","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Hr } from '../../../../elements'\nimport { Flex, Space } from '../../../../components'\nimport { SpaceAllProps } from '../../../../components/Space'\n\nexport type Props = SpaceAllProps\n\nexport default function Toolbar(props: Props) {\n  const { children, className, ...rest } = props || {}\n\n  return (\n    <Space\n      top=\"medium\"\n      className={classnames('dnb-forms-iterate-toolbar', className)}\n      {...rest}\n    >\n      <Hr space={0} />\n\n      <Flex.Horizontal top=\"x-small\" gap=\"large\">\n        {children}\n      </Flex.Horizontal>\n    </Space>\n  )\n}\n\nToolbar._supportsSpacingProps = true\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,EAAE,QAAQ,sBAAsB;AACzC,SAASC,IAAI,EAAEC,KAAK,QAAQ,wBAAwB;AAKpD,eAAe,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC5C,MAAAC,IAAA,GAAyCD,KAAK,IAAI,CAAC,CAAC;IAA9C;MAAEE,QAAQ;MAAEC;IAAmB,CAAC,GAAAF,IAAA;IAANG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEpC,OACEZ,KAAA,CAAAa,aAAA,CAACT,KAAK,EAAAU,QAAA;IACJC,GAAG,EAAC,QAAQ;IACZN,SAAS,EAAER,UAAU,CAAC,2BAA2B,EAAEQ,SAAS;EAAE,GAC1DC,IAAI,GAAAM,GAAA,KAAAA,GAAA,GAERhB,KAAA,CAAAa,aAAA,CAACX,EAAE;IAACe,KAAK,EAAE;EAAE,CAAE,CAAC,GAEhBjB,KAAA,CAAAa,aAAA,CAACV,IAAI,CAACe,UAAU;IAACH,GAAG,EAAC,SAAS;IAACI,GAAG,EAAC;EAAO,GACvCX,QACc,CACZ,CAAC;AAEZ;AAEAH,OAAO,CAACe,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"Toolbar.js","names":["React","useContext","useEffect","useState","classnames","Hr","Flex","FormStatus","Space","IterateItemContext","ToolbarContext","FieldBoundaryContext","useTranslation","Toolbar","_ref","children","className","rest","_objectWithoutProperties","_excluded","index","value","arrayValue","items","errorInContainer","IterateEditContainer","hasError","hasVisibleError","showError","setShowError","_children","Children","count","createElement","Fragment","_extends","top","_Hr","space","Provider","Horizontal","gap","show","shellSpace","no_animation","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Toolbar/Toolbar.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from 'react'\nimport classnames from 'classnames'\nimport { Hr } from '../../../../elements'\nimport { Flex, FormStatus, Space } from '../../../../components'\nimport { SpaceAllProps } from '../../../../components/Space'\nimport IterateItemContext from '../IterateItemContext'\nimport ToolbarContext from './ToolbarContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { useTranslation } from '../../hooks'\n\nexport type ToolbarParams = {\n  index: number\n  items: Array<unknown>\n  value: unknown\n}\nexport type Props = Omit<SpaceAllProps, 'children'> & {\n  children?: React.ReactNode | ((params: ToolbarParams) => React.ReactNode)\n}\n\nexport default function Toolbar({\n  children,\n  className,\n  ...rest\n}: Props = {}) {\n  const {\n    index,\n    value,\n    arrayValue: items,\n  } = useContext(IterateItemContext) || {}\n  const { errorInContainer } = useTranslation().IterateEditContainer\n  const { hasError, hasVisibleError } =\n    useContext(FieldBoundaryContext) || {}\n  const [showError, setShowError] = useState(false)\n\n  useEffect(() => {\n    if (showError && !hasError) {\n      setShowError(false)\n    }\n  }, [hasError, showError])\n\n  if (typeof children === 'function') {\n    children = children?.({ index, items, value })\n  }\n\n  if (React.Children.count(children) === 0) {\n    return <></>\n  }\n\n  return (\n    <Space\n      top=\"medium\"\n      className={classnames('dnb-forms-iterate-toolbar', className)}\n      {...rest}\n    >\n      <Hr space={0} />\n\n      <ToolbarContext.Provider value={{ setShowError }}>\n        <Flex.Horizontal top=\"x-small\" gap=\"large\">\n          {children}\n        </Flex.Horizontal>\n      </ToolbarContext.Provider>\n\n      <FormStatus\n        show={showError && hasVisibleError}\n        shellSpace={{ top: 'x-small' }}\n        no_animation={false}\n      >\n        {errorInContainer}\n      </FormStatus>\n    </Space>\n  )\n}\n\nToolbar._supportsSpacingProps = true\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,EAAE,QAAQ,sBAAsB;AACzC,SAASC,IAAI,EAAEC,UAAU,EAAEC,KAAK,QAAQ,wBAAwB;AAEhE,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,oBAAoB,MAAM,sDAAsD;AACvF,SAASC,cAAc,QAAQ,aAAa;AAW5C,eAAe,SAASC,OAAOA,CAACC,IAAA,GAIrB,CAAC,CAAC,EAAE;EAAA,IAJiB;MAC9BC,QAAQ;MACRC;IAEK,CAAC,GAAAF,IAAA;IADHG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,MAAM;IACJC,KAAK;IACLC,KAAK;IACLC,UAAU,EAAEC;EACd,CAAC,GAAGtB,UAAU,CAACQ,kBAAkB,CAAC,IAAI,CAAC,CAAC;EACxC,MAAM;IAAEe;EAAiB,CAAC,GAAGZ,cAAc,CAAC,CAAC,CAACa,oBAAoB;EAClE,MAAM;IAAEC,QAAQ;IAAEC;EAAgB,CAAC,GACjC1B,UAAU,CAACU,oBAAoB,CAAC,IAAI,CAAC,CAAC;EACxC,MAAM,CAACiB,SAAS,EAAEC,YAAY,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EAEjDD,SAAS,CAAC,MAAM;IACd,IAAI0B,SAAS,IAAI,CAACF,QAAQ,EAAE;MAC1BG,YAAY,CAAC,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACH,QAAQ,EAAEE,SAAS,CAAC,CAAC;EAEzB,IAAI,OAAOb,QAAQ,KAAK,UAAU,EAAE;IAAA,IAAAe,SAAA;IAClCf,QAAQ,IAAAe,SAAA,GAAGf,QAAQ,cAAAe,SAAA,uBAARA,SAAA,CAAW;MAAEV,KAAK;MAAEG,KAAK;MAAEF;IAAM,CAAC,CAAC;EAChD;EAEA,IAAIrB,KAAK,CAAC+B,QAAQ,CAACC,KAAK,CAACjB,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,OAAOf,KAAA,CAAAiC,aAAA,CAAAjC,KAAA,CAAAkC,QAAA,MAAI,CAAC;EACd;EAEA,OACElC,KAAA,CAAAiC,aAAA,CAACzB,KAAK,EAAA2B,QAAA;IACJC,GAAG,EAAC,QAAQ;IACZpB,SAAS,EAAEZ,UAAU,CAAC,2BAA2B,EAAEY,SAAS;EAAE,GAC1DC,IAAI,GAAAoB,GAAA,KAAAA,GAAA,GAERrC,KAAA,CAAAiC,aAAA,CAAC5B,EAAE;IAACiC,KAAK,EAAE;EAAE,CAAE,CAAC,GAEhBtC,KAAA,CAAAiC,aAAA,CAACvB,cAAc,CAAC6B,QAAQ;IAAClB,KAAK,EAAE;MAAEQ;IAAa;EAAE,GAC/C7B,KAAA,CAAAiC,aAAA,CAAC3B,IAAI,CAACkC,UAAU;IAACJ,GAAG,EAAC,SAAS;IAACK,GAAG,EAAC;EAAO,GACvC1B,QACc,CACM,CAAC,EAE1Bf,KAAA,CAAAiC,aAAA,CAAC1B,UAAU;IACTmC,IAAI,EAAEd,SAAS,IAAID,eAAgB;IACnCgB,UAAU,EAAE;MAAEP,GAAG,EAAE;IAAU,CAAE;IAC/BQ,YAAY,EAAE;EAAM,GAEnBpB,gBACS,CACP,CAAC;AAEZ;AAEAX,OAAO,CAACgC,qBAAqB,GAAG,IAAI"}

package/es/extensions/forms/Iterate/Toolbar/ToolbarContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ToolbarContextState {
+    setShowError?: (showError: boolean) => void;
+}
+declare const ToolbarContext: React.Context<ToolbarContextState>;
+export default ToolbarContext;

package/es/extensions/forms/Iterate/Toolbar/ToolbarContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const ToolbarContext = React.createContext(undefined);
+export default ToolbarContext;
+//# sourceMappingURL=ToolbarContext.js.map

package/es/extensions/forms/Iterate/Toolbar/ToolbarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarContext.js","names":["React","ToolbarContext","createContext","undefined"],"sources":["../../../../../../src/extensions/forms/Iterate/Toolbar/ToolbarContext.ts"],"sourcesContent":["import React from 'react'\n\nexport interface ToolbarContextState {\n  setShowError?: (showError: boolean) => void\n}\n\nconst ToolbarContext = React.createContext<\n  ToolbarContextState | undefined\n>(undefined)\n\nexport default ToolbarContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAMzB,MAAMC,cAAc,GAAGD,KAAK,CAACE,aAAa,CAExCC,SAAS,CAAC;AAEZ,eAAeF,cAAc"}

package/es/extensions/forms/Iterate/ViewContainer/EditButton.d.ts

@@ -0,0 +1 @@
+export default function ViewContainerEditButton(): import("react/jsx-runtime").JSX.Element;