@dnb/eufemia 10.49.0 → 10.51.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    animate?: 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/Count/Count.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import pointer from 'json-pointer';
+import pointer from '../../utils/json-pointer';
 import { useData, getData } from '../../Form';
 export function Count(props) {
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"Count.js","names":["useCallback","pointer","useData","getData","Count","props","data","id","countData","_ref","path","filter","has","value","get","Array","isArray","length","Object","entries","keys","NaN","count","useCount","arguments","undefined"],"sources":["../../../../../../src/extensions/forms/Iterate/Count/Count.tsx"],"sourcesContent":["import { useCallback } from 'react'\nimport pointer from 'json-pointer'\nimport { Identifier, Path } from '../../types'\nimport { useData, getData } from '../../Form'\n\nexport type Props = {\n  /**\n   * The path (JSON Pointer) to the array or object to count.\n   */\n  path: Path\n\n  /**\n   * A Form.Handler or DataContext `id` for when called outside of the context.\n   */\n  id?: Identifier\n\n  /**\n   * A filter function to filter the data before counting.\n   */\n  filter?: (item: unknown) => boolean\n}\n\nexport function Count(props: Props) {\n  const { data } = useData(props.id)\n  return countData(data, props)\n}\n\nfunction countData(data: unknown, { path, filter }: Props) {\n  if (pointer.has(data, path)) {\n    const value = pointer.get(data, path)\n    if (Array.isArray(value)) {\n      return filter ? value.filter(filter).length : value.length\n    } else if (typeof value === 'object' && value) {\n      return filter\n        ? Object.entries(value).filter(filter).length\n        : Object.keys(value).length\n    }\n  }\n\n  return NaN\n}\n\nexport function count(props: Props) {\n  const { data } = getData(props.id)\n  return countData(data, props)\n}\n\nexport function useCount(id: Identifier = undefined) {\n  const { data } = useData(id)\n\n  const count = useCallback(\n    (path: Props['path'], filter?: Props['filter']) => {\n      return countData(data, { path, filter })\n    },\n    [data]\n  )\n\n  return { count }\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,OAAOC,OAAO,MAAM,cAAc;AAElC,SAASC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAmB7C,OAAO,SAASC,KAAKA,CAACC,KAAY,EAAE;EAClC,MAAM;IAAEC;EAAK,CAAC,GAAGJ,OAAO,CAACG,KAAK,CAACE,EAAE,CAAC;EAClC,OAAOC,SAAS,CAACF,IAAI,EAAED,KAAK,CAAC;AAC/B;AAEA,SAASG,SAASA,CAACF,IAAa,EAAAG,IAAA,EAA2B;EAAA,IAAzB;IAAEC,IAAI;IAAEC;EAAc,CAAC,GAAAF,IAAA;EACvD,IAAIR,OAAO,CAACW,GAAG,CAACN,IAAI,EAAEI,IAAI,CAAC,EAAE;IAC3B,MAAMG,KAAK,GAAGZ,OAAO,CAACa,GAAG,CAACR,IAAI,EAAEI,IAAI,CAAC;IACrC,IAAIK,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,EAAE;MACxB,OAAOF,MAAM,GAAGE,KAAK,CAACF,MAAM,CAACA,MAAM,CAAC,CAACM,MAAM,GAAGJ,KAAK,CAACI,MAAM;IAC5D,CAAC,MAAM,IAAI,OAAOJ,KAAK,KAAK,QAAQ,IAAIA,KAAK,EAAE;MAC7C,OAAOF,MAAM,GACTO,MAAM,CAACC,OAAO,CAACN,KAAK,CAAC,CAACF,MAAM,CAACA,MAAM,CAAC,CAACM,MAAM,GAC3CC,MAAM,CAACE,IAAI,CAACP,KAAK,CAAC,CAACI,MAAM;IAC/B;EACF;EAEA,OAAOI,GAAG;AACZ;AAEA,OAAO,SAASC,KAAKA,CAACjB,KAAY,EAAE;EAClC,MAAM;IAAEC;EAAK,CAAC,GAAGH,OAAO,CAACE,KAAK,CAACE,EAAE,CAAC;EAClC,OAAOC,SAAS,CAACF,IAAI,EAAED,KAAK,CAAC;AAC/B;AAEA,OAAO,SAASkB,QAAQA,CAAA,EAA6B;EAAA,IAA5BhB,EAAc,GAAAiB,SAAA,CAAAP,MAAA,QAAAO,SAAA,QAAAC,SAAA,GAAAD,SAAA,MAAGC,SAAS;EACjD,MAAM;IAAEnB;EAAK,CAAC,GAAGJ,OAAO,CAACK,EAAE,CAAC;EAE5B,MAAMe,KAAK,GAAGtB,WAAW,CACvB,CAACU,IAAmB,EAAEC,MAAwB,KAAK;IACjD,OAAOH,SAAS,CAACF,IAAI,EAAE;MAAEI,IAAI;MAAEC;IAAO,CAAC,CAAC;EAC1C,CAAC,EACD,CAACL,IAAI,CACP,CAAC;EAED,OAAO;IAAEgB;EAAM,CAAC;AAClB"}
+{"version":3,"file":"Count.js","names":["useCallback","pointer","useData","getData","Count","props","data","id","countData","_ref","path","filter","has","value","get","Array","isArray","length","Object","entries","keys","NaN","count","useCount","arguments","undefined"],"sources":["../../../../../../src/extensions/forms/Iterate/Count/Count.tsx"],"sourcesContent":["import { useCallback } from 'react'\nimport pointer from '../../utils/json-pointer'\nimport { Identifier, Path } from '../../types'\nimport { useData, getData } from '../../Form'\n\nexport type Props = {\n  /**\n   * The path (JSON Pointer) to the array or object to count.\n   */\n  path: Path\n\n  /**\n   * A Form.Handler or DataContext `id` for when called outside of the context.\n   */\n  id?: Identifier\n\n  /**\n   * A filter function to filter the data before counting.\n   */\n  filter?: (item: unknown) => boolean\n}\n\nexport function Count(props: Props) {\n  const { data } = useData(props.id)\n  return countData(data, props)\n}\n\nfunction countData(data: unknown, { path, filter }: Props) {\n  if (pointer.has(data, path)) {\n    const value = pointer.get(data, path)\n    if (Array.isArray(value)) {\n      return filter ? value.filter(filter).length : value.length\n    } else if (typeof value === 'object' && value) {\n      return filter\n        ? Object.entries(value).filter(filter).length\n        : Object.keys(value).length\n    }\n  }\n\n  return NaN\n}\n\nexport function count(props: Props) {\n  const { data } = getData(props.id)\n  return countData(data, props)\n}\n\nexport function useCount(id: Identifier = undefined) {\n  const { data } = useData(id)\n\n  const count = useCallback(\n    (path: Props['path'], filter?: Props['filter']) => {\n      return countData(data, { path, filter })\n    },\n    [data]\n  )\n\n  return { count }\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,OAAOC,OAAO,MAAM,0BAA0B;AAE9C,SAASC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAmB7C,OAAO,SAASC,KAAKA,CAACC,KAAY,EAAE;EAClC,MAAM;IAAEC;EAAK,CAAC,GAAGJ,OAAO,CAACG,KAAK,CAACE,EAAE,CAAC;EAClC,OAAOC,SAAS,CAACF,IAAI,EAAED,KAAK,CAAC;AAC/B;AAEA,SAASG,SAASA,CAACF,IAAa,EAAAG,IAAA,EAA2B;EAAA,IAAzB;IAAEC,IAAI;IAAEC;EAAc,CAAC,GAAAF,IAAA;EACvD,IAAIR,OAAO,CAACW,GAAG,CAACN,IAAI,EAAEI,IAAI,CAAC,EAAE;IAC3B,MAAMG,KAAK,GAAGZ,OAAO,CAACa,GAAG,CAACR,IAAI,EAAEI,IAAI,CAAC;IACrC,IAAIK,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,EAAE;MACxB,OAAOF,MAAM,GAAGE,KAAK,CAACF,MAAM,CAACA,MAAM,CAAC,CAACM,MAAM,GAAGJ,KAAK,CAACI,MAAM;IAC5D,CAAC,MAAM,IAAI,OAAOJ,KAAK,KAAK,QAAQ,IAAIA,KAAK,EAAE;MAC7C,OAAOF,MAAM,GACTO,MAAM,CAACC,OAAO,CAACN,KAAK,CAAC,CAACF,MAAM,CAACA,MAAM,CAAC,CAACM,MAAM,GAC3CC,MAAM,CAACE,IAAI,CAACP,KAAK,CAAC,CAACI,MAAM;IAC/B;EACF;EAEA,OAAOI,GAAG;AACZ;AAEA,OAAO,SAASC,KAAKA,CAACjB,KAAY,EAAE;EAClC,MAAM;IAAEC;EAAK,CAAC,GAAGH,OAAO,CAACE,KAAK,CAACE,EAAE,CAAC;EAClC,OAAOC,SAAS,CAACF,IAAI,EAAED,KAAK,CAAC;AAC/B;AAEA,OAAO,SAASkB,QAAQA,CAAA,EAA6B;EAAA,IAA5BhB,EAAc,GAAAiB,SAAA,CAAAP,MAAA,QAAAO,SAAA,QAAAC,SAAA,GAAAD,SAAA,MAAGC,SAAS;EACjD,MAAM;IAAEnB;EAAK,CAAC,GAAGJ,OAAO,CAACK,EAAE,CAAC;EAE5B,MAAMe,KAAK,GAAGtB,WAAW,CACvB,CAACU,IAAmB,EAAEC,MAAwB,KAAK;IACjD,OAAOH,SAAS,CAACF,IAAI,EAAE;MAAEI,IAAI;MAAEC;IAAO,CAAC,CAAC;EAC1C,CAAC,EACD,CAACL,IAAI,CACP,CAAC;EAED,OAAO;IAAEgB;EAAM,CAAC;AAClB"}

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/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

@@ -7,7 +7,7 @@ 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';
@@ -31,6 +31,12 @@ function PushButton(props) {
     restProps = _objectWithoutProperties(props, _excluded);
   const buttonProps = omitDataValueReadWriteProps(restProps);
   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');
   }
@@ -40,6 +46,10 @@ function PushButton(props) {
     path
   });
   const handleClick = useCallback(async () => {
+    if (hasReachedLimit) {
+      setShowStatus(true);
+      return;
+    }
     const newValue = typeof pushValue === 'function' ? pushValue(arrayValue) : pushValue;
     if (handlePush) {
       handlePush(newValue);
@@ -49,7 +59,7 @@ function PushButton(props) {
     setTimeout(() => {
       setLastItemContainerMode('view');
     }, 100);
-  }, [handlePathChange, handlePush, path, pushValue, setLastItemContainerMode, arrayValue]);
+  }, [arrayValue, handlePathChange, handlePush, hasReachedLimit, path, pushValue, setLastItemContainerMode, setShowStatus]);
   const content = useMemo(() => {
     if (children || text) {
       const str = convertJsxToString(children || text);

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

@@ -1 +1 @@
-{"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":";;;;;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,sBAAsB,QAAQ,UAAU;AACjD,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,GAAGb,UAAU,CAACQ,WAAW,CAAC,IAAI,CAAC,CAAC;EAC1D,MAAMM,kBAAkB,GAAGd,UAAU,CAACI,kBAAkB,CAAC;EACzD,MAAM;IAAEW;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;EAEtD,IAAIO,UAAU,KAAKE,SAAS,IAAI,CAACC,KAAK,CAACC,OAAO,CAACJ,UAAU,CAAC,EAAE;IAC1D,MAAM,IAAIK,KAAK,CAAC,uCAAuC,CAAC;EAC1D;EAEA,MAAM;IAAEC;EAAyB,CAAC,GAAG1B,sBAAsB,CAAC;IAC1Da;EACF,CAAC,CAAC;EAEF,MAAMc,WAAW,GAAGjC,WAAW,CAAC,YAAY;IAC1C,MAAMkC,QAAQ,GACZ,OAAOjB,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACS,UAAU,CAAC,GAAGT,SAAS;IAErE,IAAID,UAAU,EAAE;MAEdA,UAAU,CAACkB,QAAQ,CAAC;IACtB,CAAC,MAAM;MAEL,OAAMpB,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAGK,IAAI,EAAE,CAAC,IAAIO,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,CAAC,EAAEQ,QAAQ,CAAC,CAAC;IACnE;IAEAC,UAAU,CAAC,MAAM;MACfH,wBAAwB,CAAC,MAAM,CAAC;IAClC,CAAC,EAAE,GAAG,CAAC;EACT,CAAC,EAAE,CACDlB,gBAAgB,EAChBE,UAAU,EACVG,IAAI,EACJF,SAAS,EACTe,wBAAwB,EACxBN,UAAU,CACX,CAAC;EAEF,MAAMU,OAAO,GAAGlC,OAAO,CAAC,MAAM;IAC5B,IAAImB,QAAQ,IAAID,IAAI,EAAE;MACpB,MAAMiB,GAAG,GAAG1B,kBAAkB,CAACU,QAAQ,IAAID,IAAI,CAAC;MAEhD,IAAIiB,GAAG,CAACC,QAAQ,CAAC,cAAc,CAAC,EAAE;QAChC,MAAMC,UAAU,GAAG,CAAC,CAAAb,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEc,MAAM,KAAI,CAAC,IAAI,CAAC;QAChD,OAAOH,GAAG,CAACI,OAAO,CAAC,cAAc,EAAEC,MAAM,CAACH,UAAU,CAAC,CAAC;MACxD;IACF;IAEA,OAAOlB,QAAQ,IAAID,IAAI;EACzB,CAAC,EAAE,CAACM,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEc,MAAM,EAAEnB,QAAQ,EAAED,IAAI,CAAC,CAAC;EAExC,OACErB,KAAA,CAAA4C,aAAA,CAACvC,MAAM,EAAAwC,QAAA;IACL1B,SAAS,EAAEf,UAAU,CAAC,+BAA+B,EAAEe,SAAS,CAAE;IAClE2B,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAEtC,GAAI;IACVuC,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEf;EAAY,GAClBR,WAAW,GAEdW,OACK,CAAC;AAEb;AAEAxB,UAAU,CAACqC,qBAAqB,GAAG,IAAI;AACvC,eAAerC,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":"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"}

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'\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":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,YAAY,MAAM,0BAA0B;AACnD,OAAOC,aAAa,IAAIC,YAAY,EAAEC,UAAU,QAAQ,kBAAkB;AAC1E,OAAOC,YAAY,MAAyB,UAAU;AACtD,OAAOC,UAAU,MAAM,cAAc;AACrC,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAG9D,SAASC,sBAAsB,QAAQ,UAAU;AACjD,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,cAAc,QAAQ,aAAa;AA2C5C,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAM;MACJC,IAAI,GAAG,IAAI;MACXC,IAAI;MACJC,KAAK;MACLC,QAAQ;MACRC,UAAU;MACVC;IAEF,CAAC,GAAGN,KAAK;IADJO,IAAI,GAAAC,wBAAA,CACLR,KAAK,EAAAS,SAAA;EAET,MAAMC,eAAe,GAAG3B,MAAM,CAAa,CAAC;EAC5C,MAAM4B,sBAAsB,GAAG5B,MAAM,CAAgC,CAAC;EACtE,MAAM;IAAE6B,KAAK,EAAEC,OAAO,GAAG,EAAE;IAAEC;EAAgB,CAAC,GAAG1B,YAAY,CAE3D;IAAEc;EAAK,CAAC,CAAC;EAEX,MAAM;IAAEa;EAAqB,CAAC,GAAGnB,sBAAsB,CAAC;IAAEM;EAAK,CAAC,CAAC;EAEjE,MAAMc,cAAc,GAAGV,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAGO,OAAO,CAAC;EACpD,MAAMI,mBAAyC,GAAG;IAChDf,IAAI;IACJW,OAAO;IACPH,eAAe;IACfQ,mBAAmB,EAAEP,sBAAsB,CAACQ;EAC9C,CAAC;EAED,MAAMC,WAAW,GAAGtC,OAAO,CAAC,MAAM;IAChC,OAAO;MAAEuC,QAAQ,EAAE,CAACpB,IAAI;IAAE,CAAC;EAC7B,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,OACEtB,KAAA,CAAA2C,aAAA,CAACtC,SAAS;IACRoC,WAAW,EAAEA,WAAY;IACzBG,SAAS,EAAEH,WAAY;IACvBV,eAAe,EAAEA,eAAgB;IACjCc,iBAAiB,EAAEC,IAAA,IAAkB;MAAA,IAAjB;QAAEJ;MAAS,CAAC,GAAAI,IAAA;MAC9B,OAAOX,eAAe,CAACZ,IAAI,EAAE,CAAC,GAAGW,OAAO,EAAE,GAAGQ,QAAQ,CAAC,CAAC;IACzD,CAAE;IACFK,QAAQ,EAAEA,CAACzB,IAAI,EAAA0B,KAAA,KAAoB;MAAA,IAAAC,qBAAA;MAAA,IAAlB;QAAEC;MAAU,CAAC,GAAAF,KAAA;MAC5BZ,oBAAoB,CAAC,MAAM,CAAC;MAC5B,CAAAa,qBAAA,GAAAjB,sBAAsB,CAACQ,OAAO,cAAAS,qBAAA,uBAA9BA,qBAAA,CAAAE,IAAA,CAAAnB,sBAAsB,EAAW,MAAM,CAAC;MACxCkB,SAAS,CAAC,CAAC;IACb;EAAE,GAEFlD,KAAA,CAAA2C,aAAA,CAACrC,oBAAoB,CAAC8C,QAAQ;IAACnB,KAAK,EAAEK;EAAoB,GACxDtC,KAAA,CAAA2C,aAAA,CAAC9B,YAAY;IACXU,IAAI,EAAC,WAAW;IAChB8B,aAAa,EAAEhB,cAAc,GAAG,MAAM,GAAG;EAAO,GAEhDrC,KAAA,CAAA2C,aAAA,CAACW,YAAY,EAAAC,QAAA;IACX/B,KAAK,EAAEA,KAAM;IACbE,UAAU,EAAEA,UAAW;IACvBM,sBAAsB,EAAEA,sBAAuB;IAC/CK,cAAc,EAAEA;EAAe,GAC3BT,IAAI,GAEPH,QACW,CACF,CACe,CACtB,CAAC;AAEhB;AAEA,SAAS6B,YAAYA,CAAAE,KAAA,EAOlB;EAAA,IAAAC,WAAA;EAAA,IAPmB;MACpBjC,KAAK;MACLE,UAAU;MACVW,cAAc;MACdL,sBAAsB;MACtBP;IAEF,CAAC,GAAA+B,KAAA;IADI5B,IAAI,GAAAC,wBAAA,CAAA2B,KAAA,EAAAE,UAAA;EAEP,MAAM;IAAEL,aAAa;IAAEd;EAAoB,CAAC,GAC1CrC,UAAU,CAACK,kBAAkB,CAAC,IAAI,CAAC,CAAC;EACtCyB,sBAAsB,CAACQ,OAAO,GAAGD,mBAAmB;EACpD,MAAM;IAAEoB;EAAa,CAAC,GAAGxC,cAAc,CAAC,CAAC,CAACyC,oBAAoB;EAC9D,MAAM;IAAEV;EAAU,CAAC,GAAGhD,UAAU,CAACM,WAAW,CAAC,IAAI,CAAC,CAAC;EACnD,MAAMqD,oBAAoB,GAAG5D,WAAW,CAAC,MAAM;IAC7CiD,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAG,CAAC;EACf,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,MAAMY,OAAO,GACX9D,KAAA,CAAA2C,aAAA,CAACzB,OAAO,QACNlB,KAAA,CAAA2C,aAAA,CAACpC,kBAAkB,CAACwD,QAAQ,QACxBC,OAAO,IAAK;IACZ,MAAM1B,mBAAmB,GAAA2B,aAAA,CAAAA,aAAA,KACpBD,OAAO;MACVH;IAAoB,EACrB;IACD,OACE7D,KAAA,CAAA2C,aAAA,CAACpC,kBAAkB,CAAC6C,QAAQ;MAACnB,KAAK,EAAEK;IAAoB,GACtDtC,KAAA,CAAA2C,aAAA,CAAC5B,IAAI,CAACmD,UAAU;MAACC,GAAG,EAAC;IAAO,GAAAV,WAAA,KAAAA,WAAA,GAC1BzD,KAAA,CAAA2C,aAAA,CAAC/B,UAAU;MAACwD,IAAI,EAAET;IAAa,CAAE,CAAC,GACjCtB,cAAc,KAAAgC,aAAA,KAAAA,aAAA,GAAIrE,KAAA,CAAA2C,aAAA,CAAChC,YAAY,MAAE,CAAC,EACpB,CACU,CAAC;EAElC,CAC2B,CACtB,CACV;EAED,OACEX,KAAA,CAAA2C,aAAA,CAAA3C,KAAA,CAAAsE,QAAA,QACEtE,KAAA,CAAA2C,aAAA,CAACjC,aAAa,EAAA6C,QAAA;IACZgB,IAAI,EAAE,CAAClC,cAAc,IAAIgB,aAAa,KAAK,MAAO;IAClD7B,KAAK,EAAEA,KAAM;IACbsC,OAAO,EAAEA;EAAQ,GACblC,IAAI,GAEPH,QACY,CAAC,EAEfC,UAAU,IAAI,OAAOW,cAAc,KAAK,SAAS,IAChDrC,KAAA,CAAA2C,aAAA,CAAC3B,eAAe;IAACuD,IAAI,EAAElC,cAAc,IAAIgB,aAAa,KAAK;EAAO,GAC/D3B,UACc,CAEnB,CAAC;AAEP;AAEAN,aAAa,CAACN,UAAU,GAAGA,UAAU;AACrCM,aAAa,CAACoD,qBAAqB,GAAG,IAAI;AAE1C,eAAepD,aAAa"}
+{"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/ViewContainer/ViewContainer.js

@@ -31,8 +31,8 @@ function ViewContainer(props) {
   } = useContext(IterateItemContext);
   let itemTitle = 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));
   }
   let toolbarElement = toolbar;
   if (toolbarVariant === 'minimumOneItem' && arrayValue.length <= 1) {

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

@@ -1 +1 @@
-{"version":3,"file":"ViewContainer.js","names":["React","useContext","useMemo","classnames","convertJsxToString","Flex","Lead","ArrayItemArea","IterateItemContext","Toolbar","EditButton","RemoveButton","ViewContainer","props","_toolbarElement","_ref","children","className","title","toolbar","toolbarVariant","restProps","_objectWithoutProperties","_excluded","index","arrayValue","itemTitle","ariaLabel","includes","replace","toolbarElement","length","_Toolbar","createElement","hasToolbar","Children","toArray","some","child","_extends","mode","Stack","size","_Toolbar2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Flex } from '../../../../components'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { Lead } from '../../../../elements'\nimport ArrayItemArea, { ArrayItemAreaProps } from '../Array/ArrayItemArea'\nimport IterateItemContext from '../IterateItemContext'\nimport Toolbar from '../Toolbar'\nimport EditButton from './EditButton'\nimport RemoveButton from './RemoveButton'\n\nexport type Props = {\n  /**\n   * The title of the ViewContainer.\n   */\n  title?: React.ReactNode\n  /**\n   * An alternative toolbar to be shown in the ViewContainer.\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\nfunction ViewContainer(props: AllProps) {\n  const {\n    children,\n    className,\n    title,\n    toolbar,\n    toolbarVariant,\n    ...restProps\n  } = props || {}\n  const { index, arrayValue } = useContext(IterateItemContext)\n\n  let itemTitle = title\n  let ariaLabel = useMemo(() => convertJsxToString(itemTitle), [itemTitle])\n  if (ariaLabel.includes('{itemNr}')) {\n    itemTitle = ariaLabel = ariaLabel.replace('{itemNr}', index + 1)\n  }\n\n  let toolbarElement = toolbar\n  if (toolbarVariant === 'minimumOneItem' && arrayValue.length <= 1) {\n    toolbarElement = (\n      <Toolbar>\n        <EditButton />\n      </Toolbar>\n    )\n  }\n\n  const hasToolbar =\n    !toolbarElement &&\n    React.Children.toArray(children).some((child) => {\n      return child?.['type'] === Toolbar\n    })\n\n  return (\n    <ArrayItemArea\n      mode=\"view\"\n      ariaLabel={ariaLabel}\n      className={classnames('dnb-forms-section-view-block', className)}\n      {...restProps}\n    >\n      <Flex.Stack>\n        {itemTitle && <Lead size=\"basis\">{itemTitle}</Lead>}\n        {children}\n        {hasToolbar\n          ? null\n          : toolbarElement ?? (\n              <Toolbar>\n                <EditButton />\n                <RemoveButton />\n              </Toolbar>\n            )}\n      </Flex.Stack>\n    </ArrayItemArea>\n  )\n}\n\nViewContainer.EditButton = EditButton\nViewContainer.RemoveButton = RemoveButton\n\nViewContainer._supportsSpacingProps = true\nexport default ViewContainer\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,SAASC,IAAI,QAAQ,wBAAwB;AAE7C,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,OAAOC,aAAa,MAA8B,wBAAwB;AAC1E,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,YAAY,MAAM,gBAAgB;AAmBzC,SAASC,aAAaA,CAACC,KAAe,EAAE;EAAA,IAAAC,eAAA;EACtC,MAAAC,IAAA,GAOIF,KAAK,IAAI,CAAC,CAAC;IAPT;MACJG,QAAQ;MACRC,SAAS;MACTC,KAAK;MACLC,OAAO;MACPC;IAEF,CAAC,GAAAL,IAAA;IADIM,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEd,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGxB,UAAU,CAACO,kBAAkB,CAAC;EAE5D,IAAIkB,SAAS,GAAGR,KAAK;EACrB,IAAIS,SAAS,GAAGzB,OAAO,CAAC,MAAME,kBAAkB,CAACsB,SAAS,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EACzE,IAAIC,SAAS,CAACC,QAAQ,CAAC,UAAU,CAAC,EAAE;IAClCF,SAAS,GAAGC,SAAS,GAAGA,SAAS,CAACE,OAAO,CAAC,UAAU,EAAEL,KAAK,GAAG,CAAC,CAAC;EAClE;EAEA,IAAIM,cAAc,GAAGX,OAAO;EAC5B,IAAIC,cAAc,KAAK,gBAAgB,IAAIK,UAAU,CAACM,MAAM,IAAI,CAAC,EAAE;IACjED,cAAc,GAAAE,QAAA,KAAAA,QAAA,GACZhC,KAAA,CAAAiC,aAAA,CAACxB,OAAO,QACNT,KAAA,CAAAiC,aAAA,CAACvB,UAAU,MAAE,CACN,CAAC,CACX;EACH;EAEA,MAAMwB,UAAU,GACd,CAACJ,cAAc,IACf9B,KAAK,CAACmC,QAAQ,CAACC,OAAO,CAACpB,QAAQ,CAAC,CAACqB,IAAI,CAAEC,KAAK,IAAK;IAC/C,OAAO,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,MAAM,CAAC,MAAK7B,OAAO;EACpC,CAAC,CAAC;EAEJ,OACET,KAAA,CAAAiC,aAAA,CAAC1B,aAAa,EAAAgC,QAAA;IACZC,IAAI,EAAC,MAAM;IACXb,SAAS,EAAEA,SAAU;IACrBV,SAAS,EAAEd,UAAU,CAAC,8BAA8B,EAAEc,SAAS;EAAE,GAC7DI,SAAS,GAEbrB,KAAA,CAAAiC,aAAA,CAAC5B,IAAI,CAACoC,KAAK,QACRf,SAAS,IAAI1B,KAAA,CAAAiC,aAAA,CAAC3B,IAAI;IAACoC,IAAI,EAAC;EAAO,GAAEhB,SAAgB,CAAC,EAClDV,QAAQ,EACRkB,UAAU,GACP,IAAI,IAAApB,eAAA,GACJgB,cAAc,cAAAhB,eAAA,cAAAA,eAAA,GAAA6B,SAAA,KAAAA,SAAA,GACZ3C,KAAA,CAAAiC,aAAA,CAACxB,OAAO,QACNT,KAAA,CAAAiC,aAAA,CAACvB,UAAU,MAAE,CAAC,EACdV,KAAA,CAAAiC,aAAA,CAACtB,YAAY,MAAE,CACR,CAAC,CAEN,CACC,CAAC;AAEpB;AAEAC,aAAa,CAACF,UAAU,GAAGA,UAAU;AACrCE,aAAa,CAACD,YAAY,GAAGA,YAAY;AAEzCC,aAAa,CAACgC,qBAAqB,GAAG,IAAI;AAC1C,eAAehC,aAAa"}
+{"version":3,"file":"ViewContainer.js","names":["React","useContext","useMemo","classnames","convertJsxToString","Flex","Lead","ArrayItemArea","IterateItemContext","Toolbar","EditButton","RemoveButton","ViewContainer","props","_toolbarElement","_ref","children","className","title","toolbar","toolbarVariant","restProps","_objectWithoutProperties","_excluded","index","arrayValue","itemTitle","ariaLabel","includes","replace","String","toolbarElement","length","_Toolbar","createElement","hasToolbar","Children","toArray","some","child","_extends","mode","Stack","size","_Toolbar2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Flex } from '../../../../components'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { Lead } from '../../../../elements'\nimport ArrayItemArea, { ArrayItemAreaProps } from '../Array/ArrayItemArea'\nimport IterateItemContext from '../IterateItemContext'\nimport Toolbar from '../Toolbar'\nimport EditButton from './EditButton'\nimport RemoveButton from './RemoveButton'\n\nexport type Props = {\n  /**\n   * The title of the ViewContainer.\n   */\n  title?: React.ReactNode\n  /**\n   * An alternative toolbar to be shown in the ViewContainer.\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\nfunction ViewContainer(props: AllProps) {\n  const {\n    children,\n    className,\n    title,\n    toolbar,\n    toolbarVariant,\n    ...restProps\n  } = props || {}\n  const { index, arrayValue } = useContext(IterateItemContext)\n\n  let itemTitle = 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  let toolbarElement = toolbar\n  if (toolbarVariant === 'minimumOneItem' && arrayValue.length <= 1) {\n    toolbarElement = (\n      <Toolbar>\n        <EditButton />\n      </Toolbar>\n    )\n  }\n\n  const hasToolbar =\n    !toolbarElement &&\n    React.Children.toArray(children).some((child) => {\n      return child?.['type'] === Toolbar\n    })\n\n  return (\n    <ArrayItemArea\n      mode=\"view\"\n      ariaLabel={ariaLabel}\n      className={classnames('dnb-forms-section-view-block', className)}\n      {...restProps}\n    >\n      <Flex.Stack>\n        {itemTitle && <Lead size=\"basis\">{itemTitle}</Lead>}\n        {children}\n        {hasToolbar\n          ? null\n          : toolbarElement ?? (\n              <Toolbar>\n                <EditButton />\n                <RemoveButton />\n              </Toolbar>\n            )}\n      </Flex.Stack>\n    </ArrayItemArea>\n  )\n}\n\nViewContainer.EditButton = EditButton\nViewContainer.RemoveButton = RemoveButton\n\nViewContainer._supportsSpacingProps = true\nexport default ViewContainer\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,SAASC,IAAI,QAAQ,wBAAwB;AAE7C,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,OAAOC,aAAa,MAA8B,wBAAwB;AAC1E,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,YAAY,MAAM,gBAAgB;AAmBzC,SAASC,aAAaA,CAACC,KAAe,EAAE;EAAA,IAAAC,eAAA;EACtC,MAAAC,IAAA,GAOIF,KAAK,IAAI,CAAC,CAAC;IAPT;MACJG,QAAQ;MACRC,SAAS;MACTC,KAAK;MACLC,OAAO;MACPC;IAEF,CAAC,GAAAL,IAAA;IADIM,SAAS,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEd,MAAM;IAAEC,KAAK;IAAEC;EAAW,CAAC,GAAGxB,UAAU,CAACO,kBAAkB,CAAC;EAE5D,IAAIkB,SAAS,GAAGR,KAAK;EACrB,IAAIS,SAAS,GAAGzB,OAAO,CAAC,MAAME,kBAAkB,CAACsB,SAAS,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EACzE,IAAIC,SAAS,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAKhCF,SAAS,GAAGC,SAAS,GAAGA,SAAS,CAACE,OAAO,CACvC,iBAAiB,EACjBC,MAAM,CAACN,KAAK,GAAG,CAAC,CAClB,CAAC;EACH;EAEA,IAAIO,cAAc,GAAGZ,OAAO;EAC5B,IAAIC,cAAc,KAAK,gBAAgB,IAAIK,UAAU,CAACO,MAAM,IAAI,CAAC,EAAE;IACjED,cAAc,GAAAE,QAAA,KAAAA,QAAA,GACZjC,KAAA,CAAAkC,aAAA,CAACzB,OAAO,QACNT,KAAA,CAAAkC,aAAA,CAACxB,UAAU,MAAE,CACN,CAAC,CACX;EACH;EAEA,MAAMyB,UAAU,GACd,CAACJ,cAAc,IACf/B,KAAK,CAACoC,QAAQ,CAACC,OAAO,CAACrB,QAAQ,CAAC,CAACsB,IAAI,CAAEC,KAAK,IAAK;IAC/C,OAAO,CAAAA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,MAAM,CAAC,MAAK9B,OAAO;EACpC,CAAC,CAAC;EAEJ,OACET,KAAA,CAAAkC,aAAA,CAAC3B,aAAa,EAAAiC,QAAA;IACZC,IAAI,EAAC,MAAM;IACXd,SAAS,EAAEA,SAAU;IACrBV,SAAS,EAAEd,UAAU,CAAC,8BAA8B,EAAEc,SAAS;EAAE,GAC7DI,SAAS,GAEbrB,KAAA,CAAAkC,aAAA,CAAC7B,IAAI,CAACqC,KAAK,QACRhB,SAAS,IAAI1B,KAAA,CAAAkC,aAAA,CAAC5B,IAAI;IAACqC,IAAI,EAAC;EAAO,GAAEjB,SAAgB,CAAC,EAClDV,QAAQ,EACRmB,UAAU,GACP,IAAI,IAAArB,eAAA,GACJiB,cAAc,cAAAjB,eAAA,cAAAA,eAAA,GAAA8B,SAAA,KAAAA,SAAA,GACZ5C,KAAA,CAAAkC,aAAA,CAACzB,OAAO,QACNT,KAAA,CAAAkC,aAAA,CAACxB,UAAU,MAAE,CAAC,EACdV,KAAA,CAAAkC,aAAA,CAACvB,YAAY,MAAE,CACR,CAAC,CAEN,CACC,CAAC;AAEpB;AAEAC,aAAa,CAACF,UAAU,GAAGA,UAAU;AACrCE,aAAa,CAACD,YAAY,GAAGA,YAAY;AAEzCC,aAAa,CAACiC,qBAAqB,GAAG,IAAI;AAC1C,eAAejC,aAAa"}

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

@@ -1,2 +1,3 @@
 export { default as useItem } from './useItem';
 export { default as useSwitchContainerMode } from './useSwitchContainerMode';
+export { default as useArrayLimit } from './useArrayLimit';

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

@@ -1,3 +1,4 @@
 export { default as useItem } from './useItem';
 export { default as useSwitchContainerMode } from './useSwitchContainerMode';
+export { default as useArrayLimit } from './useArrayLimit';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","useItem","useSwitchContainerMode"],"sources":["../../../../../../src/extensions/forms/Iterate/hooks/index.ts"],"sourcesContent":["export { default as useItem } from './useItem'\nexport { default as useSwitchContainerMode } from './useSwitchContainerMode'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,WAAW;AAC9C,SAASD,OAAO,IAAIE,sBAAsB,QAAQ,0BAA0B"}
+{"version":3,"file":"index.js","names":["default","useItem","useSwitchContainerMode","useArrayLimit"],"sources":["../../../../../../src/extensions/forms/Iterate/hooks/index.ts"],"sourcesContent":["export { default as useItem } from './useItem'\nexport { default as useSwitchContainerMode } from './useSwitchContainerMode'\nexport { default as useArrayLimit } from './useArrayLimit'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,WAAW;AAC9C,SAASD,OAAO,IAAIE,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASF,OAAO,IAAIG,aAAa,QAAQ,iBAAiB"}

package/extensions/forms/Iterate/hooks/useArrayLimit.d.ts

@@ -0,0 +1,15 @@
+import { Path } from '../../types';
+type SharedState = {
+    show?: boolean;
+    limit?: number;
+    total?: number;
+};
+export default function useArrayLimit({ path }: {
+    path: Path;
+}): {
+    setShowStatus: (show: boolean) => void;
+    setLimitProps: (props: Omit<SharedState, 'show'>) => void;
+    error: Error;
+    hasReachedLimit: boolean;
+};
+export {};

package/extensions/forms/Iterate/hooks/useArrayLimit.js

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { useTranslation } from '../../hooks';
+import { useSharedState } from '../../../../shared/helpers/useSharedState';
+export default function useArrayLimit(_ref) {
+  let {
+    path
+  } = _ref;
+  const sharedState = useSharedState(path + '-iterate-limit');
+  const {
+    set,
+    update,
+    extend,
+    data
+  } = sharedState || {};
+  const {
+    limit,
+    total,
+    show
+  } = data || {};
+  const setLimitProps = useCallback(props => {
+    if (props.total !== total) {
+      update(props);
+    } else {
+      set(props);
+    }
+  }, [set, total, update]);
+  const setShowStatus = useCallback(show => {
+    extend({
+      show
+    });
+  }, [extend]);
+  const hasReachedLimit = typeof limit === 'number' && total >= limit;
+  const {
+    itemsLimitReached
+  } = useTranslation().IteratePushContainer;
+  const error = show ? new Error(itemsLimitReached.replace('{limit}', String(limit))) : undefined;
+  return {
+    setShowStatus,
+    setLimitProps,
+    error,
+    hasReachedLimit
+  };
+}
+//# sourceMappingURL=useArrayLimit.js.map

package/extensions/forms/Iterate/hooks/useArrayLimit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useArrayLimit.js","names":["useCallback","useTranslation","useSharedState","useArrayLimit","_ref","path","sharedState","set","update","extend","data","limit","total","show","setLimitProps","props","setShowStatus","hasReachedLimit","itemsLimitReached","IteratePushContainer","error","Error","replace","String","undefined"],"sources":["../../../../../../src/extensions/forms/Iterate/hooks/useArrayLimit.tsx"],"sourcesContent":["import { useCallback } from 'react'\nimport { useTranslation } from '../../hooks'\nimport { Path } from '../../types'\nimport { useSharedState } from '../../../../shared/helpers/useSharedState'\n\ntype SharedState = {\n  show?: boolean\n  limit?: number\n  total?: number\n}\n\nexport default function useArrayLimit({ path }: { path: Path }) {\n  const sharedState = useSharedState<SharedState>(path + '-iterate-limit')\n  const { set, update, extend, data } = sharedState || {}\n  const { limit, total, show } = data || {}\n\n  const setLimitProps = useCallback(\n    (props: Omit<SharedState, 'show'>) => {\n      if (props.total !== total) {\n        update(props)\n      } else {\n        set(props)\n      }\n    },\n    [set, total, update]\n  )\n\n  const setShowStatus = useCallback(\n    (show: boolean) => {\n      extend({ show })\n    },\n    [extend]\n  )\n\n  const hasReachedLimit = typeof limit === 'number' && total >= limit\n  const { itemsLimitReached } = useTranslation().IteratePushContainer\n  const error = show\n    ? new Error(itemsLimitReached.replace('{limit}', String(limit)))\n    : undefined\n\n  return { setShowStatus, setLimitProps, error, hasReachedLimit }\n}\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,cAAc,QAAQ,aAAa;AAE5C,SAASC,cAAc,QAAQ,2CAA2C;AAQ1E,eAAe,SAASC,aAAaA,CAAAC,IAAA,EAA2B;EAAA,IAA1B;IAAEC;EAAqB,CAAC,GAAAD,IAAA;EAC5D,MAAME,WAAW,GAAGJ,cAAc,CAAcG,IAAI,GAAG,gBAAgB,CAAC;EACxE,MAAM;IAAEE,GAAG;IAAEC,MAAM;IAAEC,MAAM;IAAEC;EAAK,CAAC,GAAGJ,WAAW,IAAI,CAAC,CAAC;EACvD,MAAM;IAAEK,KAAK;IAAEC,KAAK;IAAEC;EAAK,CAAC,GAAGH,IAAI,IAAI,CAAC,CAAC;EAEzC,MAAMI,aAAa,GAAGd,WAAW,CAC9Be,KAAgC,IAAK;IACpC,IAAIA,KAAK,CAACH,KAAK,KAAKA,KAAK,EAAE;MACzBJ,MAAM,CAACO,KAAK,CAAC;IACf,CAAC,MAAM;MACLR,GAAG,CAACQ,KAAK,CAAC;IACZ;EACF,CAAC,EACD,CAACR,GAAG,EAAEK,KAAK,EAAEJ,MAAM,CACrB,CAAC;EAED,MAAMQ,aAAa,GAAGhB,WAAW,CAC9Ba,IAAa,IAAK;IACjBJ,MAAM,CAAC;MAAEI;IAAK,CAAC,CAAC;EAClB,CAAC,EACD,CAACJ,MAAM,CACT,CAAC;EAED,MAAMQ,eAAe,GAAG,OAAON,KAAK,KAAK,QAAQ,IAAIC,KAAK,IAAID,KAAK;EACnE,MAAM;IAAEO;EAAkB,CAAC,GAAGjB,cAAc,CAAC,CAAC,CAACkB,oBAAoB;EACnE,MAAMC,KAAK,GAAGP,IAAI,GACd,IAAIQ,KAAK,CAACH,iBAAiB,CAACI,OAAO,CAAC,SAAS,EAAEC,MAAM,CAACZ,KAAK,CAAC,CAAC,CAAC,GAC9Da,SAAS;EAEb,OAAO;IAAER,aAAa;IAAEF,aAAa;IAAEM,KAAK;IAAEH;EAAgB,CAAC;AACjE"}

package/extensions/forms/Tools/GenerateSchema.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { JsonObject } from 'json-pointer';
+import { JsonObject } from '../utils/json-pointer';
 import { FilterData } from '../DataContext/Context';
 import { JSONSchema } from '../types';
 export type GenerateSchemaReturn = {

package/extensions/forms/Tools/GenerateSchema.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 { useCallback, useContext, useRef } from 'react';
-import pointer from 'json-pointer';
+import pointer from '../utils/json-pointer';
 import DataContext from '../DataContext/Context';
 export const schemaParams = ['minLength', 'maxLength', 'pattern', 'description', 'min', 'max', 'multipleOf', 'exclusiveMinimum', 'exclusiveMaximum'];
 export default function GenerateSchema(props) {