@dnb/eufemia 10.48.0 → 10.50.0

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/extensions/forms/Iterate/Array/types.ts"],"sourcesContent":["import { Path, UseFieldProps, Validator } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\n\nexport type ContainerMode = 'view' | 'edit' | 'auto'\nexport type Value = Array<unknown | Record<string, unknown>>\nexport type ElementChild =\n  | React.ReactNode\n  | ((value: any, index: number) => React.ReactNode)\nexport type Props = Omit<\n  FlexContainerProps,\n  keyof Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>\n> &\n  Pick<\n    UseFieldProps<Value, undefined | Value>,\n    | 'value'\n    | 'defaultValue'\n    | 'emptyValue'\n    | 'onChange'\n    | 'validateInitially'\n    | 'continuousValidation'\n  > & {\n    children: ElementChild | Array<ElementChild>\n    path?: Path\n    countPath?: Path\n    countPathLimit?: number\n    validator?: Validator<Value>\n    withoutFlex?: boolean\n    placeholder?: React.ReactNode\n    containerMode?: ContainerMode\n    countPathTransform?: (params: { value: any; index: number }) => any\n  }\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/extensions/forms/Iterate/Array/types.ts"],"sourcesContent":["import { Path, UseFieldProps, Validator } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\n\nexport type ContainerMode = 'view' | 'edit' | 'auto'\nexport type Value = Array<unknown | Record<string, unknown>>\nexport type ElementChild =\n  | React.ReactNode\n  | ((value: any, index: number) => React.ReactNode)\nexport type Props = Omit<\n  FlexContainerProps,\n  keyof Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>\n> &\n  Pick<\n    UseFieldProps<Value, undefined | Value>,\n    | 'value'\n    | 'defaultValue'\n    | 'emptyValue'\n    | 'onChange'\n    | 'validateInitially'\n    | 'continuousValidation'\n  > & {\n    children: ElementChild | Array<ElementChild>\n    path?: Path\n    limit?: number\n    countPath?: Path\n    countPathLimit?: number\n    validator?: Validator<Value>\n    withoutFlex?: boolean\n    animate?: boolean\n    placeholder?: React.ReactNode\n    containerMode?: ContainerMode\n    countPathTransform?: (params: { value: any; index: number }) => any\n  }\n"],"mappings":""}

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

@@ -1,6 +1,8 @@
 "use client";
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["onClick"];
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { Button } from '../../../../components';
 import useTranslation from '../../hooks/useTranslation';
@@ -10,6 +12,10 @@ import FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryC
 import { close } from '../../../../icons';
 import RemoveButton from '../RemoveButton';
 export default function EditToolbarTools(props) {
+  const {
+      onClick
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
   const {
     restoreOriginalValue,
     switchContainerMode,
@@ -40,7 +46,11 @@ export default function EditToolbarTools(props) {
       valueBackupRef.current = null;
     }
   }, [arrayValue, containerMode, index]);
-  const cancelHandler = useCallback(() => {
+  const cancelHandler = useCallback(_ref => {
+    let {
+      event
+    } = _ref;
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
     if (hasError && initialContainerMode === 'auto') {
       setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(true);
       if (hasVisibleError) {
@@ -52,7 +62,7 @@ export default function EditToolbarTools(props) {
       setShowBoundaryErrors === null || setShowBoundaryErrors === void 0 ? void 0 : setShowBoundaryErrors(false);
       switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('view');
     }
-  }, [hasError, hasVisibleError, initialContainerMode, restoreOriginalValue, setShowBoundaryErrors, setShowError, switchContainerMode]);
+  }, [hasError, hasVisibleError, initialContainerMode, onClick, restoreOriginalValue, setShowBoundaryErrors, setShowError, switchContainerMode]);
   const wasNew = useWasNew({
     isNew,
     containerMode
@@ -62,21 +72,22 @@ export default function EditToolbarTools(props) {
   }
   if (wasNew) {
     return React.createElement(RemoveButton, _extends({
-      text: removeButton
-    }, props));
+      text: removeButton,
+      onClick: onClick
+    }, rest));
   }
   return React.createElement(Button, _extends({
     variant: "tertiary",
     icon: close,
     icon_position: "left",
     on_click: cancelHandler
-  }, props), cancelButton);
+  }, rest), cancelButton);
 }
-export function useWasNew(_ref) {
+export function useWasNew(_ref2) {
   let {
     isNew,
     containerMode
-  } = _ref;
+  } = _ref2;
   const wasNewRef = useRef(isNew);
   useEffect(() => {
     if (containerMode === 'view') {

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

@@ -1 +1 @@
-{"version":3,"file":"CancelButton.js","names":["React","useCallback","useContext","useEffect","useRef","Button","useTranslation","IterateItemContext","ToolbarContext","FieldBoundaryContext","close","RemoveButton","EditToolbarTools","props","restoreOriginalValue","switchContainerMode","containerMode","initialContainerMode","arrayValue","isNew","index","hasError","hasVisibleError","setShowBoundaryErrors","setShowError","cancelButton","removeButton","IterateEditContainer","valueBackupRef","current","cancelHandler","wasNew","useWasNew","length","createElement","Fragment","_extends","text","variant","icon","icon_position","on_click","_ref","wasNewRef"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/CancelButton.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport { Button } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateItemContext from '../IterateItemContext'\nimport ToolbarContext from '../Toolbar/ToolbarContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { close } from '../../../../icons'\nimport { ButtonProps } from '../../../../components/Button'\nimport RemoveButton, { Props as RemoveButtonProps } from '../RemoveButton'\nimport { ContainerMode } from '../Array'\n\ntype Props = ButtonProps\n\nexport default function EditToolbarTools(props: Props) {\n  const {\n    restoreOriginalValue,\n    switchContainerMode,\n    containerMode,\n    initialContainerMode,\n    arrayValue,\n    isNew,\n    index,\n  } = useContext(IterateItemContext) || {}\n  const { hasError, hasVisibleError, setShowBoundaryErrors } =\n    useContext(FieldBoundaryContext) || {}\n  const { setShowError } = useContext(ToolbarContext) || {}\n\n  const { cancelButton, removeButton } =\n    useTranslation().IterateEditContainer\n  const valueBackupRef = useRef<unknown>()\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const cancelHandler = useCallback(() => {\n    if (hasError && initialContainerMode === 'auto') {\n      setShowBoundaryErrors?.(true)\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      restoreOriginalValue?.(valueBackupRef.current)\n      setShowError(false)\n      setShowBoundaryErrors?.(false)\n      switchContainerMode?.('view')\n    }\n  }, [\n    hasError,\n    hasVisibleError,\n    initialContainerMode,\n    restoreOriginalValue,\n    setShowBoundaryErrors,\n    setShowError,\n    switchContainerMode,\n  ])\n\n  const wasNew = useWasNew({ isNew, containerMode })\n\n  if (containerMode === 'edit' && arrayValue?.length === 0) {\n    return <></>\n  }\n\n  if (wasNew) {\n    return (\n      <RemoveButton\n        text={removeButton}\n        {...(props as RemoveButtonProps)}\n      />\n    )\n  }\n\n  return (\n    <Button\n      variant=\"tertiary\"\n      icon={close}\n      icon_position=\"left\"\n      on_click={cancelHandler}\n      {...props}\n    >\n      {cancelButton}\n    </Button>\n  )\n}\n\nexport function useWasNew({\n  isNew,\n  containerMode,\n}: {\n  isNew: boolean\n  containerMode: ContainerMode\n}) {\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  return wasNewRef.current\n}\n"],"mappings":"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"}
+{"version":3,"file":"CancelButton.js","names":["React","useCallback","useContext","useEffect","useRef","Button","useTranslation","IterateItemContext","ToolbarContext","FieldBoundaryContext","close","RemoveButton","EditToolbarTools","props","onClick","rest","_objectWithoutProperties","_excluded","restoreOriginalValue","switchContainerMode","containerMode","initialContainerMode","arrayValue","isNew","index","hasError","hasVisibleError","setShowBoundaryErrors","setShowError","cancelButton","removeButton","IterateEditContainer","valueBackupRef","current","cancelHandler","_ref","event","wasNew","useWasNew","length","createElement","Fragment","_extends","text","variant","icon","icon_position","on_click","_ref2","wasNewRef"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/CancelButton.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport { Button } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateItemContext from '../IterateItemContext'\nimport ToolbarContext from '../Toolbar/ToolbarContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { close } from '../../../../icons'\nimport { ButtonProps } from '../../../../components/Button'\nimport RemoveButton, { Props as RemoveButtonProps } from '../RemoveButton'\nimport { ContainerMode } from '../Array'\n\ntype Props = ButtonProps\n\nexport default function EditToolbarTools(props: Props) {\n  const { onClick, ...rest } = props\n  const {\n    restoreOriginalValue,\n    switchContainerMode,\n    containerMode,\n    initialContainerMode,\n    arrayValue,\n    isNew,\n    index,\n  } = useContext(IterateItemContext) || {}\n  const { hasError, hasVisibleError, setShowBoundaryErrors } =\n    useContext(FieldBoundaryContext) || {}\n  const { setShowError } = useContext(ToolbarContext) || {}\n\n  const { cancelButton, removeButton } =\n    useTranslation().IterateEditContainer\n  const valueBackupRef = useRef<unknown>()\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const cancelHandler = useCallback(\n    ({ event }: { event: React.MouseEvent<HTMLButtonElement> }) => {\n      onClick?.(event)\n      if (hasError && initialContainerMode === 'auto') {\n        setShowBoundaryErrors?.(true)\n        if (hasVisibleError) {\n          setShowError(true)\n        }\n      } else {\n        restoreOriginalValue?.(valueBackupRef.current)\n        setShowError(false)\n        setShowBoundaryErrors?.(false)\n        switchContainerMode?.('view')\n      }\n    },\n    [\n      hasError,\n      hasVisibleError,\n      initialContainerMode,\n      onClick,\n      restoreOriginalValue,\n      setShowBoundaryErrors,\n      setShowError,\n      switchContainerMode,\n    ]\n  )\n\n  const wasNew = useWasNew({ isNew, containerMode })\n\n  if (containerMode === 'edit' && arrayValue?.length === 0) {\n    return <></>\n  }\n\n  if (wasNew) {\n    return (\n      <RemoveButton\n        text={removeButton}\n        onClick={onClick}\n        {...(rest as RemoveButtonProps)}\n      />\n    )\n  }\n\n  return (\n    <Button\n      variant=\"tertiary\"\n      icon={close}\n      icon_position=\"left\"\n      on_click={cancelHandler}\n      {...rest}\n    >\n      {cancelButton}\n    </Button>\n  )\n}\n\nexport function useWasNew({\n  isNew,\n  containerMode,\n}: {\n  isNew: boolean\n  containerMode: ContainerMode\n}) {\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  return wasNewRef.current\n}\n"],"mappings":"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"}

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

@@ -24,7 +24,6 @@ export default function DoneButton(props) {
   const {
     commitHandleRef
   } = useContext(PushContainerContext) || {};
-  useContext(FieldBoundaryContext) || {};
   const {
     setShowError
   } = useContext(ToolbarContext) || {};

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

@@ -1 +1 @@
-{"version":3,"file":"DoneButton.js","names":["React","useCallback","useContext","useEffect","useRef","Button","useTranslation","IterateItemContext","ToolbarContext","FieldBoundaryContext","PushContainerContext","check","DoneButton","props","switchContainerMode","containerMode","arrayValue","index","hasError","hasVisibleError","setShowBoundaryErrors","commitHandleRef","setShowError","doneButton","IterateEditContainer","valueBackupRef","current","doneHandler","_commitHandleRef$curr","call","createElement","_extends","variant","icon","icon_position","on_click"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/DoneButton.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport { Button } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateItemContext from '../IterateItemContext'\nimport ToolbarContext from '../Toolbar/ToolbarContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport PushContainerContext from '../PushContainer/PushContainerContext'\nimport { check } from '../../../../icons'\nimport { ButtonProps } from '../../../../components/Button'\n\ntype Props = ButtonProps\n\nexport default function DoneButton(props: Props) {\n  const { switchContainerMode, containerMode, arrayValue, index } =\n    useContext(IterateItemContext) || {}\n  const { hasError, hasVisibleError, setShowBoundaryErrors } =\n    useContext(FieldBoundaryContext) || {}\n  const { commitHandleRef } = useContext(PushContainerContext) || {}\n  useContext(FieldBoundaryContext) || {}\n  const { setShowError } = useContext(ToolbarContext) || {}\n\n  const { doneButton } = useTranslation().IterateEditContainer\n  const valueBackupRef = useRef<unknown>()\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const doneHandler = useCallback(() => {\n    if (hasError) {\n      setShowBoundaryErrors?.(true)\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowBoundaryErrors?.(false)\n      setShowError(false)\n      if (commitHandleRef) {\n        commitHandleRef.current?.()\n      } else {\n        switchContainerMode?.('view')\n      }\n    }\n  }, [\n    commitHandleRef,\n    hasError,\n    hasVisibleError,\n    setShowBoundaryErrors,\n    setShowError,\n    switchContainerMode,\n  ])\n\n  return (\n    <Button\n      variant=\"tertiary\"\n      icon={check}\n      icon_position=\"left\"\n      on_click={doneHandler}\n      {...props}\n    >\n      {doneButton}\n    </Button>\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,cAAc,MAAM,4BAA4B;AACvD,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,cAAc,MAAM,2BAA2B;AACtD,OAAOC,oBAAoB,MAAM,sDAAsD;AACvF,OAAOC,oBAAoB,MAAM,uCAAuC;AACxE,SAASC,KAAK,QAAQ,mBAAmB;AAKzC,eAAe,SAASC,UAAUA,CAACC,KAAY,EAAE;EAC/C,MAAM;IAAEC,mBAAmB;IAAEC,aAAa;IAAEC,UAAU;IAAEC;EAAM,CAAC,GAC7Df,UAAU,CAACK,kBAAkB,CAAC,IAAI,CAAC,CAAC;EACtC,MAAM;IAAEW,QAAQ;IAAEC,eAAe;IAAEC;EAAsB,CAAC,GACxDlB,UAAU,CAACO,oBAAoB,CAAC,IAAI,CAAC,CAAC;EACxC,MAAM;IAAEY;EAAgB,CAAC,GAAGnB,UAAU,CAACQ,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAClER,UAAU,CAACO,oBAAoB,CAAC,IAAI,CAAC,CAAC;EACtC,MAAM;IAAEa;EAAa,CAAC,GAAGpB,UAAU,CAACM,cAAc,CAAC,IAAI,CAAC,CAAC;EAEzD,MAAM;IAAEe;EAAW,CAAC,GAAGjB,cAAc,CAAC,CAAC,CAACkB,oBAAoB;EAC5D,MAAMC,cAAc,GAAGrB,MAAM,CAAU,CAAC;EAExCD,SAAS,CAAC,MAAM;IACd,IAAIY,aAAa,KAAK,MAAM,IAAI,CAACU,cAAc,CAACC,OAAO,EAAE;MACvDD,cAAc,CAACC,OAAO,GAAGV,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAGC,KAAK,CAAC;IAC9C;IACA,IAAIF,aAAa,KAAK,MAAM,EAAE;MAC5BU,cAAc,CAACC,OAAO,GAAG,IAAI;IAC/B;EACF,CAAC,EAAE,CAACV,UAAU,EAAED,aAAa,EAAEE,KAAK,CAAC,CAAC;EAEtC,MAAMU,WAAW,GAAG1B,WAAW,CAAC,MAAM;IACpC,IAAIiB,QAAQ,EAAE;MACZE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,IAAI,CAAC;MAC7B,IAAID,eAAe,EAAE;QACnBG,YAAY,CAAC,IAAI,CAAC;MACpB;IACF,CAAC,MAAM;MACLF,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,KAAK,CAAC;MAC9BE,YAAY,CAAC,KAAK,CAAC;MACnB,IAAID,eAAe,EAAE;QAAA,IAAAO,qBAAA;QACnB,CAAAA,qBAAA,GAAAP,eAAe,CAACK,OAAO,cAAAE,qBAAA,uBAAvBA,qBAAA,CAAAC,IAAA,CAAAR,eAA0B,CAAC;MAC7B,CAAC,MAAM;QACLP,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;MAC/B;IACF;EACF,CAAC,EAAE,CACDO,eAAe,EACfH,QAAQ,EACRC,eAAe,EACfC,qBAAqB,EACrBE,YAAY,EACZR,mBAAmB,CACpB,CAAC;EAEF,OACEd,KAAA,CAAA8B,aAAA,CAACzB,MAAM,EAAA0B,QAAA;IACLC,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEtB,KAAM;IACZuB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAER;EAAY,GAClBd,KAAK,GAERU,UACK,CAAC;AAEb"}
+{"version":3,"file":"DoneButton.js","names":["React","useCallback","useContext","useEffect","useRef","Button","useTranslation","IterateItemContext","ToolbarContext","FieldBoundaryContext","PushContainerContext","check","DoneButton","props","switchContainerMode","containerMode","arrayValue","index","hasError","hasVisibleError","setShowBoundaryErrors","commitHandleRef","setShowError","doneButton","IterateEditContainer","valueBackupRef","current","doneHandler","_commitHandleRef$curr","call","createElement","_extends","variant","icon","icon_position","on_click"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/DoneButton.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport { Button } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateItemContext from '../IterateItemContext'\nimport ToolbarContext from '../Toolbar/ToolbarContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport PushContainerContext from '../PushContainer/PushContainerContext'\nimport { check } from '../../../../icons'\nimport { ButtonProps } from '../../../../components/Button'\n\ntype Props = ButtonProps\n\nexport default function DoneButton(props: Props) {\n  const { switchContainerMode, containerMode, arrayValue, index } =\n    useContext(IterateItemContext) || {}\n  const { hasError, hasVisibleError, setShowBoundaryErrors } =\n    useContext(FieldBoundaryContext) || {}\n  const { commitHandleRef } = useContext(PushContainerContext) || {}\n  const { setShowError } = useContext(ToolbarContext) || {}\n\n  const { doneButton } = useTranslation().IterateEditContainer\n  const valueBackupRef = useRef<unknown>()\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const doneHandler = useCallback(() => {\n    if (hasError) {\n      setShowBoundaryErrors?.(true)\n      if (hasVisibleError) {\n        setShowError(true)\n      }\n    } else {\n      setShowBoundaryErrors?.(false)\n      setShowError(false)\n      if (commitHandleRef) {\n        commitHandleRef.current?.()\n      } else {\n        switchContainerMode?.('view')\n      }\n    }\n  }, [\n    commitHandleRef,\n    hasError,\n    hasVisibleError,\n    setShowBoundaryErrors,\n    setShowError,\n    switchContainerMode,\n  ])\n\n  return (\n    <Button\n      variant=\"tertiary\"\n      icon={check}\n      icon_position=\"left\"\n      on_click={doneHandler}\n      {...props}\n    >\n      {doneButton}\n    </Button>\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,cAAc,MAAM,4BAA4B;AACvD,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,cAAc,MAAM,2BAA2B;AACtD,OAAOC,oBAAoB,MAAM,sDAAsD;AACvF,OAAOC,oBAAoB,MAAM,uCAAuC;AACxE,SAASC,KAAK,QAAQ,mBAAmB;AAKzC,eAAe,SAASC,UAAUA,CAACC,KAAY,EAAE;EAC/C,MAAM;IAAEC,mBAAmB;IAAEC,aAAa;IAAEC,UAAU;IAAEC;EAAM,CAAC,GAC7Df,UAAU,CAACK,kBAAkB,CAAC,IAAI,CAAC,CAAC;EACtC,MAAM;IAAEW,QAAQ;IAAEC,eAAe;IAAEC;EAAsB,CAAC,GACxDlB,UAAU,CAACO,oBAAoB,CAAC,IAAI,CAAC,CAAC;EACxC,MAAM;IAAEY;EAAgB,CAAC,GAAGnB,UAAU,CAACQ,oBAAoB,CAAC,IAAI,CAAC,CAAC;EAClE,MAAM;IAAEY;EAAa,CAAC,GAAGpB,UAAU,CAACM,cAAc,CAAC,IAAI,CAAC,CAAC;EAEzD,MAAM;IAAEe;EAAW,CAAC,GAAGjB,cAAc,CAAC,CAAC,CAACkB,oBAAoB;EAC5D,MAAMC,cAAc,GAAGrB,MAAM,CAAU,CAAC;EAExCD,SAAS,CAAC,MAAM;IACd,IAAIY,aAAa,KAAK,MAAM,IAAI,CAACU,cAAc,CAACC,OAAO,EAAE;MACvDD,cAAc,CAACC,OAAO,GAAGV,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAGC,KAAK,CAAC;IAC9C;IACA,IAAIF,aAAa,KAAK,MAAM,EAAE;MAC5BU,cAAc,CAACC,OAAO,GAAG,IAAI;IAC/B;EACF,CAAC,EAAE,CAACV,UAAU,EAAED,aAAa,EAAEE,KAAK,CAAC,CAAC;EAEtC,MAAMU,WAAW,GAAG1B,WAAW,CAAC,MAAM;IACpC,IAAIiB,QAAQ,EAAE;MACZE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,IAAI,CAAC;MAC7B,IAAID,eAAe,EAAE;QACnBG,YAAY,CAAC,IAAI,CAAC;MACpB;IACF,CAAC,MAAM;MACLF,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAG,KAAK,CAAC;MAC9BE,YAAY,CAAC,KAAK,CAAC;MACnB,IAAID,eAAe,EAAE;QAAA,IAAAO,qBAAA;QACnB,CAAAA,qBAAA,GAAAP,eAAe,CAACK,OAAO,cAAAE,qBAAA,uBAAvBA,qBAAA,CAAAC,IAAA,CAAAR,eAA0B,CAAC;MAC7B,CAAC,MAAM;QACLP,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;MAC/B;IACF;EACF,CAAC,EAAE,CACDO,eAAe,EACfH,QAAQ,EACRC,eAAe,EACfC,qBAAqB,EACrBE,YAAY,EACZR,mBAAmB,CACpB,CAAC;EAEF,OACEd,KAAA,CAAA8B,aAAA,CAACzB,MAAM,EAAA0B,QAAA;IACLC,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEtB,KAAM;IACZuB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAER;EAAY,GAClBd,KAAK,GAERU,UACK,CAAC;AAEb"}

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

@@ -59,8 +59,8 @@ export function EditContainerWithoutToolbar(props) {
   });
   let itemTitle = wasNew && titleWhenNew ? titleWhenNew : title;
   let ariaLabel = useMemo(() => convertJsxToString(itemTitle), [itemTitle]);
-  if (ariaLabel.includes('{itemNr}')) {
-    itemTitle = ariaLabel = ariaLabel.replace('{itemNr}', index + 1);
+  if (ariaLabel.includes('{itemN')) {
+    itemTitle = ariaLabel = ariaLabel.replace(/\{itemN(r|o)\}/g, String(index + 1));
   }
   useSwitchContainerMode({
     path

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

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

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

@@ -2,16 +2,17 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["pushValue", "className", "path", "children"];
-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 { useSwitchContainerMode } from '../hooks';
+import { useArrayLimit, 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
@@ -24,12 +25,19 @@ function PushButton(props) {
       pushValue,
       className,
       path,
+      text,
       children
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
   const buttonProps = omitDataValueReadWriteProps(restProps);
-  const value = useDataValue().getValueByPath(path);
-  if (value !== undefined && !Array.isArray(value)) {
+  const arrayValue = useDataValue().getValueByPath(path);
+  const {
+    hasReachedLimit,
+    setShowStatus
+  } = useArrayLimit({
+    path
+  });
+  if (arrayValue !== undefined && !Array.isArray(arrayValue)) {
     throw new Error('PushButton received a non-array value');
   }
   const {
@@ -38,23 +46,37 @@ function PushButton(props) {
     path
   });
   const handleClick = useCallback(async () => {
-    const newValue = typeof pushValue === 'function' ? pushValue(value) : pushValue;
+    if (hasReachedLimit) {
+      setShowStatus(true);
+      return;
+    }
+    const newValue = typeof pushValue === 'function' ? pushValue(arrayValue) : pushValue;
     if (handlePush) {
       handlePush(newValue);
     } else {
-      await (handlePathChange === null || handlePathChange === void 0 ? void 0 : handlePathChange(path, [...(value !== null && value !== void 0 ? value : []), newValue]));
+      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, value]);
+  }, [arrayValue, handlePathChange, handlePush, hasReachedLimit, path, pushValue, setLastItemContainerMode, setShowStatus]);
+  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));
+      }
+    }
+    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/extensions/forms/Iterate/PushButton/PushButton.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"PushButton.js","names":["React","useCallback","useContext","useMemo","classnames","Button","IterateItemContext","useArrayLimit","useSwitchContainerMode","omitDataValueReadWriteProps","add","DataContext","useDataValue","convertJsxToString","PushButton","props","handlePathChange","iterateItemContext","handlePush","pushValue","className","path","text","children","restProps","_objectWithoutProperties","_excluded","buttonProps","arrayValue","getValueByPath","hasReachedLimit","setShowStatus","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 { useArrayLimit, 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  const { hasReachedLimit, setShowStatus } = useArrayLimit({\n    path,\n  })\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    if (hasReachedLimit) {\n      setShowStatus(true)\n      return // stop here\n    }\n\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    arrayValue,\n    handlePathChange,\n    handlePush,\n    hasReachedLimit,\n    path,\n    pushValue,\n    setLastItemContainerMode,\n    setShowStatus,\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":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC/D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,SAASC,aAAa,EAAEC,sBAAsB,QAAQ,UAAU;AAChE,SAASC,2BAA2B,QAAc,aAAa;AAC/D,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,YAAY,MAAM,0BAA0B;AACnD,SAASC,kBAAkB,QAAQ,qCAAqC;AAYxE,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC;EAAiB,CAAC,GAAGd,UAAU,CAACS,WAAW,CAAC,IAAI,CAAC,CAAC;EAC1D,MAAMM,kBAAkB,GAAGf,UAAU,CAACI,kBAAkB,CAAC;EACzD,MAAM;IAAEY;EAAW,CAAC,GAAGD,kBAAkB,aAAlBA,kBAAkB,cAAlBA,kBAAkB,GAAI,CAAC,CAAC;EAE/C,MAAM;MAAEE,SAAS;MAAEC,SAAS;MAAEC,IAAI;MAAEC,IAAI;MAAEC;IAAuB,CAAC,GAChER,KAAK;IADgDS,SAAS,GAAAC,wBAAA,CAC9DV,KAAK,EAAAW,SAAA;EACP,MAAMC,WAAW,GAAGlB,2BAA2B,CAACe,SAAS,CAAC;EAC1D,MAAMI,UAAU,GAAGhB,YAAY,CAAC,CAAC,CAACiB,cAAc,CAACR,IAAI,CAAC;EACtD,MAAM;IAAES,eAAe;IAAEC;EAAc,CAAC,GAAGxB,aAAa,CAAC;IACvDc;EACF,CAAC,CAAC;EAEF,IAAIO,UAAU,KAAKI,SAAS,IAAI,CAACC,KAAK,CAACC,OAAO,CAACN,UAAU,CAAC,EAAE;IAC1D,MAAM,IAAIO,KAAK,CAAC,uCAAuC,CAAC;EAC1D;EAEA,MAAM;IAAEC;EAAyB,CAAC,GAAG5B,sBAAsB,CAAC;IAC1Da;EACF,CAAC,CAAC;EAEF,MAAMgB,WAAW,GAAGpC,WAAW,CAAC,YAAY;IAC1C,IAAI6B,eAAe,EAAE;MACnBC,aAAa,CAAC,IAAI,CAAC;MACnB;IACF;IAEA,MAAMO,QAAQ,GACZ,OAAOnB,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACS,UAAU,CAAC,GAAGT,SAAS;IAErE,IAAID,UAAU,EAAE;MAEdA,UAAU,CAACoB,QAAQ,CAAC;IACtB,CAAC,MAAM;MAEL,OAAMtB,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAGK,IAAI,EAAE,CAAC,IAAIO,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,CAAC,EAAEU,QAAQ,CAAC,CAAC;IACnE;IAEAC,UAAU,CAAC,MAAM;MACfH,wBAAwB,CAAC,MAAM,CAAC;IAClC,CAAC,EAAE,GAAG,CAAC;EACT,CAAC,EAAE,CACDR,UAAU,EACVZ,gBAAgB,EAChBE,UAAU,EACVY,eAAe,EACfT,IAAI,EACJF,SAAS,EACTiB,wBAAwB,EACxBL,aAAa,CACd,CAAC;EAEF,MAAMS,OAAO,GAAGrC,OAAO,CAAC,MAAM;IAC5B,IAAIoB,QAAQ,IAAID,IAAI,EAAE;MACpB,MAAMmB,GAAG,GAAG5B,kBAAkB,CAACU,QAAQ,IAAID,IAAI,CAAC;MAEhD,IAAImB,GAAG,CAACC,QAAQ,CAAC,cAAc,CAAC,EAAE;QAChC,MAAMC,UAAU,GAAG,CAAC,CAAAf,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEgB,MAAM,KAAI,CAAC,IAAI,CAAC;QAChD,OAAOH,GAAG,CAACI,OAAO,CAAC,cAAc,EAAEC,MAAM,CAACH,UAAU,CAAC,CAAC;MACxD;IACF;IAEA,OAAOpB,QAAQ,IAAID,IAAI;EACzB,CAAC,EAAE,CAACM,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEgB,MAAM,EAAErB,QAAQ,EAAED,IAAI,CAAC,CAAC;EAExC,OACEtB,KAAA,CAAA+C,aAAA,CAAC1C,MAAM,EAAA2C,QAAA;IACL5B,SAAS,EAAEhB,UAAU,CAAC,+BAA+B,EAAEgB,SAAS,CAAE;IAClE6B,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAExC,GAAI;IACVyC,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEf;EAAY,GAClBV,WAAW,GAEda,OACK,CAAC;AAEb;AAEA1B,UAAU,CAACuC,qBAAqB,GAAG,IAAI;AACvC,eAAevC,UAAU"}

package/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/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/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.
@@ -32,7 +33,7 @@ export type Props = {
      */
     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/extensions/forms/Iterate/PushContainer/PushContainer.js

@@ -3,9 +3,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _CancelButton;
 const _excluded = ["data", "path", "title", "children", "openButton", "showOpenButtonWhen"],
-  _excluded2 = ["title", "openButton", "showOpenButton", "switchContainerModeRef", "children"];
+  _excluded2 = ["title", "openButton", "showOpenButton", "switchContainerModeRef", "cancelHandler", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useContext, useMemo, useRef } from 'react';
@@ -18,7 +17,7 @@ import EditContainer, { CancelButton, DoneButton } from '../EditContainer';
 import IterateArray from '../Array';
 import OpenButton from './OpenButton';
 import { Flex, HeightAnimation } from '../../../../components';
-import { useSwitchContainerMode } from '../hooks';
+import { useArrayLimit, useSwitchContainerMode } from '../hooks';
 import Toolbar from '../Toolbar';
 import { useTranslation } from '../../hooks';
 function PushContainer(props) {
@@ -44,6 +43,17 @@ function PushContainer(props) {
   } = useSwitchContainerMode({
     path
   });
+  const {
+    hasReachedLimit,
+    setShowStatus
+  } = useArrayLimit({
+    path
+  });
+  const cancelHandler = useCallback(() => {
+    if (hasReachedLimit) {
+      setShowStatus(false);
+    }
+  }, [hasReachedLimit, setShowStatus]);
   const showOpenButton = showOpenButtonWhen === null || showOpenButtonWhen === void 0 ? void 0 : showOpenButtonWhen(entries);
   const newItemContextProps = {
     path,
@@ -67,13 +77,19 @@ function PushContainer(props) {
       return moveValueToPath(path, [...entries, ...newItems]);
     },
     onCommit: (data, _ref2) => {
-      var _switchContainerModeR;
       let {
-        clearData
+        clearData,
+        preventCommit
       } = _ref2;
-      setNextContainerMode('view');
-      (_switchContainerModeR = switchContainerModeRef.current) === null || _switchContainerModeR === void 0 ? void 0 : _switchContainerModeR.call(switchContainerModeRef, 'view');
-      clearData();
+      if (hasReachedLimit) {
+        preventCommit();
+        setShowStatus(true);
+      } else {
+        var _switchContainerModeR;
+        setNextContainerMode('view');
+        (_switchContainerModeR = switchContainerModeRef.current) === null || _switchContainerModeR === void 0 ? void 0 : _switchContainerModeR.call(switchContainerModeRef, 'view');
+        clearData();
+      }
     }
   }, React.createElement(PushContainerContext.Provider, {
     value: newItemContextProps
@@ -84,16 +100,18 @@ function PushContainer(props) {
     title: title,
     openButton: openButton,
     switchContainerModeRef: switchContainerModeRef,
-    showOpenButton: showOpenButton
+    showOpenButton: showOpenButton,
+    cancelHandler: cancelHandler
   }, rest), children))));
 }
 function NewContainer(_ref3) {
-  var _DoneButton;
+  var _DoneButton, _CancelButton;
   let {
       title,
       openButton,
       showOpenButton,
       switchContainerModeRef,
+      cancelHandler,
       children
     } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded2);
@@ -121,7 +139,9 @@ function NewContainer(_ref3) {
       gap: "large"
     }, _DoneButton || (_DoneButton = React.createElement(DoneButton, {
       text: createButton
-    })), showOpenButton && (_CancelButton || (_CancelButton = React.createElement(CancelButton, null)))));
+    })), showOpenButton && (_CancelButton || (_CancelButton = React.createElement(CancelButton, {
+      onClick: cancelHandler
+    })))));
   }));
   return React.createElement(React.Fragment, null, React.createElement(EditContainer, _extends({
     open: !showOpenButton || containerMode === 'edit',

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

@@ -1 +1 @@
-{"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","_ref","onCommit","_ref2","_switchContainerModeR","clearData","call","Provider","containerMode","NewContainer","_extends","_ref3","_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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"}
+{"version":3,"file":"PushContainer.js","names":["React","useCallback","useContext","useMemo","useRef","Isolation","PushContainerContext","IterateItemContext","DataContext","useDataValue","EditContainer","CancelButton","DoneButton","IterateArray","OpenButton","Flex","HeightAnimation","useArrayLimit","useSwitchContainerMode","Toolbar","useTranslation","PushContainer","props","data","path","title","children","openButton","showOpenButtonWhen","rest","_objectWithoutProperties","_excluded","commitHandleRef","switchContainerModeRef","value","entries","moveValueToPath","setNextContainerMode","hasReachedLimit","setShowStatus","cancelHandler","showOpenButton","newItemContextProps","switchContainerMode","current","defaultData","newItems","createElement","emptyData","transformOnCommit","_ref","onCommit","_ref2","clearData","preventCommit","_switchContainerModeR","call","Provider","containerMode","NewContainer","_extends","_ref3","_DoneButton","_CancelButton","_excluded2","createButton","IteratePushContainer","restoreOriginalValue","toolbar","Consumer","context","_objectSpread","Horizontal","gap","text","onClick","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 { useArrayLimit, 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  const { hasReachedLimit, setShowStatus } = useArrayLimit({\n    path,\n  })\n  const cancelHandler = useCallback(() => {\n    if (hasReachedLimit) {\n      setShowStatus(false)\n    }\n  }, [hasReachedLimit, setShowStatus])\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, preventCommit }) => {\n        if (hasReachedLimit) {\n          preventCommit()\n          setShowStatus(true)\n        } else {\n          setNextContainerMode('view')\n          switchContainerModeRef.current?.('view')\n          clearData()\n        }\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            cancelHandler={cancelHandler}\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  cancelHandler,\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 && (\n                  <CancelButton onClick={cancelHandler} />\n                )}\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/extensions/forms/Iterate/PushContainer/PushContainerDocs.js

@@ -19,6 +19,11 @@ 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',

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

@@ -1 +1 @@
-{"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"}
+{"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"}