@dnb/eufemia 10.47.0 → 10.49.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,48 +2,71 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["pushValue", "className"];
-import React, { useCallback, useContext } from 'react';
+const _excluded = ["pushValue", "className", "path", "text", "children"];
+import React, { useCallback, useContext, useMemo } 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';
+import { convertJsxToString } from '../../../../shared/component-helper';
 function PushButton(props) {
+  const {
+    handlePathChange
+  } = useContext(DataContext) || {};
   const iterateItemContext = useContext(IterateItemContext);
   const {
     handlePush
   } = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
   const {
       pushValue,
-      className
+      className,
+      path,
+      text,
+      children
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
   const buttonProps = omitDataValueReadWriteProps(restProps);
-  const {
-    value,
-    handleChange,
-    children
-  } = useFieldProps(restProps);
-  if (value !== undefined && !Array.isArray(value)) {
+  const arrayValue = useDataValue().getValueByPath(path);
+  if (arrayValue !== undefined && !Array.isArray(arrayValue)) {
     throw new Error('PushButton received a non-array value');
   }
-  const handleClick = useCallback(() => {
-    const newValue = typeof pushValue === 'function' ? pushValue(value) : pushValue;
+  const {
+    setLastItemContainerMode
+  } = useSwitchContainerMode({
+    path
+  });
+  const handleClick = useCallback(async () => {
+    const newValue = typeof pushValue === 'function' ? pushValue(arrayValue) : pushValue;
     if (handlePush) {
       handlePush(newValue);
-      return;
+    } else {
+      await (handlePathChange === null || handlePathChange === void 0 ? void 0 : handlePathChange(path, [...(arrayValue !== null && arrayValue !== void 0 ? arrayValue : []), newValue]));
+    }
+    setTimeout(() => {
+      setLastItemContainerMode('view');
+    }, 100);
+  }, [handlePathChange, handlePush, path, pushValue, setLastItemContainerMode, arrayValue]);
+  const content = useMemo(() => {
+    if (children || text) {
+      const str = convertJsxToString(children || text);
+      if (str.includes('{nextItemNo}')) {
+        const nextItemNo = ((arrayValue === null || arrayValue === void 0 ? void 0 : arrayValue.length) || 0) + 1;
+        return str.replace('{nextItemNo}', String(nextItemNo));
+      }
     }
-    handleChange([...(value !== null && value !== void 0 ? value : []), newValue]);
-  }, [value, pushValue, handlePush, handleChange]);
+    return children || text;
+  }, [arrayValue === null || arrayValue === void 0 ? void 0 : arrayValue.length, children, text]);
   return React.createElement(Button, _extends({
     className: classnames('dnb-forms-iterate-push-button', className),
     variant: "secondary",
     icon: add,
     icon_position: "left",
     on_click: handleClick
-  }, buttonProps), children);
+  }, buttonProps), content);
 }
 PushButton._supportsSpacingProps = true;
 export default PushButton;

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","useMemo","classnames","Button","IterateItemContext","useSwitchContainerMode","omitDataValueReadWriteProps","add","DataContext","useDataValue","convertJsxToString","PushButton","props","handlePathChange","iterateItemContext","handlePush","pushValue","className","path","text","children","restProps","_objectWithoutProperties","_excluded","buttonProps","arrayValue","getValueByPath","undefined","Array","isArray","Error","setLastItemContainerMode","handleClick","newValue","setTimeout","content","str","includes","nextItemNo","length","replace","String","createElement","_extends","variant","icon","icon_position","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/PushButton/PushButton.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } 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'\nimport { convertJsxToString } from '../../../../shared/component-helper'\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, text, children, ...restProps } =\n    props\n  const buttonProps = omitDataValueReadWriteProps(restProps)\n  const arrayValue = useDataValue().getValueByPath(path)\n\n  if (arrayValue !== undefined && !Array.isArray(arrayValue)) {\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(arrayValue) : 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, [...(arrayValue ?? []), 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    arrayValue,\n  ])\n\n  const content = useMemo(() => {\n    if (children || text) {\n      const str = convertJsxToString(children || text)\n\n      if (str.includes('{nextItemNo}')) {\n        const nextItemNo = (arrayValue?.length || 0) + 1\n        return str.replace('{nextItemNo}', String(nextItemNo))\n      }\n    }\n\n    return children || text\n  }, [arrayValue?.length, children, text])\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      {content}\n    </Button>\n  )\n}\n\nPushButton._supportsSpacingProps = true\nexport default PushButton\n"],"mappings":"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"}

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

@@ -2,31 +2,47 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children"];
-import React, { useCallback, useContext } from 'react';
+const _excluded = ["className", "text", "children"];
+import React, { useCallback, useContext, useMemo } from 'react';
 import classnames from 'classnames';
 import Button from '../../../../components/Button';
 import { add } from '../../../../icons';
 import IterateItemContext from '../IterateItemContext';
+import PushContainerContext from './PushContainerContext';
+import { convertJsxToString } from '../../../../shared/component-helper';
 function OpenButton(props) {
   const {
       className,
+      text,
       children
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
   const {
     switchContainerMode
   } = useContext(IterateItemContext) || {};
+  const {
+    entries
+  } = useContext(PushContainerContext) || {};
   const handleClick = useCallback(() => {
     switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
   }, [switchContainerMode]);
+  const content = useMemo(() => {
+    if (children || text) {
+      const str = convertJsxToString(children || text);
+      if (str.includes('{nextItemNo}')) {
+        const nextItemNo = ((entries === null || entries === void 0 ? void 0 : entries.length) || 0) + 1;
+        return str.replace('{nextItemNo}', String(nextItemNo));
+      }
+    }
+    return children || text;
+  }, [entries === null || entries === void 0 ? void 0 : entries.length, children, text]);
   return React.createElement(Button, _extends({
     className: classnames('dnb-forms-iterate-open-button', className),
     variant: "secondary",
     icon: add,
     icon_position: "left",
     on_click: handleClick
-  }, restProps), children);
+  }, restProps), content);
 }
 export default OpenButton;
 //# sourceMappingURL=OpenButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OpenButton.js","names":["React","useCallback","useContext","classnames","Button","add","IterateItemContext","OpenButton","props","className","children","restProps","_objectWithoutProperties","_excluded","switchContainerMode","handleClick","createElement","_extends","variant","icon","icon_position","on_click"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/OpenButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport Button, { ButtonProps } from '../../../../components/Button'\nimport { add } from '../../../../icons'\nimport IterateItemContext from '../IterateItemContext'\n\ntype Props = ButtonProps\n\nfunction OpenButton(props: Props) {\n  const { className, children, ...restProps } = props\n  const { switchContainerMode } = useContext(IterateItemContext) || {}\n\n  const handleClick = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-iterate-open-button', className)}\n      variant=\"secondary\"\n      icon={add}\n      icon_position=\"left\"\n      on_click={handleClick}\n      {...restProps}\n    >\n      {children}\n    </Button>\n  )\n}\n\nexport default OpenButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAuB,+BAA+B;AACnE,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,kBAAkB,MAAM,uBAAuB;AAItD,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;MAAEC,SAAS;MAAEC;IAAuB,CAAC,GAAGF,KAAK;IAAnBG,SAAS,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EACnD,MAAM;IAAEC;EAAoB,CAAC,GAAGZ,UAAU,CAACI,kBAAkB,CAAC,IAAI,CAAC,CAAC;EAEpE,MAAMS,WAAW,GAAGd,WAAW,CAAC,MAAM;IACpCa,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEd,KAAA,CAAAgB,aAAA,CAACZ,MAAM,EAAAa,QAAA;IACLR,SAAS,EAAEN,UAAU,CAAC,+BAA+B,EAAEM,SAAS,CAAE;IAClES,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAEd,GAAI;IACVe,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEN;EAAY,GAClBJ,SAAS,GAEZD,QACK,CAAC;AAEb;AAEA,eAAeH,UAAU"}
+{"version":3,"file":"OpenButton.js","names":["React","useCallback","useContext","useMemo","classnames","Button","add","IterateItemContext","PushContainerContext","convertJsxToString","OpenButton","props","className","text","children","restProps","_objectWithoutProperties","_excluded","switchContainerMode","entries","handleClick","content","str","includes","nextItemNo","length","replace","String","createElement","_extends","variant","icon","icon_position","on_click"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/OpenButton.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport Button, { ButtonProps } from '../../../../components/Button'\nimport { add } from '../../../../icons'\nimport IterateItemContext from '../IterateItemContext'\nimport PushContainerContext from './PushContainerContext'\nimport { convertJsxToString } from '../../../../shared/component-helper'\n\ntype Props = ButtonProps\n\nfunction OpenButton(props: Props) {\n  const { className, text, children, ...restProps } = props\n  const { switchContainerMode } = useContext(IterateItemContext) || {}\n  const { entries } = useContext(PushContainerContext) || {}\n\n  const handleClick = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  const content = useMemo(() => {\n    if (children || text) {\n      const str = convertJsxToString(children || text)\n\n      if (str.includes('{nextItemNo}')) {\n        const nextItemNo = (entries?.length || 0) + 1\n        return str.replace('{nextItemNo}', String(nextItemNo))\n      }\n    }\n\n    return children || text\n  }, [entries?.length, children, text])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-iterate-open-button', className)}\n      variant=\"secondary\"\n      icon={add}\n      icon_position=\"left\"\n      on_click={handleClick}\n      {...restProps}\n    >\n      {content}\n    </Button>\n  )\n}\n\nexport default OpenButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC/D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAuB,+BAA+B;AACnE,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,SAASC,kBAAkB,QAAQ,qCAAqC;AAIxE,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;MAAEC,SAAS;MAAEC,IAAI;MAAEC;IAAuB,CAAC,GAAGH,KAAK;IAAnBI,SAAS,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA;EACzD,MAAM;IAAEC;EAAoB,CAAC,GAAGhB,UAAU,CAACK,kBAAkB,CAAC,IAAI,CAAC,CAAC;EACpE,MAAM;IAAEY;EAAQ,CAAC,GAAGjB,UAAU,CAACM,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAE1D,MAAMY,WAAW,GAAGnB,WAAW,CAAC,MAAM;IACpCiB,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,MAAMG,OAAO,GAAGlB,OAAO,CAAC,MAAM;IAC5B,IAAIW,QAAQ,IAAID,IAAI,EAAE;MACpB,MAAMS,GAAG,GAAGb,kBAAkB,CAACK,QAAQ,IAAID,IAAI,CAAC;MAEhD,IAAIS,GAAG,CAACC,QAAQ,CAAC,cAAc,CAAC,EAAE;QAChC,MAAMC,UAAU,GAAG,CAAC,CAAAL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,KAAI,CAAC,IAAI,CAAC;QAC7C,OAAOH,GAAG,CAACI,OAAO,CAAC,cAAc,EAAEC,MAAM,CAACH,UAAU,CAAC,CAAC;MACxD;IACF;IAEA,OAAOV,QAAQ,IAAID,IAAI;EACzB,CAAC,EAAE,CAACM,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,MAAM,EAAEX,QAAQ,EAAED,IAAI,CAAC,CAAC;EAErC,OACEb,KAAA,CAAA4B,aAAA,CAACvB,MAAM,EAAAwB,QAAA;IACLjB,SAAS,EAAER,UAAU,CAAC,+BAA+B,EAAEQ,SAAS,CAAE;IAClEkB,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAEzB,GAAI;IACV0B,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEb;EAAY,GAClBL,SAAS,GAEZM,OACK,CAAC;AAEb;AAEA,eAAeX,UAAU"}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Path } from '../../types';
 import { SpacingProps } from '../../../../shared/types';
+import { ArrayItemAreaProps } from '../Array/ArrayItemArea';
 export type Props = {
     /**
      * The path to the array to add the new item to.
@@ -22,13 +23,17 @@ 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.
      */
     children: React.ReactNode;
 };
-export type AllProps = Props & SpacingProps;
+export type AllProps = Props & SpacingProps & ArrayItemAreaProps;
 declare function PushContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PushContainer {
     var OpenButton: typeof import("./OpenButton").default;

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'\nimport { ArrayItemAreaProps } from '../Array/ArrayItemArea'\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 & ArrayItemAreaProps\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,16 @@ export const PushContainerProperties = {
     type: 'function',
     status: 'optional'
   },
+  variant: {
+    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    type: 'string',
+    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","variant","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  variant: {\n    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',\n    type: 'string',\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,2FAA2F;IAChGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,OAAO,EAAE;IACPP,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,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,MAAMO,mBAAyC,GAAG,CAAC,CAAC"}

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

@@ -2,45 +2,43 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className"];
+const _excluded = ["text", "children", "className"];
 import React, { useCallback, useContext } from 'react';
 import classnames from 'classnames';
 import { Button } from '../../../../components';
 import IterateItemContext from '../IterateItemContext';
-import { useFieldProps, useTranslation } from '../../hooks';
-import ElementBlockContext from '../AnimatedContainer/ElementBlockContext';
+import { useTranslation } from '../../hooks';
+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');
   }
   const {
+      text,
+      children,
       className
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
-  const {
-    children,
-    text
-  } = useFieldProps(restProps);
   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","useTranslation","ArrayItemAreaContext","omitDataValueReadWriteProps","trash","RemoveButton","props","iterateItemContext","handleRemove","Error","text","children","className","restProps","_objectWithoutProperties","_excluded","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 { 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 { text, children, className, ...restProps } = props\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,cAAc,QAAQ,aAAa;AAC5C,OAAOC,oBAAoB,MAAM,+BAA+B;AAChE,SAEEC,2BAA2B,QACtB,aAAa;AACpB,SAASC,KAAK,QAAQ,mBAAmB;AAKzC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,kBAAkB,GAAGV,UAAU,CAACG,kBAAkB,CAAC;EACzD,MAAM;IAAEQ;EAAa,CAAC,GAAGD,kBAAkB,IAAI,CAAC,CAAC;EAEjD,IAAI,CAACA,kBAAkB,EAAE;IACvB,MAAM,IAAIE,KAAK,CAAC,8CAA8C,CAAC;EACjE;EAEA,MAAM;MAAEC,IAAI;MAAEC,QAAQ;MAAEC;IAAwB,CAAC,GAAGN,KAAK;IAAnBO,SAAS,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA;EACzD,MAAMC,WAAW,GAAGb,2BAA2B,CAACU,SAAS,CAAC;EAC1D,MAAMI,WAAW,GAAGhB,cAAc,CAAC,CAAC,CAACI,YAAY;EACjD,MAAMa,WAAW,GAAGR,IAAI,IAAIC,QAAQ,IAAIM,WAAW,CAACP,IAAI;EAExD,MAAMS,mBAAmB,GAAGtB,UAAU,CAACK,oBAAoB,CAAC;EAC5D,MAAM;IAAEkB;EAAiB,CAAC,GAAGD,mBAAmB,IAAI,CAAC,CAAC;EAEtD,MAAME,WAAW,GAAGzB,WAAW,CAAC,MAAM;IACpC,IAAIwB,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,OACEzB,KAAA,CAAA2B,aAAA,CAACvB,MAAM,EAAAwB,QAAA;IACLX,SAAS,EAAEd,UAAU,CACnB,yCAAyC,EACzCc,SACF,CAAE;IACFY,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;
 }