@dnb/eufemia 10.49.0 → 10.50.0

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

package/es/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","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('{itemNo}')) {\n    itemTitle = ariaLabel = ariaLabel.replace('{itemNo}', 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"}

package/es/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/es/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/es/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/es/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/es/extensions/forms/Iterate/hooks/useArrayLimit.js

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { useTranslation } from '../../hooks';
+import { useSharedState } from '../../../../shared/helpers/useSharedState';
+export default function useArrayLimit({
+  path
+}) {
+  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/es/extensions/forms/Iterate/hooks/useArrayLimit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useArrayLimit.js","names":["useCallback","useTranslation","useSharedState","useArrayLimit","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,CAAC;EAAEC;AAAqB,CAAC,EAAE;EAC9D,MAAMC,WAAW,GAAGH,cAAc,CAAcE,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,GAAGb,WAAW,CAC9Bc,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,GAAGf,WAAW,CAC9BY,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,GAAGhB,cAAc,CAAC,CAAC,CAACiB,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/es/extensions/forms/Tools/Log.js

@@ -15,7 +15,7 @@ function Log(props) {
       maxWidth: '80vw'
     },
     innerSpace: true
-  }, props), React.createElement("pre", null, JSON.stringify(data), ' '));
+  }, props), React.createElement("pre", null, JSON.stringify(data, null, 2), ' '));
 }
 Log._supportsSpacingProps = true;
 export default Log;

package/es/extensions/forms/Tools/Log.js.map

@@ -1 +1 @@
-{"version":3,"file":"Log.js","names":["useContext","DataContext","Section","Log","props","data","React","createElement","_extends","element","backgroundColor","style","maxWidth","innerSpace","JSON","stringify","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/Tools/Log.tsx"],"sourcesContent":["import { useContext } from 'react'\nimport DataContext from '../DataContext/Context'\nimport Section, { SectionProps } from '../../../components/Section'\n\nfunction Log(props: SectionProps) {\n  const { data } = useContext(DataContext)\n\n  return (\n    <Section\n      element=\"output\"\n      backgroundColor=\"sand-yellow\"\n      style={{ maxWidth: '80vw' }}\n      innerSpace\n      {...props}\n    >\n      <pre>\n        {JSON.stringify(data)}\n        {' ' /* Ensure one line of spacing */}\n      </pre>\n    </Section>\n  )\n}\n\nLog._supportsSpacingProps = true\nexport default Log\n"],"mappings":";;;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,OAAOC,WAAW,MAAM,wBAAwB;AAChD,OAAOC,OAAO,MAAwB,6BAA6B;AAEnE,SAASC,GAAGA,CAACC,KAAmB,EAAE;EAChC,MAAM;IAAEC;EAAK,CAAC,GAAGL,UAAU,CAACC,WAAW,CAAC;EAExC,OACEK,KAAA,CAAAC,aAAA,CAACL,OAAO,EAAAM,QAAA;IACNC,OAAO,EAAC,QAAQ;IAChBC,eAAe,EAAC,aAAa;IAC7BC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAO,CAAE;IAC5BC,UAAU;EAAA,GACNT,KAAK,GAETE,KAAA,CAAAC,aAAA,cACGO,IAAI,CAACC,SAAS,CAACV,IAAI,CAAC,EACpB,GACE,CACE,CAAC;AAEd;AAEAF,GAAG,CAACa,qBAAqB,GAAG,IAAI;AAChC,eAAeb,GAAG"}
+{"version":3,"file":"Log.js","names":["useContext","DataContext","Section","Log","props","data","React","createElement","_extends","element","backgroundColor","style","maxWidth","innerSpace","JSON","stringify","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/Tools/Log.tsx"],"sourcesContent":["import { useContext } from 'react'\nimport DataContext from '../DataContext/Context'\nimport Section, { SectionProps } from '../../../components/Section'\n\nfunction Log(props: SectionProps) {\n  const { data } = useContext(DataContext)\n\n  return (\n    <Section\n      element=\"output\"\n      backgroundColor=\"sand-yellow\"\n      style={{ maxWidth: '80vw' }}\n      innerSpace\n      {...props}\n    >\n      <pre>\n        {JSON.stringify(data, null, 2)}\n        {' ' /* Ensure one line of spacing */}\n      </pre>\n    </Section>\n  )\n}\n\nLog._supportsSpacingProps = true\nexport default Log\n"],"mappings":";;;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,OAAOC,WAAW,MAAM,wBAAwB;AAChD,OAAOC,OAAO,MAAwB,6BAA6B;AAEnE,SAASC,GAAGA,CAACC,KAAmB,EAAE;EAChC,MAAM;IAAEC;EAAK,CAAC,GAAGL,UAAU,CAACC,WAAW,CAAC;EAExC,OACEK,KAAA,CAAAC,aAAA,CAACL,OAAO,EAAAM,QAAA;IACNC,OAAO,EAAC,QAAQ;IAChBC,eAAe,EAAC,aAAa;IAC7BC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAO,CAAE;IAC5BC,UAAU;EAAA,GACNT,KAAK,GAETE,KAAA,CAAAC,aAAA,cACGO,IAAI,CAACC,SAAS,CAACV,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,EAC7B,GACE,CACE,CAAC;AAEd;AAEAF,GAAG,CAACa,qBAAqB,GAAG,IAAI;AAChC,eAAeb,GAAG"}

package/es/extensions/forms/Value/ArraySelection/ArraySelection.d.ts

@@ -6,6 +6,18 @@ export type Props = ValueProps<Array<number | string>> & {
      * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat
      */
     format?: Intl.ListFormatOptions;
+    /**
+     * Defines if the value should be displayed in list format or reuglar text format on one line.
+     * Default: `text`
+     */
+    variant?: 'ol' | 'ul' | 'text';
+    /**
+     * Defines the type of list styling used for list variants. Used on conjuction with variant `ol` and `ul`.
+     * Variant `ol`: `a`, `A`, `i`, `I` and `1`.
+     * Variant `ul`: `cirlce`, `disc` and `square`.
+     * Default: `undefined`
+     */
+    listType?: 'a' | 'A' | 'i' | 'I' | '1' | 'circle' | 'disc' | 'square' | undefined;
 };
 declare function ArraySelection(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace ArraySelection {

package/es/extensions/forms/Value/ArraySelection/ArraySelection.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["path", "value", "format", "className"];
+const _excluded = ["path", "value", "format", "className", "variant", "listType"];
 import React, { useContext, useMemo } from 'react';
 import classnames from 'classnames';
 import { useValueProps } from '../../hooks';
@@ -11,6 +11,7 @@ import { LOCALE } from '../../../../shared/defaults';
 import { convertJsxToString } from '../../../../shared/component-helper';
 import SharedContext from '../../../../shared/Context';
 import Context from '../../DataContext/Context';
+import { Li, Ol, Ul } from '../../../../elements';
 function ArraySelection(props) {
   const {
     locale
@@ -23,25 +24,41 @@ function ArraySelection(props) {
       path,
       value,
       format,
-      className
+      className,
+      variant = 'text',
+      listType
     } = _useValueProps,
     rest = _objectWithoutProperties(_useValueProps, _excluded);
   const list = useMemo(() => {
+    const isListVariant = variant !== 'text';
     if (path) {
       var _fieldPropsRef$curren, _data$map;
       const data = fieldPropsRef === null || fieldPropsRef === void 0 ? void 0 : (_fieldPropsRef$curren = fieldPropsRef.current) === null || _fieldPropsRef$curren === void 0 ? void 0 : _fieldPropsRef$curren[path + '/arraySelectionData'];
       return (data === null || data === void 0 ? void 0 : (_data$map = data.map) === null || _data$map === void 0 ? void 0 : _data$map.call(data, ({
         title
-      }) => convertJsxToString(title))) || value;
+      }, index) => isListVariant ? React.createElement(Li, {
+        key: index
+      }, convertJsxToString(title)) : convertJsxToString(title))) || value;
     }
-    return value;
-  }, [fieldPropsRef, path, value]);
+    return isListVariant ? value.map((value, index) => React.createElement(Li, {
+      key: index
+    }, convertJsxToString(value))) : value;
+  }, [fieldPropsRef, path, value, variant]);
+  const listValue = useMemo(() => {
+    if (variant === 'text') {
+      return listFormat(list, {
+        locale,
+        format
+      });
+    }
+    const ListElement = variant.startsWith('ol') ? Ol : Ul;
+    return React.createElement(ListElement, {
+      type: listType
+    }, list);
+  }, [format, list, locale, variant, listType]);
   return React.createElement(ValueBlock, _extends({
     className: classnames('dnb-forms-value-array-selection', className)
-  }, rest), listFormat(list, {
-    locale,
-    format
-  }));
+  }, rest), listValue);
 }
 export function listFormat(value, {
   locale = LOCALE,

package/es/extensions/forms/Value/ArraySelection/ArraySelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useContext","useMemo","classnames","useValueProps","ValueBlock","LOCALE","convertJsxToString","SharedContext","Context","ArraySelection","props","locale","fieldPropsRef","_useValueProps","path","value","format","className","rest","_objectWithoutProperties","_excluded","list","_fieldPropsRef$curren","_data$map","data","current","map","call","title","createElement","_extends","listFormat","style","type","separator","Array","isArray","formatter","Intl","ListFormat","v","String","error","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { useValueProps } from '../../hooks'\nimport { ValueProps } from '../../types'\nimport ValueBlock from '../../ValueBlock'\nimport { LOCALE } from '../../../../shared/defaults'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport SharedContext, { InternalLocale } from '../../../../shared/Context'\nimport Context from '../../DataContext/Context'\n\nexport type Props = ValueProps<Array<number | string>> & {\n  /**\n   * Formatting options for the value.\n   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat\n   */\n  format?: Intl.ListFormatOptions\n}\n\nfunction ArraySelection(props: Props) {\n  const { locale } = useContext(SharedContext)\n  const { fieldPropsRef } = useContext(Context) || {}\n  const { path, value, format, className, ...rest } = useValueProps(props)\n\n  const list = useMemo(() => {\n    if (path) {\n      const data = fieldPropsRef?.current?.[\n        path + '/arraySelectionData'\n      ] as Array<{\n        value: string\n        title: string | React.ReactNode\n      }>\n      return data?.map?.(({ title }) => convertJsxToString(title)) || value\n    }\n\n    return value\n  }, [fieldPropsRef, path, value])\n\n  return (\n    <ValueBlock\n      className={classnames('dnb-forms-value-array-selection', className)}\n      {...rest}\n    >\n      {listFormat(list, { locale, format })}\n    </ValueBlock>\n  )\n}\n\nexport function listFormat(\n  value: Array<number | string>,\n  {\n    locale = LOCALE,\n    format = {\n      style: 'long',\n      type: 'conjunction',\n    },\n    separator = ', ',\n  }: {\n    locale?: InternalLocale\n    format?: Intl.ListFormatOptions\n    separator?: string\n  }\n) {\n  if (!Array.isArray(value)) {\n    return value\n  }\n  try {\n    const formatter = new Intl.ListFormat(locale, format)\n    return formatter.format(value.map((v) => String(v)))\n  } catch (error) {\n    return value.join(separator)\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,aAAa,QAAQ,aAAa;AAE3C,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,MAAM,QAAQ,6BAA6B;AACpD,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,OAAOC,aAAa,MAA0B,4BAA4B;AAC1E,OAAOC,OAAO,MAAM,2BAA2B;AAU/C,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAM;IAAEC;EAAO,CAAC,GAAGX,UAAU,CAACO,aAAa,CAAC;EAC5C,MAAM;IAAEK;EAAc,CAAC,GAAGZ,UAAU,CAACQ,OAAO,CAAC,IAAI,CAAC,CAAC;EACnD,MAAAK,cAAA,GAAoDV,aAAa,CAACO,KAAK,CAAC;IAAlE;MAAEI,IAAI;MAAEC,KAAK;MAAEC,MAAM;MAAEC;IAAmB,CAAC,GAAAJ,cAAA;IAANK,IAAI,GAAAC,wBAAA,CAAAN,cAAA,EAAAO,SAAA;EAE/C,MAAMC,IAAI,GAAGpB,OAAO,CAAC,MAAM;IACzB,IAAIa,IAAI,EAAE;MAAA,IAAAQ,qBAAA,EAAAC,SAAA;MACR,MAAMC,IAAI,GAAGZ,aAAa,aAAbA,aAAa,wBAAAU,qBAAA,GAAbV,aAAa,CAAEa,OAAO,cAAAH,qBAAA,uBAAtBA,qBAAA,CACXR,IAAI,GAAG,qBAAqB,CAI5B;MACF,OAAO,CAAAU,IAAI,aAAJA,IAAI,wBAAAD,SAAA,GAAJC,IAAI,CAAEE,GAAG,cAAAH,SAAA,uBAATA,SAAA,CAAAI,IAAA,CAAAH,IAAI,EAAQ,CAAC;QAAEI;MAAM,CAAC,KAAKtB,kBAAkB,CAACsB,KAAK,CAAC,CAAC,KAAIb,KAAK;IACvE;IAEA,OAAOA,KAAK;EACd,CAAC,EAAE,CAACH,aAAa,EAAEE,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEhC,OACEhB,KAAA,CAAA8B,aAAA,CAACzB,UAAU,EAAA0B,QAAA;IACTb,SAAS,EAAEf,UAAU,CAAC,iCAAiC,EAAEe,SAAS;EAAE,GAChEC,IAAI,GAEPa,UAAU,CAACV,IAAI,EAAE;IAAEV,MAAM;IAAEK;EAAO,CAAC,CAC1B,CAAC;AAEjB;AAEA,OAAO,SAASe,UAAUA,CACxBhB,KAA6B,EAC7B;EACEJ,MAAM,GAAGN,MAAM;EACfW,MAAM,GAAG;IACPgB,KAAK,EAAE,MAAM;IACbC,IAAI,EAAE;EACR,CAAC;EACDC,SAAS,GAAG;AAKd,CAAC,EACD;EACA,IAAI,CAACC,KAAK,CAACC,OAAO,CAACrB,KAAK,CAAC,EAAE;IACzB,OAAOA,KAAK;EACd;EACA,IAAI;IACF,MAAMsB,SAAS,GAAG,IAAIC,IAAI,CAACC,UAAU,CAAC5B,MAAM,EAAEK,MAAM,CAAC;IACrD,OAAOqB,SAAS,CAACrB,MAAM,CAACD,KAAK,CAACW,GAAG,CAAEc,CAAC,IAAKC,MAAM,CAACD,CAAC,CAAC,CAAC,CAAC;EACtD,CAAC,CAAC,OAAOE,KAAK,EAAE;IACd,OAAO3B,KAAK,CAAC4B,IAAI,CAACT,SAAS,CAAC;EAC9B;AACF;AAEAzB,cAAc,CAACmC,qBAAqB,GAAG,IAAI;AAC3C,eAAenC,cAAc"}
+{"version":3,"file":"ArraySelection.js","names":["React","useContext","useMemo","classnames","useValueProps","ValueBlock","LOCALE","convertJsxToString","SharedContext","Context","Li","Ol","Ul","ArraySelection","props","locale","fieldPropsRef","_useValueProps","path","value","format","className","variant","listType","rest","_objectWithoutProperties","_excluded","list","isListVariant","_fieldPropsRef$curren","_data$map","data","current","map","call","title","index","createElement","key","listValue","listFormat","ListElement","startsWith","type","_extends","style","separator","Array","isArray","formatter","Intl","ListFormat","v","String","error","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { useValueProps } from '../../hooks'\nimport { ValueProps } from '../../types'\nimport ValueBlock from '../../ValueBlock'\nimport { LOCALE } from '../../../../shared/defaults'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport SharedContext, { InternalLocale } from '../../../../shared/Context'\nimport Context from '../../DataContext/Context'\nimport { Li, Ol, Ul } from '../../../../elements'\n\nexport type Props = ValueProps<Array<number | string>> & {\n  /**\n   * Formatting options for the value.\n   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat\n   */\n  format?: Intl.ListFormatOptions\n  /**\n   * Defines if the value should be displayed in list format or reuglar text format on one line.\n   * Default: `text`\n   */\n  variant?: 'ol' | 'ul' | 'text'\n  /**\n   * Defines the type of list styling used for list variants. Used on conjuction with variant `ol` and `ul`.\n   * Variant `ol`: `a`, `A`, `i`, `I` and `1`.\n   * Variant `ul`: `cirlce`, `disc` and `square`.\n   * Default: `undefined`\n   */\n  listType?:\n    | 'a'\n    | 'A'\n    | 'i'\n    | 'I'\n    | '1'\n    | 'circle'\n    | 'disc'\n    | 'square'\n    | undefined\n}\n\nfunction ArraySelection(props: Props) {\n  const { locale } = useContext(SharedContext)\n  const { fieldPropsRef } = useContext(Context) || {}\n  const {\n    path,\n    value,\n    format,\n    className,\n    variant = 'text',\n    listType,\n    ...rest\n  } = useValueProps(props)\n\n  const list = useMemo(() => {\n    const isListVariant = variant !== 'text'\n\n    if (path) {\n      const data = fieldPropsRef?.current?.[\n        path + '/arraySelectionData'\n      ] as Array<{\n        value: string\n        title: string | React.ReactNode\n      }>\n\n      return (\n        data?.map?.(({ title }, index) =>\n          isListVariant ? (\n            <Li key={index}>{convertJsxToString(title)}</Li>\n          ) : (\n            convertJsxToString(title)\n          )\n        ) || value\n      )\n    }\n\n    return isListVariant\n      ? value.map((value, index) => (\n          <Li key={index}>{convertJsxToString(value)}</Li>\n        ))\n      : value\n  }, [fieldPropsRef, path, value, variant])\n\n  const listValue = useMemo(() => {\n    if (variant === 'text') {\n      return listFormat(list, { locale, format })\n    }\n\n    const ListElement = variant.startsWith('ol') ? Ol : Ul\n\n    return <ListElement type={listType}>{list}</ListElement>\n  }, [format, list, locale, variant, listType])\n\n  return (\n    <ValueBlock\n      className={classnames('dnb-forms-value-array-selection', className)}\n      {...rest}\n    >\n      {listValue}\n    </ValueBlock>\n  )\n}\n\nexport function listFormat(\n  value: Array<number | string>,\n  {\n    locale = LOCALE,\n    format = {\n      style: 'long',\n      type: 'conjunction',\n    },\n    separator = ', ',\n  }: {\n    locale?: InternalLocale\n    format?: Intl.ListFormatOptions\n    separator?: string\n  }\n) {\n  if (!Array.isArray(value)) {\n    return value\n  }\n  try {\n    const formatter = new Intl.ListFormat(locale, format)\n    return formatter.format(value.map((v) => String(v)))\n  } catch (error) {\n    return value.join(separator)\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

package/es/extensions/forms/Value/ArraySelection/ArraySelectionDocs.js

@@ -3,6 +3,16 @@ export const ArraySelectionProperties = {
     doc: 'Formatting options for the value. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.',
     type: 'Intl.ListFormatOptions',
     status: 'optional'
+  },
+  variant: {
+    doc: 'Defines if the value should be displayed in list format, or reuglar text format on one line. Defaults to `text`',
+    type: ['ol', 'ul', 'text'],
+    status: 'optional'
+  },
+  listType: {
+    doc: 'Defines the type of list styling used for list variants. Used on conjuction with variant `ol` and `ul`. Variant `ol`: `a`, `A`, `i`, `I` and `1`. Variant `ul`: `cirlce`, `disc` and `square`. Defaults to `undefined`',
+    type: ['a', 'A', 'i', 'I', '1', 'circle', 'disc', 'square', 'undefined'],
+    status: 'optional'
   }
 };
 //# sourceMappingURL=ArraySelectionDocs.js.map

package/es/extensions/forms/Value/ArraySelection/ArraySelectionDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArraySelectionDocs.js","names":["ArraySelectionProperties","format","doc","type","status"],"sources":["../../../../../../src/extensions/forms/Value/ArraySelection/ArraySelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ArraySelectionProperties: PropertiesTableProps = {\n  format: {\n    doc: 'Formatting options for the value. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.',\n    type: 'Intl.ListFormatOptions',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,wBAA8C,GAAG;EAC5DC,MAAM,EAAE;IACNC,GAAG,EAAE,yLAAyL;IAC9LC,IAAI,EAAE,wBAAwB;IAC9BC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ArraySelectionDocs.js","names":["ArraySelectionProperties","format","doc","type","status","variant","listType"],"sources":["../../../../../../src/extensions/forms/Value/ArraySelection/ArraySelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ArraySelectionProperties: PropertiesTableProps = {\n  format: {\n    doc: 'Formatting options for the value. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.',\n    type: 'Intl.ListFormatOptions',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines if the value should be displayed in list format, or reuglar text format on one line. Defaults to `text`',\n    type: ['ol', 'ul', 'text'],\n    status: 'optional',\n  },\n  listType: {\n    doc: 'Defines the type of list styling used for list variants. Used on conjuction with variant `ol` and `ul`. Variant `ol`: `a`, `A`, `i`, `I` and `1`. Variant `ul`: `cirlce`, `disc` and `square`. Defaults to `undefined`',\n    type: [\n      'a',\n      'A',\n      'i',\n      'I',\n      '1',\n      'circle',\n      'disc',\n      'square',\n      'undefined',\n    ],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,wBAA8C,GAAG;EAC5DC,MAAM,EAAE;IACNC,GAAG,EAAE,yLAAyL;IAC9LC,IAAI,EAAE,wBAAwB;IAC9BC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,iHAAiH;IACtHC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,wNAAwN;IAC7NC,IAAI,EAAE,CACJ,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,CACZ;IACDC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/Value/Number/Number.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["value", "minimum", "maximum", "inline", "showEmpty", "className"];
+const _excluded = ["value", "minimum", "maximum", "inline", "showEmpty", "className", "path"];
 import React from 'react';
 import classnames from 'classnames';
 import ValueBlock from '../../ValueBlock';
@@ -16,7 +16,8 @@ function NumberValue(props) {
       maximum = Number.MAX_SAFE_INTEGER,
       inline,
       showEmpty,
-      className
+      className,
+      path
     } = _useValueProps,
     rest = _objectWithoutProperties(_useValueProps, _excluded);
   const numberFormatProps = convertCamelCaseProps(omitSpacingProps(rest));

package/es/extensions/forms/Value/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","classnames","ValueBlock","useValueProps","omitSpacingProps","NumberFormat","convertCamelCaseProps","NumberValue","props","_useValueProps","value","valueProp","minimum","Number","MIN_SAFE_INTEGER","maximum","MAX_SAFE_INTEGER","inline","showEmpty","className","rest","_objectWithoutProperties","_excluded","numberFormatProps","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Number/Number.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ValueBlock from '../../ValueBlock'\nimport useValueProps from '../../hooks/useValueProps'\nimport { ValueProps } from '../../types'\nimport { omitSpacingProps } from '../../../../components/flex/utils'\nimport NumberFormat, {\n  NumberFormatProps,\n} from '../../../../components/NumberFormat'\nimport {\n  IncludeCamelCase,\n  convertCamelCaseProps,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\nexport type Props = Omit<ValueProps<number>, 'defaultValue'> &\n  IncludeCamelCase<NumberFormatProps> &\n  Partial<{\n    defaultValue?: number | string\n    minimum?: number\n    maximum?: number\n  }>\n\nfunction NumberValue(props: Props) {\n  const {\n    value: valueProp,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    inline,\n    showEmpty,\n    className,\n    ...rest\n  } = useValueProps(props)\n  const numberFormatProps = convertCamelCaseProps(omitSpacingProps(rest))\n\n  let value = valueProp\n  if (value < minimum) {\n    value = minimum\n  }\n  if (value > maximum) {\n    value = maximum\n  }\n\n  return (\n    <ValueBlock\n      className={classnames('dnb-forms-value-number', className)}\n      inline={inline}\n      showEmpty={showEmpty}\n      {...rest}\n    >\n      {typeof value !== 'undefined' || showEmpty ? (\n        <NumberFormat value={value} {...numberFormatProps} />\n      ) : null}\n    </ValueBlock>\n  )\n}\n\nNumberValue._supportsSpacingProps = true\nexport default NumberValue\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,OAAOC,aAAa,MAAM,2BAA2B;AAErD,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,YAAY,MAEZ,qCAAqC;AAC5C,SAEEC,qBAAqB,QAChB,+CAA+C;AAUtD,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAAC,cAAA,GAQIN,aAAa,CAACK,KAAK,CAAC;IARlB;MACJE,KAAK,EAAEC,SAAS;MAChBC,OAAO,GAAGC,MAAM,CAACC,gBAAgB;MACjCC,OAAO,GAAGF,MAAM,CAACG,gBAAgB;MACjCC,MAAM;MACNC,SAAS;MACTC;IAEF,CAAC,GAAAV,cAAA;IADIW,IAAI,GAAAC,wBAAA,CAAAZ,cAAA,EAAAa,SAAA;EAET,MAAMC,iBAAiB,GAAGjB,qBAAqB,CAACF,gBAAgB,CAACgB,IAAI,CAAC,CAAC;EAEvE,IAAIV,KAAK,GAAGC,SAAS;EACrB,IAAID,KAAK,GAAGE,OAAO,EAAE;IACnBF,KAAK,GAAGE,OAAO;EACjB;EACA,IAAIF,KAAK,GAAGK,OAAO,EAAE;IACnBL,KAAK,GAAGK,OAAO;EACjB;EAEA,OACEf,KAAA,CAAAwB,aAAA,CAACtB,UAAU,EAAAuB,QAAA;IACTN,SAAS,EAAElB,UAAU,CAAC,wBAAwB,EAAEkB,SAAS,CAAE;IAC3DF,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA;EAAU,GACjBE,IAAI,GAEP,OAAOV,KAAK,KAAK,WAAW,IAAIQ,SAAS,GACxClB,KAAA,CAAAwB,aAAA,CAACnB,YAAY,EAAAoB,QAAA;IAACf,KAAK,EAAEA;EAAM,GAAKa,iBAAiB,CAAG,CAAC,GACnD,IACM,CAAC;AAEjB;AAEAhB,WAAW,CAACmB,qBAAqB,GAAG,IAAI;AACxC,eAAenB,WAAW"}
+{"version":3,"file":"Number.js","names":["React","classnames","ValueBlock","useValueProps","omitSpacingProps","NumberFormat","convertCamelCaseProps","NumberValue","props","_useValueProps","value","valueProp","minimum","Number","MIN_SAFE_INTEGER","maximum","MAX_SAFE_INTEGER","inline","showEmpty","className","path","rest","_objectWithoutProperties","_excluded","numberFormatProps","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Number/Number.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ValueBlock from '../../ValueBlock'\nimport useValueProps from '../../hooks/useValueProps'\nimport { ValueProps } from '../../types'\nimport { omitSpacingProps } from '../../../../components/flex/utils'\nimport NumberFormat, {\n  NumberFormatProps,\n} from '../../../../components/NumberFormat'\nimport {\n  IncludeCamelCase,\n  convertCamelCaseProps,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\nexport type Props = Omit<ValueProps<number>, 'defaultValue'> &\n  IncludeCamelCase<NumberFormatProps> &\n  Partial<{\n    defaultValue?: number | string\n    minimum?: number\n    maximum?: number\n  }>\n\nfunction NumberValue(props: Props) {\n  const {\n    value: valueProp,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    inline,\n    showEmpty,\n    className,\n    path, // eslint-disable-line\n    ...rest\n  } = useValueProps(props)\n  const numberFormatProps = convertCamelCaseProps(omitSpacingProps(rest))\n\n  let value = valueProp\n  if (value < minimum) {\n    value = minimum\n  }\n  if (value > maximum) {\n    value = maximum\n  }\n\n  return (\n    <ValueBlock\n      className={classnames('dnb-forms-value-number', className)}\n      inline={inline}\n      showEmpty={showEmpty}\n      {...rest}\n    >\n      {typeof value !== 'undefined' || showEmpty ? (\n        <NumberFormat value={value} {...numberFormatProps} />\n      ) : null}\n    </ValueBlock>\n  )\n}\n\nNumberValue._supportsSpacingProps = true\nexport default NumberValue\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,OAAOC,aAAa,MAAM,2BAA2B;AAErD,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,YAAY,MAEZ,qCAAqC;AAC5C,SAEEC,qBAAqB,QAChB,+CAA+C;AAUtD,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAAC,cAAA,GASIN,aAAa,CAACK,KAAK,CAAC;IATlB;MACJE,KAAK,EAAEC,SAAS;MAChBC,OAAO,GAAGC,MAAM,CAACC,gBAAgB;MACjCC,OAAO,GAAGF,MAAM,CAACG,gBAAgB;MACjCC,MAAM;MACNC,SAAS;MACTC,SAAS;MACTC;IAEF,CAAC,GAAAX,cAAA;IADIY,IAAI,GAAAC,wBAAA,CAAAb,cAAA,EAAAc,SAAA;EAET,MAAMC,iBAAiB,GAAGlB,qBAAqB,CAACF,gBAAgB,CAACiB,IAAI,CAAC,CAAC;EAEvE,IAAIX,KAAK,GAAGC,SAAS;EACrB,IAAID,KAAK,GAAGE,OAAO,EAAE;IACnBF,KAAK,GAAGE,OAAO;EACjB;EACA,IAAIF,KAAK,GAAGK,OAAO,EAAE;IACnBL,KAAK,GAAGK,OAAO;EACjB;EAEA,OACEf,KAAA,CAAAyB,aAAA,CAACvB,UAAU,EAAAwB,QAAA;IACTP,SAAS,EAAElB,UAAU,CAAC,wBAAwB,EAAEkB,SAAS,CAAE;IAC3DF,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA;EAAU,GACjBG,IAAI,GAEP,OAAOX,KAAK,KAAK,WAAW,IAAIQ,SAAS,GACxClB,KAAA,CAAAyB,aAAA,CAACpB,YAAY,EAAAqB,QAAA;IAAChB,KAAK,EAAEA;EAAM,GAAKc,iBAAiB,CAAG,CAAC,GACnD,IACM,CAAC;AAEjB;AAEAjB,WAAW,CAACoB,qBAAqB,GAAG,IAAI;AACxC,eAAepB,WAAW"}

package/es/extensions/forms/Value/SelectCountry/SelectCountry.d.ts

@@ -2,6 +2,7 @@ import { ValueProps } from '../../types';
 export type Props = ValueProps<string>;
 declare function SelectCountry(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace SelectCountry {
+    var useCountry: typeof import("./useCountry").default;
     var _supportsSpacingProps: boolean;
 }
 export default SelectCountry;