@dnb/eufemia 10.31.0 → 10.32.0

package/es/extensions/forms/Iterate/AnimatedContainer/ElementBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementBlock.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","IterateElementContext","ElementBlockContext","FieldBoundaryContext","ElementBlock","props","forceUpdate","contextRef","current","hasError","hasErrorAndShowIt","containerMode","handleRemove","switchContainerMode","isNew","mode","open","ariaLabel","onAnimationEnd","className","children","openDelay","restProps","_objectWithoutProperties","_excluded","openRef","isRemoving","setOpenState","setTimeout","handleAnimationEnd","state","preventFocusOnErrorOpening","_contextRef$current","_contextRef$current$e","_contextRef$current$e2","_contextRef$current$e3","elementRef","focus","call","window","requestAnimationFrame","_document$activeEleme","document","activeElement","closest","_contextRef$current2","elements","containerRef","querySelectorAll","length","e","_contextRef$current3","_contextRef$current3$","fulfillRemove","handleRemoveBlock","keepItems","createElement","Provider","value","duration","keepInDOM","Stack","_extends","element","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/AnimatedContainer/ElementBlock.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 IterateElementContext, {\n  IterateElementContextState,\n} from '../IterateElementContext'\nimport ElementBlockContext from './ElementBlockContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { ContainerMode } from '../Array/types'\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n  openDelay?: number\n}\n\nfunction ElementBlock(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const contextRef = useRef<\n    IterateElementContextState & {\n      hasError?: boolean\n      hasErrorAndShowIt?: boolean\n    }\n  >()\n  contextRef.current = useContext(IterateElementContext) || {}\n\n  const { hasError, hasErrorAndShowIt } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasErrorAndShowIt = hasErrorAndShowIt\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasErrorAndShowIt) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { handleRemove, switchContainerMode, containerMode, isNew } =\n    contextRef.current\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    openDelay = 100,\n    ...restProps\n  } = props\n\n  const openRef = useRef(open ?? (containerMode === mode && !isNew))\n  const isRemoving = useRef(false)\n\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    if (!isRemoving.current) {\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          if (isNew) {\n            setTimeout(() => {\n              setOpenState(containerMode === mode)\n            }, openDelay) // in order to apply the animation\n          } else {\n            setOpenState(containerMode === mode)\n          }\n        }\n      }\n    }\n  }, [containerMode, isNew, mode, open, openDelay, 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.hasErrorAndShowIt) {\n        switchContainerMode('edit')\n      }\n\n      const preventFocusOnErrorOpening =\n        !contextRef.current.hasErrorAndShowIt\n      if (preventFocusOnErrorOpening) {\n        if (state === 'opened') {\n          contextRef.current?.elementRef?.current?.focus?.()\n        } else {\n          // Wait until the element is removed, then check if we can set focus\n          window.requestAnimationFrame(() => {\n            // try to focus on the second last element\n            try {\n              if (\n                // But not when we focus is already inside our element\n                !document.activeElement?.closest(\n                  '.dnb-forms-iterate__element'\n                )\n              ) {\n                const elements =\n                  contextRef.current?.containerRef.current.querySelectorAll<HTMLDivElement>(\n                    '.dnb-forms-iterate__element'\n                  )\n                elements[elements.length - 1].focus()\n              }\n            } catch (e) {\n              /**/\n            }\n          })\n        }\n      }\n\n      if (!openRef.current && isRemoving.current) {\n        isRemoving.current = false\n        contextRef.current?.fulfillRemove?.()\n      }\n\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, switchContainerMode]\n  )\n  const handleRemoveBlock = useCallback(() => {\n    isRemoving.current = true\n    handleRemove?.({ keepItems: true })\n    setOpenState(false)\n  }, [handleRemove, setOpenState])\n\n  return (\n    <ElementBlockContext.Provider value={{ handleRemoveBlock }}>\n      <HeightAnimation\n        className={classnames(\n          'dnb-forms-iterate-block',\n          isNew && 'dnb-forms-iterate-block--new',\n          contextRef.current.hasErrorAndShowIt &&\n            'dnb-forms-iterate-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-iterate-block__inner\"\n          {...restProps}\n          element=\"section\"\n          aria-label={ariaLabel}\n        >\n          {children}\n        </Flex.Stack>\n      </HeightAnimation>\n    </ElementBlockContext.Provider>\n  )\n}\n\nElementBlock._supportsSpacingProps = true\nexport default ElementBlock\n"],"mappings":"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"}
+{"version":3,"file":"ElementBlock.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","IterateElementContext","ElementBlockContext","FieldBoundaryContext","ElementBlock","props","forceUpdate","contextRef","current","hasError","hasErrorAndShowIt","containerMode","handleRemove","switchContainerMode","isNew","mode","open","ariaLabel","onAnimationEnd","className","children","openDelay","variant","restProps","_objectWithoutProperties","_excluded","openRef","isRemoving","setOpenState","setTimeout","handleAnimationEnd","state","preventFocusOnErrorOpening","_contextRef$current","_contextRef$current$e","_contextRef$current$e2","_contextRef$current$e3","elementRef","focus","call","window","requestAnimationFrame","_document$activeEleme","document","activeElement","closest","_contextRef$current2","elements","containerRef","querySelectorAll","length","e","_contextRef$current3","_contextRef$current3$","fulfillRemove","handleRemoveBlock","keepItems","createElement","Provider","value","duration","keepInDOM","Stack","_extends","element","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/AnimatedContainer/ElementBlock.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 IterateElementContext, {\n  IterateElementContextState,\n} from '../IterateElementContext'\nimport ElementBlockContext from './ElementBlockContext'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { ContainerMode } from '../Array/types'\n\nexport type ElementBlockProps = {\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  openDelay?: number\n} & ElementBlockProps\n\nfunction ElementBlock(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const contextRef = useRef<\n    IterateElementContextState & {\n      hasError?: boolean\n      hasErrorAndShowIt?: boolean\n    }\n  >()\n  contextRef.current = useContext(IterateElementContext) || {}\n\n  const { hasError, hasErrorAndShowIt } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasErrorAndShowIt = hasErrorAndShowIt\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasErrorAndShowIt) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { handleRemove, switchContainerMode, containerMode, isNew } =\n    contextRef.current\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    openDelay = 100,\n    variant = 'outline',\n    ...restProps\n  } = props\n\n  const openRef = useRef(open ?? (containerMode === mode && !isNew))\n  const isRemoving = useRef(false)\n\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    if (!isRemoving.current) {\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          if (isNew) {\n            setTimeout(() => {\n              setOpenState(containerMode === mode)\n            }, openDelay) // in order to apply the animation\n          } else {\n            setOpenState(containerMode === mode)\n          }\n        }\n      }\n    }\n  }, [containerMode, isNew, mode, open, openDelay, 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.hasErrorAndShowIt) {\n        switchContainerMode('edit')\n      }\n\n      const preventFocusOnErrorOpening =\n        !contextRef.current.hasErrorAndShowIt\n      if (preventFocusOnErrorOpening) {\n        if (state === 'opened') {\n          contextRef.current?.elementRef?.current?.focus?.()\n        } else {\n          // Wait until the element is removed, then check if we can set focus\n          window.requestAnimationFrame(() => {\n            // try to focus on the second last element\n            try {\n              if (\n                // But not when we focus is already inside our element\n                !document.activeElement?.closest(\n                  '.dnb-forms-iterate__element'\n                )\n              ) {\n                const elements =\n                  contextRef.current?.containerRef.current.querySelectorAll<HTMLDivElement>(\n                    '.dnb-forms-iterate__element'\n                  )\n                elements[elements.length - 1].focus()\n              }\n            } catch (e) {\n              /**/\n            }\n          })\n        }\n      }\n\n      if (!openRef.current && isRemoving.current) {\n        isRemoving.current = false\n        contextRef.current?.fulfillRemove?.()\n      }\n\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, switchContainerMode]\n  )\n  const handleRemoveBlock = useCallback(() => {\n    isRemoving.current = true\n    handleRemove?.({ keepItems: true })\n    setOpenState(false)\n  }, [handleRemove, setOpenState])\n\n  return (\n    <ElementBlockContext.Provider value={{ handleRemoveBlock }}>\n      <HeightAnimation\n        className={classnames(\n          'dnb-forms-iterate-block',\n          variant && `dnb-forms-iterate-block--variant-${variant}`,\n          isNew && 'dnb-forms-iterate-block--new',\n          contextRef.current.hasErrorAndShowIt &&\n            'dnb-forms-iterate-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-iterate-block__inner\"\n          {...restProps}\n          element=\"section\"\n          aria-label={ariaLabel}\n        >\n          {children}\n        </Flex.Stack>\n      </HeightAnimation>\n    </ElementBlockContext.Provider>\n  )\n}\n\nElementBlock._supportsSpacingProps = true\nexport default ElementBlock\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Props as FlexContainerProps } from '../../../../components/flex/Container';
+import { ElementBlockProps } from '../AnimatedContainer/ElementBlock';
 export type Props = {
     /**
      * The title of the EditContainer.
@@ -20,7 +21,7 @@ export type Props = {
      */
     toolbar?: React.ReactNode;
 };
-export type AllProps = Props & FlexContainerProps;
+export type AllProps = Props & FlexContainerProps & ElementBlockProps;
 declare function EditContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace EditContainer {
     var _supportsSpacingProps: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"EditContainer.js","names":["React","useContext","useEffect","useMemo","useRef","classnames","convertJsxToString","Lead","IterateElementContext","EditToolbarTools","ElementBlock","Toolbar","EditContainer","props","createElement","EditContainerWithoutToolbar","_extends","toolbar","_Toolbar","iterateElementContext","containerMode","isNew","_ref","children","className","title","titleWhenNew","restProps","_objectWithoutProperties","_excluded","wasNewRef","current","blockTitle","ariaLabel","mode","size","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditContainer.tsx"],"sourcesContent":["import React, { useContext, useEffect, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Lead } from '../../../../elements'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport IterateElementContext from '../IterateElementContext'\nimport EditToolbarTools from './EditToolbarTools'\nimport ElementBlock from '../AnimatedContainer/ElementBlock'\nimport Toolbar from '../Toolbar'\n\nexport type Props = {\n  /**\n   * The title of the EditContainer.\n   */\n  title?: React.ReactNode\n\n  /**\n   * The title for a new item show within the EditContainer.\n   */\n  titleWhenNew?: React.ReactNode\n\n  /**\n   * If the EditContainer is open or not.\n   * Used internally.\n   */\n  open?: boolean\n\n  /**\n   * The toolbar to be shown in the EditContainer.\n   * Used internally.\n   */\n  toolbar?: React.ReactNode\n}\n\nexport type AllProps = Props & FlexContainerProps\n\nexport default function EditContainer(props: AllProps) {\n  return (\n    <EditContainerWithoutToolbar\n      toolbar={\n        <Toolbar>\n          <EditToolbarTools />\n        </Toolbar>\n      }\n      {...props}\n    />\n  )\n}\n\nexport function EditContainerWithoutToolbar(\n  props: Props & FlexContainerProps & { toolbar?: React.ReactNode }\n) {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { containerMode, isNew } = iterateElementContext ?? {}\n\n  const {\n    children,\n    className,\n    title,\n    titleWhenNew,\n    toolbar,\n    ...restProps\n  } = props || {}\n\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  const blockTitle =\n    wasNewRef.current && titleWhenNew ? titleWhenNew : title\n  const ariaLabel = useMemo(\n    () => convertJsxToString(blockTitle),\n    [blockTitle]\n  )\n\n  return (\n    <ElementBlock\n      mode=\"edit\"\n      className={classnames('dnb-forms-iterate-edit-block', className)}\n      ariaLabel={ariaLabel}\n      {...restProps}\n    >\n      {blockTitle && <Lead size=\"basis\">{blockTitle}</Lead>}\n      {children}\n      {toolbar}\n    </ElementBlock>\n  )\n}\n\nEditContainer._supportsSpacingProps = true\nEditContainerWithoutToolbar._supportsSpacingProps = true\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACrE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,SAASC,IAAI,QAAQ,sBAAsB;AAE3C,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,YAAY,MAAM,mCAAmC;AAC5D,OAAOC,OAAO,MAAM,YAAY;AA4BhC,eAAe,SAASC,aAAaA,CAACC,KAAe,EAAE;EACrD,OACEb,KAAA,CAAAc,aAAA,CAACC,2BAA2B,EAAAC,QAAA;IAC1BC,OAAO,EAAAC,QAAA,KAAAA,QAAA,GACLlB,KAAA,CAAAc,aAAA,CAACH,OAAO,QACNX,KAAA,CAAAc,aAAA,CAACL,gBAAgB,MAAE,CACZ,CAAC;EACX,GACGI,KAAK,CACV,CAAC;AAEN;AAEA,OAAO,SAASE,2BAA2BA,CACzCF,KAAiE,EACjE;EACA,MAAMM,qBAAqB,GAAGlB,UAAU,CAACO,qBAAqB,CAAC;EAC/D,MAAM;IAAEY,aAAa;IAAEC;EAAM,CAAC,GAAGF,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAE5D,MAAAG,IAAA,GAOIT,KAAK,IAAI,CAAC,CAAC;IAPT;MACJU,QAAQ;MACRC,SAAS;MACTC,KAAK;MACLC,YAAY;MACZT;IAEF,CAAC,GAAAK,IAAA;IADIK,SAAS,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAGd,MAAMC,SAAS,GAAG1B,MAAM,CAAUiB,KAAK,CAAC;EAExCnB,SAAS,CAAC,MAAM;IACd,IAAIkB,aAAa,KAAK,MAAM,EAAE;MAC5BU,SAAS,CAACC,OAAO,GAAG,KAAK;IAC3B;EACF,CAAC,EAAE,CAACV,KAAK,EAAED,aAAa,CAAC,CAAC;EAE1B,MAAMY,UAAU,GACdF,SAAS,CAACC,OAAO,IAAIL,YAAY,GAAGA,YAAY,GAAGD,KAAK;EAC1D,MAAMQ,SAAS,GAAG9B,OAAO,CACvB,MAAMG,kBAAkB,CAAC0B,UAAU,CAAC,EACpC,CAACA,UAAU,CACb,CAAC;EAED,OACEhC,KAAA,CAAAc,aAAA,CAACJ,YAAY,EAAAM,QAAA;IACXkB,IAAI,EAAC,MAAM;IACXV,SAAS,EAAEnB,UAAU,CAAC,8BAA8B,EAAEmB,SAAS,CAAE;IACjES,SAAS,EAAEA;EAAU,GACjBN,SAAS,GAEZK,UAAU,IAAIhC,KAAA,CAAAc,aAAA,CAACP,IAAI;IAAC4B,IAAI,EAAC;EAAO,GAAEH,UAAiB,CAAC,EACpDT,QAAQ,EACRN,OACW,CAAC;AAEnB;AAEAL,aAAa,CAACwB,qBAAqB,GAAG,IAAI;AAC1CrB,2BAA2B,CAACqB,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"EditContainer.js","names":["React","useContext","useEffect","useMemo","useRef","classnames","convertJsxToString","Lead","IterateElementContext","EditToolbarTools","ElementBlock","Toolbar","EditContainer","props","createElement","EditContainerWithoutToolbar","_extends","toolbar","_Toolbar","iterateElementContext","containerMode","isNew","_ref","children","className","title","titleWhenNew","restProps","_objectWithoutProperties","_excluded","wasNewRef","current","blockTitle","ariaLabel","mode","size","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditContainer.tsx"],"sourcesContent":["import React, { useContext, useEffect, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Lead } from '../../../../elements'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport IterateElementContext from '../IterateElementContext'\nimport EditToolbarTools from './EditToolbarTools'\nimport ElementBlock, {\n  ElementBlockProps,\n} from '../AnimatedContainer/ElementBlock'\nimport Toolbar from '../Toolbar'\n\nexport type Props = {\n  /**\n   * The title of the EditContainer.\n   */\n  title?: React.ReactNode\n\n  /**\n   * The title for a new item show within the EditContainer.\n   */\n  titleWhenNew?: React.ReactNode\n\n  /**\n   * If the EditContainer is open or not.\n   * Used internally.\n   */\n  open?: boolean\n\n  /**\n   * The toolbar to be shown in the EditContainer.\n   * Used internally.\n   */\n  toolbar?: React.ReactNode\n}\n\nexport type AllProps = Props & FlexContainerProps & ElementBlockProps\n\nexport default function EditContainer(props: AllProps) {\n  return (\n    <EditContainerWithoutToolbar\n      toolbar={\n        <Toolbar>\n          <EditToolbarTools />\n        </Toolbar>\n      }\n      {...props}\n    />\n  )\n}\n\nexport function EditContainerWithoutToolbar(\n  props: Props & FlexContainerProps & { toolbar?: React.ReactNode }\n) {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { containerMode, isNew } = iterateElementContext ?? {}\n\n  const {\n    children,\n    className,\n    title,\n    titleWhenNew,\n    toolbar,\n    ...restProps\n  } = props || {}\n\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  const blockTitle =\n    wasNewRef.current && titleWhenNew ? titleWhenNew : title\n  const ariaLabel = useMemo(\n    () => convertJsxToString(blockTitle),\n    [blockTitle]\n  )\n\n  return (\n    <ElementBlock\n      mode=\"edit\"\n      className={classnames('dnb-forms-iterate-edit-block', className)}\n      ariaLabel={ariaLabel}\n      {...restProps}\n    >\n      {blockTitle && <Lead size=\"basis\">{blockTitle}</Lead>}\n      {children}\n      {toolbar}\n    </ElementBlock>\n  )\n}\n\nEditContainer._supportsSpacingProps = true\nEditContainerWithoutToolbar._supportsSpacingProps = true\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACrE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,SAASC,IAAI,QAAQ,sBAAsB;AAE3C,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,YAAY,MAEZ,mCAAmC;AAC1C,OAAOC,OAAO,MAAM,YAAY;AA4BhC,eAAe,SAASC,aAAaA,CAACC,KAAe,EAAE;EACrD,OACEb,KAAA,CAAAc,aAAA,CAACC,2BAA2B,EAAAC,QAAA;IAC1BC,OAAO,EAAAC,QAAA,KAAAA,QAAA,GACLlB,KAAA,CAAAc,aAAA,CAACH,OAAO,QACNX,KAAA,CAAAc,aAAA,CAACL,gBAAgB,MAAE,CACZ,CAAC;EACX,GACGI,KAAK,CACV,CAAC;AAEN;AAEA,OAAO,SAASE,2BAA2BA,CACzCF,KAAiE,EACjE;EACA,MAAMM,qBAAqB,GAAGlB,UAAU,CAACO,qBAAqB,CAAC;EAC/D,MAAM;IAAEY,aAAa;IAAEC;EAAM,CAAC,GAAGF,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAE5D,MAAAG,IAAA,GAOIT,KAAK,IAAI,CAAC,CAAC;IAPT;MACJU,QAAQ;MACRC,SAAS;MACTC,KAAK;MACLC,YAAY;MACZT;IAEF,CAAC,GAAAK,IAAA;IADIK,SAAS,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAGd,MAAMC,SAAS,GAAG1B,MAAM,CAAUiB,KAAK,CAAC;EAExCnB,SAAS,CAAC,MAAM;IACd,IAAIkB,aAAa,KAAK,MAAM,EAAE;MAC5BU,SAAS,CAACC,OAAO,GAAG,KAAK;IAC3B;EACF,CAAC,EAAE,CAACV,KAAK,EAAED,aAAa,CAAC,CAAC;EAE1B,MAAMY,UAAU,GACdF,SAAS,CAACC,OAAO,IAAIL,YAAY,GAAGA,YAAY,GAAGD,KAAK;EAC1D,MAAMQ,SAAS,GAAG9B,OAAO,CACvB,MAAMG,kBAAkB,CAAC0B,UAAU,CAAC,EACpC,CAACA,UAAU,CACb,CAAC;EAED,OACEhC,KAAA,CAAAc,aAAA,CAACJ,YAAY,EAAAM,QAAA;IACXkB,IAAI,EAAC,MAAM;IACXV,SAAS,EAAEnB,UAAU,CAAC,8BAA8B,EAAEmB,SAAS,CAAE;IACjES,SAAS,EAAEA;EAAU,GACjBN,SAAS,GAEZK,UAAU,IAAIhC,KAAA,CAAAc,aAAA,CAACP,IAAI;IAAC4B,IAAI,EAAC;EAAO,GAAEH,UAAiB,CAAC,EACpDT,QAAQ,EACRN,OACW,CAAC;AAEnB;AAEAL,aAAa,CAACwB,qBAAqB,GAAG,IAAI;AAC1CrB,2BAA2B,CAACqB,qBAAqB,GAAG,IAAI"}

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

@@ -9,6 +9,11 @@ export const EditContainerProperties = {
     type: 'React.Node',
     status: 'optional'
   },
+  variant: {
+    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    type: 'string',
+    status: 'optional'
+  },
   '[FlexVertical](/uilib/layout/flex/container/)': {
     doc: 'All Flex.Vertical properties.',
     type: 'Various',

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

@@ -1 +1 @@
-{"version":3,"file":"EditContainerDocs.js","names":["EditContainerProperties","title","doc","type","status","titleWhenNew","EditContainerEvents"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const EditContainerProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  titleWhenNew: {\n    doc: 'The title for a new item.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  '[FlexVertical](/uilib/layout/flex/container/)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const EditContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,YAAY,EAAE;IACZH,GAAG,EAAE,2BAA2B;IAChCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,+CAA+C,EAAE;IAC/CF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAME,mBAAyC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"EditContainerDocs.js","names":["EditContainerProperties","title","doc","type","status","titleWhenNew","variant","EditContainerEvents"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const EditContainerProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  titleWhenNew: {\n    doc: 'The title for a new item.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',\n    type: 'string',\n    status: 'optional',\n  },\n  '[FlexVertical](/uilib/layout/flex/container/)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const EditContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,YAAY,EAAE;IACZH,GAAG,EAAE,2BAA2B;IAChCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,2FAA2F;IAChGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACD,+CAA+C,EAAE;IAC/CF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMG,mBAAyC,GAAG,CAAC,CAAC"}

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

@@ -44,7 +44,7 @@ export default function EditToolbarTools() {
     switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('view');
   }, [switchContainerMode]);
   return React.createElement(Flex.Horizontal, {
-    spacing: "large"
+    gap: "large"
   }, React.createElement(Button, {
     variant: "tertiary",
     icon: check,

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

@@ -1 +1 @@
-{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useEffect","useRef","Button","Flex","useTranslation","IterateElementContext","check","close","RemoveButton","FieldBoundaryContext","EditToolbarTools","restoreOriginalValue","switchContainerMode","containerMode","arrayValue","index","isNew","hasErrorAndShowIt","translation","Iterate","valueBackupRef","wasNew","useWasNew","current","cancelHandler","doneHandler","createElement","Horizontal","spacing","variant","icon","icon_position","on_click","disabled","done","_RemoveButton","cancel","wasNewRef"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport { Button, Flex } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { check, close } from '../../../../icons'\nimport RemoveButton from '../RemoveButton'\nimport { ContainerMode } from '../Array/types'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function EditToolbarTools() {\n  const {\n    restoreOriginalValue,\n    switchContainerMode,\n    containerMode,\n    arrayValue,\n    index,\n    isNew,\n  } = useContext(IterateElementContext) || {}\n  const { hasErrorAndShowIt } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().Iterate\n  const valueBackupRef = useRef<unknown>()\n  const wasNew = useWasNew({ isNew, containerMode })\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const cancelHandler = useCallback(() => {\n    if (valueBackupRef.current) {\n      restoreOriginalValue?.(valueBackupRef.current)\n    }\n    switchContainerMode?.('view')\n  }, [restoreOriginalValue, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    switchContainerMode?.('view')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal spacing=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={check}\n        icon_position=\"left\"\n        on_click={doneHandler}\n        disabled={hasErrorAndShowIt}\n      >\n        {translation.done}\n      </Button>\n\n      {wasNew ? (\n        <RemoveButton />\n      ) : (\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancel}\n        </Button>\n      )}\n    </Flex.Horizontal>\n  )\n}\n\nexport function useWasNew({\n  isNew,\n  containerMode,\n}: {\n  isNew: boolean\n  containerMode: ContainerMode\n}) {\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  return wasNewRef.current\n}\n"],"mappings":"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"}
+{"version":3,"file":"EditToolbarTools.js","names":["React","useCallback","useContext","useEffect","useRef","Button","Flex","useTranslation","IterateElementContext","check","close","RemoveButton","FieldBoundaryContext","EditToolbarTools","restoreOriginalValue","switchContainerMode","containerMode","arrayValue","index","isNew","hasErrorAndShowIt","translation","Iterate","valueBackupRef","wasNew","useWasNew","current","cancelHandler","doneHandler","createElement","Horizontal","gap","variant","icon","icon_position","on_click","disabled","done","_RemoveButton","cancel","wasNewRef"],"sources":["../../../../../../src/extensions/forms/Iterate/EditContainer/EditToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport { Button, Flex } from '../../../../components'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { check, close } from '../../../../icons'\nimport RemoveButton from '../RemoveButton'\nimport { ContainerMode } from '../Array/types'\nimport FieldBoundaryContext from '../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport default function EditToolbarTools() {\n  const {\n    restoreOriginalValue,\n    switchContainerMode,\n    containerMode,\n    arrayValue,\n    index,\n    isNew,\n  } = useContext(IterateElementContext) || {}\n  const { hasErrorAndShowIt } = useContext(FieldBoundaryContext) || {}\n\n  const translation = useTranslation().Iterate\n  const valueBackupRef = useRef<unknown>()\n  const wasNew = useWasNew({ isNew, containerMode })\n\n  useEffect(() => {\n    if (containerMode === 'edit' && !valueBackupRef.current) {\n      valueBackupRef.current = arrayValue?.[index]\n    }\n    if (containerMode === 'view') {\n      valueBackupRef.current = null\n    }\n  }, [arrayValue, containerMode, index])\n\n  const cancelHandler = useCallback(() => {\n    if (valueBackupRef.current) {\n      restoreOriginalValue?.(valueBackupRef.current)\n    }\n    switchContainerMode?.('view')\n  }, [restoreOriginalValue, switchContainerMode])\n  const doneHandler = useCallback(() => {\n    switchContainerMode?.('view')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal gap=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={check}\n        icon_position=\"left\"\n        on_click={doneHandler}\n        disabled={hasErrorAndShowIt}\n      >\n        {translation.done}\n      </Button>\n\n      {wasNew ? (\n        <RemoveButton />\n      ) : (\n        <Button\n          variant=\"tertiary\"\n          icon={close}\n          icon_position=\"left\"\n          on_click={cancelHandler}\n        >\n          {translation.cancel}\n        </Button>\n      )}\n    </Flex.Horizontal>\n  )\n}\n\nexport function useWasNew({\n  isNew,\n  containerMode,\n}: {\n  isNew: boolean\n  containerMode: ContainerMode\n}) {\n  const wasNewRef = useRef<unknown>(isNew)\n\n  useEffect(() => {\n    if (containerMode === 'view') {\n      wasNewRef.current = false\n    }\n  }, [isNew, containerMode])\n\n  return wasNewRef.current\n}\n"],"mappings":"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"}

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

@@ -20,7 +20,7 @@ export default function Toolbar(props) {
     space: 0
   })), React.createElement(Flex.Horizontal, {
     top: "x-small",
-    spacing: "large"
+    gap: "large"
   }, children));
 }
 Toolbar._supportsSpacingProps = true;

package/es/extensions/forms/Iterate/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","names":["React","classnames","Hr","Flex","Space","Toolbar","props","_ref","children","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","top","_Hr","space","Horizontal","spacing","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Hr } from '../../../../elements'\nimport { Flex, Space } from '../../../../components'\nimport { SpaceAllProps } from '../../../../components/Space'\n\nexport type Props = SpaceAllProps\n\nexport default function Toolbar(props: Props) {\n  const { children, className, ...rest } = props || {}\n\n  return (\n    <Space\n      top=\"medium\"\n      className={classnames('dnb-forms-iterate-toolbar', className)}\n      {...rest}\n    >\n      <Hr space={0} />\n\n      <Flex.Horizontal top=\"x-small\" spacing=\"large\">\n        {children}\n      </Flex.Horizontal>\n    </Space>\n  )\n}\n\nToolbar._supportsSpacingProps = true\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,EAAE,QAAQ,sBAAsB;AACzC,SAASC,IAAI,EAAEC,KAAK,QAAQ,wBAAwB;AAKpD,eAAe,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC5C,MAAAC,IAAA,GAAyCD,KAAK,IAAI,CAAC,CAAC;IAA9C;MAAEE,QAAQ;MAAEC;IAAmB,CAAC,GAAAF,IAAA;IAANG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEpC,OACEZ,KAAA,CAAAa,aAAA,CAACT,KAAK,EAAAU,QAAA;IACJC,GAAG,EAAC,QAAQ;IACZN,SAAS,EAAER,UAAU,CAAC,2BAA2B,EAAEQ,SAAS;EAAE,GAC1DC,IAAI,GAAAM,GAAA,KAAAA,GAAA,GAERhB,KAAA,CAAAa,aAAA,CAACX,EAAE;IAACe,KAAK,EAAE;EAAE,CAAE,CAAC,GAEhBjB,KAAA,CAAAa,aAAA,CAACV,IAAI,CAACe,UAAU;IAACH,GAAG,EAAC,SAAS;IAACI,OAAO,EAAC;EAAO,GAC3CX,QACc,CACZ,CAAC;AAEZ;AAEAH,OAAO,CAACe,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"Toolbar.js","names":["React","classnames","Hr","Flex","Space","Toolbar","props","_ref","children","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","top","_Hr","space","Horizontal","gap","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Hr } from '../../../../elements'\nimport { Flex, Space } from '../../../../components'\nimport { SpaceAllProps } from '../../../../components/Space'\n\nexport type Props = SpaceAllProps\n\nexport default function Toolbar(props: Props) {\n  const { children, className, ...rest } = props || {}\n\n  return (\n    <Space\n      top=\"medium\"\n      className={classnames('dnb-forms-iterate-toolbar', className)}\n      {...rest}\n    >\n      <Hr space={0} />\n\n      <Flex.Horizontal top=\"x-small\" gap=\"large\">\n        {children}\n      </Flex.Horizontal>\n    </Space>\n  )\n}\n\nToolbar._supportsSpacingProps = true\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,EAAE,QAAQ,sBAAsB;AACzC,SAASC,IAAI,EAAEC,KAAK,QAAQ,wBAAwB;AAKpD,eAAe,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC5C,MAAAC,IAAA,GAAyCD,KAAK,IAAI,CAAC,CAAC;IAA9C;MAAEE,QAAQ;MAAEC;IAAmB,CAAC,GAAAF,IAAA;IAANG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEpC,OACEZ,KAAA,CAAAa,aAAA,CAACT,KAAK,EAAAU,QAAA;IACJC,GAAG,EAAC,QAAQ;IACZN,SAAS,EAAER,UAAU,CAAC,2BAA2B,EAAEQ,SAAS;EAAE,GAC1DC,IAAI,GAAAM,GAAA,KAAAA,GAAA,GAERhB,KAAA,CAAAa,aAAA,CAACX,EAAE;IAACe,KAAK,EAAE;EAAE,CAAE,CAAC,GAEhBjB,KAAA,CAAAa,aAAA,CAACV,IAAI,CAACe,UAAU;IAACH,GAAG,EAAC,SAAS;IAACI,GAAG,EAAC;EAAO,GACvCX,QACc,CACZ,CAAC;AAEZ;AAEAH,OAAO,CAACe,qBAAqB,GAAG,IAAI"}

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Props as FlexContainerProps } from '../../../../components/flex/Container';
+import { ElementBlockProps } from '../AnimatedContainer/ElementBlock';
 export type Props = {
     /**
      * The title of the ViewContainer.
      */
     title?: React.ReactNode;
 };
-export type AllProps = Props & FlexContainerProps;
+export type AllProps = Props & FlexContainerProps & ElementBlockProps;
 declare function ViewContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ViewContainer {
     var _supportsSpacingProps: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ViewContainer.js","names":["React","useMemo","classnames","convertJsxToString","Flex","Lead","ElementBlock","Toolbar","ViewToolbarTools","ViewContainer","props","_ref","children","className","title","restProps","_objectWithoutProperties","_excluded","ariaLabel","createElement","_extends","mode","Stack","size","_Toolbar","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { 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 ElementBlock from '../AnimatedContainer/ElementBlock'\nimport Toolbar from '../Toolbar'\nimport ViewToolbarTools from './ViewToolbarTools'\n\nexport type Props = {\n  /**\n   * The title of the ViewContainer.\n   */\n  title?: React.ReactNode\n}\n\nexport type AllProps = Props & FlexContainerProps\n\nfunction ViewContainer(props: AllProps) {\n  const { children, className, title, ...restProps } = props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n\n  return (\n    <ElementBlock\n      mode=\"view\"\n      ariaLabel={ariaLabel}\n      className={classnames('dnb-forms-iterate-view-block', className)}\n      {...restProps}\n    >\n      <Flex.Stack>\n        {title && <Lead size=\"basis\">{title}</Lead>}\n        {children}\n        <Toolbar>\n          <ViewToolbarTools />\n        </Toolbar>\n      </Flex.Stack>\n    </ElementBlock>\n  )\n}\n\nViewContainer._supportsSpacingProps = true\nexport default ViewContainer\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,SAASC,IAAI,QAAQ,wBAAwB;AAE7C,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,OAAOC,YAAY,MAAM,mCAAmC;AAC5D,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,gBAAgB,MAAM,oBAAoB;AAWjD,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAAC,IAAA,GAAqDD,KAAK,IAAI,CAAC,CAAC;IAA1D;MAAEE,QAAQ;MAAEC,SAAS;MAAEC;IAAoB,CAAC,GAAAH,IAAA;IAAXI,SAAS,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAChD,MAAMC,SAAS,GAAGjB,OAAO,CAAC,MAAME,kBAAkB,CAACW,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEnE,OACEd,KAAA,CAAAmB,aAAA,CAACb,YAAY,EAAAc,QAAA;IACXC,IAAI,EAAC,MAAM;IACXH,SAAS,EAAEA,SAAU;IACrBL,SAAS,EAAEX,UAAU,CAAC,8BAA8B,EAAEW,SAAS;EAAE,GAC7DE,SAAS,GAEbf,KAAA,CAAAmB,aAAA,CAACf,IAAI,CAACkB,KAAK,QACRR,KAAK,IAAId,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAACkB,IAAI,EAAC;EAAO,GAAET,KAAY,CAAC,EAC1CF,QAAQ,EAAAY,QAAA,KAAAA,QAAA,GACTxB,KAAA,CAAAmB,aAAA,CAACZ,OAAO,QACNP,KAAA,CAAAmB,aAAA,CAACX,gBAAgB,MAAE,CACZ,CAAC,CACA,CACA,CAAC;AAEnB;AAEAC,aAAa,CAACgB,qBAAqB,GAAG,IAAI;AAC1C,eAAehB,aAAa"}
+{"version":3,"file":"ViewContainer.js","names":["React","useMemo","classnames","convertJsxToString","Flex","Lead","ElementBlock","Toolbar","ViewToolbarTools","ViewContainer","props","_ref","children","className","title","restProps","_objectWithoutProperties","_excluded","ariaLabel","createElement","_extends","mode","Stack","size","_Toolbar","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { 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 ElementBlock, {\n  ElementBlockProps,\n} from '../AnimatedContainer/ElementBlock'\nimport Toolbar from '../Toolbar'\nimport ViewToolbarTools from './ViewToolbarTools'\n\nexport type Props = {\n  /**\n   * The title of the ViewContainer.\n   */\n  title?: React.ReactNode\n}\n\nexport type AllProps = Props & FlexContainerProps & ElementBlockProps\n\nfunction ViewContainer(props: AllProps) {\n  const { children, className, title, ...restProps } = props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n\n  return (\n    <ElementBlock\n      mode=\"view\"\n      ariaLabel={ariaLabel}\n      className={classnames('dnb-forms-iterate-view-block', className)}\n      {...restProps}\n    >\n      <Flex.Stack>\n        {title && <Lead size=\"basis\">{title}</Lead>}\n        {children}\n        <Toolbar>\n          <ViewToolbarTools />\n        </Toolbar>\n      </Flex.Stack>\n    </ElementBlock>\n  )\n}\n\nViewContainer._supportsSpacingProps = true\nexport default ViewContainer\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,SAASC,IAAI,QAAQ,wBAAwB;AAE7C,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,OAAOC,YAAY,MAEZ,mCAAmC;AAC1C,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,gBAAgB,MAAM,oBAAoB;AAWjD,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAAC,IAAA,GAAqDD,KAAK,IAAI,CAAC,CAAC;IAA1D;MAAEE,QAAQ;MAAEC,SAAS;MAAEC;IAAoB,CAAC,GAAAH,IAAA;IAAXI,SAAS,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAChD,MAAMC,SAAS,GAAGjB,OAAO,CAAC,MAAME,kBAAkB,CAACW,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEnE,OACEd,KAAA,CAAAmB,aAAA,CAACb,YAAY,EAAAc,QAAA;IACXC,IAAI,EAAC,MAAM;IACXH,SAAS,EAAEA,SAAU;IACrBL,SAAS,EAAEX,UAAU,CAAC,8BAA8B,EAAEW,SAAS;EAAE,GAC7DE,SAAS,GAEbf,KAAA,CAAAmB,aAAA,CAACf,IAAI,CAACkB,KAAK,QACRR,KAAK,IAAId,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAACkB,IAAI,EAAC;EAAO,GAAET,KAAY,CAAC,EAC1CF,QAAQ,EAAAY,QAAA,KAAAA,QAAA,GACTxB,KAAA,CAAAmB,aAAA,CAACZ,OAAO,QACNP,KAAA,CAAAmB,aAAA,CAACX,gBAAgB,MAAE,CACZ,CAAC,CACA,CACA,CAAC;AAEnB;AAEAC,aAAa,CAACgB,qBAAqB,GAAG,IAAI;AAC1C,eAAehB,aAAa"}

package/es/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.js

@@ -4,6 +4,11 @@ export const ViewContainerProperties = {
     type: 'React.Node',
     status: 'optional'
   },
+  variant: {
+    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
+    type: 'string',
+    status: 'optional'
+  },
   '[FlexVertical](/uilib/layout/flex/container/)': {
     doc: 'All Flex.Vertical properties.',
     type: 'Various',

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

@@ -1 +1 @@
-{"version":3,"file":"ViewContainerDocs.js","names":["ViewContainerProperties","title","doc","type","status","ViewContainerEvents"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ViewContainerProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  '[FlexVertical](/uilib/layout/flex/container/)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const ViewContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,+CAA+C,EAAE;IAC/CF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMC,mBAAyC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"ViewContainerDocs.js","names":["ViewContainerProperties","title","doc","type","status","variant","ViewContainerEvents"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ViewContainerProperties: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the container.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',\n    type: 'string',\n    status: 'optional',\n  },\n  '[FlexVertical](/uilib/layout/flex/container/)': {\n    doc: 'All Flex.Vertical properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const ViewContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,KAAK,EAAE;IACLC,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2FAA2F;IAChGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACD,+CAA+C,EAAE;IAC/CF,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAME,mBAAyC,GAAG,CAAC,CAAC"}

package/es/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.js

@@ -16,7 +16,7 @@ export default function ViewToolbarTools() {
     switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
   }, [switchContainerMode]);
   return React.createElement(Flex.Horizontal, {
-    spacing: "large"
+    gap: "large"
   }, React.createElement(Button, {
     variant: "tertiary",
     icon: edit,

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

@@ -1 +1 @@
-{"version":3,"file":"ViewToolbarTools.js","names":["React","useCallback","useContext","Button","Flex","RemoveButton","useTranslation","IterateElementContext","edit","ViewToolbarTools","iterateElementContext","switchContainerMode","translation","Iterate","editHandler","createElement","Horizontal","spacing","variant","icon","icon_position","on_click","text","remove"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport { Button, Flex } from '../../../../components'\nimport RemoveButton from '../RemoveButton'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { edit } from '../../../../icons'\n\nexport default function ViewToolbarTools() {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { switchContainerMode } = iterateElementContext ?? {}\n\n  const translation = useTranslation().Iterate\n\n  const editHandler = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal spacing=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={edit}\n        icon_position=\"left\"\n        on_click={editHandler}\n      >\n        {translation.edit}\n      </Button>\n\n      <RemoveButton text={translation.remove} />\n    </Flex.Horizontal>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,SAASC,MAAM,EAAEC,IAAI,QAAQ,wBAAwB;AACrD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,cAAc,MAAM,4BAA4B;AACvD,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,SAASC,IAAI,QAAQ,mBAAmB;AAExC,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,qBAAqB,GAAGR,UAAU,CAACK,qBAAqB,CAAC;EAC/D,MAAM;IAAEI;EAAoB,CAAC,GAAGD,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAE3D,MAAME,WAAW,GAAGN,cAAc,CAAC,CAAC,CAACO,OAAO;EAE5C,MAAMC,WAAW,GAAGb,WAAW,CAAC,MAAM;IACpCU,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEX,KAAA,CAAAe,aAAA,CAACX,IAAI,CAACY,UAAU;IAACC,OAAO,EAAC;EAAO,GAC9BjB,KAAA,CAAAe,aAAA,CAACZ,MAAM;IACLe,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEX,IAAK;IACXY,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAErBF,WAAW,CAACJ,IACP,CAAC,EAETR,KAAA,CAAAe,aAAA,CAACV,YAAY;IAACiB,IAAI,EAAEV,WAAW,CAACW;EAAO,CAAE,CAC1B,CAAC;AAEtB"}
+{"version":3,"file":"ViewToolbarTools.js","names":["React","useCallback","useContext","Button","Flex","RemoveButton","useTranslation","IterateElementContext","edit","ViewToolbarTools","iterateElementContext","switchContainerMode","translation","Iterate","editHandler","createElement","Horizontal","gap","variant","icon","icon_position","on_click","text","remove"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport { Button, Flex } from '../../../../components'\nimport RemoveButton from '../RemoveButton'\nimport useTranslation from '../../hooks/useTranslation'\nimport IterateElementContext from '../IterateElementContext'\nimport { edit } from '../../../../icons'\n\nexport default function ViewToolbarTools() {\n  const iterateElementContext = useContext(IterateElementContext)\n  const { switchContainerMode } = iterateElementContext ?? {}\n\n  const translation = useTranslation().Iterate\n\n  const editHandler = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal gap=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={edit}\n        icon_position=\"left\"\n        on_click={editHandler}\n      >\n        {translation.edit}\n      </Button>\n\n      <RemoveButton text={translation.remove} />\n    </Flex.Horizontal>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,SAASC,MAAM,EAAEC,IAAI,QAAQ,wBAAwB;AACrD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,cAAc,MAAM,4BAA4B;AACvD,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,SAASC,IAAI,QAAQ,mBAAmB;AAExC,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,qBAAqB,GAAGR,UAAU,CAACK,qBAAqB,CAAC;EAC/D,MAAM;IAAEI;EAAoB,CAAC,GAAGD,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,CAAC,CAAC;EAE3D,MAAME,WAAW,GAAGN,cAAc,CAAC,CAAC,CAACO,OAAO;EAE5C,MAAMC,WAAW,GAAGb,WAAW,CAAC,MAAM;IACpCU,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEX,KAAA,CAAAe,aAAA,CAACX,IAAI,CAACY,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1BjB,KAAA,CAAAe,aAAA,CAACZ,MAAM;IACLe,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEX,IAAK;IACXY,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAErBF,WAAW,CAACJ,IACP,CAAC,EAETR,KAAA,CAAAe,aAAA,CAACV,YAAY;IAACiB,IAAI,EAAEV,WAAW,CAACW;EAAO,CAAE,CAC1B,CAAC;AAEtB"}

package/es/extensions/forms/Iterate/style/dnb-form-iterate.css

@@ -20,7 +20,6 @@
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
   border-radius: 0.375rem;
-  box-shadow: inset 0 0 0 2px var(--block-outline-color);
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
   --space: var(--spacing-small);
@@ -31,6 +30,9 @@
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
   --space: var(--spacing-large);
 }
+.dnb-forms-iterate-block--variant-outline .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
+  box-shadow: inset 0 0 0 2px var(--block-outline-color);
+}
 .dnb-forms-iterate-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }

package/es/extensions/forms/Iterate/style/dnb-form-iterate.min.css

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

package/es/extensions/forms/Iterate/style/dnb-form-iterate.scss

@@ -35,7 +35,10 @@
         }
 
         border-radius: 0.375rem;
-        box-shadow: inset 0 0 0 2px var(--block-outline-color);
+
+        .dnb-forms-iterate-block--variant-outline & {
+          box-shadow: inset 0 0 0 2px var(--block-outline-color);
+        }
       }
 
       transition:

package/es/extensions/forms/ValueBlock/ValueBlock.js

@@ -10,11 +10,13 @@ import { warn } from '../../../shared/helpers';
 import { Dd, Dl, Dt, Span } from '../../../elements';
 import { FormLabel } from '../../../components';
 import SummaryListContext from '../Value/SummaryList/SummaryListContext';
-import { pickSpacingProps } from '../../../components/flex/utils';
 import ValueBlockContext from './ValueBlockContext';
+import DataContext from '../DataContext/Context';
+import { pickSpacingProps } from '../../../components/flex/utils';
 function ValueBlock(props) {
   const summaryListContext = useContext(SummaryListContext);
   const valueBlockContext = useContext(ValueBlockContext);
+  const dataContext = useContext(DataContext);
   const {
     className,
     label: labelProp,
@@ -29,7 +31,7 @@ function ValueBlock(props) {
   const label = inline ? null : labelProp;
   const ref = useRef(null);
   useNotInSummaryList(valueBlockContext !== null && valueBlockContext !== void 0 && valueBlockContext.composition ? null : ref, label);
-  if ((children === undefined || children === null || children === false) && !showEmpty && !placeholder) {
+  if ((children === undefined || children === null || children === false) && !showEmpty && !placeholder || dataContext !== null && dataContext !== void 0 && dataContext.prerenderFieldProps) {
     return null;
   }
   let content = null;

package/es/extensions/forms/ValueBlock/ValueBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","pickSpacingProps","ValueBlockContext","ValueBlock","props","summaryListContext","valueBlockContext","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","ref","useNotInSummaryList","undefined","content","compositionClass","Element","isNested","layout","Item","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, { Fragment, useContext, useEffect, useRef } from 'react'\nimport classnames from 'classnames'\nimport { warn } from '../../../shared/helpers'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport ValueBlockContext from './ValueBlockContext'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  children?: React.ReactNode\n\n  /**\n   * Used internally by the Composition component\n   */\n  composition?: boolean\n\n  /**\n   * Used internally by the Composition component\n   */\n  gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n\n  const {\n    className,\n    label: labelProp,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    gap = 'xx-small',\n  } = props\n\n  const label = inline ? null : labelProp\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  if (\n    (children === undefined || children === null || children === false) &&\n    !showEmpty &&\n    !placeholder\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass =\n    composition &&\n    classnames(\n      `dnb-forms-value-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`\n    )\n\n  if (summaryListContext) {\n    const Element = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = (\n        <span\n          className={classnames(\n            'dnb-forms-value-block__content',\n            gap && `dnb-forms-value-block__content--gap-${gap}`\n          )}\n        >\n          {children}\n        </span>\n      ) ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <Element>\n          <SummaryListContext.Provider\n            value={{ ...summaryListContext, isNested: true }}\n          >\n            {label && (\n              <Dt className=\"dnb-forms-value-block__label\">\n                <strong>{label}</strong>\n              </Dt>\n            )}\n            <Dd\n              className={classnames(\n                summaryListContext.layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              {children ? (\n                <span\n                  className={classnames(\n                    'dnb-forms-value-block__content',\n                    gap && `dnb-forms-value-block__content--gap-${gap}`\n                  )}\n                >\n                  {children}\n                </span>\n              ) : (\n                <span className=\"dnb-forms-value-block__placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </Dd>\n          </SummaryListContext.Provider>\n        </Element>\n      )\n    }\n  } else {\n    content = (\n      <Span\n        ref={ref}\n        className={classnames(\n          'dnb-forms-value-block',\n          inline && 'dnb-forms-value-block--inline',\n          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,\n          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {label && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className=\"dnb-forms-value-block__label\"\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span\n            className={classnames(\n              'dnb-forms-value-block__content',\n              gap && `dnb-forms-value-block__content--gap-${gap}`\n            )}\n          >\n            {children}\n          </span>\n        ) : (\n          <span className=\"dnb-forms-value-block__placeholder\">\n            {placeholder}\n          </span>\n        )}\n      </Span>\n    )\n  }\n\n  return (\n    <ValueBlockContext.Provider value={props}>\n      {content}\n    </ValueBlockContext.Provider>\n  )\n}\n\nfunction useNotInSummaryList(\n  ref: React.RefObject<HTMLElement>,\n  label?: React.ReactNode\n) {\n  useEffect(() => {\n    if (ref?.current) {\n      try {\n        const sibling = ref.current.previousElementSibling\n\n        if (\n          sibling?.classList.contains('dnb-forms-value-block') &&\n          !ref.current.closest('.dnb-forms-summary-list')\n        ) {\n          warn.apply(\n            warn,\n            [\n              'Value components as siblings should be wrapped inside a Value.SummaryList!',\n              label,\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [label, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACtE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,EAAE,EAAEC,EAAE,EAAEC,EAAE,EAAEC,IAAI,QAAQ,mBAAmB;AACpD,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,OAAOC,kBAAkB,MAAM,yCAAyC;AAExE,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,OAAOC,iBAAiB,MAAM,qBAAqB;AAmBnD,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,kBAAkB,GAAGf,UAAU,CAACU,kBAAkB,CAAC;EACzD,MAAMM,iBAAiB,GAAGhB,UAAU,CAACY,iBAAiB,CAAC;EAEvD,MAAM;IACJK,SAAS;IACTC,KAAK,EAAEC,SAAS;IAChBC,MAAM;IACNC,QAAQ,GAAGP,KAAK,CAACQ,WAAW,GAAGR,KAAK,CAACO,QAAQ,GAAG,OAAO;IACvDE,WAAW;IACXC,SAAS;IACTC,QAAQ;IACRH,WAAW;IACXI,GAAG,GAAG;EACR,CAAC,GAAGZ,KAAK;EAET,MAAMI,KAAK,GAAGE,MAAM,GAAG,IAAI,GAAGD,SAAS;EAEvC,MAAMQ,GAAG,GAAGzB,MAAM,CAAc,IAAI,CAAC;EACrC0B,mBAAmB,CAACZ,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEM,WAAW,GAAG,IAAI,GAAGK,GAAG,EAAET,KAAK,CAAC;EAEvE,IACE,CAACO,QAAQ,KAAKI,SAAS,IAAIJ,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAK,KAAK,KAClE,CAACD,SAAS,IACV,CAACD,WAAW,EACZ;IACA,OAAO,IAAI;EACb;EAEA,IAAIO,OAAO,GAAG,IAAI;EAElB,MAAMC,gBAAgB,GACpBT,WAAW,IAER,uCACCA,WAAW,KAAK,IAAI,GAAG,YAAY,GAAGA,WACvC,EACF;EAEH,IAAIP,kBAAkB,EAAE;IACtB,MAAMiB,OAAO,GAAGjB,kBAAkB,CAACkB,QAAQ,GACvC3B,EAAE,GACFS,kBAAkB,CAACmB,MAAM,KAAK,YAAY,GAC1C5B,EAAE,CAAC6B,IAAI,GACPpC,QAAQ;IAEZ,IAAI,CAACmB,KAAK,IAAIF,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEM,WAAW,EAAE;MAAA,IAAAc,KAAA;MAC5CN,OAAO,IAAAM,KAAA,GACLtC,KAAA,CAAAuC,aAAA;QACEpB,SAAS,EACP,gCAAgC,IAChCS,GAAG,2CAA2CA,GAAI;MAClD,GAEDD,QACG,CAAC,cAAAW,KAAA,cAAAA,KAAA,GAEPtC,KAAA,CAAAuC,aAAA;QAAMpB,SAAS,EAAC;MAAoC,GACjDM,WACG,CACP;IACH,CAAC,MAAM;MACLO,OAAO,GACLhC,KAAA,CAAAuC,aAAA,CAACL,OAAO,QACNlC,KAAA,CAAAuC,aAAA,CAAC3B,kBAAkB,CAAC4B,QAAQ;QAC1BC,KAAK,EAAAC,aAAA,CAAAA,aAAA,KAAOzB,kBAAkB;UAAEkB,QAAQ,EAAE;QAAI;MAAG,GAEhDf,KAAK,IACJpB,KAAA,CAAAuC,aAAA,CAAC9B,EAAE;QAACU,SAAS,EAAC;MAA8B,GAC1CnB,KAAA,CAAAuC,aAAA,iBAASnB,KAAc,CACrB,CACL,EACDpB,KAAA,CAAAuC,aAAA,CAAChC,EAAE;QACDY,SAAS,EAAEd,UAAU,CAKnB4B,gBAAgB,EAJhBhB,kBAAkB,CAACmB,MAAM,KAAK,MAAM,IAClC,CAACnB,kBAAkB,CAACkB,QAAQ,IAC5BZ,QAAQ,IACP,oCAAmCA,QAAS,EAEjD;MAAE,GAEDI,QAAQ,GACP3B,KAAA,CAAAuC,aAAA;QACEpB,SAAS,EACP,gCAAgC,IAChCS,GAAG,2CAA2CA,GAAI;MAClD,GAEDD,QACG,CAAC,GAEP3B,KAAA,CAAAuC,aAAA;QAAMpB,SAAS,EAAC;MAAoC,GACjDM,WACG,CAEN,CACuB,CACtB,CACV;IACH;EACF,CAAC,MAAM;IACLO,OAAO,GACLhC,KAAA,CAAAuC,aAAA,CAAC7B,IAAI,EAAAiC,QAAA;MACHd,GAAG,EAAEA,GAAI;MACTV,SAAS,EAAEd,UAAU,CACnB,uBAAuB,EAGvB4B,gBAAgB,EAChBd,SAAS,EAHTG,MAAM,IAAI,+BAA+B,EACzCC,QAAQ,IAAK,oCAAmCA,QAAS,EAG3D;IAAE,GACEV,gBAAgB,CAACG,KAAK,CAAC,GAE1BI,KAAK,IACJpB,KAAA,CAAAuC,aAAA,CAAC5B,SAAS;MACRiC,OAAO,EAAC,QAAQ;MAChBzB,SAAS,EAAC,8BAA8B;MACxC0B,cAAc,EAAEvB,MAAM,GAAG,YAAY,GAAG;IAAW,GAElDF,KACQ,CACZ,EACAO,QAAQ,GACP3B,KAAA,CAAAuC,aAAA;MACEpB,SAAS,EACP,gCAAgC,IAChCS,GAAG,2CAA2CA,GAAI;IAClD,GAEDD,QACG,CAAC,GAEP3B,KAAA,CAAAuC,aAAA;MAAMpB,SAAS,EAAC;IAAoC,GACjDM,WACG,CAEJ,CACP;EACH;EAEA,OACEzB,KAAA,CAAAuC,aAAA,CAACzB,iBAAiB,CAAC0B,QAAQ;IAACC,KAAK,EAAEzB;EAAM,GACtCgB,OACyB,CAAC;AAEjC;AAEA,SAASF,mBAAmBA,CAC1BD,GAAiC,EACjCT,KAAuB,EACvB;EACAjB,SAAS,CAAC,MAAM;IACd,IAAI0B,GAAG,aAAHA,GAAG,eAAHA,GAAG,CAAEiB,OAAO,EAAE;MAChB,IAAI;QACF,MAAMC,OAAO,GAAGlB,GAAG,CAACiB,OAAO,CAACE,sBAAsB;QAElD,IACED,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEE,SAAS,CAACC,QAAQ,CAAC,uBAAuB,CAAC,IACpD,CAACrB,GAAG,CAACiB,OAAO,CAACK,OAAO,CAAC,yBAAyB,CAAC,EAC/C;UACA7C,IAAI,CAAC8C,KAAK,CACR9C,IAAI,EACJ,CACE,4EAA4E,EAC5Ec,KAAK,CACN,CAACiC,MAAM,CAACC,OAAO,CAClB,CAAC;QACH;MACF,CAAC,CAAC,OAAOC,KAAK,EAAE,CAEhB;IACF;EACF,CAAC,EAAE,CAACnC,KAAK,EAAES,GAAG,CAAC,CAAC;AAClB;AAEAd,UAAU,CAACyC,qBAAqB,GAAG,IAAI;AACvC,eAAezC,UAAU"}
+{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","ValueBlockContext","DataContext","pickSpacingProps","ValueBlock","props","summaryListContext","valueBlockContext","dataContext","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","ref","useNotInSummaryList","undefined","prerenderFieldProps","content","compositionClass","Element","isNested","layout","Item","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, { Fragment, useContext, useEffect, useRef } from 'react'\nimport classnames from 'classnames'\nimport { warn } from '../../../shared/helpers'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from './ValueBlockContext'\nimport DataContext from '../DataContext/Context'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  children?: React.ReactNode\n\n  /**\n   * Used internally by the Composition component\n   */\n  composition?: boolean\n\n  /**\n   * Used internally by the Composition component\n   */\n  gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n  const dataContext = useContext(DataContext)\n\n  const {\n    className,\n    label: labelProp,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    gap = 'xx-small',\n  } = props\n\n  const label = inline ? null : labelProp\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  if (\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder) ||\n    dataContext?.prerenderFieldProps\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass =\n    composition &&\n    classnames(\n      `dnb-forms-value-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`\n    )\n\n  if (summaryListContext) {\n    const Element = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = (\n        <span\n          className={classnames(\n            'dnb-forms-value-block__content',\n            gap && `dnb-forms-value-block__content--gap-${gap}`\n          )}\n        >\n          {children}\n        </span>\n      ) ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <Element>\n          <SummaryListContext.Provider\n            value={{ ...summaryListContext, isNested: true }}\n          >\n            {label && (\n              <Dt className=\"dnb-forms-value-block__label\">\n                <strong>{label}</strong>\n              </Dt>\n            )}\n            <Dd\n              className={classnames(\n                summaryListContext.layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              {children ? (\n                <span\n                  className={classnames(\n                    'dnb-forms-value-block__content',\n                    gap && `dnb-forms-value-block__content--gap-${gap}`\n                  )}\n                >\n                  {children}\n                </span>\n              ) : (\n                <span className=\"dnb-forms-value-block__placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </Dd>\n          </SummaryListContext.Provider>\n        </Element>\n      )\n    }\n  } else {\n    content = (\n      <Span\n        ref={ref}\n        className={classnames(\n          'dnb-forms-value-block',\n          inline && 'dnb-forms-value-block--inline',\n          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,\n          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {label && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className=\"dnb-forms-value-block__label\"\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span\n            className={classnames(\n              'dnb-forms-value-block__content',\n              gap && `dnb-forms-value-block__content--gap-${gap}`\n            )}\n          >\n            {children}\n          </span>\n        ) : (\n          <span className=\"dnb-forms-value-block__placeholder\">\n            {placeholder}\n          </span>\n        )}\n      </Span>\n    )\n  }\n\n  return (\n    <ValueBlockContext.Provider value={props}>\n      {content}\n    </ValueBlockContext.Provider>\n  )\n}\n\nfunction useNotInSummaryList(\n  ref: React.RefObject<HTMLElement>,\n  label?: React.ReactNode\n) {\n  useEffect(() => {\n    if (ref?.current) {\n      try {\n        const sibling = ref.current.previousElementSibling\n\n        if (\n          sibling?.classList.contains('dnb-forms-value-block') &&\n          !ref.current.closest('.dnb-forms-summary-list')\n        ) {\n          warn.apply(\n            warn,\n            [\n              'Value components as siblings should be wrapped inside a Value.SummaryList!',\n              label,\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [label, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}

package/es/extensions/forms/Wizard/Container/WizardContainer.d.ts

@@ -3,15 +3,44 @@ import { OnStepChange, StepIndex } from '../Context/WizardContext';
 import { ComponentProps } from '../../types';
 export type Props = ComponentProps & {
     id?: string;
+    /**
+     * The mode of the wizard.
+     */
     mode?: 'static' | 'strict' | 'loose';
+    /**
+     * If set to `true`, the wizard will not scroll to the first step when the user clicks on the next button.
+     */
     omitScrollManagement?: boolean;
+    /**
+     * If set to `true`, the wizard will not focus on the next step when the user clicks on the next button.
+     */
     omitFocusManagement?: boolean;
+    /**
+     * The index of the first step to be rendered.
+     */
     initialActiveIndex?: StepIndex;
+    /**
+     * The callback function that will be called when the user clicks on the next button.
+     */
     onStepChange?: OnStepChange;
-    children: React.ReactNode;
+    /**
+     * The sidebar variant.
+     */
     variant?: 'sidebar' | 'drawer';
-    noAnimation?: boolean;
     sidebarId?: string;
+    /**
+     * If set to `true`, the wizard will not animate the steps.
+     */
+    noAnimation?: boolean;
+    /**
+     * If set to `true`, the wizard pre-render all steps so the props of each field is available in the data context.
+     * Defaults to `true`.
+     */
+    prerenderFieldProps?: boolean;
+    /**
+     * The children of the wizard container.
+     */
+    children: React.ReactNode;
     /**
      * @deprecated Is enabled by default. You can disable it with "omitScrollManagement"
      */