@dnb/eufemia 10.47.0 → 10.49.0

package/extensions/forms/Form/Section/containers/SectionContainer.js

@@ -2,13 +2,26 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["mode", "open", "ariaLabel", "onAnimationEnd", "className", "children", "variant"];
+const _excluded = ["mode", "open", "ariaLabel", "onAnimationEnd", "className", "children", "variant", "omitFocusManagementRef"];
 import React, { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
 import classnames from 'classnames';
 import { Flex, HeightAnimation } from '../../../../../components';
 import SectionContainerContext from './SectionContainerContext';
 import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
 function SectionContainer(props) {
+  const {
+      mode,
+      open,
+      ariaLabel,
+      onAnimationEnd,
+      className,
+      children,
+      variant = 'outline',
+      omitFocusManagementRef = {
+        current: undefined
+      }
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
   const [, forceUpdate] = useReducer(() => ({}), {});
   const containerRef = useRef();
   const contextRef = useRef();
@@ -23,19 +36,8 @@ function SectionContainer(props) {
     contextRef.current.containerMode = 'edit';
   }
   const {
-    switchContainerMode,
     containerMode
   } = contextRef.current;
-  const {
-      mode,
-      open,
-      ariaLabel,
-      onAnimationEnd,
-      className,
-      children,
-      variant = 'outline'
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded);
   const openRef = useRef(open !== null && open !== void 0 ? open : containerMode === mode);
   const setOpenState = useCallback(open => {
     openRef.current = open;
@@ -50,21 +52,21 @@ function SectionContainer(props) {
       }
     }
   }, [containerMode, mode, open, setOpenState]);
-  const handleAnimationEnd = useCallback(state => {
-    if (contextRef.current.hasSubmitError) {
-      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
-    }
+  const setFocus = useCallback(state => {
     if (state === 'opened') {
-      const preventFocusOnErrorOpening = !contextRef.current.hasSubmitError;
-      if (preventFocusOnErrorOpening) {
+      if (!omitFocusManagementRef.current && !contextRef.current.hasSubmitError) {
         var _containerRef$current, _containerRef$current2;
         containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.focus) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.call(_containerRef$current);
       }
+      omitFocusManagementRef.current = false;
     }
+  }, [omitFocusManagementRef]);
+  const handleAnimationEnd = useCallback(state => {
+    setFocus(state);
     onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd(state);
-  }, [onAnimationEnd, switchContainerMode]);
+  }, [onAnimationEnd, setFocus]);
   return React.createElement(HeightAnimation, {
-    className: classnames('dnb-forms-section-block', className, variant && `dnb-forms-section-block--variant-${variant}`, contextRef.current.hasSubmitError && 'dnb-forms-section-block--error'),
+    className: classnames('dnb-forms-section-block', className, variant && `dnb-forms-section-block--variant-${variant}`, omitFocusManagementRef.current && 'dnb-forms-section-block--no-animation', contextRef.current.hasSubmitError && 'dnb-forms-section-block--error'),
     open: openRef.current,
     onAnimationEnd: handleAnimationEnd,
     duration: 450,

package/extensions/forms/Form/Section/containers/SectionContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainer.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","SectionContainerContext","FieldBoundaryContext","SectionContainer","props","forceUpdate","containerRef","contextRef","current","hasError","hasSubmitError","containerMode","switchContainerMode","mode","open","ariaLabel","onAnimationEnd","className","children","variant","restProps","_objectWithoutProperties","_excluded","openRef","setOpenState","handleAnimationEnd","state","preventFocusOnErrorOpening","_containerRef$current","_containerRef$current2","focus","call","createElement","duration","keepInDOM","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainer.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../../components'\nimport SectionContainerContext, {\n  SectionContainerContextState,\n} from './SectionContainerContext'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport type ContainerMode = 'view' | 'edit'\nexport type SectionContainerProps = {\n  /**\n   * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.\n   * Defaults to `outline`.\n   */\n  variant?: 'outline' | 'basic'\n}\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n} & SectionContainerProps\n\nfunction SectionContainer(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const containerRef = useRef<HTMLDivElement>()\n  const contextRef = useRef<\n    SectionContainerContextState & {\n      hasError?: boolean\n      hasSubmitError?: boolean\n    }\n  >()\n  contextRef.current = useContext(SectionContainerContext) || {}\n\n  const { hasError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasSubmitError = hasSubmitError\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasSubmitError) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { switchContainerMode, containerMode } = contextRef.current\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    variant = 'outline',\n    ...restProps\n  } = props\n\n  const openRef = useRef(open ?? containerMode === mode)\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    // - Set the open state, if it's controlled\n    if (typeof open !== 'undefined') {\n      setOpenState(open)\n    } else {\n      // - Open the block with animation, if it's in the right mode\n      if (openRef.current !== (containerMode === mode)) {\n        setOpenState(containerMode === mode)\n      }\n    }\n  }, [containerMode, mode, open, setOpenState])\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      // - Keep the block open if we have an error\n      if (contextRef.current.hasSubmitError) {\n        switchContainerMode?.('edit')\n      }\n\n      if (state === 'opened') {\n        const preventFocusOnErrorOpening =\n          !contextRef.current.hasSubmitError\n        if (preventFocusOnErrorOpening) {\n          containerRef?.current?.focus?.()\n        }\n      }\n\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, switchContainerMode]\n  )\n\n  return (\n    <HeightAnimation\n      className={classnames(\n        'dnb-forms-section-block',\n        variant && `dnb-forms-section-block--variant-${variant}`,\n        contextRef.current.hasSubmitError &&\n          'dnb-forms-section-block--error',\n        className\n      )}\n      open={openRef.current}\n      onAnimationEnd={handleAnimationEnd}\n      duration={450}\n      keepInDOM // Ensure fields get mounted so they will sync with the data context\n    >\n      <Flex.Stack\n        className=\"dnb-forms-section-block__inner\"\n        {...restProps}\n        element=\"section\"\n        aria-label={ariaLabel}\n        innerRef={containerRef}\n        tabIndex={-1}\n      >\n        {children}\n      </Flex.Stack>\n    </HeightAnimation>\n  )\n}\n\nSectionContainer._supportsSpacingProps = true\nexport default SectionContainer\n"],"mappings":"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"}
+{"version":3,"file":"SectionContainer.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","SectionContainerContext","FieldBoundaryContext","SectionContainer","props","mode","open","ariaLabel","onAnimationEnd","className","children","variant","omitFocusManagementRef","current","undefined","restProps","_objectWithoutProperties","_excluded","forceUpdate","containerRef","contextRef","hasError","hasSubmitError","containerMode","openRef","setOpenState","setFocus","state","_containerRef$current","_containerRef$current2","focus","call","handleAnimationEnd","createElement","duration","keepInDOM","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainer.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../../components'\nimport SectionContainerContext, {\n  SectionContainerContextState,\n} from './SectionContainerContext'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport type ContainerMode = 'view' | 'edit' | 'auto'\nexport type SectionContainerProps = {\n  /**\n   * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.\n   * Defaults to `outline`.\n   */\n  variant?: 'outline' | 'basic'\n}\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n  omitFocusManagementRef?: React.MutableRefObject<boolean>\n} & SectionContainerProps\n\nfunction SectionContainer(props: Props & FlexContainerProps) {\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    variant = 'outline',\n    omitFocusManagementRef = { current: undefined },\n    ...restProps\n  } = props\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const containerRef = useRef<HTMLDivElement>()\n  const contextRef = useRef<\n    SectionContainerContextState & {\n      hasError?: boolean\n      hasSubmitError?: boolean\n    }\n  >()\n  contextRef.current = useContext(SectionContainerContext) || {}\n\n  const { hasError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasSubmitError = hasSubmitError\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasSubmitError) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { containerMode } = contextRef.current\n\n  const openRef = useRef(open ?? containerMode === mode)\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    // - Set the open state, if it's controlled\n    if (typeof open !== 'undefined') {\n      setOpenState(open)\n    } else {\n      // - Open the block with animation, if it's in the right mode\n      if (openRef.current !== (containerMode === mode)) {\n        setOpenState(containerMode === mode)\n      }\n    }\n  }, [containerMode, mode, open, setOpenState])\n\n  const setFocus = useCallback(\n    (state) => {\n      if (state === 'opened') {\n        if (\n          !omitFocusManagementRef.current &&\n          !contextRef.current.hasSubmitError\n        ) {\n          containerRef?.current?.focus?.()\n        }\n        omitFocusManagementRef.current = false\n      }\n    },\n    [omitFocusManagementRef]\n  )\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      setFocus(state)\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, setFocus]\n  )\n\n  return (\n    <HeightAnimation\n      className={classnames(\n        'dnb-forms-section-block',\n        variant && `dnb-forms-section-block--variant-${variant}`,\n        omitFocusManagementRef.current &&\n          'dnb-forms-section-block--no-animation',\n        contextRef.current.hasSubmitError &&\n          'dnb-forms-section-block--error',\n        className\n      )}\n      open={openRef.current}\n      onAnimationEnd={handleAnimationEnd}\n      duration={450}\n      keepInDOM // Ensure fields get mounted so they will sync with the data context\n    >\n      <Flex.Stack\n        className=\"dnb-forms-section-block__inner\"\n        {...restProps}\n        element=\"section\"\n        aria-label={ariaLabel}\n        innerRef={containerRef}\n        tabIndex={-1}\n      >\n        {children}\n      </Flex.Stack>\n    </HeightAnimation>\n  )\n}\n\nSectionContainer._supportsSpacingProps = true\nexport default SectionContainer\n"],"mappings":"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"}

package/extensions/forms/Form/Section/containers/SectionContainerContext.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { ContainerMode } from './SectionContainer';
 export interface SectionContainerContextState {
+    validateInitially?: boolean;
     containerMode?: ContainerMode;
+    initialContainerMode?: ContainerMode;
     switchContainerMode?: (mode: ContainerMode) => void;
 }
 declare const SectionContainerContext: React.Context<SectionContainerContextState>;

package/extensions/forms/Form/Section/containers/SectionContainerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainerContext.js","names":["React","SectionContainerContext","createContext","undefined"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerContext.ts"],"sourcesContent":["import React from 'react'\nimport { ContainerMode } from './SectionContainer'\n\nexport interface SectionContainerContextState {\n  containerMode?: ContainerMode\n  switchContainerMode?: (mode: ContainerMode) => void\n}\n\nconst SectionContainerContext = React.createContext<\n  SectionContainerContextState | undefined\n>(undefined)\n\nexport default SectionContainerContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,uBAAuB,GAAGD,KAAK,CAACE,aAAa,CAEjDC,SAAS,CAAC;AAEZ,eAAeF,uBAAuB"}
+{"version":3,"file":"SectionContainerContext.js","names":["React","SectionContainerContext","createContext","undefined"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerContext.ts"],"sourcesContent":["import React from 'react'\nimport { ContainerMode } from './SectionContainer'\n\nexport interface SectionContainerContextState {\n  validateInitially?: boolean\n  containerMode?: ContainerMode\n  initialContainerMode?: ContainerMode\n  switchContainerMode?: (mode: ContainerMode) => void\n}\n\nconst SectionContainerContext = React.createContext<\n  SectionContainerContextState | undefined\n>(undefined)\n\nexport default SectionContainerContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAUzB,MAAMC,uBAAuB,GAAGD,KAAK,CAACE,aAAa,CAEjDC,SAAS,CAAC;AAEZ,eAAeF,uBAAuB"}

package/extensions/forms/Form/Section/containers/SectionContainerProvider.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ContainerMode } from './SectionContainer';
 export type Props = {
+    validateInitially?: boolean;
     containerMode?: ContainerMode;
     children: React.ReactNode;
 };

package/extensions/forms/Form/Section/containers/SectionContainerProvider.js

@@ -5,17 +5,20 @@ import SectionContainerContext from './SectionContainerContext';
 function SectionContainerProvider(props) {
   const [, forceUpdate] = useReducer(() => ({}), {});
   const {
+    validateInitially,
     containerMode,
     children
   } = props;
-  const containerModeRef = useRef(containerMode);
+  const containerModeRef = useRef(containerMode === 'auto' ? 'view' : containerMode);
   const switchContainerMode = useCallback(mode => {
     containerModeRef.current = mode;
     forceUpdate();
   }, []);
   return React.createElement(SectionContainerContext.Provider, {
     value: {
+      validateInitially,
       containerMode: containerModeRef.current,
+      initialContainerMode: containerMode,
       switchContainerMode
     }
   }, children);

package/extensions/forms/Form/Section/containers/SectionContainerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionContainerProvider.js","names":["React","useCallback","useReducer","useRef","SectionContainerContext","SectionContainerProvider","props","forceUpdate","containerMode","children","containerModeRef","switchContainerMode","mode","current","createElement","Provider","value"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerProvider.tsx"],"sourcesContent":["import React, { useCallback, useReducer, useRef } from 'react'\nimport SectionContainerContext from './SectionContainerContext'\nimport { ContainerMode } from './SectionContainer'\n\nexport type Props = {\n  containerMode?: ContainerMode\n  children: React.ReactNode\n}\n\nfunction SectionContainerProvider(props: Props) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const { containerMode, children } = props\n\n  const containerModeRef = useRef<ContainerMode>(containerMode)\n\n  const switchContainerMode = useCallback((mode: ContainerMode) => {\n    containerModeRef.current = mode\n    forceUpdate()\n  }, [])\n\n  return (\n    <SectionContainerContext.Provider\n      value={{\n        containerMode: containerModeRef.current,\n        switchContainerMode,\n      }}\n    >\n      {children}\n    </SectionContainerContext.Provider>\n  )\n}\n\nexport default SectionContainerProvider\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,uBAAuB,MAAM,2BAA2B;AAQ/D,SAASC,wBAAwBA,CAACC,KAAY,EAAE;EAC9C,MAAM,GAAGC,WAAW,CAAC,GAAGL,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAElD,MAAM;IAAEM,aAAa;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAEzC,MAAMI,gBAAgB,GAAGP,MAAM,CAAgBK,aAAa,CAAC;EAE7D,MAAMG,mBAAmB,GAAGV,WAAW,CAAEW,IAAmB,IAAK;IAC/DF,gBAAgB,CAACG,OAAO,GAAGD,IAAI;IAC/BL,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAEN,OACEP,KAAA,CAAAc,aAAA,CAACV,uBAAuB,CAACW,QAAQ;IAC/BC,KAAK,EAAE;MACLR,aAAa,EAAEE,gBAAgB,CAACG,OAAO;MACvCF;IACF;EAAE,GAEDF,QAC+B,CAAC;AAEvC;AAEA,eAAeJ,wBAAwB"}
+{"version":3,"file":"SectionContainerProvider.js","names":["React","useCallback","useReducer","useRef","SectionContainerContext","SectionContainerProvider","props","forceUpdate","validateInitially","containerMode","children","containerModeRef","switchContainerMode","mode","current","createElement","Provider","value","initialContainerMode"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerProvider.tsx"],"sourcesContent":["import React, { useCallback, useReducer, useRef } from 'react'\nimport SectionContainerContext from './SectionContainerContext'\nimport { ContainerMode } from './SectionContainer'\n\nexport type Props = {\n  validateInitially?: boolean\n  containerMode?: ContainerMode\n  children: React.ReactNode\n}\n\nfunction SectionContainerProvider(props: Props) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const { validateInitially, containerMode, children } = props\n\n  const containerModeRef = useRef<ContainerMode>(\n    containerMode === 'auto' ? 'view' : containerMode\n  )\n\n  const switchContainerMode = useCallback((mode: ContainerMode) => {\n    containerModeRef.current = mode\n    forceUpdate()\n  }, [])\n\n  return (\n    <SectionContainerContext.Provider\n      value={{\n        validateInitially,\n        containerMode: containerModeRef.current,\n        initialContainerMode: containerMode,\n        switchContainerMode,\n      }}\n    >\n      {children}\n    </SectionContainerContext.Provider>\n  )\n}\n\nexport default SectionContainerProvider\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,uBAAuB,MAAM,2BAA2B;AAS/D,SAASC,wBAAwBA,CAACC,KAAY,EAAE;EAC9C,MAAM,GAAGC,WAAW,CAAC,GAAGL,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAElD,MAAM;IAAEM,iBAAiB;IAAEC,aAAa;IAAEC;EAAS,CAAC,GAAGJ,KAAK;EAE5D,MAAMK,gBAAgB,GAAGR,MAAM,CAC7BM,aAAa,KAAK,MAAM,GAAG,MAAM,GAAGA,aACtC,CAAC;EAED,MAAMG,mBAAmB,GAAGX,WAAW,CAAEY,IAAmB,IAAK;IAC/DF,gBAAgB,CAACG,OAAO,GAAGD,IAAI;IAC/BN,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAEN,OACEP,KAAA,CAAAe,aAAA,CAACX,uBAAuB,CAACY,QAAQ;IAC/BC,KAAK,EAAE;MACLT,iBAAiB;MACjBC,aAAa,EAAEE,gBAAgB,CAACG,OAAO;MACvCI,oBAAoB,EAAET,aAAa;MACnCG;IACF;EAAE,GAEDF,QAC+B,CAAC;AAEvC;AAEA,eAAeL,wBAAwB"}

package/extensions/forms/Form/Section/style/dnb-form-section.css

@@ -37,6 +37,9 @@
 .dnb-forms-section-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
+.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner {
+  transform: translateY(0);
+}
 .dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner {
   transform: translateY(-0.5rem);
 }

package/extensions/forms/Form/Section/style/dnb-form-section.min.css

@@ -1 +1 @@
-.dnb-forms-section-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-section-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-section-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner,.dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner{transform:translateY(-.5rem)}.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner{transform:translateY(0)}
+.dnb-forms-section-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-section-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-section-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner,.dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block--no-animation .dnb-forms-section-block__inner{transform:translateY(0)}.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner{transform:translateY(-.5rem)}.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner{transform:translateY(0)}

package/extensions/forms/Form/Section/style/dnb-form-section.scss

@@ -53,6 +53,10 @@
       }
     }
 
+    &--no-animation &__inner {
+      transform: translateY(0);
+    }
+
     &.dnb-height-animation--is-visible &__inner {
       transform: translateY(-0.5rem);
     }

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

@@ -3,19 +3,23 @@
 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 React, { useMemo, useRef, useEffect, useReducer, createRef, useContext, Fragment } from 'react';
+import React, { useMemo, useRef, useEffect, useReducer, createRef, useContext } from 'react';
 import classnames from 'classnames';
 import pointer from 'json-pointer';
 import { useFieldProps } from '../../hooks';
 import { makeUniqueId } from '../../../../shared/component-helper';
-import { Flex } from '../../../../components';
+import { Flex, FormStatus, HeightAnimation } from '../../../../components';
 import { pickSpacingProps } from '../../../../components/flex/utils';
+import useMountEffect from '../../../../shared/helpers/useMountEffect';
 import { pickFlexContainerProps } from '../../../../components/flex/Container';
 import IterateItemContext from '../IterateItemContext';
 import SummaryListContext from '../../Value/SummaryList/SummaryListContext';
 import ValueBlockContext from '../../ValueBlock/ValueBlockContext';
 import FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider';
+import DataContext from '../../DataContext/Context';
 import useDataValue from '../../hooks/useDataValue';
+import { useSwitchContainerMode } from '../hooks';
+import { getMessage } from '../../FieldBlock';
 import structuredClone from '@ungap/structured-clone';
 function ArrayComponent(props) {
   var _props$value;
@@ -50,23 +54,35 @@ function ArrayComponent(props) {
             index: i
           }));
         }
-        return _objectSpread(_objectSpread({}, props), {}, {
+        return _objectSpread(_objectSpread({
+          required: false
+        }, props), {}, {
           value: newValue
         });
       }
     }
-    return props;
+    return _objectSpread({
+      required: false
+    }, props);
   }, [getValueByPath, props]);
   const {
     path,
     value: arrayValue,
+    error,
+    defaultValue,
     withoutFlex,
     emptyValue,
     placeholder,
+    containerMode,
+    animate,
     handleChange,
+    setChanged,
     onChange,
     children
   } = useFieldProps(preparedProps);
+  useMountEffect(() => {
+    setChanged(true);
+  });
   const idsRef = useRef([]);
   const isNewRef = useRef({});
   const modesRef = useRef({});
@@ -76,26 +92,38 @@ function ArrayComponent(props) {
   const hadPushRef = useRef();
   const innerRefs = useRef({});
   const omitFlex = withoutFlex !== null && withoutFlex !== void 0 ? withoutFlex : summaryListContext || valueBlockContext;
+  const {
+    handlePathChange
+  } = useContext(DataContext) || {};
+  useMountEffect(() => {
+    if (defaultValue) {
+      handlePathChange === null || handlePathChange === void 0 ? void 0 : handlePathChange(path, defaultValue);
+    }
+  });
   useEffect(() => {
     valueCountRef.current = arrayValue || [];
   }, [arrayValue]);
-  const elementData = useMemo(() => {
-    var _ref;
-    return ((_ref = valueWhileClosingRef.current || arrayValue) !== null && _ref !== void 0 ? _ref : []).map((value, index) => {
-      var _valueCountRef$curren;
+  const {
+    getNextContainerMode
+  } = useSwitchContainerMode();
+  const arrayItems = useMemo(() => {
+    const list = valueWhileClosingRef.current || arrayValue;
+    return (list !== null && list !== void 0 ? list : []).map((value, index) => {
+      var _valueCountRef$curren, _modesRef$current$id;
       const id = idsRef.current[index] || makeUniqueId();
-      const hasNewItems = arrayValue.length > ((_valueCountRef$curren = valueCountRef.current) === null || _valueCountRef$curren === void 0 ? void 0 : _valueCountRef$curren.length);
+      const hasNewItems = (arrayValue === null || arrayValue === void 0 ? void 0 : arrayValue.length) > ((_valueCountRef$curren = valueCountRef.current) === null || _valueCountRef$curren === void 0 ? void 0 : _valueCountRef$curren.length);
       if (!idsRef.current[index]) {
         isNewRef.current[id] = hasNewItems;
         idsRef.current.push(id);
       }
       const isNew = isNewRef.current[id] || false;
-      if (!modesRef.current[id]) {
-        var _value$__containerMod;
-        modesRef.current[id] = (_value$__containerMod = value === null || value === void 0 ? void 0 : value['__containerMode']) !== null && _value$__containerMod !== void 0 ? _value$__containerMod : isNew ? 'edit' : 'view';
-        value === null || value === void 0 ? true : delete value['__containerMode'];
+      if (!((_modesRef$current$id = modesRef.current[id]) !== null && _modesRef$current$id !== void 0 && _modesRef$current$id.current)) {
+        var _getNextContainerMode;
+        modesRef.current[id] = {
+          current: containerMode !== null && containerMode !== void 0 ? containerMode : isNew ? (_getNextContainerMode = getNextContainerMode()) !== null && _getNextContainerMode !== void 0 ? _getNextContainerMode : 'edit' : 'auto'
+        };
       }
-      return {
+      const itemContext = {
         id,
         path,
         value,
@@ -103,10 +131,16 @@ function ArrayComponent(props) {
         arrayValue,
         containerRef,
         isNew,
-        containerMode: modesRef.current[id],
-        switchContainerMode: mode => {
+        containerMode: modesRef.current[id].current,
+        previousContainerMode: modesRef.current[id].previous,
+        initialContainerMode: containerMode || 'auto',
+        modeOptions: modesRef.current[id].options,
+        switchContainerMode: function (mode) {
           var _isNewRef$current;
-          modesRef.current[id] = mode;
+          let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          modesRef.current[id].previous = modesRef.current[id].current;
+          modesRef.current[id].current = mode;
+          modesRef.current[id].options = options;
           (_isNewRef$current = isNewRef.current) === null || _isNewRef$current === void 0 ? true : delete _isNewRef$current[id];
           forceUpdate();
         },
@@ -118,7 +152,7 @@ function ArrayComponent(props) {
         },
         handlePush: element => {
           hadPushRef.current = true;
-          handleChange([...(arrayValue !== null && arrayValue !== void 0 ? arrayValue : []), element]);
+          handleChange([...(arrayValue || []), element]);
         },
         handleRemove: function () {
           let {
@@ -141,38 +175,40 @@ function ArrayComponent(props) {
           forceUpdate();
         },
         restoreOriginalValue: value => {
-          const newArrayValue = structuredClone(arrayValue);
-          newArrayValue[index] = value;
-          handleChange(newArrayValue);
+          if (value) {
+            const newArrayValue = structuredClone(arrayValue);
+            newArrayValue[index] = value;
+            handleChange(newArrayValue);
+          }
         }
       };
+      return itemContext;
     });
   }, [salt, arrayValue, path, handleChange]);
   useMemo(() => {
-    const last = elementData === null || elementData === void 0 ? void 0 : elementData[elementData.length - 1];
+    const last = arrayItems === null || arrayItems === void 0 ? void 0 : arrayItems[arrayItems.length - 1];
     if (last !== null && last !== void 0 && last.isNew && !hadPushRef.current) {
       onChange === null || onChange === void 0 ? void 0 : onChange(arrayValue);
     } else {
       hadPushRef.current = false;
     }
-  }, [arrayValue, elementData, onChange]);
+  }, [arrayValue, arrayItems, onChange]);
   const flexProps = _objectSpread(_objectSpread(_objectSpread({
     className: classnames("dnb-forms-iterate dnb-forms-section", props === null || props === void 0 ? void 0 : props.className)
   }, pickFlexContainerProps(props)), pickSpacingProps(props)), {}, {
     innerRef: containerRef
   });
-  const WrapperElement = omitFlex ? Fragment : Flex.Stack;
-  return React.createElement(WrapperElement, omitFlex ? null : flexProps, arrayValue === emptyValue || (props === null || props === void 0 ? void 0 : (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) === 0 ? placeholder : elementData.map(elementProps => {
+  const arrayElements = arrayValue === emptyValue || (props === null || props === void 0 ? void 0 : (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) === 0 ? placeholder : arrayItems.map(itemProps => {
     const {
       id,
       value,
       index
-    } = elementProps;
+    } = itemProps;
     const elementRef = innerRefs.current[id] = innerRefs.current[id] || createRef();
     const renderChildren = elementChild => {
       return typeof elementChild === 'function' ? elementChild(value, index) : elementChild;
     };
-    const contextValue = _objectSpread(_objectSpread({}, elementProps), {}, {
+    const contextValue = _objectSpread(_objectSpread({}, itemProps), {}, {
       elementRef
     });
     const content = Array.isArray(children) ? children.map(child => renderChildren(child)) : renderChildren(children);
@@ -190,7 +226,20 @@ function ArrayComponent(props) {
     }, React.createElement(IterateItemContext.Provider, {
       value: contextValue
     }, React.createElement(FieldBoundaryProvider, null, content)));
-  }));
+  });
+  const content = omitFlex ? arrayElements : React.createElement(Flex.Stack, flexProps, arrayElements);
+  return React.createElement(React.Fragment, null, animate ? React.createElement(HeightAnimation, null, content) : content, React.createElement(FormStatus, {
+    top: 0,
+    bottom: 0,
+    show: Boolean(error),
+    no_animation: false,
+    shellSpace: {
+      top: true,
+      bottom: true
+    }
+  }, getMessage({
+    content: error
+  })));
 }
 ArrayComponent._supportsSpacingProps = true;
 export default ArrayComponent;

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

@@ -1 +1 @@
-{"version":3,"file":"Array.js","names":["React","useMemo","useRef","useEffect","useReducer","createRef","useContext","Fragment","classnames","pointer","useFieldProps","makeUniqueId","Flex","pickSpacingProps","pickFlexContainerProps","IterateItemContext","SummaryListContext","ValueBlockContext","FieldBoundaryProvider","useDataValue","structuredClone","ArrayComponent","props","_props$value","salt","forceUpdate","summaryListContext","valueBlockContext","getValueByPath","preparedProps","path","countPath","countPathLimit","Infinity","countPathTransform","arrayValue","countValue","parseFloat","length","newValue","i","l","value","push","index","_objectSpread","withoutFlex","emptyValue","placeholder","handleChange","onChange","children","idsRef","isNewRef","modesRef","valueWhileClosingRef","valueCountRef","containerRef","hadPushRef","innerRefs","omitFlex","current","elementData","_ref","map","_valueCountRef$curren","id","hasNewItems","isNew","_value$__containerMod","containerMode","switchContainerMode","mode","_isNewRef$current","newArrayValue","set","handlePush","element","handleRemove","keepItems","arguments","undefined","splice","fulfillRemove","_modesRef$current","_isNewRef$current2","findIndex","indexOf","restoreOriginalValue","last","flexProps","className","innerRef","WrapperElement","Stack","createElement","elementProps","elementRef","renderChildren","elementChild","contextValue","content","Array","isArray","child","Provider","key","Item","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useRef,\n  useEffect,\n  useReducer,\n  createRef,\n  useContext,\n  Fragment,\n} from 'react'\nimport classnames from 'classnames'\nimport pointer from 'json-pointer'\nimport { useFieldProps } from '../../hooks'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport { Flex } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport {\n  BasicProps as FlexContainerProps,\n  Props as FlexContainerAllProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport IterateItemContext, {\n  IterateItemContextState,\n} from '../IterateItemContext'\nimport SummaryListContext from '../../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from '../../ValueBlock/ValueBlockContext'\nimport FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider'\nimport useDataValue from '../../hooks/useDataValue'\n\nimport type { ContainerMode, ElementChild, Props, Value } from './types'\nimport type { Identifier, Path } from '../../types'\n\n/**\n * Deprecated, as it is supported by all major browsers and Node.js >=v18\n * So its a question of time, when we will remove this polyfill\n */\nimport structuredClone from '@ungap/structured-clone'\n\nexport type * from './types'\n\nfunction ArrayComponent(props: Props) {\n  const [salt, forceUpdate] = useReducer(() => ({}), {})\n\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n\n  const { getValueByPath } = useDataValue()\n  const preparedProps = useMemo(() => {\n    const {\n      path,\n      countPath,\n      countPathLimit = Infinity,\n      countPathTransform,\n    } = props\n\n    if (countPath) {\n      const arrayValue = getValueByPath(path)\n      let countValue = parseFloat(getValueByPath(countPath))\n      if (!(countValue >= 0)) {\n        countValue = 0\n      }\n      if (countValue > countPathLimit) {\n        countValue = countPathLimit\n      }\n      if (arrayValue?.length !== countValue) {\n        const newValue = []\n        for (let i = 0, l = countValue; i < l; i++) {\n          const value = arrayValue?.[i]\n          newValue.push(countPathTransform?.({ value, index: i }))\n        }\n\n        return {\n          ...props,\n          value: newValue,\n        }\n      }\n    }\n\n    return props\n  }, [getValueByPath, props])\n\n  const {\n    path,\n    value: arrayValue,\n    withoutFlex,\n    emptyValue,\n    placeholder,\n    handleChange,\n    onChange,\n    children,\n  } = useFieldProps(preparedProps)\n\n  const idsRef = useRef<Array<Identifier>>([])\n  const isNewRef = useRef<Record<string, boolean>>({})\n  const modesRef = useRef<Record<Identifier, ContainerMode>>({})\n  const valueWhileClosingRef = useRef<Value>()\n  const valueCountRef = useRef(arrayValue)\n  const containerRef = useRef<HTMLDivElement>()\n  const hadPushRef = useRef<boolean>()\n  const innerRefs = useRef<\n    Record<string, React.RefObject<HTMLDivElement>>\n  >({})\n\n  const omitFlex = withoutFlex ?? (summaryListContext || valueBlockContext)\n\n  useEffect(() => {\n    // Update inside the useEffect, to support React.StrictMode\n    valueCountRef.current = arrayValue || []\n  }, [arrayValue])\n\n  const elementData = useMemo(() => {\n    return ((valueWhileClosingRef.current || arrayValue) ?? []).map(\n      (value, index) => {\n        const id = idsRef.current[index] || makeUniqueId()\n\n        const hasNewItems =\n          arrayValue.length > valueCountRef.current?.length\n\n        if (!idsRef.current[index]) {\n          isNewRef.current[id] = hasNewItems\n          idsRef.current.push(id)\n        }\n\n        const isNew = isNewRef.current[id] || false\n        if (!modesRef.current[id]) {\n          modesRef.current[id] =\n            value?.['__containerMode'] ?? (isNew ? 'edit' : 'view')\n          delete value?.['__containerMode']\n        }\n\n        return {\n          id,\n          path,\n          value,\n          index,\n          arrayValue,\n          containerRef,\n          isNew,\n          containerMode: modesRef.current[id],\n          switchContainerMode: (mode: ContainerMode) => {\n            modesRef.current[id] = mode\n            delete isNewRef.current?.[id]\n            forceUpdate()\n          },\n          handleChange: (path: Path, value: unknown) => {\n            const newArrayValue = structuredClone(arrayValue)\n\n            // Make sure we have a new object reference,\n            // else two new objects will be the same\n            newArrayValue[index] = { ...newArrayValue[index] }\n\n            pointer.set(newArrayValue, path, value)\n            handleChange(newArrayValue)\n          },\n          handlePush: (element: unknown) => {\n            hadPushRef.current = true\n            handleChange([...(arrayValue ?? []), element])\n          },\n          handleRemove: ({ keepItems = false } = {}) => {\n            if (keepItems) {\n              // Add a backup as the array value while animating\n              valueWhileClosingRef.current = arrayValue\n            }\n\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue.splice(index, 1)\n            handleChange(newArrayValue)\n          },\n\n          // - Called after animation end\n          fulfillRemove: () => {\n            valueWhileClosingRef.current = null\n            delete modesRef.current?.[id]\n            delete isNewRef.current?.[id]\n            const findIndex = idsRef.current.indexOf(id)\n            idsRef.current.splice(findIndex, 1)\n            forceUpdate()\n          },\n\n          // - Called when cancel button press\n          restoreOriginalValue: (value: unknown) => {\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue[index] = value\n            handleChange(newArrayValue)\n          },\n        } as IterateItemContextState\n      }\n    )\n\n    // In order to update \"valueWhileClosingRef\" we need to have \"salt\" in the deps array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [salt, arrayValue, path, handleChange])\n\n  // - Call the onChange callback when a new element is added without calling \"handlePush\"\n  useMemo(() => {\n    const last = elementData?.[elementData.length - 1]\n    if (last?.isNew && !hadPushRef.current) {\n      onChange?.(arrayValue)\n    } else {\n      hadPushRef.current = false\n    }\n  }, [arrayValue, elementData, onChange])\n\n  const flexProps: FlexContainerProps & {\n    innerRef: FlexContainerAllProps['innerRef']\n  } = {\n    className: classnames(\n      'dnb-forms-iterate',\n      'dnb-forms-section',\n      props?.className\n    ),\n    ...pickFlexContainerProps(props as FlexContainerProps),\n    ...pickSpacingProps(props),\n    innerRef: containerRef,\n  }\n\n  const WrapperElement = omitFlex ? Fragment : Flex.Stack\n\n  return (\n    <WrapperElement {...(omitFlex ? null : flexProps)}>\n      {arrayValue === emptyValue || props?.value?.length === 0\n        ? placeholder\n        : elementData.map((elementProps) => {\n            const { id, value, index } = elementProps\n            const elementRef = (innerRefs.current[id] =\n              innerRefs.current[id] || createRef<HTMLDivElement>())\n\n            const renderChildren = (elementChild: ElementChild) => {\n              return typeof elementChild === 'function'\n                ? elementChild(value, index)\n                : elementChild\n            }\n\n            const contextValue = {\n              ...elementProps,\n              elementRef,\n            }\n\n            const content = Array.isArray(children)\n              ? children.map((child) => renderChildren(child))\n              : renderChildren(children)\n\n            if (omitFlex) {\n              return (\n                <IterateItemContext.Provider\n                  key={`element-${id}`}\n                  value={contextValue}\n                >\n                  <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n                </IterateItemContext.Provider>\n              )\n            }\n\n            return (\n              <Flex.Item\n                className=\"dnb-forms-iterate__element\"\n                tabIndex={-1}\n                innerRef={elementRef}\n                key={`element-${id}`}\n              >\n                <IterateItemContext.Provider value={contextValue}>\n                  <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n                </IterateItemContext.Provider>\n              </Flex.Item>\n            )\n          })}\n    </WrapperElement>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}
+{"version":3,"file":"Array.js","names":["React","useMemo","useRef","useEffect","useReducer","createRef","useContext","classnames","pointer","useFieldProps","makeUniqueId","Flex","FormStatus","HeightAnimation","pickSpacingProps","useMountEffect","pickFlexContainerProps","IterateItemContext","SummaryListContext","ValueBlockContext","FieldBoundaryProvider","DataContext","useDataValue","useSwitchContainerMode","getMessage","structuredClone","ArrayComponent","props","_props$value","salt","forceUpdate","summaryListContext","valueBlockContext","getValueByPath","preparedProps","path","countPath","countPathLimit","Infinity","countPathTransform","arrayValue","countValue","parseFloat","length","newValue","i","l","value","push","index","_objectSpread","required","error","defaultValue","withoutFlex","emptyValue","placeholder","containerMode","animate","handleChange","setChanged","onChange","children","idsRef","isNewRef","modesRef","valueWhileClosingRef","valueCountRef","containerRef","hadPushRef","innerRefs","omitFlex","handlePathChange","current","getNextContainerMode","arrayItems","list","map","_valueCountRef$curren","_modesRef$current$id","id","hasNewItems","isNew","_getNextContainerMode","itemContext","previousContainerMode","previous","initialContainerMode","modeOptions","options","switchContainerMode","mode","_isNewRef$current","arguments","undefined","newArrayValue","set","handlePush","element","handleRemove","keepItems","splice","fulfillRemove","_modesRef$current","_isNewRef$current2","findIndex","indexOf","restoreOriginalValue","last","flexProps","className","innerRef","arrayElements","itemProps","elementRef","renderChildren","elementChild","contextValue","content","Array","isArray","child","createElement","Provider","key","Item","tabIndex","Stack","Fragment","top","bottom","show","Boolean","no_animation","shellSpace","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useRef,\n  useEffect,\n  useReducer,\n  createRef,\n  useContext,\n} from 'react'\nimport classnames from 'classnames'\nimport pointer from 'json-pointer'\nimport { useFieldProps } from '../../hooks'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport { Flex, FormStatus, HeightAnimation } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport {\n  BasicProps as FlexContainerProps,\n  Props as FlexContainerAllProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport IterateItemContext, {\n  IterateItemContextState,\n} from '../IterateItemContext'\nimport SummaryListContext from '../../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from '../../ValueBlock/ValueBlockContext'\nimport FieldBoundaryProvider from '../../DataContext/FieldBoundary/FieldBoundaryProvider'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport { useSwitchContainerMode } from '../hooks'\nimport { getMessage } from '../../FieldBlock'\n\nimport type { ContainerMode, ElementChild, Props, Value } from './types'\nimport type { Identifier } from '../../types'\n\n/**\n * Deprecated, as it is supported by all major browsers and Node.js >=v18\n * So its a question of time, when we will remove this polyfill\n */\nimport structuredClone from '@ungap/structured-clone'\n\nexport type * from './types'\n\nfunction ArrayComponent(props: Props) {\n  const [salt, forceUpdate] = useReducer(() => ({}), {})\n\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n\n  const { getValueByPath } = useDataValue()\n  const preparedProps = useMemo(() => {\n    const {\n      path,\n      countPath,\n      countPathLimit = Infinity,\n      countPathTransform,\n    } = props\n\n    if (countPath) {\n      const arrayValue = getValueByPath(path)\n      let countValue = parseFloat(getValueByPath(countPath))\n      if (!(countValue >= 0)) {\n        countValue = 0\n      }\n      if (countValue > countPathLimit) {\n        countValue = countPathLimit\n      }\n      if (arrayValue?.length !== countValue) {\n        const newValue = []\n        for (let i = 0, l = countValue; i < l; i++) {\n          const value = arrayValue?.[i]\n          newValue.push(countPathTransform?.({ value, index: i }))\n        }\n\n        return {\n          required: false,\n          ...props,\n          value: newValue,\n        }\n      }\n    }\n\n    return { required: false, ...props }\n  }, [getValueByPath, props])\n\n  const {\n    path,\n    value: arrayValue,\n    error,\n    defaultValue,\n    withoutFlex,\n    emptyValue,\n    placeholder,\n    containerMode,\n    animate,\n    handleChange,\n    setChanged,\n    onChange,\n    children,\n  } = useFieldProps(preparedProps)\n\n  useMountEffect(() => {\n    // To ensure the validator is called when a new item is added\n    setChanged(true)\n  })\n\n  const idsRef = useRef<Array<Identifier>>([])\n  const isNewRef = useRef<Record<string, boolean>>({})\n  const modesRef = useRef<\n    Record<\n      Identifier,\n      {\n        current: ContainerMode\n        previous?: ContainerMode\n        options?: { omitFocusManagement?: boolean }\n      }\n    >\n  >({})\n  const valueWhileClosingRef = useRef<Value>()\n  const valueCountRef = useRef(arrayValue)\n  const containerRef = useRef<HTMLDivElement>()\n  const hadPushRef = useRef<boolean>()\n  const innerRefs = useRef<\n    Record<string, React.RefObject<HTMLDivElement>>\n  >({})\n\n  const omitFlex = withoutFlex ?? (summaryListContext || valueBlockContext)\n\n  // To support React.StrictMode, we inject the defaultValue into the data context this way.\n  // The routine inside useFieldProps where updateDataValueDataContext is called, does not support React.StrictMode\n  const { handlePathChange } = useContext(DataContext) || {}\n  useMountEffect(() => {\n    if (defaultValue) {\n      handlePathChange?.(path, defaultValue)\n    }\n  })\n\n  useEffect(() => {\n    // Update inside the useEffect, to support React.StrictMode\n    valueCountRef.current = arrayValue || []\n  }, [arrayValue])\n\n  const { getNextContainerMode } = useSwitchContainerMode()\n\n  const arrayItems = useMemo(() => {\n    const list = valueWhileClosingRef.current || arrayValue\n    return (list ?? []).map((value, index) => {\n      const id = idsRef.current[index] || makeUniqueId()\n\n      const hasNewItems =\n        arrayValue?.length > valueCountRef.current?.length\n\n      if (!idsRef.current[index]) {\n        isNewRef.current[id] = hasNewItems\n        idsRef.current.push(id)\n      }\n\n      const isNew = isNewRef.current[id] || false\n      if (!modesRef.current[id]?.current) {\n        modesRef.current[id] = {\n          current:\n            containerMode ??\n            (isNew ? getNextContainerMode() ?? 'edit' : 'auto'),\n        }\n      }\n\n      const itemContext: IterateItemContextState = {\n        id,\n        path,\n        value,\n        index,\n        arrayValue,\n        containerRef,\n        isNew,\n        containerMode: modesRef.current[id].current,\n        previousContainerMode: modesRef.current[id].previous,\n        initialContainerMode: containerMode || 'auto',\n        modeOptions: modesRef.current[id].options,\n        switchContainerMode: (mode, options = {}) => {\n          modesRef.current[id].previous = modesRef.current[id].current\n          modesRef.current[id].current = mode\n          modesRef.current[id].options = options\n          delete isNewRef.current?.[id]\n          forceUpdate()\n        },\n        handleChange: (path, value) => {\n          const newArrayValue = structuredClone(arrayValue)\n\n          // Make sure we have a new object reference,\n          // else two new objects will be the same\n          newArrayValue[index] = { ...newArrayValue[index] }\n\n          pointer.set(newArrayValue, path, value)\n          handleChange(newArrayValue)\n        },\n        handlePush: (element) => {\n          hadPushRef.current = true\n          handleChange([...(arrayValue || []), element])\n        },\n        handleRemove: ({ keepItems = false } = {}) => {\n          if (keepItems) {\n            // Add a backup as the array value while animating\n            valueWhileClosingRef.current = arrayValue\n          }\n\n          const newArrayValue = structuredClone(arrayValue)\n          newArrayValue.splice(index, 1)\n          handleChange(newArrayValue)\n        },\n\n        // - Called after animation end\n        fulfillRemove: () => {\n          valueWhileClosingRef.current = null\n          delete modesRef.current?.[id]\n          delete isNewRef.current?.[id]\n          const findIndex = idsRef.current.indexOf(id)\n          idsRef.current.splice(findIndex, 1)\n          forceUpdate()\n        },\n\n        // - Called when cancel button press\n        restoreOriginalValue: (value) => {\n          if (value) {\n            const newArrayValue = structuredClone(arrayValue)\n            newArrayValue[index] = value\n            handleChange(newArrayValue)\n          }\n        },\n      }\n\n      return itemContext\n    })\n\n    // In order to update \"valueWhileClosingRef\" we need to have \"salt\" in the deps array\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [salt, arrayValue, path, handleChange])\n\n  // - Call the onChange callback when a new element is added without calling \"handlePush\"\n  useMemo(() => {\n    const last = arrayItems?.[arrayItems.length - 1]\n    if (last?.isNew && !hadPushRef.current) {\n      onChange?.(arrayValue)\n    } else {\n      hadPushRef.current = false\n    }\n  }, [arrayValue, arrayItems, onChange])\n\n  const flexProps: FlexContainerProps & {\n    innerRef: FlexContainerAllProps['innerRef']\n  } = {\n    className: classnames(\n      'dnb-forms-iterate',\n      'dnb-forms-section',\n      props?.className\n    ),\n    ...pickFlexContainerProps(props as FlexContainerProps),\n    ...pickSpacingProps(props),\n    innerRef: containerRef,\n  }\n\n  const arrayElements =\n    arrayValue === emptyValue || props?.value?.length === 0\n      ? placeholder\n      : arrayItems.map((itemProps) => {\n          const { id, value, index } = itemProps\n          const elementRef = (innerRefs.current[id] =\n            innerRefs.current[id] || createRef<HTMLDivElement>())\n\n          const renderChildren = (elementChild: ElementChild) => {\n            return typeof elementChild === 'function'\n              ? elementChild(value, index)\n              : elementChild\n          }\n\n          const contextValue = {\n            ...itemProps,\n            elementRef,\n          }\n\n          const content = Array.isArray(children)\n            ? children.map((child) => renderChildren(child))\n            : renderChildren(children)\n\n          if (omitFlex) {\n            return (\n              <IterateItemContext.Provider\n                key={`element-${id}`}\n                value={contextValue}\n              >\n                <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n              </IterateItemContext.Provider>\n            )\n          }\n\n          return (\n            <Flex.Item\n              className=\"dnb-forms-iterate__element\"\n              tabIndex={-1}\n              innerRef={elementRef}\n              key={`element-${id}`}\n            >\n              <IterateItemContext.Provider value={contextValue}>\n                <FieldBoundaryProvider>{content}</FieldBoundaryProvider>\n              </IterateItemContext.Provider>\n            </Flex.Item>\n          )\n        })\n\n  const content = omitFlex ? (\n    arrayElements\n  ) : (\n    <Flex.Stack {...flexProps}>{arrayElements}</Flex.Stack>\n  )\n\n  return (\n    <>\n      {animate ? <HeightAnimation>{content}</HeightAnimation> : content}\n\n      <FormStatus\n        top={0}\n        bottom={0}\n        show={Boolean(error)}\n        no_animation={false}\n        shellSpace={{ top: true, bottom: true }}\n      >\n        {getMessage({ content: error })}\n      </FormStatus>\n    </>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}

package/extensions/forms/Iterate/Array/ArrayDocs.js

@@ -1,3 +1,4 @@
+import { dataValueProperties } from '../../hooks/DataValueDocs';
 export const ArrayProperties = {
   value: {
     doc: 'The data to iterate over. Alternative you can use the `path` prop.',
@@ -29,6 +30,11 @@ export const ArrayProperties = {
     type: 'boolean',
     status: 'optional'
   },
+  animate: {
+    doc: 'When `true` it will animate the height of the items.',
+    type: 'boolean',
+    status: 'optional'
+  },
   placeholder: {
     doc: 'Will be shown if the value or data context value is empty.',
     type: 'React.Node',
@@ -39,9 +45,17 @@ export const ArrayProperties = {
     type: 'unknown',
     status: 'optional'
   },
+  validator: dataValueProperties.validator,
+  validateInitially: dataValueProperties.validateInitially,
+  continuousValidation: dataValueProperties.continuousValidation,
+  containerMode: {
+    doc: 'Defines the container mode for all nested containers. Can be `view`, `edit` or `auto`. When using `auto`, it will automatically open if there is an error in the container. When a new item is added, the item before it will change to `view` mode, if it had no validation errors. Defaults to `auto`.',
+    type: 'string',
+    status: 'optional'
+  },
   children: {
     doc: 'React.Node or a function so you can get the current value and index.',
-    type: 'boolean',
+    type: ['React.ReactNode', 'function'],
     status: 'optional'
   },
   '[Flex.Stack](/uilib/layout/flex/stack/)': {

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

@@ -1 +1 @@
-{"version":3,"file":"ArrayDocs.js","names":["ArrayProperties","value","doc","type","status","path","countPath","countPathTransform","countPathLimit","withoutFlex","placeholder","emptyValue","children","ArrayEvents","onChange"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/ArrayDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ArrayProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The data to iterate over. Alternative you can use the `path` prop.',\n    type: 'array',\n    status: 'optional',\n  },\n  path: {\n    doc: 'A path (JSON Pointer) to the array to iterate over.',\n    type: 'string',\n    status: 'optional',\n  },\n  countPath: {\n    doc: 'A path (JSON Pointer) to the array length.',\n    type: 'string',\n    status: 'optional',\n  },\n  countPathTransform: {\n    doc: 'Will transform the current value before it is displayed.',\n    type: 'function',\n    status: 'optional',\n  },\n  countPathLimit: {\n    doc: 'Will limit the iterate amount by given \"countPathLimit\" value.',\n    type: 'number',\n    status: 'optional',\n  },\n  withoutFlex: {\n    doc: 'When `true` it will omit the Flex.Stack wrapper so it can be used for tables and lists.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Will be shown if the value or data context value is empty.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  emptyValue: {\n    doc: 'Will be used to compare the value in order to show the placeholder.',\n    type: 'unknown',\n    status: 'optional',\n  },\n  children: {\n    doc: 'React.Node or a function so you can get the current value and index.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Flex.Stack](/uilib/layout/flex/stack/)': {\n    doc: 'All Flex.Stack properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const ArrayEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,qDAAqD;IAC1DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,kBAAkB,EAAE;IAClBL,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,cAAc,EAAE;IACdN,GAAG,EAAE,gEAAgE;IACrEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,WAAW,EAAE;IACXP,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,WAAW,EAAE;IACXR,GAAG,EAAE,4DAA4D;IACjEC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDO,UAAU,EAAE;IACVT,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,WAAiC,GAAG;EAC/CC,QAAQ,EAAE;IACRZ,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ArrayDocs.js","names":["dataValueProperties","ArrayProperties","value","doc","type","status","path","countPath","countPathTransform","countPathLimit","withoutFlex","animate","placeholder","emptyValue","validator","validateInitially","continuousValidation","containerMode","children","ArrayEvents","onChange"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/ArrayDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { dataValueProperties } from '../../hooks/DataValueDocs'\n\nexport const ArrayProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The data to iterate over. Alternative you can use the `path` prop.',\n    type: 'array',\n    status: 'optional',\n  },\n  path: {\n    doc: 'A path (JSON Pointer) to the array to iterate over.',\n    type: 'string',\n    status: 'optional',\n  },\n  countPath: {\n    doc: 'A path (JSON Pointer) to the array length.',\n    type: 'string',\n    status: 'optional',\n  },\n  countPathTransform: {\n    doc: 'Will transform the current value before it is displayed.',\n    type: 'function',\n    status: 'optional',\n  },\n  countPathLimit: {\n    doc: 'Will limit the iterate amount by given \"countPathLimit\" value.',\n    type: 'number',\n    status: 'optional',\n  },\n  withoutFlex: {\n    doc: 'When `true` it will omit the Flex.Stack wrapper so it can be used for tables and lists.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'When `true` it will animate the height of the items.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Will be shown if the value or data context value is empty.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  emptyValue: {\n    doc: 'Will be used to compare the value in order to show the placeholder.',\n    type: 'unknown',\n    status: 'optional',\n  },\n  validator: dataValueProperties.validator,\n  validateInitially: dataValueProperties.validateInitially,\n  continuousValidation: dataValueProperties.continuousValidation,\n  containerMode: {\n    doc: 'Defines the container mode for all nested containers. Can be `view`, `edit` or `auto`. When using `auto`, it will automatically open if there is an error in the container. When a new item is added, the item before it will change to `view` mode, if it had no validation errors. Defaults to `auto`.',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'React.Node or a function so you can get the current value and index.',\n    type: ['React.ReactNode', 'function'],\n    status: 'optional',\n  },\n  '[Flex.Stack](/uilib/layout/flex/stack/)': {\n    doc: 'All Flex.Stack properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const ArrayEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AACA,SAASA,mBAAmB,QAAQ,2BAA2B;AAE/D,OAAO,MAAMC,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,qDAAqD;IAC1DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,kBAAkB,EAAE;IAClBL,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,cAAc,EAAE;IACdN,GAAG,EAAE,gEAAgE;IACrEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,WAAW,EAAE;IACXP,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,OAAO,EAAE;IACPR,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,WAAW,EAAE;IACXT,GAAG,EAAE,4DAA4D;IACjEC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDQ,UAAU,EAAE;IACVV,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDS,SAAS,EAAEd,mBAAmB,CAACc,SAAS;EACxCC,iBAAiB,EAAEf,mBAAmB,CAACe,iBAAiB;EACxDC,oBAAoB,EAAEhB,mBAAmB,CAACgB,oBAAoB;EAC9DC,aAAa,EAAE;IACbd,GAAG,EAAE,0SAA0S;IAC/SC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,QAAQ,EAAE;IACRf,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMc,WAAiC,GAAG;EAC/CC,QAAQ,EAAE;IACRjB,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Iterate/Array/ArrayItemArea.d.ts

@@ -0,0 +1,20 @@
+import { Props as FlexContainerProps } from '../../../../components/flex/Container';
+import { ContainerMode } from './types';
+export type ArrayItemAreaProps = {
+    /**
+     * Defines the variant of the ViewContainer, EditContainer or PushContainer. Can be `outline` or `basic`.
+     * Defaults to `outline`.
+     */
+    variant?: 'outline' | 'basic';
+};
+export type Props = {
+    mode: ContainerMode;
+    open?: boolean | undefined;
+    ariaLabel?: string;
+    openDelay?: number;
+} & ArrayItemAreaProps;
+declare function ArrayItemArea(props: Props & FlexContainerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ArrayItemArea {
+    var _supportsSpacingProps: boolean;
+}
+export default ArrayItemArea;