@dnb/eufemia 10.65.0 → 10.66.0

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

@@ -1 +1 @@
-{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useMemo","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","ValueBlockContext","DataContext","pickSpacingProps","IterateItemContext","convertJsxToString","VisibilityContext","Visibility","ValueBlock","props","summaryListContext","valueBlockContext","prerenderFieldProps","index","iterateIndex","className","label","labelProp","path","itemPath","labelSrOnly","transformLabel","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","replace","String","transformLabelParameters","ref","useNotInSummaryList","hide","createElement","content","compositionClass","defaultClass","Item","isNested","layout","_span","Provider","value","_objectSpread","VisibilityWrapper","_extends","element","labelDirection","srOnly","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps","_ref","visibilityContext"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, {\n  Fragment,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} 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 { Path, ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport IterateItemContext from '../Iterate/IterateItemContext'\nimport { convertJsxToString } from '../../../shared/component-helper'\nimport VisibilityContext from '../Form/Visibility/VisibilityContext'\nimport Visibility from '../Form/Visibility/Visibility'\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 { prerenderFieldProps } = useContext(DataContext) || {}\n  const { index: iterateIndex } = useContext(IterateItemContext) || {}\n\n  const {\n    className,\n    label: labelProp,\n    path,\n    itemPath,\n    labelSrOnly,\n    transformLabel = (label: Props['label']) => label,\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 = useMemo(() => {\n    if (inline) {\n      return null\n    }\n\n    let label = labelProp\n\n    if (iterateIndex !== undefined) {\n      label = convertJsxToString(labelProp).replace(\n        '{itemNo}',\n        String(iterateIndex + 1)\n      )\n    }\n\n    return transformLabel(label, transformLabelParameters)\n  }, [inline, iterateIndex, labelProp, transformLabel])\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(\n    valueBlockContext?.composition ? null : ref,\n    label,\n    path,\n    itemPath\n  )\n\n  const hide =\n    prerenderFieldProps ||\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder)\n\n  if (hide) {\n    return <></>\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  const defaultClass = classnames(\n    'dnb-forms-value-block__content',\n    `dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}`\n  )\n\n  if (summaryListContext) {\n    const Item = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = <span className={defaultClass}>{children}</span> ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <SummaryListContext.Provider\n          value={{ ...summaryListContext, isNested: true }}\n        >\n          <Item>\n            <Dt\n              className={classnames(\n                'dnb-forms-value-block__label',\n                (!label || labelSrOnly) && 'dnb-sr-only'\n              )}\n            >\n              <VisibilityWrapper>\n                {label && <strong>{label}</strong>}\n              </VisibilityWrapper>\n            </Dt>\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              <VisibilityWrapper>\n                {children ? (\n                  <span className={defaultClass}>{children}</span>\n                ) : (\n                  <span className=\"dnb-forms-value-block__placeholder\">\n                    {placeholder}\n                  </span>\n                )}\n              </VisibilityWrapper>\n            </Dd>\n          </Item>\n        </SummaryListContext.Provider>\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            srOnly={labelSrOnly}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span className={defaultClass}>{children}</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  path?: Path,\n  itemPath?: Path\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, path, itemPath },\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [itemPath, label, path, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n\nconst transformLabelParameters = {\n  convertJsxToString,\n} as unknown as Parameters<Props['transformLabel']>[1]\n\nfunction VisibilityWrapper({ children }) {\n  const visibilityContext = useContext(VisibilityContext)\n\n  if (visibilityContext) {\n    return <Visibility {...visibilityContext.props}>{children}</Visibility>\n  }\n\n  return children\n}\n"],"mappings":"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"}
+{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useMemo","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","ValueBlockContext","DataContext","pickSpacingProps","IterateItemContext","convertJsxToString","VisibilityContext","Visibility","HelpButtonInline","HelpButtonInlineContent","useId","ValueBlock","props","_props$id","summaryListContext","valueBlockContext","prerenderFieldProps","index","iterateIndex","id","forId","className","label","labelProp","path","itemPath","labelSrOnly","transformLabel","inline","maxWidth","composition","placeholder","showEmpty","children","help","layout","gap","undefined","replace","String","transformLabelParameters","ref","useNotInSummaryList","hide","createElement","content","compositionClass","defaultClass","hasHelp","title","Item","isNested","_span","Provider","value","_objectSpread","VisibilityWrapper","contentId","breakout","outset","_extends","element","labelDirection","srOnly","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps","_ref","visibilityContext"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, {\n  Fragment,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} 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 { Path, ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport IterateItemContext from '../Iterate/IterateItemContext'\nimport { convertJsxToString } from '../../../shared/component-helper'\nimport VisibilityContext from '../Form/Visibility/VisibilityContext'\nimport Visibility from '../Form/Visibility/Visibility'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n  HelpProps,\n} from '../../../components/help-button/HelpButtonInline'\nimport useId from '../../../shared/helpers/useId'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  id?: string\n\n  /** The id to link a element with */\n  forId?: string\n\n  /**\n   * Provide help content for the value.\n   */\n  help?: HelpProps\n\n  /**\n   * The layout of the value block.\n   * (Undocumented for now, as there is only one layout option, vertical.)\n   */\n  layout?: 'vertical'\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  children?: React.ReactNode\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n  const { prerenderFieldProps } = useContext(DataContext) || {}\n  const { index: iterateIndex } = useContext(IterateItemContext) || {}\n\n  const id = useId(props.id ?? props.forId)\n\n  const {\n    className,\n    label: labelProp,\n    path,\n    itemPath,\n    labelSrOnly,\n    transformLabel = (label: Props['label']) => label,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    help,\n    layout = 'vertical',\n    gap = 'xx-small',\n  } = props\n\n  const label = useMemo(() => {\n    if (inline) {\n      return null\n    }\n\n    let label = labelProp\n\n    if (iterateIndex !== undefined) {\n      label = convertJsxToString(labelProp).replace(\n        '{itemNo}',\n        String(iterateIndex + 1)\n      )\n    }\n\n    return transformLabel(label, transformLabelParameters)\n  }, [inline, iterateIndex, labelProp, transformLabel])\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(\n    valueBlockContext?.composition ? null : ref,\n    label,\n    path,\n    itemPath\n  )\n\n  const hide =\n    prerenderFieldProps ||\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder)\n\n  if (hide) {\n    return <></>\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  const defaultClass = classnames(\n    'dnb-forms-value-block__content',\n    `dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}`,\n    maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`\n  )\n\n  const hasHelp = help?.title || help?.content\n\n  if (summaryListContext) {\n    const Item = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && !hasHelp && valueBlockContext?.composition) {\n      content = <span className={defaultClass}>{children}</span> ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      const { layout } = summaryListContext\n      content = (\n        <SummaryListContext.Provider\n          value={{ ...summaryListContext, isNested: true }}\n        >\n          <Item>\n            <Dt\n              className={classnames(\n                'dnb-forms-value-block__label',\n                ((!label && !hasHelp) || labelSrOnly) && 'dnb-sr-only'\n              )}\n            >\n              <VisibilityWrapper>\n                {label && <strong>{label}</strong>}\n                {hasHelp && (\n                  <HelpButtonInline contentId={`${id}-help`} help={help} />\n                )}\n              </VisibilityWrapper>\n            </Dt>\n            <Dd\n              className={classnames(\n                layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              <VisibilityWrapper>\n                {hasHelp && (\n                  <HelpButtonInlineContent\n                    contentId={`${id}-help`}\n                    className=\"dnb-forms-value-block__help\"\n                    help={help}\n                    breakout={layout === 'vertical'}\n                    outset={layout === 'vertical'}\n                  />\n                )}\n                {children ? (\n                  <span className={defaultClass}>{children}</span>\n                ) : (\n                  <span className=\"dnb-forms-value-block__placeholder\">\n                    {placeholder}\n                  </span>\n                )}\n              </VisibilityWrapper>\n            </Dd>\n          </Item>\n        </SummaryListContext.Provider>\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          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {(label || hasHelp) && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className={classnames(\n              'dnb-forms-value-block__label',\n              maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`\n            )}\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n            srOnly={labelSrOnly}\n          >\n            <span>\n              {label && (\n                <span className=\"dnb-forms-value-block__label__content\">\n                  {label}\n                </span>\n              )}\n              {hasHelp && (\n                <HelpButtonInline contentId={`${id}-help`} help={help} />\n              )}\n            </span>\n          </FormLabel>\n        )}\n        {hasHelp && (\n          <HelpButtonInlineContent\n            contentId={`${id}-help`}\n            className=\"dnb-forms-value-block__help\"\n            help={help}\n            breakout={layout === 'vertical'}\n            outset={layout === 'vertical'}\n          />\n        )}\n        {children ? (\n          <span className={defaultClass}>{children}</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  path?: Path,\n  itemPath?: Path\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, path, itemPath },\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [itemPath, label, path, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n\nconst transformLabelParameters = {\n  convertJsxToString,\n} as unknown as Parameters<Props['transformLabel']>[1]\n\nfunction VisibilityWrapper({ children }) {\n  const visibilityContext = useContext(VisibilityContext)\n\n  if (visibilityContext) {\n    return <Visibility {...visibilityContext.props}>{children}</Visibility>\n  }\n\n  return children\n}\n"],"mappings":"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"}

package/extensions/forms/ValueBlock/style/dnb-value-block.css

@@ -20,6 +20,9 @@
   display: block;
   font-size: var(--font-size-basis);
 }
+.dnb-forms-value-block:not(.dnb-forms-value-block__composition--horizontal) .dnb-forms-value-block__content {
+  display: block;
+}
 .dnb-forms-value-block--inline:not([class*=__composition]) {
   display: inline-block;
   font-size: inherit;
@@ -27,6 +30,19 @@
 .dnb-forms-value-block__label, .dnb-forms-value-block__label strong {
   font-weight: var(--font-weight-medium);
 }
+.dnb-forms-value-block__label > strong:has(+ .dnb-help-button), .dnb-forms-value-block__label__content:has(+ .dnb-help-button) {
+  margin-right: 0.5rem;
+}
+.dnb-forms-value-block__help {
+  display: flex;
+  flex-flow: column;
+}
+.dnb-forms-value-block__help .dnb-section {
+  margin-bottom: 0.5rem;
+}
+.dnb-forms-value-block__help .dnb-section > .dnb-p--lead {
+  margin-bottom: 0.5rem;
+}
 .dnb-forms-value-block__placeholder {
   color: var(--color-black-80);
 }
@@ -82,6 +98,7 @@
   }
   .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)) {
     --row-gap: var(--spacing-x-small);
+    flex-flow: row wrap;
   }
 }
 .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dd, .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dt, .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content > .dnb-dl, .dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space]) > .dnb-dl {

package/extensions/forms/ValueBlock/style/dnb-value-block.min.css

@@ -1 +1 @@
-.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal)>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dd:empty,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt:empty{display:none}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium);transition:margin-bottom .3s var(--easing-default)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:has(~.dnb-dt:empty~.dnb-dd:empty),.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-none{--column-gap:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25.00625em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal)>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dd:empty,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt:empty{display:none}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium);transition:margin-bottom .3s var(--easing-default)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:has(~.dnb-dt:empty~.dnb-dd:empty),.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block:not(.dnb-forms-value-block__composition--horizontal) .dnb-forms-value-block__content{display:block}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block__label,.dnb-forms-value-block__label strong{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__label>strong:has(+.dnb-help-button),.dnb-forms-value-block__label__content:has(+.dnb-help-button){margin-right:.5rem}.dnb-forms-value-block__help{display:flex;flex-flow:column}.dnb-forms-value-block__help .dnb-section,.dnb-forms-value-block__help .dnb-section>.dnb-p--lead{margin-bottom:.5rem}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-none{--column-gap:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25.00625em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small);flex-flow:row wrap}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}

package/extensions/forms/ValueBlock/style/dnb-value-block.scss

@@ -31,6 +31,10 @@
   display: block;
   font-size: var(--font-size-basis);
 
+  &:not(#{&}__composition--horizontal) &__content {
+    display: block;
+  }
+
   &--inline:not([class*='__composition']) {
     display: inline-block;
     font-size: inherit;
@@ -40,6 +44,25 @@
   &__label strong {
     font-weight: var(--font-weight-medium);
   }
+  &__label {
+    & > strong:has(+ .dnb-help-button),// To support dt > strong 
+    &__content:has(+ .dnb-help-button) {
+      margin-right: 0.5rem;
+    }
+  }
+
+  &__help {
+    display: flex;
+    flex-flow: column;
+
+    .dnb-section {
+      margin-bottom: 0.5rem;
+
+      & > .dnb-p--lead {
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
 
   &__placeholder {
     color: var(--color-black-80);
@@ -94,6 +117,7 @@
     @include allBelow(x-small) {
       &:not(:has(.dnb-forms-value-block__label)) {
         --row-gap: var(--spacing-x-small);
+        flex-flow: row wrap;
       }
       flex-flow: column;
     }

package/extensions/forms/Wizard/Container/DisplaySteps.d.ts

@@ -0,0 +1,7 @@
+export declare function DisplaySteps({ mode, variant, noAnimation, handleChange, sidebarId, }: {
+    mode: any;
+    variant: any;
+    noAnimation: any;
+    handleChange: any;
+    sidebarId: any;
+}): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Wizard/Container/DisplaySteps.js

@@ -0,0 +1,70 @@
+"use client";
+
+import React, { useCallback, useContext, useReducer } from 'react';
+import WizardContext from '../Context';
+import StepIndicator from '../../../../components/StepIndicator';
+import { useTranslation } from '../../hooks';
+export function DisplaySteps(_ref) {
+  let {
+    mode,
+    variant,
+    noAnimation,
+    handleChange,
+    sidebarId
+  } = _ref;
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  const {
+    id,
+    activeIndexRef,
+    stepsRef,
+    updateTitlesRef,
+    hasInvalidStepsState
+  } = useContext(WizardContext) || {};
+  updateTitlesRef.current = () => {
+    forceUpdate();
+  };
+  const translations = useTranslation();
+  const sidebar_id = variant === 'drawer' && !sidebarId ? undefined : sidebarId !== null && sidebarId !== void 0 ? sidebarId : id;
+  const getTriggerStatus = useCallback(() => {
+    if (hasInvalidStepsState(['error'])) {
+      return {
+        status: translations.Step.stepHasError,
+        status_state: 'error'
+      };
+    }
+    if (hasInvalidStepsState(['unknown'])) {
+      return {
+        status: 'Unknown state',
+        status_state: 'warn'
+      };
+    }
+  }, [hasInvalidStepsState, translations.Step.stepHasError]);
+  return React.createElement("aside", {
+    className: "dnb-forms-wizard-layout__indicator"
+  }, React.createElement(StepIndicator.Sidebar, {
+    sidebar_id: sidebar_id
+  }), React.createElement(StepIndicator, {
+    bottom: true,
+    current_step: activeIndexRef.current,
+    data: Object.values(stepsRef.current).map(_ref2 => {
+      let {
+        title,
+        inactive,
+        status,
+        statusState
+      } = _ref2;
+      return {
+        title,
+        inactive,
+        status,
+        status_state: statusState
+      };
+    }),
+    mode: mode,
+    no_animation: noAnimation,
+    on_change: handleChange,
+    sidebar_id: sidebar_id,
+    triggerButtonProps: getTriggerStatus()
+  }));
+}
+//# sourceMappingURL=DisplaySteps.js.map

package/extensions/forms/Wizard/Container/DisplaySteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplaySteps.js","names":["React","useCallback","useContext","useReducer","WizardContext","StepIndicator","useTranslation","DisplaySteps","_ref","mode","variant","noAnimation","handleChange","sidebarId","forceUpdate","id","activeIndexRef","stepsRef","updateTitlesRef","hasInvalidStepsState","current","translations","sidebar_id","undefined","getTriggerStatus","status","Step","stepHasError","status_state","createElement","className","Sidebar","bottom","current_step","data","Object","values","map","_ref2","title","inactive","statusState","no_animation","on_change","triggerButtonProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Container/DisplaySteps.tsx"],"sourcesContent":["import React, { useCallback, useContext, useReducer } from 'react'\nimport WizardContext from '../Context'\nimport StepIndicator from '../../../../components/StepIndicator'\nimport { StepIndicatorItemProps } from '../../../../components/step-indicator/StepIndicatorItem'\nimport { useTranslation } from '../../hooks'\n\nexport function DisplaySteps({\n  mode,\n  variant,\n  noAnimation,\n  handleChange,\n  sidebarId,\n}) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const {\n    id,\n    activeIndexRef,\n    stepsRef,\n    updateTitlesRef,\n    hasInvalidStepsState,\n  } = useContext(WizardContext) || {}\n  updateTitlesRef.current = () => {\n    forceUpdate()\n  }\n  const translations = useTranslation()\n\n  const sidebar_id =\n    variant === 'drawer' && !sidebarId ? undefined : sidebarId ?? id\n\n  const getTriggerStatus = useCallback(() => {\n    if (hasInvalidStepsState(['error'])) {\n      return {\n        status: translations.Step.stepHasError,\n        status_state: 'error',\n      } satisfies Omit<StepIndicatorItemProps, 'title' | 'currentItemNum'>\n    }\n    if (hasInvalidStepsState(['unknown'])) {\n      return {\n        status: 'Unknown state',\n        status_state: 'warn',\n      } satisfies Omit<StepIndicatorItemProps, 'title' | 'currentItemNum'>\n    }\n  }, [hasInvalidStepsState, translations.Step.stepHasError])\n\n  return (\n    <aside className=\"dnb-forms-wizard-layout__indicator\">\n      <StepIndicator.Sidebar sidebar_id={sidebar_id} />\n      <StepIndicator\n        bottom\n        current_step={activeIndexRef.current}\n        data={Object.values(stepsRef.current).map(\n          ({ title, inactive, status, statusState }) =>\n            ({\n              title,\n              inactive,\n              status,\n              status_state: statusState,\n            }) satisfies Omit<StepIndicatorItemProps, 'currentItemNum'>\n        )}\n        mode={mode}\n        no_animation={noAnimation}\n        on_change={handleChange}\n        sidebar_id={sidebar_id}\n        triggerButtonProps={getTriggerStatus()}\n      />\n    </aside>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,UAAU,QAAQ,OAAO;AAClE,OAAOC,aAAa,MAAM,YAAY;AACtC,OAAOC,aAAa,MAAM,sCAAsC;AAEhE,SAASC,cAAc,QAAQ,aAAa;AAE5C,OAAO,SAASC,YAAYA,CAAAC,IAAA,EAMzB;EAAA,IAN0B;IAC3BC,IAAI;IACJC,OAAO;IACPC,WAAW;IACXC,YAAY;IACZC;EACF,CAAC,GAAAL,IAAA;EACC,MAAM,GAAGM,WAAW,CAAC,GAAGX,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAClD,MAAM;IACJY,EAAE;IACFC,cAAc;IACdC,QAAQ;IACRC,eAAe;IACfC;EACF,CAAC,GAAGjB,UAAU,CAACE,aAAa,CAAC,IAAI,CAAC,CAAC;EACnCc,eAAe,CAACE,OAAO,GAAG,MAAM;IAC9BN,WAAW,CAAC,CAAC;EACf,CAAC;EACD,MAAMO,YAAY,GAAGf,cAAc,CAAC,CAAC;EAErC,MAAMgB,UAAU,GACdZ,OAAO,KAAK,QAAQ,IAAI,CAACG,SAAS,GAAGU,SAAS,GAAGV,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIE,EAAE;EAElE,MAAMS,gBAAgB,GAAGvB,WAAW,CAAC,MAAM;IACzC,IAAIkB,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE;MACnC,OAAO;QACLM,MAAM,EAAEJ,YAAY,CAACK,IAAI,CAACC,YAAY;QACtCC,YAAY,EAAE;MAChB,CAAC;IACH;IACA,IAAIT,oBAAoB,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE;MACrC,OAAO;QACLM,MAAM,EAAE,eAAe;QACvBG,YAAY,EAAE;MAChB,CAAC;IACH;EACF,CAAC,EAAE,CAACT,oBAAoB,EAAEE,YAAY,CAACK,IAAI,CAACC,YAAY,CAAC,CAAC;EAE1D,OACE3B,KAAA,CAAA6B,aAAA;IAAOC,SAAS,EAAC;EAAoC,GACnD9B,KAAA,CAAA6B,aAAA,CAACxB,aAAa,CAAC0B,OAAO;IAACT,UAAU,EAAEA;EAAW,CAAE,CAAC,EACjDtB,KAAA,CAAA6B,aAAA,CAACxB,aAAa;IACZ2B,MAAM;IACNC,YAAY,EAAEjB,cAAc,CAACI,OAAQ;IACrCc,IAAI,EAAEC,MAAM,CAACC,MAAM,CAACnB,QAAQ,CAACG,OAAO,CAAC,CAACiB,GAAG,CACvCC,KAAA;MAAA,IAAC;QAAEC,KAAK;QAAEC,QAAQ;QAAEf,MAAM;QAAEgB;MAAY,CAAC,GAAAH,KAAA;MAAA,OACtC;QACCC,KAAK;QACLC,QAAQ;QACRf,MAAM;QACNG,YAAY,EAAEa;MAChB,CAAC;IAAA,CACL,CAAE;IACFhC,IAAI,EAAEA,IAAK;IACXiC,YAAY,EAAE/B,WAAY;IAC1BgC,SAAS,EAAE/B,YAAa;IACxBU,UAAU,EAAEA,UAAW;IACvBsB,kBAAkB,EAAEpB,gBAAgB,CAAC;EAAE,CACxC,CACI,CAAC;AAEZ"}

package/extensions/forms/Wizard/Container/IterateOverSteps.d.ts

@@ -0,0 +1,3 @@
+export declare function IterateOverSteps({ children }: {
+    children: any;
+}): any;

package/extensions/forms/Wizard/Container/IterateOverSteps.js

@@ -0,0 +1,86 @@
+"use client";
+
+import React, { useContext } from 'react';
+import { useTranslation } from '../../hooks';
+import { convertJsxToString } from '../../../../shared/component-helper';
+import WizardContext from '../Context/WizardContext';
+import Step, { handleDeprecatedProps as handleDeprecatedStepProps } from '../Step/Step';
+export function IterateOverSteps(_ref) {
+  let {
+    children
+  } = _ref;
+  const {
+    check,
+    stepsRef,
+    activeIndexRef,
+    totalStepsRef,
+    stepStatusRef,
+    prerenderFieldProps,
+    prerenderFieldPropsRef
+  } = useContext(WizardContext);
+  stepsRef.current = {};
+  let incrementIndex = -1;
+  const translations = useTranslation();
+  const childrenArray = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      var _child, _child2;
+      let step = child;
+      if (((_child = child) === null || _child === void 0 ? void 0 : _child.type) !== Step && typeof child.type === 'function') {
+        var _step;
+        step = child.type.apply(child.type, [child.props]);
+        if (((_step = step) === null || _step === void 0 ? void 0 : _step.type) === Step) {
+          child = step;
+        }
+      }
+      if (((_child2 = child) === null || _child2 === void 0 ? void 0 : _child2.type) === Step) {
+        const {
+          title,
+          inactive,
+          include,
+          includeWhen,
+          id
+        } = handleDeprecatedStepProps(child.props);
+        if (include === false) {
+          return null;
+        }
+        if (includeWhen && !check({
+          visibleWhen: includeWhen
+        })) {
+          return null;
+        }
+        incrementIndex++;
+        const index = incrementIndex;
+        const state = stepStatusRef.current[index];
+        stepsRef.current[index] = {
+          id,
+          title: title !== undefined ? convertJsxToString(title) : 'Title missing',
+          inactive,
+          status: state === 'error' ? translations.Step.stepHasError : state === 'unknown' ? 'Unknown state' : undefined,
+          statusState: state === 'error' ? 'error' : undefined
+        };
+        const key = `${index}-${activeIndexRef.current}`;
+        const clone = props => React.cloneElement(child, props);
+        if (prerenderFieldProps && typeof document !== 'undefined' && index !== activeIndexRef.current && typeof prerenderFieldPropsRef.current['step-' + index] === 'undefined') {
+          prerenderFieldPropsRef.current['step-' + index] = () => clone({
+            key,
+            index,
+            prerenderFieldProps: true
+          });
+        }
+        return clone({
+          key,
+          index
+        });
+      }
+    }
+    return child;
+  });
+  if ((childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.length) === 0) {
+    activeIndexRef.current = 0;
+  } else if ((childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.length) < activeIndexRef.current + 1) {
+    activeIndexRef.current = childrenArray.length - 1;
+  }
+  totalStepsRef.current = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.length;
+  return childrenArray;
+}
+//# sourceMappingURL=IterateOverSteps.js.map

package/extensions/forms/Wizard/Container/IterateOverSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IterateOverSteps.js","names":["React","useContext","useTranslation","convertJsxToString","WizardContext","Step","handleDeprecatedProps","handleDeprecatedStepProps","IterateOverSteps","_ref","children","check","stepsRef","activeIndexRef","totalStepsRef","stepStatusRef","prerenderFieldProps","prerenderFieldPropsRef","current","incrementIndex","translations","childrenArray","Children","map","child","isValidElement","_child","_child2","step","type","_step","apply","props","title","inactive","include","includeWhen","id","visibleWhen","index","state","undefined","status","stepHasError","statusState","key","clone","cloneElement","document","length"],"sources":["../../../../../../src/extensions/forms/Wizard/Container/IterateOverSteps.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { useTranslation } from '../../hooks'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport WizardContext from '../Context/WizardContext'\nimport Step, {\n  Props as StepProps,\n  handleDeprecatedProps as handleDeprecatedStepProps,\n} from '../Step/Step'\n\nexport function IterateOverSteps({ children }) {\n  const {\n    check,\n    stepsRef,\n    activeIndexRef,\n    totalStepsRef,\n    stepStatusRef,\n    prerenderFieldProps,\n    prerenderFieldPropsRef,\n  } = useContext(WizardContext)\n\n  stepsRef.current = {}\n  let incrementIndex = -1\n\n  const translations = useTranslation()\n\n  const childrenArray = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      let step = child\n\n      if (child?.type !== Step && typeof child.type === 'function') {\n        step = child.type.apply(child.type, [\n          child.props,\n        ]) as React.ReactElement\n\n        if (step?.type === Step) {\n          child = step\n        }\n      }\n\n      if (child?.type === Step) {\n        const { title, inactive, include, includeWhen, id } =\n          handleDeprecatedStepProps(child.props)\n\n        if (include === false) {\n          return null\n        }\n\n        if (\n          includeWhen &&\n          !check({\n            visibleWhen: includeWhen,\n          })\n        ) {\n          return null\n        }\n\n        incrementIndex++\n        const index = incrementIndex\n        const state = stepStatusRef.current[index]\n\n        stepsRef.current[index] = {\n          id,\n          title:\n            title !== undefined\n              ? convertJsxToString(title)\n              : 'Title missing',\n          inactive,\n          status:\n            state === 'error'\n              ? translations.Step.stepHasError\n              : state === 'unknown'\n              ? 'Unknown state'\n              : undefined,\n          statusState: state === 'error' ? 'error' : undefined, // undefined shows 'warn' by default\n        }\n        const key = `${index}-${activeIndexRef.current}`\n        const clone = (props) =>\n          React.cloneElement(child as React.ReactElement<StepProps>, props)\n\n        if (\n          prerenderFieldProps &&\n          typeof document !== 'undefined' &&\n          index !== activeIndexRef.current &&\n          typeof prerenderFieldPropsRef.current['step-' + index] ===\n            'undefined'\n        ) {\n          prerenderFieldPropsRef.current['step-' + index] = () =>\n            clone({\n              key,\n              index,\n              prerenderFieldProps: true,\n            })\n        }\n\n        return clone({\n          key,\n          index,\n        })\n      }\n    }\n\n    return child\n  })\n\n  // Ensure we never have a higher index than the available children\n  // else we get a white screen\n  if (childrenArray?.length === 0) {\n    activeIndexRef.current = 0\n  } else if (childrenArray?.length < activeIndexRef.current + 1) {\n    activeIndexRef.current = childrenArray.length - 1\n  }\n\n  totalStepsRef.current = childrenArray?.length\n\n  return childrenArray\n}\n"],"mappings":"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"}

package/extensions/forms/Wizard/Container/PrerenderFieldPropsOfOtherSteps.d.ts

@@ -0,0 +1,4 @@
+import { WizardContextState } from '../Context/WizardContext';
+export declare function PrerenderFieldPropsOfOtherSteps({ prerenderFieldPropsRef, }: {
+    prerenderFieldPropsRef: WizardContextState['prerenderFieldPropsRef'];
+}): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Wizard/Container/PrerenderFieldPropsOfOtherSteps.js

@@ -0,0 +1,57 @@
+"use client";
+
+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, { useContext, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import DataContext, { defaultContextState } from '../../DataContext/Context';
+import WizardContext from '../Context/WizardContext';
+export function PrerenderFieldPropsOfOtherSteps(_ref) {
+  let {
+    prerenderFieldPropsRef
+  } = _ref;
+  const hasRenderedRef = useRef(true);
+  if (!hasRenderedRef.current) {
+    return null;
+  }
+  hasRenderedRef.current = false;
+  return React.createElement(PrerenderPortal, null, React.createElement(PrerenderFieldPropsProvider, null, React.createElement("iframe", {
+    title: "Wizard Prerender",
+    hidden: true
+  }, Object.values(prerenderFieldPropsRef.current).map((Fn, i) => React.createElement(Fn, {
+    key: i
+  })))));
+}
+function PrerenderPortal(_ref2) {
+  let {
+    children
+  } = _ref2;
+  if (typeof document !== 'undefined') {
+    return ReactDOM.createPortal(children, document.body);
+  }
+}
+function PrerenderFieldPropsProvider(_ref3) {
+  let {
+    children
+  } = _ref3;
+  const {
+    data,
+    setFieldInternals,
+    updateDataValue
+  } = useContext(DataContext);
+  return React.createElement(DataContext.Provider, {
+    value: _objectSpread(_objectSpread({}, defaultContextState), {}, {
+      hasContext: true,
+      prerenderFieldProps: true,
+      data,
+      setFieldInternals,
+      updateDataValue
+    })
+  }, React.createElement(WizardContext.Provider, {
+    value: {
+      prerenderFieldProps: true
+    }
+  }, children));
+}
+//# sourceMappingURL=PrerenderFieldPropsOfOtherSteps.js.map

package/extensions/forms/Wizard/Container/PrerenderFieldPropsOfOtherSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrerenderFieldPropsOfOtherSteps.js","names":["React","useContext","useRef","ReactDOM","DataContext","defaultContextState","WizardContext","PrerenderFieldPropsOfOtherSteps","_ref","prerenderFieldPropsRef","hasRenderedRef","current","createElement","PrerenderPortal","PrerenderFieldPropsProvider","title","hidden","Object","values","map","Fn","i","key","_ref2","children","document","createPortal","body","_ref3","data","setFieldInternals","updateDataValue","Provider","value","_objectSpread","hasContext","prerenderFieldProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Container/PrerenderFieldPropsOfOtherSteps.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react'\nimport ReactDOM from 'react-dom'\nimport DataContext, {\n  defaultContextState,\n} from '../../DataContext/Context'\nimport WizardContext, {\n  WizardContextState,\n} from '../Context/WizardContext'\n\nexport function PrerenderFieldPropsOfOtherSteps({\n  prerenderFieldPropsRef,\n}: {\n  prerenderFieldPropsRef: WizardContextState['prerenderFieldPropsRef']\n}) {\n  const hasRenderedRef = useRef(true)\n  if (!hasRenderedRef.current) {\n    return null\n  }\n  hasRenderedRef.current = false\n\n  return (\n    <PrerenderPortal>\n      <PrerenderFieldPropsProvider>\n        <iframe title=\"Wizard Prerender\" hidden>\n          {Object.values(prerenderFieldPropsRef.current).map((Fn, i) => (\n            <Fn key={i} />\n          ))}\n        </iframe>\n      </PrerenderFieldPropsProvider>\n    </PrerenderPortal>\n  )\n}\n\nfunction PrerenderPortal({ children }) {\n  if (typeof document !== 'undefined') {\n    return ReactDOM.createPortal(children, document.body)\n  }\n}\n\nfunction PrerenderFieldPropsProvider({ children }) {\n  const { data, setFieldInternals, updateDataValue } =\n    useContext(DataContext)\n\n  return (\n    <DataContext.Provider\n      value={{\n        ...defaultContextState,\n        hasContext: true,\n        prerenderFieldProps: true,\n\n        // Only enable data and these methods\n        data,\n        setFieldInternals,\n        updateDataValue,\n      }}\n    >\n      <WizardContext.Provider value={{ prerenderFieldProps: true }}>\n        {children}\n      </WizardContext.Provider>\n    </DataContext.Provider>\n  )\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AACjD,OAAOC,QAAQ,MAAM,WAAW;AAChC,OAAOC,WAAW,IAChBC,mBAAmB,QACd,2BAA2B;AAClC,OAAOC,aAAa,MAEb,0BAA0B;AAEjC,OAAO,SAASC,+BAA+BA,CAAAC,IAAA,EAI5C;EAAA,IAJ6C;IAC9CC;EAGF,CAAC,GAAAD,IAAA;EACC,MAAME,cAAc,GAAGR,MAAM,CAAC,IAAI,CAAC;EACnC,IAAI,CAACQ,cAAc,CAACC,OAAO,EAAE;IAC3B,OAAO,IAAI;EACb;EACAD,cAAc,CAACC,OAAO,GAAG,KAAK;EAE9B,OACEX,KAAA,CAAAY,aAAA,CAACC,eAAe,QACdb,KAAA,CAAAY,aAAA,CAACE,2BAA2B,QAC1Bd,KAAA,CAAAY,aAAA;IAAQG,KAAK,EAAC,kBAAkB;IAACC,MAAM;EAAA,GACpCC,MAAM,CAACC,MAAM,CAACT,sBAAsB,CAACE,OAAO,CAAC,CAACQ,GAAG,CAAC,CAACC,EAAE,EAAEC,CAAC,KACvDrB,KAAA,CAAAY,aAAA,CAACQ,EAAE;IAACE,GAAG,EAAED;EAAE,CAAE,CACd,CACK,CACmB,CACd,CAAC;AAEtB;AAEA,SAASR,eAAeA,CAAAU,KAAA,EAAe;EAAA,IAAd;IAAEC;EAAS,CAAC,GAAAD,KAAA;EACnC,IAAI,OAAOE,QAAQ,KAAK,WAAW,EAAE;IACnC,OAAOtB,QAAQ,CAACuB,YAAY,CAACF,QAAQ,EAAEC,QAAQ,CAACE,IAAI,CAAC;EACvD;AACF;AAEA,SAASb,2BAA2BA,CAAAc,KAAA,EAAe;EAAA,IAAd;IAAEJ;EAAS,CAAC,GAAAI,KAAA;EAC/C,MAAM;IAAEC,IAAI;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAChD9B,UAAU,CAACG,WAAW,CAAC;EAEzB,OACEJ,KAAA,CAAAY,aAAA,CAACR,WAAW,CAAC4B,QAAQ;IACnBC,KAAK,EAAAC,aAAA,CAAAA,aAAA,KACA7B,mBAAmB;MACtB8B,UAAU,EAAE,IAAI;MAChBC,mBAAmB,EAAE,IAAI;MAGzBP,IAAI;MACJC,iBAAiB;MACjBC;IAAe;EACf,GAEF/B,KAAA,CAAAY,aAAA,CAACN,aAAa,CAAC0B,QAAQ;IAACC,KAAK,EAAE;MAAEG,mBAAmB,EAAE;IAAK;EAAE,GAC1DZ,QACqB,CACJ,CAAC;AAE3B"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { OnStepChange, StepIndex } from '../Context/WizardContext';
+import type { OnStepChange, StepIndex } from '../Context/types';
 import { ComponentProps } from '../../types';
 export type Props = ComponentProps & {
     id?: string;
@@ -32,11 +32,19 @@ export type Props = ComponentProps & {
      * If set to `true`, the wizard will not animate the steps.
      */
     noAnimation?: boolean;
+    /**
+     * If set to `true`, the wizard will not unmount the steps when navigating back and forth.
+     */
+    keepInDOM?: 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;
+    /**
+     * Determines if and how the validation will be bypassed.
+     */
+    validationMode?: 'bypassOnNavigation';
     /**
      * The children of the wizard container.
      */