@dnb/eufemia 10.30.2 → 10.32.0

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

@@ -1 +1 @@
-{"version":3,"file":"WizardContainer.js","names":["React","useContext","useCallback","useRef","useReducer","useMemo","classnames","Space","StepIndicator","warn","isAsync","useId","DataContext","Step","WizardContext","Handler","useSharedState","useHandleLayoutEffect","useLayoutEffect","window","useEffect","WizardContainer","props","className","id","idProp","mode","initialActiveIndex","omitScrollManagement","omitFocusManagement","onStepChange","children","noAnimation","variant","sidebarId","rest","_objectWithoutProperties","_excluded","hasContext","setFormState","handleSubmitCall","setShowAllErrors","showAllErrors","setSubmitState","forceUpdate","activeIndexRef","errorOnStepRef","stepElementRef","sharedStateRef","current","undefined","callOnStepChange","index","setFocus","scrollToTop","isInteractionRef","handleLayoutEffect","handleStepChange","_ref","skipErrorCheck","skipStepChangeCall","skipStepChangeCallBeforeMounted","skipStepChangeCallFromHook","skipFieldValidation","enableAsyncBehaviour","onSubmit","_sharedStateRef$curre","_sharedStateRef$curre2","_sharedStateRef$curre3","data","call","result","Error","setActiveIndex","options","_objectSpread","handlePrevious","handleNext","handleChange","_ref2","current_step","setFormError","error","titlesRef","Contents","Children","map","child","isValidElement","_child","_child2","step","type","_step","apply","_child$props$title","push","title","cloneElement","key","activeIndex","totalSteps","length","providerValue","_sharedStateRef$curre4","_sharedStateRef$curre5","extend","createElement","_extends","Provider","value","Sidebar","sidebar_id","bottom","no_animation","on_change","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Container/WizardContainer.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useCallback,\n  useRef,\n  useReducer,\n  useMemo,\n} from 'react'\nimport classnames from 'classnames'\nimport { Space, StepIndicator } from '../../../../components'\nimport { warn } from '../../../../shared/component-helper'\nimport { isAsync } from '../../../../shared/helpers/isAsync'\nimport useId from '../../../../shared/helpers/useId'\nimport DataContext from '../../DataContext/Context'\nimport Step, { Props as StepProps } from '../Step'\nimport WizardContext, {\n  OnStepChange,\n  SetActiveIndexOptions,\n  StepIndex,\n  WizardContextState,\n} from '../Context/WizardContext'\nimport Handler from '../../Form/Handler/Handler'\nimport {\n  SharedStateReturn,\n  useSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport useHandleLayoutEffect from './useHandleLayoutEffect'\nimport { ComponentProps } from '../../types'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  omitScrollManagement?: boolean\n  omitFocusManagement?: boolean\n  initialActiveIndex?: StepIndex\n  onStepChange?: OnStepChange\n  children: React.ReactNode\n  variant?: 'sidebar' | 'drawer'\n  noAnimation?: boolean\n  sidebarId?: string\n\n  /**\n   * @deprecated Is enabled by default. You can disable it with \"omitScrollManagement\"\n   */\n  scrollTopOnStepChange?: boolean\n}\n\nfunction WizardContainer(props: Props) {\n  const {\n    className,\n    id: idProp,\n    mode = 'strict',\n    initialActiveIndex = 0,\n    omitScrollManagement,\n    omitFocusManagement,\n    onStepChange,\n    children,\n    noAnimation = true,\n    variant = 'sidebar',\n    sidebarId,\n    ...rest\n  } = props\n\n  const {\n    hasContext,\n    setFormState,\n    handleSubmitCall,\n    setShowAllErrors,\n    showAllErrors,\n    setSubmitState,\n  } = useContext(DataContext)\n\n  const id = useId(idProp)\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const activeIndexRef = useRef<StepIndex>(initialActiveIndex)\n  const errorOnStepRef = useRef<Record<StepIndex, boolean>>({})\n  const stepElementRef = useRef<HTMLElement>()\n\n  // - Handle shared state\n  const sharedStateRef =\n    useRef<\n      SharedStateReturn<\n        WizardContextState & { onStepChange?: OnStepChange }\n      >\n    >()\n  sharedStateRef.current = useSharedState<WizardContextState>(\n    hasContext && id ? id + '-wizard' : undefined\n  )\n\n  // Store the current state of showAllErrors\n  errorOnStepRef.current[activeIndexRef.current] = showAllErrors\n\n  const callOnStepChange = useCallback(\n    async (index: StepIndex, mode: 'previous' | 'next') => {\n      if (isAsync(onStepChange)) {\n        return await onStepChange(index, mode)\n      }\n\n      return onStepChange?.(index, mode)\n    },\n    [onStepChange]\n  )\n\n  const { setFocus, scrollToTop, isInteractionRef } =\n    useHandleLayoutEffect({ activeIndexRef, stepElementRef })\n\n  const handleLayoutEffect = useCallback(() => {\n    if (!omitFocusManagement) {\n      setFocus()\n    }\n    if (!omitScrollManagement) {\n      scrollToTop()\n    }\n  }, [omitScrollManagement, omitFocusManagement, setFocus, scrollToTop])\n\n  const handleStepChange = useCallback(\n    ({\n      index,\n      skipErrorCheck,\n      skipStepChangeCall,\n      skipStepChangeCallBeforeMounted,\n      skipStepChangeCallFromHook,\n      mode,\n    }: {\n      index: StepIndex\n      mode: 'previous' | 'next'\n    } & SetActiveIndexOptions) => {\n      handleSubmitCall({\n        skipErrorCheck,\n        skipFieldValidation: skipErrorCheck,\n        enableAsyncBehaviour: isAsync(onStepChange),\n        onSubmit: async () => {\n          if (!skipStepChangeCallFromHook) {\n            sharedStateRef.current?.data?.onStepChange?.(index, mode)\n          }\n\n          const result =\n            skipStepChangeCall ||\n            (skipStepChangeCallBeforeMounted && !isInteractionRef.current)\n              ? undefined\n              : await callOnStepChange(index, mode)\n\n          // Hide async indicator\n          setFormState('abort')\n\n          if (!skipErrorCheck) {\n            // Set the showAllErrors to the step we got to\n            setShowAllErrors(errorOnStepRef.current[index])\n          }\n\n          if (!(result instanceof Error)) {\n            handleLayoutEffect()\n\n            activeIndexRef.current = index\n            forceUpdate()\n          }\n\n          return result\n        },\n      })\n    },\n    [\n      callOnStepChange,\n      handleLayoutEffect,\n      handleSubmitCall,\n      isInteractionRef,\n      onStepChange,\n      setFormState,\n      setShowAllErrors,\n    ]\n  )\n\n  const setActiveIndex = useCallback(\n    (index: StepIndex, options?: SetActiveIndexOptions) => {\n      if (index === activeIndexRef.current) {\n        return\n      }\n\n      const mode = index > activeIndexRef.current ? 'next' : 'previous'\n\n      handleStepChange({\n        index,\n        skipErrorCheck: mode === 'previous',\n        mode,\n        ...options,\n      })\n    },\n    [handleStepChange]\n  )\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex(activeIndexRef.current - 1)\n  }, [setActiveIndex])\n\n  const handleNext = useCallback(() => {\n    setActiveIndex(activeIndexRef.current + 1)\n  }, [setActiveIndex])\n\n  const handleChange = useCallback(\n    ({ current_step }) => {\n      setActiveIndex(current_step, { skipErrorCheck: true })\n    },\n    [setActiveIndex]\n  )\n\n  const setFormError = useCallback(\n    (error: Error) => {\n      setSubmitState?.({ error })\n    },\n    [setSubmitState]\n  )\n\n  const titlesRef = useRef([])\n  const Contents = useCallback(() => {\n    titlesRef.current = []\n    return React.Children.map(children, (child, index) => {\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          titlesRef.current.push(child.props.title ?? 'Title missing')\n          return React.cloneElement(\n            child as React.ReactElement<StepProps>,\n            {\n              key: `${index}-${activeIndexRef.current}`,\n              index,\n            }\n          )\n        }\n      }\n\n      return child\n    })\n  }, [children])\n\n  const activeIndex = activeIndexRef.current\n  const totalSteps = titlesRef.current.length\n  const providerValue = useMemo(\n    () => ({\n      id,\n      activeIndex,\n      totalSteps,\n      stepElementRef,\n      setActiveIndex,\n      handlePrevious,\n      handleNext,\n      setFormError,\n    }),\n    [\n      id,\n      activeIndex,\n      totalSteps,\n      setActiveIndex,\n      handlePrevious,\n      handleNext,\n      setFormError,\n    ]\n  )\n\n  // - Handle shared state\n  useLayoutEffect(() => {\n    if (id && hasContext) {\n      sharedStateRef.current?.extend?.(providerValue)\n    }\n  }, [id, providerValue]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!hasContext) {\n    warn('You may wrap Wizard.Container in Form.Handler')\n    return (\n      <Handler>\n        <WizardContainer {...props} id={id} />\n      </Handler>\n    )\n  }\n\n  return (\n    <WizardContext.Provider value={providerValue}>\n      <Space\n        className={classnames(\n          'dnb-forms-wizard-layout',\n          `dnb-forms-wizard-layout--${variant}`,\n          className\n        )}\n        {...rest}\n      >\n        <aside className=\"dnb-forms-wizard-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndexRef.current}\n            data={titlesRef.current}\n            mode={mode}\n            no_animation={noAnimation}\n            on_change={handleChange}\n            sidebar_id={\n              variant === 'drawer' && !sidebarId\n                ? ''\n                : sidebarId\n                ? sidebarId\n                : id\n            }\n          />\n        </aside>\n\n        <div className=\"dnb-forms-wizard-layout__contents\">\n          <Contents />\n        </div>\n      </Space>\n    </WizardContext.Provider>\n  )\n}\n\nWizardContainer._supportsSpacingProps = true\n\nexport default WizardContainer\n"],"mappings":"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"}
+{"version":3,"file":"WizardContainer.js","names":["React","useContext","useCallback","useRef","useReducer","useMemo","ReactDOM","classnames","Space","StepIndicator","warn","isAsync","useId","Step","WizardContext","DataContext","defaultContextState","Handler","useSharedState","useHandleLayoutEffect","useLayoutEffect","window","useEffect","WizardContainer","props","className","id","idProp","mode","initialActiveIndex","omitScrollManagement","omitFocusManagement","onStepChange","children","noAnimation","prerenderFieldProps","variant","sidebarId","rest","_objectWithoutProperties","_excluded","hasContext","setFormState","handleSubmitCall","setShowAllErrors","showAllErrors","setSubmitState","fieldPropsRef","forceUpdate","activeIndexRef","errorOnStepRef","stepElementRef","sharedStateRef","current","undefined","callOnStepChange","index","setFocus","scrollToTop","isInteractionRef","handleLayoutEffect","handleStepChange","_ref","skipErrorCheck","skipStepChangeCall","skipStepChangeCallBeforeMounted","skipStepChangeCallFromHook","skipFieldValidation","enableAsyncBehaviour","onSubmit","_sharedStateRef$curre","_sharedStateRef$curre2","_sharedStateRef$curre3","data","call","result","Error","setActiveIndex","options","_objectSpread","handlePrevious","handleNext","handleChange","_ref2","current_step","setFormError","error","titlesRef","prerenderFieldPropsRef","activeIndex","totalSteps","length","providerValue","_sharedStateRef$curre4","_sharedStateRef$curre5","extend","createElement","_extends","Provider","value","Sidebar","sidebar_id","bottom","no_animation","on_change","Contents","PrerenderFieldPropsOfOtherSteps","_ref3","Children","map","child","isValidElement","_child","_child2","step","type","_step","apply","_child$props$title","push","title","key","clone","cloneElement","document","_ref4","hasRenderedRef","WizardPortal","PrerenderFieldPropsProvider","hidden","Object","values","Fn","i","_ref5","createPortal","body","_ref6","setProps","updateDataValue","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Container/WizardContainer.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useCallback,\n  useRef,\n  useReducer,\n  useMemo,\n} from 'react'\nimport ReactDOM from 'react-dom'\nimport classnames from 'classnames'\nimport { Space, StepIndicator } from '../../../../components'\nimport { warn } from '../../../../shared/component-helper'\nimport { isAsync } from '../../../../shared/helpers/isAsync'\nimport useId from '../../../../shared/helpers/useId'\nimport Step, { Props as StepProps } from '../Step'\nimport WizardContext, {\n  OnStepChange,\n  SetActiveIndexOptions,\n  StepIndex,\n  WizardContextState,\n} from '../Context/WizardContext'\nimport DataContext, {\n  defaultContextState,\n} from '../../DataContext/Context'\nimport Handler from '../../Form/Handler/Handler'\nimport {\n  SharedStateReturn,\n  useSharedState,\n} from '../../../../shared/helpers/useSharedState'\nimport useHandleLayoutEffect from './useHandleLayoutEffect'\nimport { ComponentProps } from '../../types'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = ComponentProps & {\n  id?: string\n\n  /**\n   * The mode of the wizard.\n   */\n  mode?: 'static' | 'strict' | 'loose'\n\n  /**\n   * If set to `true`, the wizard will not scroll to the first step when the user clicks on the next button.\n   */\n  omitScrollManagement?: boolean\n\n  /**\n   * If set to `true`, the wizard will not focus on the next step when the user clicks on the next button.\n   */\n  omitFocusManagement?: boolean\n\n  /**\n   * The index of the first step to be rendered.\n   */\n  initialActiveIndex?: StepIndex\n\n  /**\n   * The callback function that will be called when the user clicks on the next button.\n   */\n  onStepChange?: OnStepChange\n\n  /**\n   * The sidebar variant.\n   */\n  variant?: 'sidebar' | 'drawer'\n  sidebarId?: string\n\n  /**\n   * If set to `true`, the wizard will not animate the steps.\n   */\n  noAnimation?: boolean\n\n  /**\n   * If set to `true`, the wizard pre-render all steps so the props of each field is available in the data context.\n   * Defaults to `true`.\n   */\n  prerenderFieldProps?: boolean\n\n  /**\n   * The children of the wizard container.\n   */\n  children: React.ReactNode\n\n  /**\n   * @deprecated Is enabled by default. You can disable it with \"omitScrollManagement\"\n   */\n  scrollTopOnStepChange?: boolean\n}\n\nfunction WizardContainer(props: Props) {\n  const {\n    className,\n    id: idProp,\n    mode = 'strict',\n    initialActiveIndex = 0,\n    omitScrollManagement,\n    omitFocusManagement,\n    onStepChange,\n    children,\n    noAnimation = true,\n    prerenderFieldProps = true,\n    variant = 'sidebar',\n    sidebarId,\n    ...rest\n  } = props\n\n  const {\n    hasContext,\n    setFormState,\n    handleSubmitCall,\n    setShowAllErrors,\n    showAllErrors,\n    setSubmitState,\n    fieldPropsRef,\n  } = useContext(DataContext)\n\n  const id = useId(idProp)\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const activeIndexRef = useRef<StepIndex>(initialActiveIndex)\n  const errorOnStepRef = useRef<Record<StepIndex, boolean>>({})\n  const stepElementRef = useRef<HTMLElement>()\n\n  // - Handle shared state\n  const sharedStateRef =\n    useRef<\n      SharedStateReturn<\n        WizardContextState & { onStepChange?: OnStepChange }\n      >\n    >()\n  sharedStateRef.current = useSharedState<WizardContextState>(\n    hasContext && id ? id + '-wizard' : undefined\n  )\n\n  // Store the current state of showAllErrors\n  errorOnStepRef.current[activeIndexRef.current] = showAllErrors\n\n  const callOnStepChange = useCallback(\n    async (index: StepIndex, mode: 'previous' | 'next') => {\n      if (isAsync(onStepChange)) {\n        return await onStepChange(index, mode)\n      }\n\n      return onStepChange?.(index, mode)\n    },\n    [onStepChange]\n  )\n\n  const { setFocus, scrollToTop, isInteractionRef } =\n    useHandleLayoutEffect({ activeIndexRef, stepElementRef })\n\n  const handleLayoutEffect = useCallback(() => {\n    if (!omitFocusManagement) {\n      setFocus()\n    }\n    if (!omitScrollManagement) {\n      scrollToTop()\n    }\n  }, [omitScrollManagement, omitFocusManagement, setFocus, scrollToTop])\n\n  const handleStepChange = useCallback(\n    ({\n      index,\n      skipErrorCheck,\n      skipStepChangeCall,\n      skipStepChangeCallBeforeMounted,\n      skipStepChangeCallFromHook,\n      mode,\n    }: {\n      index: StepIndex\n      mode: 'previous' | 'next'\n    } & SetActiveIndexOptions) => {\n      handleSubmitCall({\n        skipErrorCheck,\n        skipFieldValidation: skipErrorCheck,\n        enableAsyncBehaviour: isAsync(onStepChange),\n        onSubmit: async () => {\n          if (!skipStepChangeCallFromHook) {\n            sharedStateRef.current?.data?.onStepChange?.(index, mode)\n          }\n\n          const result =\n            skipStepChangeCall ||\n            (skipStepChangeCallBeforeMounted && !isInteractionRef.current)\n              ? undefined\n              : await callOnStepChange(index, mode)\n\n          // Hide async indicator\n          setFormState('abort')\n\n          if (!skipErrorCheck) {\n            // Set the showAllErrors to the step we got to\n            setShowAllErrors(errorOnStepRef.current[index])\n          }\n\n          if (!(result instanceof Error)) {\n            handleLayoutEffect()\n\n            activeIndexRef.current = index\n            forceUpdate()\n          }\n\n          return result\n        },\n      })\n    },\n    [\n      callOnStepChange,\n      fieldPropsRef,\n      handleLayoutEffect,\n      handleSubmitCall,\n      isInteractionRef,\n      onStepChange,\n      setFormState,\n      setShowAllErrors,\n    ]\n  )\n\n  const setActiveIndex = useCallback(\n    (index: StepIndex, options?: SetActiveIndexOptions) => {\n      if (index === activeIndexRef.current) {\n        return\n      }\n\n      const mode = index > activeIndexRef.current ? 'next' : 'previous'\n\n      handleStepChange({\n        index,\n        skipErrorCheck: mode === 'previous',\n        mode,\n        ...options,\n      })\n    },\n    [handleStepChange]\n  )\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex(activeIndexRef.current - 1)\n  }, [setActiveIndex])\n\n  const handleNext = useCallback(() => {\n    setActiveIndex(activeIndexRef.current + 1)\n  }, [setActiveIndex])\n\n  const handleChange = useCallback(\n    ({ current_step }) => {\n      setActiveIndex(current_step, { skipErrorCheck: true })\n    },\n    [setActiveIndex]\n  )\n\n  const setFormError = useCallback(\n    (error: Error) => {\n      setSubmitState?.({ error })\n    },\n    [setSubmitState]\n  )\n\n  const titlesRef = useRef([])\n  const prerenderFieldPropsRef = useRef<\n    Record<string, () => React.ReactElement>\n  >({})\n\n  const activeIndex = activeIndexRef.current\n  const totalSteps = titlesRef.current.length\n  const providerValue = useMemo(\n    () => ({\n      id,\n      activeIndex,\n      totalSteps,\n      stepElementRef,\n      titlesRef,\n      activeIndexRef,\n      prerenderFieldProps,\n      prerenderFieldPropsRef,\n      setActiveIndex,\n      handlePrevious,\n      handleNext,\n      setFormError,\n    }),\n    [\n      id,\n      activeIndex,\n      totalSteps,\n      prerenderFieldProps,\n      setActiveIndex,\n      handlePrevious,\n      handleNext,\n      setFormError,\n    ]\n  )\n\n  // - Handle shared state\n  useLayoutEffect(() => {\n    if (id && hasContext) {\n      sharedStateRef.current?.extend?.(providerValue)\n    }\n  }, [id, providerValue]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!hasContext) {\n    warn('You may wrap Wizard.Container in Form.Handler')\n    return (\n      <Handler>\n        <WizardContainer {...props} id={id} />\n      </Handler>\n    )\n  }\n\n  return (\n    <WizardContext.Provider value={providerValue}>\n      <Space\n        className={classnames(\n          'dnb-forms-wizard-layout',\n          `dnb-forms-wizard-layout--${variant}`,\n          className\n        )}\n        {...rest}\n      >\n        <aside className=\"dnb-forms-wizard-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndexRef.current}\n            data={titlesRef.current}\n            mode={mode}\n            no_animation={noAnimation}\n            on_change={handleChange}\n            sidebar_id={\n              variant === 'drawer' && !sidebarId\n                ? ''\n                : sidebarId\n                ? sidebarId\n                : id\n            }\n          />\n        </aside>\n\n        <div className=\"dnb-forms-wizard-layout__contents\">\n          <Contents>{children}</Contents>\n        </div>\n      </Space>\n\n      {prerenderFieldProps && (\n        <PrerenderFieldPropsOfOtherSteps\n          prerenderFieldPropsRef={prerenderFieldPropsRef}\n        />\n      )}\n    </WizardContext.Provider>\n  )\n}\n\nfunction Contents({ children }) {\n  const {\n    titlesRef,\n    activeIndexRef,\n    prerenderFieldProps,\n    prerenderFieldPropsRef,\n  } = useContext(WizardContext)\n\n  titlesRef.current = []\n  return React.Children.map(children, (child, index) => {\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        titlesRef.current.push(child.props.title ?? 'Title missing')\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\nfunction 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    <WizardPortal>\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    </WizardPortal>\n  )\n}\n\nfunction WizardPortal({ children }) {\n  if (typeof document !== 'undefined') {\n    return ReactDOM.createPortal(children, document.body)\n  }\n}\n\nfunction PrerenderFieldPropsProvider({ children }) {\n  const { data, setProps, updateDataValue } = useContext(DataContext)\n\n  return (\n    <DataContext.Provider\n      value={{\n        ...defaultContextState,\n\n        // Only update the props and the data value\n        data,\n        setProps,\n        updateDataValue,\n        prerenderFieldProps: true,\n      }}\n    >\n      <WizardContext.Provider value={{ prerenderFieldProps: true }}>\n        {children}\n      </WizardContext.Provider>\n    </DataContext.Provider>\n  )\n}\n\nWizardContainer._supportsSpacingProps = true\n\nexport default WizardContainer\n"],"mappings":"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"}

package/extensions/forms/Wizard/Context/WizardContext.d.ts

@@ -13,6 +13,10 @@ export interface WizardContextState {
     totalSteps?: number;
     activeIndex?: StepIndex;
     stepElementRef?: React.MutableRefObject<HTMLElement>;
+    titlesRef?: React.MutableRefObject<Array<string>>;
+    activeIndexRef?: React.MutableRefObject<StepIndex>;
+    prerenderFieldPropsRef?: React.MutableRefObject<Record<string, () => React.ReactElement>>;
+    prerenderFieldProps?: boolean;
     handlePrevious?: () => void;
     handleNext?: () => void;
     setActiveIndex?: (index: StepIndex, { skipStepChangeCall, skipStepChangeCallBeforeMounted, skipStepChangeCallFromHook, }?: SetActiveIndexOptions) => void;

package/extensions/forms/Wizard/Context/WizardContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContext.js","names":["React","WizardContext","createContext","undefined"],"sources":["../../../../../../src/extensions/forms/Wizard/Context/WizardContext.ts"],"sourcesContent":["import React from 'react'\nimport { EventReturnWithStateObject } from '../../types'\n\nexport type OnStepChange = (\n  index: StepIndex,\n  mode: 'previous' | 'next'\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type StepIndex = number\nexport type SetActiveIndexOptions = {\n  skipStepChangeCall?: boolean\n  skipStepChangeCallBeforeMounted?: boolean\n  skipStepChangeCallFromHook?: boolean\n  skipErrorCheck?: boolean\n}\nexport interface WizardContextState {\n  id?: string\n  totalSteps?: number\n  activeIndex?: StepIndex\n  stepElementRef?: React.MutableRefObject<HTMLElement>\n  handlePrevious?: () => void\n  handleNext?: () => void\n  setActiveIndex?: (\n    index: StepIndex,\n    {\n      skipStepChangeCall,\n      skipStepChangeCallBeforeMounted,\n      skipStepChangeCallFromHook,\n    }?: SetActiveIndexOptions\n  ) => void\n  setFormError?: (error: Error) => void\n}\n\nconst WizardContext = React.createContext<WizardContextState | undefined>(\n  undefined\n)\n\nexport default WizardContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAoCzB,MAAMC,aAAa,GAAGD,KAAK,CAACE,aAAa,CACvCC,SACF,CAAC;AAED,eAAeF,aAAa"}
+{"version":3,"file":"WizardContext.js","names":["React","WizardContext","createContext","undefined"],"sources":["../../../../../../src/extensions/forms/Wizard/Context/WizardContext.ts"],"sourcesContent":["import React from 'react'\nimport { EventReturnWithStateObject } from '../../types'\n\nexport type OnStepChange = (\n  index: StepIndex,\n  mode: 'previous' | 'next'\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type StepIndex = number\nexport type SetActiveIndexOptions = {\n  skipStepChangeCall?: boolean\n  skipStepChangeCallBeforeMounted?: boolean\n  skipStepChangeCallFromHook?: boolean\n  skipErrorCheck?: boolean\n}\nexport interface WizardContextState {\n  id?: string\n  totalSteps?: number\n  activeIndex?: StepIndex\n  stepElementRef?: React.MutableRefObject<HTMLElement>\n  titlesRef?: React.MutableRefObject<Array<string>>\n  activeIndexRef?: React.MutableRefObject<StepIndex>\n  prerenderFieldPropsRef?: React.MutableRefObject<\n    Record<string, () => React.ReactElement>\n  >\n  prerenderFieldProps?: boolean\n  handlePrevious?: () => void\n  handleNext?: () => void\n  setActiveIndex?: (\n    index: StepIndex,\n    {\n      skipStepChangeCall,\n      skipStepChangeCallBeforeMounted,\n      skipStepChangeCallFromHook,\n    }?: SetActiveIndexOptions\n  ) => void\n  setFormError?: (error: Error) => void\n}\n\nconst WizardContext = React.createContext<WizardContextState | undefined>(\n  undefined\n)\n\nexport default WizardContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AA0CzB,MAAMC,aAAa,GAAGD,KAAK,CAACE,aAAa,CACvCC,SACF,CAAC;AAED,eAAeF,aAAa"}

package/extensions/forms/Wizard/Step/Step.d.ts

@@ -11,8 +11,17 @@ export type Props = ComponentProps & FlexContainerProps & {
      * Used internally by the WizardContainer.
      */
     index?: number;
+    /**
+     * Will make all the fields inside the step to be required.
+     */
+    required?: boolean;
+    /**
+     * If set to `true`, the step will always be rendered.
+     * For internal use only.
+     */
+    prerenderFieldProps?: boolean;
 };
-declare function Step(props: Props): import("react/jsx-runtime").JSX.Element;
+declare function Step(props: Props): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
 declare namespace Step {
     var _supportsSpacingProps: boolean;
 }

package/extensions/forms/Wizard/Step/Step.js

@@ -2,18 +2,21 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "title", "index", "children"];
+const _excluded = ["className", "title", "index", "required", "prerenderFieldProps", "children"];
 import React, { useContext, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import WizardContext from '../Context/WizardContext';
 import Flex from '../../../../components/flex/Flex';
 import { convertJsxToString } from '../../../../shared/component-helper';
+import FieldProps from '../../Form/FieldProps';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 function Step(props) {
   const {
       className,
       title,
       index,
+      required,
+      prerenderFieldProps,
       children
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
@@ -22,11 +25,11 @@ function Step(props) {
     stepElementRef
   } = useContext(WizardContext) || {};
   const ariaLabel = useMemo(() => {
-    return convertJsxToString(title);
-  }, [title]);
+    return !prerenderFieldProps && convertJsxToString(title);
+  }, [prerenderFieldProps, title]);
   const currentElementRef = useRef();
   useLayoutEffect(() => {
-    if (typeof stepElementRef !== 'undefined') {
+    if (!prerenderFieldProps && typeof stepElementRef !== 'undefined') {
       if (currentElementRef.current) {
         stepElementRef.current = currentElementRef.current;
       }
@@ -34,17 +37,23 @@ function Step(props) {
         stepElementRef.current = null;
       };
     }
-  }, [stepElementRef]);
+  }, [prerenderFieldProps, stepElementRef]);
+  if (prerenderFieldProps) {
+    return children;
+  }
   if (activeIndex !== index) {
     return null;
   }
+  const fieldProps = typeof required === 'boolean' ? {
+    required
+  } : undefined;
   return React.createElement(Flex.Stack, _extends({
     className: classnames('dnb-forms-step', className),
     element: "section",
     "aria-label": ariaLabel,
     innerRef: currentElementRef,
     tabIndex: -1
-  }, restProps), children);
+  }, restProps), fieldProps ? React.createElement(FieldProps, fieldProps, children) : children);
 }
 Step._supportsSpacingProps = true;
 export default Step;

package/extensions/forms/Wizard/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["React","useContext","useMemo","useRef","classnames","WizardContext","Flex","convertJsxToString","useLayoutEffect","window","useEffect","Step","props","className","title","index","children","restProps","_objectWithoutProperties","_excluded","activeIndex","stepElementRef","ariaLabel","currentElementRef","current","createElement","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/Step.tsx"],"sourcesContent":["import React, { useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport WizardContext from '../Context/WizardContext'\nimport Flex from '../../../../components/flex/Flex'\nimport { convertJsxToString } from '../../../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = ComponentProps &\n  FlexContainerProps & {\n    /**\n     * A title that will be displayed in the indicator.\n     */\n    title?: React.ReactNode\n\n    /**\n     * To determine if the step should be rendered.\n     * Used internally by the WizardContainer.\n     */\n    index?: number\n  }\n\nfunction Step(props: Props) {\n  const { className, title, index, children, ...restProps } = props\n  const { activeIndex, stepElementRef } = useContext(WizardContext) || {}\n\n  const ariaLabel = useMemo(() => {\n    return convertJsxToString(title)\n  }, [title])\n\n  const currentElementRef = useRef<HTMLElement>()\n  useLayoutEffect(() => {\n    if (typeof stepElementRef !== 'undefined') {\n      if (currentElementRef.current) {\n        stepElementRef.current = currentElementRef.current\n      }\n      return () => {\n        stepElementRef.current = null\n      }\n    }\n  }, [stepElementRef])\n\n  if (activeIndex !== index) {\n    // Another step is active\n    return null\n  }\n\n  return (\n    <Flex.Stack\n      className={classnames('dnb-forms-step', className)}\n      element=\"section\"\n      aria-label={ariaLabel}\n      innerRef={currentElementRef}\n      tabIndex={-1}\n      {...restProps}\n    >\n      {children}\n    </Flex.Stack>\n  )\n}\n\nStep._supportsSpacingProps = true\nexport default Step\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC1D,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,IAAI,MAAM,kCAAkC;AACnD,SAASC,kBAAkB,QAAQ,qCAAqC;AAGxE,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGT,KAAK,CAACU,SAAS,GAAGV,KAAK,CAACQ,eAAe;AAgBzE,SAASG,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;MAAEC,SAAS;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAuB,CAAC,GAAGJ,KAAK;IAAnBK,SAAS,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EACjE,MAAM;IAAEC,WAAW;IAAEC;EAAe,CAAC,GAAGpB,UAAU,CAACI,aAAa,CAAC,IAAI,CAAC,CAAC;EAEvE,MAAMiB,SAAS,GAAGpB,OAAO,CAAC,MAAM;IAC9B,OAAOK,kBAAkB,CAACO,KAAK,CAAC;EAClC,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAMS,iBAAiB,GAAGpB,MAAM,CAAc,CAAC;EAC/CK,eAAe,CAAC,MAAM;IACpB,IAAI,OAAOa,cAAc,KAAK,WAAW,EAAE;MACzC,IAAIE,iBAAiB,CAACC,OAAO,EAAE;QAC7BH,cAAc,CAACG,OAAO,GAAGD,iBAAiB,CAACC,OAAO;MACpD;MACA,OAAO,MAAM;QACXH,cAAc,CAACG,OAAO,GAAG,IAAI;MAC/B,CAAC;IACH;EACF,CAAC,EAAE,CAACH,cAAc,CAAC,CAAC;EAEpB,IAAID,WAAW,KAAKL,KAAK,EAAE;IAEzB,OAAO,IAAI;EACb;EAEA,OACEf,KAAA,CAAAyB,aAAA,CAACnB,IAAI,CAACoB,KAAK,EAAAC,QAAA;IACTd,SAAS,EAAET,UAAU,CAAC,gBAAgB,EAAES,SAAS,CAAE;IACnDe,OAAO,EAAC,SAAS;IACjB,cAAYN,SAAU;IACtBO,QAAQ,EAAEN,iBAAkB;IAC5BO,QAAQ,EAAE,CAAC;EAAE,GACTb,SAAS,GAEZD,QACS,CAAC;AAEjB;AAEAL,IAAI,CAACoB,qBAAqB,GAAG,IAAI;AACjC,eAAepB,IAAI"}
+{"version":3,"file":"Step.js","names":["React","useContext","useMemo","useRef","classnames","WizardContext","Flex","convertJsxToString","FieldProps","useLayoutEffect","window","useEffect","Step","props","className","title","index","required","prerenderFieldProps","children","restProps","_objectWithoutProperties","_excluded","activeIndex","stepElementRef","ariaLabel","currentElementRef","current","fieldProps","undefined","createElement","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/Step.tsx"],"sourcesContent":["import React, { useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport WizardContext from '../Context/WizardContext'\nimport Flex from '../../../../components/flex/Flex'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport FieldProps from '../../Form/FieldProps'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = ComponentProps &\n  FlexContainerProps & {\n    /**\n     * A title that will be displayed in the indicator.\n     */\n    title?: React.ReactNode\n\n    /**\n     * To determine if the step should be rendered.\n     * Used internally by the WizardContainer.\n     */\n    index?: number\n\n    /**\n     * Will make all the fields inside the step to be required.\n     */\n    required?: boolean\n\n    /**\n     * If set to `true`, the step will always be rendered.\n     * For internal use only.\n     */\n    prerenderFieldProps?: boolean\n  }\n\nfunction Step(props: Props) {\n  const {\n    className,\n    title,\n    index,\n    required,\n    prerenderFieldProps,\n    children,\n    ...restProps\n  } = props\n  const { activeIndex, stepElementRef } = useContext(WizardContext) || {}\n\n  const ariaLabel = useMemo(() => {\n    return !prerenderFieldProps && convertJsxToString(title)\n  }, [prerenderFieldProps, title])\n\n  const currentElementRef = useRef<HTMLElement>()\n  useLayoutEffect(() => {\n    if (!prerenderFieldProps && typeof stepElementRef !== 'undefined') {\n      if (currentElementRef.current) {\n        stepElementRef.current = currentElementRef.current\n      }\n      return () => {\n        stepElementRef.current = null\n      }\n    }\n  }, [prerenderFieldProps, stepElementRef])\n\n  if (prerenderFieldProps) {\n    return children\n  }\n\n  if (activeIndex !== index) {\n    // Another step is active\n    return null\n  }\n\n  const fieldProps =\n    typeof required === 'boolean' ? { required } : undefined\n\n  return (\n    <Flex.Stack\n      className={classnames('dnb-forms-step', className)}\n      element=\"section\"\n      aria-label={ariaLabel}\n      innerRef={currentElementRef}\n      tabIndex={-1}\n      {...restProps}\n    >\n      {fieldProps ? (\n        <FieldProps {...fieldProps}>{children}</FieldProps>\n      ) : (\n        children\n      )}\n    </Flex.Stack>\n  )\n}\n\nStep._supportsSpacingProps = true\nexport default Step\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC1D,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,IAAI,MAAM,kCAAkC;AACnD,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,OAAOC,UAAU,MAAM,uBAAuB;AAG9C,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGV,KAAK,CAACW,SAAS,GAAGX,KAAK,CAACS,eAAe;AA2BzE,SAASG,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;MACJC,SAAS;MACTC,KAAK;MACLC,KAAK;MACLC,QAAQ;MACRC,mBAAmB;MACnBC;IAEF,CAAC,GAAGN,KAAK;IADJO,SAAS,GAAAC,wBAAA,CACVR,KAAK,EAAAS,SAAA;EACT,MAAM;IAAEC,WAAW;IAAEC;EAAe,CAAC,GAAGvB,UAAU,CAACI,aAAa,CAAC,IAAI,CAAC,CAAC;EAEvE,MAAMoB,SAAS,GAAGvB,OAAO,CAAC,MAAM;IAC9B,OAAO,CAACgB,mBAAmB,IAAIX,kBAAkB,CAACQ,KAAK,CAAC;EAC1D,CAAC,EAAE,CAACG,mBAAmB,EAAEH,KAAK,CAAC,CAAC;EAEhC,MAAMW,iBAAiB,GAAGvB,MAAM,CAAc,CAAC;EAC/CM,eAAe,CAAC,MAAM;IACpB,IAAI,CAACS,mBAAmB,IAAI,OAAOM,cAAc,KAAK,WAAW,EAAE;MACjE,IAAIE,iBAAiB,CAACC,OAAO,EAAE;QAC7BH,cAAc,CAACG,OAAO,GAAGD,iBAAiB,CAACC,OAAO;MACpD;MACA,OAAO,MAAM;QACXH,cAAc,CAACG,OAAO,GAAG,IAAI;MAC/B,CAAC;IACH;EACF,CAAC,EAAE,CAACT,mBAAmB,EAAEM,cAAc,CAAC,CAAC;EAEzC,IAAIN,mBAAmB,EAAE;IACvB,OAAOC,QAAQ;EACjB;EAEA,IAAII,WAAW,KAAKP,KAAK,EAAE;IAEzB,OAAO,IAAI;EACb;EAEA,MAAMY,UAAU,GACd,OAAOX,QAAQ,KAAK,SAAS,GAAG;IAAEA;EAAS,CAAC,GAAGY,SAAS;EAE1D,OACE7B,KAAA,CAAA8B,aAAA,CAACxB,IAAI,CAACyB,KAAK,EAAAC,QAAA;IACTlB,SAAS,EAAEV,UAAU,CAAC,gBAAgB,EAAEU,SAAS,CAAE;IACnDmB,OAAO,EAAC,SAAS;IACjB,cAAYR,SAAU;IACtBS,QAAQ,EAAER,iBAAkB;IAC5BS,QAAQ,EAAE,CAAC;EAAE,GACTf,SAAS,GAEZQ,UAAU,GACT5B,KAAA,CAAA8B,aAAA,CAACtB,UAAU,EAAKoB,UAAU,EAAGT,QAAqB,CAAC,GAEnDA,QAEQ,CAAC;AAEjB;AAEAP,IAAI,CAACwB,qBAAqB,GAAG,IAAI;AACjC,eAAexB,IAAI"}

package/extensions/forms/Wizard/Step/StepDocs.js

@@ -4,6 +4,11 @@ export const StepProperties = {
     type: 'React.Node',
     status: 'optional'
   },
+  required: {
+    doc: 'Will make all nested form fields required.',
+    type: 'boolean',
+    status: 'optional'
+  },
   children: {
     doc: 'Contents.',
     type: 'React.Node',

package/extensions/forms/Wizard/Step/StepDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepDocs.js","names":["StepProperties","title","doc","type","status","children","StepEvents"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/StepDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const StepProperties: PropertiesTableProps = {\n  title: {\n    doc: 'Title of the step.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const StepEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,KAAK,EAAE;IACLC,GAAG,EAAE,oBAAoB;IACzBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,gDAAgD,EAAE;IAChDF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAME,UAAgC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"StepDocs.js","names":["StepProperties","title","doc","type","status","required","children","StepEvents"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/StepDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const StepProperties: PropertiesTableProps = {\n  title: {\n    doc: 'Title of the step.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Will make all nested form fields required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const StepEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,KAAK,EAAE;IACLC,GAAG,EAAE,oBAAoB;IACzBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,gDAAgD,EAAE;IAChDF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMG,UAAgC,GAAG,CAAC,CAAC"}

package/extensions/forms/Wizard/style/dnb-wizard-layout.css

@@ -23,7 +23,6 @@
   outline: none;
 }
 .dnb-forms-wizard-layout__contents .dnb-card {
-  --border-color: var(--color-pistachio);
   max-width: var(--forms-card-max-width);
 }
 .dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx,

package/extensions/forms/Wizard/style/dnb-wizard-layout.min.css

@@ -1 +1 @@
-.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-forms-step{outline:none}.dnb-forms-wizard-layout__contents .dnb-card{--border-color:var(--color-pistachio);max-width:var(--forms-card-max-width)}.dnb-forms-wizard-layout__contents .dnb-forms-button-row>.appear-fx,.dnb-forms-wizard-layout__contents .dnb-forms-step>.appear-fx{--appear-opacity:0;--appear-offset:-0.25rem;animation:appear .6s var(--easing-default) forwards;animation-delay:calc(var(--element-index, 0)*30ms);opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}@keyframes appear{0%{opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}80%{opacity:1}to{opacity:1;transform:translateZ(0)}}@media screen and (min-width:40em){.dnb-forms-wizard-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-wizard-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}@media screen and (min-width:60em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:23rem}}
+.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-forms-step{outline:none}.dnb-forms-wizard-layout__contents .dnb-card{max-width:var(--forms-card-max-width)}.dnb-forms-wizard-layout__contents .dnb-forms-button-row>.appear-fx,.dnb-forms-wizard-layout__contents .dnb-forms-step>.appear-fx{--appear-opacity:0;--appear-offset:-0.25rem;animation:appear .6s var(--easing-default) forwards;animation-delay:calc(var(--element-index, 0)*30ms);opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}@keyframes appear{0%{opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}80%{opacity:1}to{opacity:1;transform:translateZ(0)}}@media screen and (min-width:40em){.dnb-forms-wizard-layout+.dnb-form-status+.dnb-form-status:not([class*=space__left]),.dnb-forms-wizard-layout+.dnb-form-status:not([class*=space__left]){margin-left:var(--spacing-medium)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}@media screen and (min-width:60em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:23rem}}

package/extensions/forms/Wizard/style/dnb-wizard-layout.scss

@@ -24,7 +24,6 @@
     }
 
     .dnb-card {
-      --border-color: var(--color-pistachio);
       max-width: var(--forms-card-max-width);
     }
 

package/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-sbanken.css

@@ -0,0 +1 @@
+/* Sbanken theme */

package/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-sbanken.scss

@@ -0,0 +1 @@
+/* Sbanken theme */

package/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.css

@@ -0,0 +1,3 @@
+.dnb-forms-wizard-layout__contents .dnb-card {
+  --border-color: var(--color-pistachio);
+}

package/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.min.css

@@ -0,0 +1 @@
+.dnb-forms-wizard-layout__contents .dnb-card{--border-color:var(--color-pistachio)}

package/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss

@@ -0,0 +1,7 @@
+.dnb-forms-wizard-layout {
+  &__contents {
+    .dnb-card {
+      --border-color: var(--color-pistachio);
+    }
+  }
+}

package/extensions/forms/hooks/useFieldProps.js

@@ -26,7 +26,7 @@ export default function useFieldProps(localeProps) {
   var _dataContext$props,
     _dataContext$ajvInsta,
     _localErrorRef$curren,
-    _ref2,
+    _ref3,
     _this = this,
     _props$path,
     _props$autoComplete;
@@ -38,7 +38,7 @@ export default function useFieldProps(localeProps) {
     path,
     itemPath,
     emptyValue,
-    required,
+    required: requiredProp,
     disabled: disabledProp,
     info,
     warning,
@@ -103,11 +103,11 @@ export default function useFieldProps(localeProps) {
   } = dataContext !== null && dataContext !== void 0 ? dataContext : {};
   const onChangeContext = dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$props = dataContext.props) === null || _dataContext$props === void 0 ? void 0 : _dataContext$props.onChange;
   const disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : props.readOnly;
-  const dataContextError = path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[path] : undefined;
   const inFieldBlock = Boolean(fieldBlockContext);
   const {
     setFieldState: setFieldStateFieldBlock,
-    showFieldError: showFieldErrorFieldBlock
+    showFieldError: showFieldErrorFieldBlock,
+    mountedFieldsRef: mountedFieldsRefFieldBlock
   } = fieldBlockContext !== null && fieldBlockContext !== void 0 ? fieldBlockContext : {};
   const inIterate = Boolean(iterateElementContext);
   const {
@@ -144,9 +144,32 @@ export default function useFieldProps(localeProps) {
   const valueRef = useRef(externalValue);
   const changedRef = useRef(false);
   const hasFocusRef = useRef(false);
+  const required = useMemo(() => {
+    if (requiredProp) {
+      return requiredProp;
+    }
+    const paths = identifier.split('/');
+    if (paths.length > 0 && (schema || dataContext !== null && dataContext !== void 0 && dataContext.schema)) {
+      const requiredList = [schema === null || schema === void 0 ? void 0 : schema['required']];
+      if (paths.length > 1) {
+        const schema = dataContext.schema;
+        const schemaPath = paths.slice(0, -1).join('/properties/');
+        const schemaPart = pointer.has(schema, schemaPath) ? pointer.get(schema, schemaPath) : schema;
+        requiredList.push(schemaPart === null || schemaPart === void 0 ? void 0 : schemaPart.required);
+      }
+      const collected = requiredList.flatMap(v => v).filter(Boolean);
+      if (collected.includes(paths.at(-1))) {
+        return true;
+      }
+    }
+  }, [dataContext === null || dataContext === void 0 ? void 0 : dataContext.schema, identifier, requiredProp, schema]);
   const showErrorRef = useRef(Boolean(validateInitially || errorProp));
   const errorMethodRef = useRef({});
   const localErrorRef = useRef();
+  const hasLocalErrorRef = useRef(false);
+  const dataContextError = useMemo(() => {
+    return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
+  }, [dataContextErrors, identifier, path]);
   const contextErrorRef = useRef(dataContextError);
   const validatorRef = useRef(validator);
   useUpdateEffect(() => {
@@ -231,18 +254,6 @@ export default function useFieldProps(localeProps) {
     showErrorRef.current = false;
     showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, false);
   }, [showFieldErrorFieldBlock, identifier]);
-  const error = showErrorRef.current || ((_localErrorRef$curren = localErrorRef.current) === null || _localErrorRef$curren === void 0 ? void 0 : _localErrorRef$curren['validationRule']) === 'type' ? (_ref2 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref2 !== void 0 ? _ref2 : contextErrorRef.current : undefined;
-  const hasVisibleError = Boolean(error) || inFieldBlock && fieldBlockContext.hasErrorProp;
-  const hasError = useCallback(() => {
-    var _ref3;
-    return Boolean((_ref3 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref3 !== void 0 ? _ref3 : contextErrorRef.current);
-  }, [errorProp]);
-  const errorMessagesRef = useRef(null);
-  errorMessagesRef.current = useMemo(() => {
-    return _objectSpread({
-      required: translation.Field.errorRequired
-    }, errorMessages);
-  }, [errorMessages, translation.Field.errorRequired]);
   const prepareError = useCallback(error => {
     if (error instanceof FormError) {
       var _error$messageValues;
@@ -257,8 +268,8 @@ export default function useFieldProps(localeProps) {
           message = fieldMessage;
         }
       }
-      const messageWithValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, _ref4) => {
-        let [key, value] = _ref4;
+      const messageWithValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, _ref2) => {
+        let [key, value] = _ref2;
         return message.replace(`{${key}}`, value);
       }, message);
       error.message = messageWithValues;
@@ -266,6 +277,27 @@ export default function useFieldProps(localeProps) {
     }
     return error;
   }, []);
+  contextErrorRef.current = useMemo(() => {
+    if (!dataContextError) {
+      return undefined;
+    }
+    const error = prepareError(dataContextError);
+    if (errorChanged(error, contextErrorRef.current)) {
+      return error;
+    }
+  }, [dataContextError, prepareError]);
+  const error = showErrorRef.current || ((_localErrorRef$curren = localErrorRef.current) === null || _localErrorRef$curren === void 0 ? void 0 : _localErrorRef$curren['validationRule']) === 'type' ? (_ref3 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref3 !== void 0 ? _ref3 : contextErrorRef.current : undefined;
+  const hasVisibleError = Boolean(error) || inFieldBlock && fieldBlockContext.hasErrorProp;
+  const hasError = useCallback(() => {
+    var _ref4;
+    return Boolean((_ref4 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref4 !== void 0 ? _ref4 : contextErrorRef.current);
+  }, [errorProp]);
+  const errorMessagesRef = useRef(null);
+  errorMessagesRef.current = useMemo(() => {
+    return _objectSpread({
+      required: translation.Field.errorRequired
+    }, errorMessages);
+  }, [errorMessages, translation.Field.errorRequired]);
   const stateId = useId();
   const persistErrorState = useCallback(function (method) {
     let errorArg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
@@ -296,6 +328,7 @@ export default function useFieldProps(localeProps) {
   }, [prepareError, setFieldErrorDataContext, identifier, setFieldError, setFieldStateDataContext, setFieldStateFieldBlock, stateId, inFieldBlock, validateInitially]);
   const clearErrorState = useCallback(() => {
     persistErrorState('wipe');
+    hasLocalErrorRef.current = false;
   }, [persistErrorState]);
   const callValidator = useCallback(async () => {
     if (typeof validatorRef.current !== 'function') {
@@ -368,7 +401,7 @@ export default function useFieldProps(localeProps) {
     try {
       const requiredError = transformers.current.validateRequired(value, {
         emptyValue,
-        required,
+        required: requiredProp,
         isChanged: changedRef.current,
         error: new FormError('The value is required', {
           validationRule: 'required'
@@ -393,10 +426,11 @@ export default function useFieldProps(localeProps) {
       validatedValue.current = value;
     } catch (error) {
       if (isProcessActive()) {
+        hasLocalErrorRef.current = true;
         persistErrorState('weak', error);
       }
     }
-  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, required, validateInitially, callValidator, persistErrorState]);
+  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, validateInitially, callValidator, persistErrorState]);
   const handleError = useCallback(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       showError();
@@ -595,7 +629,6 @@ export default function useFieldProps(localeProps) {
   setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
   useMountEffect(() => {
     dataContext === null || dataContext === void 0 ? void 0 : dataContext.handleMountField(identifier);
-    setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
     validateValue();
   });
   useUnmountEffect(() => {
@@ -617,12 +650,18 @@ export default function useFieldProps(localeProps) {
     forceUpdate();
   }, [externalValue, validateValue]);
   useEffect(() => {
-    const error = prepareError(dataContextError);
-    if (errorChanged(error, contextErrorRef.current)) {
-      contextErrorRef.current = error;
-      forceUpdate();
+    if (!hasLocalErrorRef.current) {
+      const error = prepareError(dataContextError);
+      if (error) {
+        persistErrorState('weak', error);
+        if (validateInitially) {
+          handleError();
+        }
+      } else {
+        clearErrorState();
+      }
     }
-  }, [dataContextError, prepareError]);
+  }, [clearErrorState, dataContextError, handleError, persistErrorState, prepareError, validateInitially]);
   useEffect(() => {
     if (path) {
       let value = props.value;
@@ -700,8 +739,8 @@ export default function useFieldProps(localeProps) {
         });
       }
       return () => {
-        if (fieldBlockContext.mountedFieldsRef) {
-          fieldBlockContext.mountedFieldsRef.current[identifier] = true;
+        if (mountedFieldsRefFieldBlock) {
+          mountedFieldsRefFieldBlock.current[identifier] = true;
         }
       };
     }
@@ -719,18 +758,18 @@ export default function useFieldProps(localeProps) {
         acc[cur] = props[cur];
       }
       return acc;
-    }, {});
+    }, _objectSpread({}, props.htmlAttributes));
   }, [props]);
   if (error) {
     htmlAttributes['aria-invalid'] = error ? 'true' : 'false';
   }
   if (required) {
-    htmlAttributes['aria-required'] = required ? 'true' : 'false';
+    htmlAttributes['aria-required'] = 'true';
   }
   if (inFieldBlock) {
     var _fieldBlockContext$fi;
-    if (fieldBlockContext.mountedFieldsRef) {
-      fieldBlockContext.mountedFieldsRef.current[identifier] = true;
+    if (mountedFieldsRefFieldBlock) {
+      mountedFieldsRefFieldBlock.current[identifier] = true;
     }
     const stateIds = (_fieldBlockContext$fi = fieldBlockContext.fieldStateIdsRef) === null || _fieldBlockContext$fi === void 0 ? void 0 : _fieldBlockContext$fi.current;
     if (stateIds) {