@dnb/eufemia 10.30.0 → 10.30.2

package/extensions/forms/ValueBlock/ValueBlock.js

@@ -4,8 +4,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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, { Fragment, useContext } from 'react';
+import React, { Fragment, useContext, useEffect, useRef } from 'react';
 import classnames from 'classnames';
+import { warn } from '../../../shared/helpers';
 import { Dd, Dl, Dt, Span } from '../../../elements';
 import { FormLabel } from '../../../components';
 import SummaryListContext from '../Value/SummaryList/SummaryListContext';
@@ -26,11 +27,13 @@ function ValueBlock(props) {
     gap = 'xx-small'
   } = props;
   const label = inline ? null : labelProp;
+  const ref = useRef(null);
+  useNotInSummaryList(valueBlockContext !== null && valueBlockContext !== void 0 && valueBlockContext.composition ? null : ref, label);
   if ((children === undefined || children === null || children === false) && !showEmpty && !placeholder) {
     return null;
   }
   let content = null;
-  const compositionClass = composition ? `dnb-forms-value-block__composition--${composition === true ? 'horizontal' : composition}` : "";
+  const compositionClass = composition && `dnb-forms-value-block__composition--${composition === true ? 'horizontal' : composition}`;
   if (summaryListContext) {
     const Element = summaryListContext.isNested ? Dl : summaryListContext.layout === 'horizontal' ? Dl.Item : Fragment;
     if (!label && valueBlockContext !== null && valueBlockContext !== void 0 && valueBlockContext.composition) {
@@ -57,6 +60,7 @@ function ValueBlock(props) {
     }
   } else {
     content = React.createElement(Span, _extends({
+      ref: ref,
       className: classnames('dnb-forms-value-block', compositionClass, className, inline && 'dnb-forms-value-block--inline', maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`)
     }, pickSpacingProps(props)), label && React.createElement(FormLabel, {
       element: "strong",
@@ -72,6 +76,18 @@ function ValueBlock(props) {
     value: props
   }, content);
 }
+function useNotInSummaryList(ref, label) {
+  useEffect(() => {
+    if (ref !== null && ref !== void 0 && ref.current) {
+      try {
+        const sibling = ref.current.previousElementSibling;
+        if (sibling !== null && sibling !== void 0 && sibling.classList.contains('dnb-forms-value-block') && !ref.current.closest('.dnb-forms-summary-list')) {
+          warn.apply(warn, ['Value components as siblings should be wrapped inside a Value.SummaryList!', label].filter(Boolean));
+        }
+      } catch (error) {}
+    }
+  }, [label, ref]);
+}
 ValueBlock._supportsSpacingProps = true;
 export default ValueBlock;
 //# sourceMappingURL=ValueBlock.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","classnames","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","pickSpacingProps","ValueBlockContext","ValueBlock","props","summaryListContext","valueBlockContext","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","content","compositionClass","Element","isNested","layout","Item","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, { Fragment, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport ValueBlockContext from './ValueBlockContext'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  children?: React.ReactNode\n\n  /**\n   * Used internally by the Composition component\n   */\n  composition?: boolean\n\n  /**\n   * Used internally by the Composition component\n   */\n  gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n\n  const {\n    className,\n    label: labelProp,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    gap = 'xx-small',\n  } = props\n\n  const label = inline ? null : labelProp\n\n  if (\n    (children === undefined || children === null || children === false) &&\n    !showEmpty &&\n    !placeholder\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass = classnames(\n    composition &&\n      `dnb-forms-value-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`\n  )\n\n  if (summaryListContext) {\n    const Element = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = (\n        <span\n          className={classnames(\n            'dnb-forms-value-block__content',\n            gap && `dnb-forms-value-block__content--gap-${gap}`\n          )}\n        >\n          {children}\n        </span>\n      ) ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <Element>\n          <SummaryListContext.Provider\n            value={{ ...summaryListContext, isNested: true }}\n          >\n            {label && (\n              <Dt className=\"dnb-forms-value-block__label\">\n                <strong>{label}</strong>\n              </Dt>\n            )}\n            <Dd\n              className={classnames(\n                summaryListContext.layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              {children ? (\n                <span\n                  className={classnames(\n                    'dnb-forms-value-block__content',\n                    gap && `dnb-forms-value-block__content--gap-${gap}`\n                  )}\n                >\n                  {children}\n                </span>\n              ) : (\n                <span className=\"dnb-forms-value-block__placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </Dd>\n          </SummaryListContext.Provider>\n        </Element>\n      )\n    }\n  } else {\n    content = (\n      <Span\n        className={classnames(\n          'dnb-forms-value-block',\n          inline && 'dnb-forms-value-block--inline',\n          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,\n          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {label && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className=\"dnb-forms-value-block__label\"\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span\n            className={classnames(\n              'dnb-forms-value-block__content',\n              gap && `dnb-forms-value-block__content--gap-${gap}`\n            )}\n          >\n            {children}\n          </span>\n        ) : (\n          <span className=\"dnb-forms-value-block__placeholder\">\n            {placeholder}\n          </span>\n        )}\n      </Span>\n    )\n  }\n\n  return (\n    <ValueBlockContext.Provider value={props}>\n      {content}\n    </ValueBlockContext.Provider>\n  )\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}
+{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","pickSpacingProps","ValueBlockContext","ValueBlock","props","summaryListContext","valueBlockContext","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","ref","useNotInSummaryList","undefined","content","compositionClass","Element","isNested","layout","Item","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, { Fragment, useContext, useEffect, useRef } from 'react'\nimport classnames from 'classnames'\nimport { warn } from '../../../shared/helpers'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport ValueBlockContext from './ValueBlockContext'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  children?: React.ReactNode\n\n  /**\n   * Used internally by the Composition component\n   */\n  composition?: boolean\n\n  /**\n   * Used internally by the Composition component\n   */\n  gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n\n  const {\n    className,\n    label: labelProp,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    gap = 'xx-small',\n  } = props\n\n  const label = inline ? null : labelProp\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  if (\n    (children === undefined || children === null || children === false) &&\n    !showEmpty &&\n    !placeholder\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass =\n    composition &&\n    classnames(\n      `dnb-forms-value-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`\n    )\n\n  if (summaryListContext) {\n    const Element = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = (\n        <span\n          className={classnames(\n            'dnb-forms-value-block__content',\n            gap && `dnb-forms-value-block__content--gap-${gap}`\n          )}\n        >\n          {children}\n        </span>\n      ) ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <Element>\n          <SummaryListContext.Provider\n            value={{ ...summaryListContext, isNested: true }}\n          >\n            {label && (\n              <Dt className=\"dnb-forms-value-block__label\">\n                <strong>{label}</strong>\n              </Dt>\n            )}\n            <Dd\n              className={classnames(\n                summaryListContext.layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              {children ? (\n                <span\n                  className={classnames(\n                    'dnb-forms-value-block__content',\n                    gap && `dnb-forms-value-block__content--gap-${gap}`\n                  )}\n                >\n                  {children}\n                </span>\n              ) : (\n                <span className=\"dnb-forms-value-block__placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </Dd>\n          </SummaryListContext.Provider>\n        </Element>\n      )\n    }\n  } else {\n    content = (\n      <Span\n        ref={ref}\n        className={classnames(\n          'dnb-forms-value-block',\n          inline && 'dnb-forms-value-block--inline',\n          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,\n          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {label && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className=\"dnb-forms-value-block__label\"\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span\n            className={classnames(\n              'dnb-forms-value-block__content',\n              gap && `dnb-forms-value-block__content--gap-${gap}`\n            )}\n          >\n            {children}\n          </span>\n        ) : (\n          <span className=\"dnb-forms-value-block__placeholder\">\n            {placeholder}\n          </span>\n        )}\n      </Span>\n    )\n  }\n\n  return (\n    <ValueBlockContext.Provider value={props}>\n      {content}\n    </ValueBlockContext.Provider>\n  )\n}\n\nfunction useNotInSummaryList(\n  ref: React.RefObject<HTMLElement>,\n  label?: React.ReactNode\n) {\n  useEffect(() => {\n    if (ref?.current) {\n      try {\n        const sibling = ref.current.previousElementSibling\n\n        if (\n          sibling?.classList.contains('dnb-forms-value-block') &&\n          !ref.current.closest('.dnb-forms-summary-list')\n        ) {\n          warn.apply(\n            warn,\n            [\n              'Value components as siblings should be wrapped inside a Value.SummaryList!',\n              label,\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [label, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}

package/extensions/forms/Wizard/hooks/useNextRouter.js

@@ -1,12 +1,14 @@
 import React, { useCallback } from 'react';
 import useStep from './useStep';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
-export default function useNextRouter(id, _ref) {
+export default function useNextRouter() {
+  let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let {
     useRouter,
     usePathname,
     useSearchParams
-  } = _ref;
+  } = arguments.length > 1 ? arguments[1] : undefined;
+  const name = id ? `${id}-step` : 'step';
   const {
     setFormError
   } = useStep(id);
@@ -16,18 +18,18 @@ export default function useNextRouter(id, _ref) {
   const onStepChange = useCallback(index => {
     try {
       const params = new URLSearchParams(searchParams.toString());
-      params.set(`${id}-step`, String(index));
+      params.set(name, String(index));
       router.push(`${pathname}?${params.toString()}`);
     } catch (error) {
       setFormError(error);
     }
-  }, [id, pathname, router, searchParams, setFormError]);
+  }, [name, pathname, router, searchParams, setFormError]);
   const {
     setActiveIndex
   } = useStep(id, {
     onStepChange
   });
-  const getIndex = useCallback(() => parseFloat(searchParams.get(`${id}-step`)), [id, searchParams]);
+  const getIndex = useCallback(() => parseFloat(searchParams.get(name)), [name, searchParams]);
   useLayoutEffect(() => {
     const routerIndex = getIndex();
     if (!isNaN(routerIndex)) {

package/extensions/forms/Wizard/hooks/useNextRouter.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNextRouter.js","names":["React","useCallback","useStep","useLayoutEffect","window","useEffect","useNextRouter","id","_ref","useRouter","usePathname","useSearchParams","setFormError","router","pathname","searchParams","onStepChange","index","params","URLSearchParams","toString","set","String","push","error","setActiveIndex","getIndex","parseFloat","get","routerIndex","isNaN","skipStepChangeCallFromHook","skipStepChangeCallBeforeMounted"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useNextRouter.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport useStep from './useStep'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useNextRouter(\n  id: string,\n  { useRouter, usePathname, useSearchParams }\n) {\n  const { setFormError } = useStep(id)\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n\n  const onStepChange = useCallback(\n    (index: number) => {\n      try {\n        const params = new URLSearchParams(searchParams.toString())\n        params.set(`${id}-step`, String(index))\n        router.push(`${pathname}?${params.toString()}`)\n      } catch (error) {\n        setFormError(error)\n      }\n    },\n    [id, pathname, router, searchParams, setFormError]\n  )\n\n  const { setActiveIndex } = useStep(id, { onStepChange })\n\n  const getIndex = useCallback(\n    () => parseFloat(searchParams.get(`${id}-step`)),\n    [id, searchParams]\n  )\n\n  useLayoutEffect(() => {\n    const routerIndex = getIndex()\n    if (!isNaN(routerIndex)) {\n      setActiveIndex(routerIndex, {\n        skipStepChangeCallFromHook: true,\n        skipStepChangeCallBeforeMounted: true,\n      })\n    }\n  }, [getIndex, id, searchParams, setActiveIndex, setFormError])\n\n  return { getIndex }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,OAAO,MAAM,WAAW;AAG/B,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGJ,KAAK,CAACK,SAAS,GAAGL,KAAK,CAACG,eAAe;AAEzE,eAAe,SAASG,aAAaA,CACnCC,EAAU,EAAAC,IAAA,EAEV;EAAA,IADA;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAgB,CAAC,GAAAH,IAAA;EAE3C,MAAM;IAAEI;EAAa,CAAC,GAAGV,OAAO,CAACK,EAAE,CAAC;EACpC,MAAMM,MAAM,GAAGJ,SAAS,CAAC,CAAC;EAC1B,MAAMK,QAAQ,GAAGJ,WAAW,CAAC,CAAC;EAC9B,MAAMK,YAAY,GAAGJ,eAAe,CAAC,CAAC;EAEtC,MAAMK,YAAY,GAAGf,WAAW,CAC7BgB,KAAa,IAAK;IACjB,IAAI;MACF,MAAMC,MAAM,GAAG,IAAIC,eAAe,CAACJ,YAAY,CAACK,QAAQ,CAAC,CAAC,CAAC;MAC3DF,MAAM,CAACG,GAAG,CAAE,GAAEd,EAAG,OAAM,EAAEe,MAAM,CAACL,KAAK,CAAC,CAAC;MACvCJ,MAAM,CAACU,IAAI,CAAE,GAAET,QAAS,IAAGI,MAAM,CAACE,QAAQ,CAAC,CAAE,EAAC,CAAC;IACjD,CAAC,CAAC,OAAOI,KAAK,EAAE;MACdZ,YAAY,CAACY,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACjB,EAAE,EAAEO,QAAQ,EAAED,MAAM,EAAEE,YAAY,EAAEH,YAAY,CACnD,CAAC;EAED,MAAM;IAAEa;EAAe,CAAC,GAAGvB,OAAO,CAACK,EAAE,EAAE;IAAES;EAAa,CAAC,CAAC;EAExD,MAAMU,QAAQ,GAAGzB,WAAW,CAC1B,MAAM0B,UAAU,CAACZ,YAAY,CAACa,GAAG,CAAE,GAAErB,EAAG,OAAM,CAAC,CAAC,EAChD,CAACA,EAAE,EAAEQ,YAAY,CACnB,CAAC;EAEDZ,eAAe,CAAC,MAAM;IACpB,MAAM0B,WAAW,GAAGH,QAAQ,CAAC,CAAC;IAC9B,IAAI,CAACI,KAAK,CAACD,WAAW,CAAC,EAAE;MACvBJ,cAAc,CAACI,WAAW,EAAE;QAC1BE,0BAA0B,EAAE,IAAI;QAChCC,+BAA+B,EAAE;MACnC,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACN,QAAQ,EAAEnB,EAAE,EAAEQ,YAAY,EAAEU,cAAc,EAAEb,YAAY,CAAC,CAAC;EAE9D,OAAO;IAAEc;EAAS,CAAC;AACrB"}
+{"version":3,"file":"useNextRouter.js","names":["React","useCallback","useStep","useLayoutEffect","window","useEffect","useNextRouter","id","arguments","length","undefined","useRouter","usePathname","useSearchParams","name","setFormError","router","pathname","searchParams","onStepChange","index","params","URLSearchParams","toString","set","String","push","error","setActiveIndex","getIndex","parseFloat","get","routerIndex","isNaN","skipStepChangeCallFromHook","skipStepChangeCallBeforeMounted"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useNextRouter.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport useStep from './useStep'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useNextRouter(\n  id: string = null,\n  { useRouter, usePathname, useSearchParams }\n) {\n  const name = id ? `${id}-step` : 'step'\n  const { setFormError } = useStep(id)\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n\n  const onStepChange = useCallback(\n    (index: number) => {\n      try {\n        const params = new URLSearchParams(searchParams.toString())\n        params.set(name, String(index))\n        router.push(`${pathname}?${params.toString()}`)\n      } catch (error) {\n        setFormError(error)\n      }\n    },\n    [name, pathname, router, searchParams, setFormError]\n  )\n\n  const { setActiveIndex } = useStep(id, { onStepChange })\n\n  const getIndex = useCallback(\n    () => parseFloat(searchParams.get(name)),\n    [name, searchParams]\n  )\n\n  useLayoutEffect(() => {\n    const routerIndex = getIndex()\n    if (!isNaN(routerIndex)) {\n      setActiveIndex(routerIndex, {\n        skipStepChangeCallFromHook: true,\n        skipStepChangeCallBeforeMounted: true,\n      })\n    }\n  }, [getIndex, id, searchParams, setActiveIndex, setFormError])\n\n  return { getIndex }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,OAAO,MAAM,WAAW;AAG/B,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGJ,KAAK,CAACK,SAAS,GAAGL,KAAK,CAACG,eAAe;AAEzE,eAAe,SAASG,aAAaA,CAAA,EAGnC;EAAA,IAFAC,EAAU,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAAA,IACjB;IAAEG,SAAS;IAAEC,WAAW;IAAEC;EAAgB,CAAC,GAAAL,SAAA,CAAAC,MAAA,OAAAD,SAAA,MAAAE,SAAA;EAE3C,MAAMI,IAAI,GAAGP,EAAE,GAAI,GAAEA,EAAG,OAAM,GAAG,MAAM;EACvC,MAAM;IAAEQ;EAAa,CAAC,GAAGb,OAAO,CAACK,EAAE,CAAC;EACpC,MAAMS,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B,MAAMM,QAAQ,GAAGL,WAAW,CAAC,CAAC;EAC9B,MAAMM,YAAY,GAAGL,eAAe,CAAC,CAAC;EAEtC,MAAMM,YAAY,GAAGlB,WAAW,CAC7BmB,KAAa,IAAK;IACjB,IAAI;MACF,MAAMC,MAAM,GAAG,IAAIC,eAAe,CAACJ,YAAY,CAACK,QAAQ,CAAC,CAAC,CAAC;MAC3DF,MAAM,CAACG,GAAG,CAACV,IAAI,EAAEW,MAAM,CAACL,KAAK,CAAC,CAAC;MAC/BJ,MAAM,CAACU,IAAI,CAAE,GAAET,QAAS,IAAGI,MAAM,CAACE,QAAQ,CAAC,CAAE,EAAC,CAAC;IACjD,CAAC,CAAC,OAAOI,KAAK,EAAE;MACdZ,YAAY,CAACY,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACb,IAAI,EAAEG,QAAQ,EAAED,MAAM,EAAEE,YAAY,EAAEH,YAAY,CACrD,CAAC;EAED,MAAM;IAAEa;EAAe,CAAC,GAAG1B,OAAO,CAACK,EAAE,EAAE;IAAEY;EAAa,CAAC,CAAC;EAExD,MAAMU,QAAQ,GAAG5B,WAAW,CAC1B,MAAM6B,UAAU,CAACZ,YAAY,CAACa,GAAG,CAACjB,IAAI,CAAC,CAAC,EACxC,CAACA,IAAI,EAAEI,YAAY,CACrB,CAAC;EAEDf,eAAe,CAAC,MAAM;IACpB,MAAM6B,WAAW,GAAGH,QAAQ,CAAC,CAAC;IAC9B,IAAI,CAACI,KAAK,CAACD,WAAW,CAAC,EAAE;MACvBJ,cAAc,CAACI,WAAW,EAAE;QAC1BE,0BAA0B,EAAE,IAAI;QAChCC,+BAA+B,EAAE;MACnC,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACN,QAAQ,EAAEtB,EAAE,EAAEW,YAAY,EAAEU,cAAc,EAAEb,YAAY,CAAC,CAAC;EAE9D,OAAO;IAAEc;EAAS,CAAC;AACrB"}

package/extensions/forms/Wizard/hooks/useQueryLocator.d.ts

@@ -1,3 +1,3 @@
-export default function useQueryLocator(id: string): {
+export default function useQueryLocator(id?: string): {
     getIndex: () => number;
 };

package/extensions/forms/Wizard/hooks/useQueryLocator.js

@@ -1,19 +1,21 @@
 import React, { useCallback } from 'react';
 import useStep from './useStep';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
-export default function useQueryLocator(id) {
+export default function useQueryLocator() {
+  let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
   const {
     setFormError
   } = useStep(id);
+  const name = id ? `${id}-step` : 'step';
   const onStepChange = useCallback(index => {
     try {
       const url = new URL(window.location.href);
-      url.searchParams.set(`${id}-step`, String(index));
+      url.searchParams.set(name, String(index));
       window.history.pushState({}, '', url.toString());
     } catch (error) {
       setFormError(error);
     }
-  }, [id, setFormError]);
+  }, [name, setFormError]);
   const {
     setActiveIndex
   } = useStep(id, {
@@ -22,11 +24,11 @@ export default function useQueryLocator(id) {
   const getIndex = useCallback(() => {
     try {
       const searchParams = new URLSearchParams(window.location.search);
-      return parseFloat(searchParams.get(`${id}-step`));
+      return parseFloat(searchParams.get(name));
     } catch (error) {
       setFormError(error);
     }
-  }, [id, setFormError]);
+  }, [name, setFormError]);
   useLayoutEffect(() => {
     try {
       const popstateListener = () => {

package/extensions/forms/Wizard/hooks/useQueryLocator.js.map

@@ -1 +1 @@
-{"version":3,"file":"useQueryLocator.js","names":["React","useCallback","useStep","useLayoutEffect","window","useEffect","useQueryLocator","id","setFormError","onStepChange","index","url","URL","location","href","searchParams","set","String","history","pushState","toString","error","setActiveIndex","getIndex","URLSearchParams","search","parseFloat","get","popstateListener","routerIndex","isNaN","skipStepChangeCallFromHook","skipStepChangeCallBeforeMounted","addEventListener","removeEventListener"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useQueryLocator.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport useStep from './useStep'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useQueryLocator(id: string) {\n  const { setFormError } = useStep(id)\n\n  const onStepChange = useCallback(\n    (index: number) => {\n      try {\n        const url = new URL(window.location.href)\n        url.searchParams.set(`${id}-step`, String(index))\n        window.history.pushState({}, '', url.toString())\n      } catch (error) {\n        setFormError(error)\n      }\n    },\n    [id, setFormError]\n  )\n\n  const { setActiveIndex } = useStep(id, { onStepChange })\n\n  const getIndex = useCallback(() => {\n    try {\n      const searchParams = new URLSearchParams(window.location.search)\n      return parseFloat(searchParams.get(`${id}-step`))\n    } catch (error) {\n      setFormError(error)\n    }\n  }, [id, setFormError])\n\n  useLayoutEffect(() => {\n    try {\n      const popstateListener = () => {\n        const routerIndex = getIndex()\n        if (!isNaN(routerIndex)) {\n          setActiveIndex(routerIndex, {\n            skipStepChangeCallFromHook: true,\n            skipStepChangeCallBeforeMounted: true,\n          })\n        }\n      }\n\n      // Initial setup call\n      popstateListener()\n\n      window.addEventListener('popstate', popstateListener)\n      return () => window.removeEventListener('popstate', popstateListener)\n    } catch (error) {\n      setFormError(error)\n    }\n  }, [getIndex, id, setActiveIndex, setFormError])\n\n  return { getIndex }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,OAAO,MAAM,WAAW;AAG/B,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGJ,KAAK,CAACK,SAAS,GAAGL,KAAK,CAACG,eAAe;AAEzE,eAAe,SAASG,eAAeA,CAACC,EAAU,EAAE;EAClD,MAAM;IAAEC;EAAa,CAAC,GAAGN,OAAO,CAACK,EAAE,CAAC;EAEpC,MAAME,YAAY,GAAGR,WAAW,CAC7BS,KAAa,IAAK;IACjB,IAAI;MACF,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAACR,MAAM,CAACS,QAAQ,CAACC,IAAI,CAAC;MACzCH,GAAG,CAACI,YAAY,CAACC,GAAG,CAAE,GAAET,EAAG,OAAM,EAAEU,MAAM,CAACP,KAAK,CAAC,CAAC;MACjDN,MAAM,CAACc,OAAO,CAACC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAER,GAAG,CAACS,QAAQ,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdb,YAAY,CAACa,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACd,EAAE,EAAEC,YAAY,CACnB,CAAC;EAED,MAAM;IAAEc;EAAe,CAAC,GAAGpB,OAAO,CAACK,EAAE,EAAE;IAAEE;EAAa,CAAC,CAAC;EAExD,MAAMc,QAAQ,GAAGtB,WAAW,CAAC,MAAM;IACjC,IAAI;MACF,MAAMc,YAAY,GAAG,IAAIS,eAAe,CAACpB,MAAM,CAACS,QAAQ,CAACY,MAAM,CAAC;MAChE,OAAOC,UAAU,CAACX,YAAY,CAACY,GAAG,CAAE,GAAEpB,EAAG,OAAM,CAAC,CAAC;IACnD,CAAC,CAAC,OAAOc,KAAK,EAAE;MACdb,YAAY,CAACa,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACd,EAAE,EAAEC,YAAY,CAAC,CAAC;EAEtBL,eAAe,CAAC,MAAM;IACpB,IAAI;MACF,MAAMyB,gBAAgB,GAAGA,CAAA,KAAM;QAC7B,MAAMC,WAAW,GAAGN,QAAQ,CAAC,CAAC;QAC9B,IAAI,CAACO,KAAK,CAACD,WAAW,CAAC,EAAE;UACvBP,cAAc,CAACO,WAAW,EAAE;YAC1BE,0BAA0B,EAAE,IAAI;YAChCC,+BAA+B,EAAE;UACnC,CAAC,CAAC;QACJ;MACF,CAAC;MAGDJ,gBAAgB,CAAC,CAAC;MAElBxB,MAAM,CAAC6B,gBAAgB,CAAC,UAAU,EAAEL,gBAAgB,CAAC;MACrD,OAAO,MAAMxB,MAAM,CAAC8B,mBAAmB,CAAC,UAAU,EAAEN,gBAAgB,CAAC;IACvE,CAAC,CAAC,OAAOP,KAAK,EAAE;MACdb,YAAY,CAACa,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACE,QAAQ,EAAEhB,EAAE,EAAEe,cAAc,EAAEd,YAAY,CAAC,CAAC;EAEhD,OAAO;IAAEe;EAAS,CAAC;AACrB"}
+{"version":3,"file":"useQueryLocator.js","names":["React","useCallback","useStep","useLayoutEffect","window","useEffect","useQueryLocator","id","arguments","length","undefined","setFormError","name","onStepChange","index","url","URL","location","href","searchParams","set","String","history","pushState","toString","error","setActiveIndex","getIndex","URLSearchParams","search","parseFloat","get","popstateListener","routerIndex","isNaN","skipStepChangeCallFromHook","skipStepChangeCallBeforeMounted","addEventListener","removeEventListener"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useQueryLocator.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport useStep from './useStep'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useQueryLocator(id: string = undefined) {\n  const { setFormError } = useStep(id)\n  const name = id ? `${id}-step` : 'step'\n\n  const onStepChange = useCallback(\n    (index: number) => {\n      try {\n        const url = new URL(window.location.href)\n        url.searchParams.set(name, String(index))\n        window.history.pushState({}, '', url.toString())\n      } catch (error) {\n        setFormError(error)\n      }\n    },\n    [name, setFormError]\n  )\n\n  const { setActiveIndex } = useStep(id, { onStepChange })\n\n  const getIndex = useCallback(() => {\n    try {\n      const searchParams = new URLSearchParams(window.location.search)\n      return parseFloat(searchParams.get(name))\n    } catch (error) {\n      setFormError(error)\n    }\n  }, [name, setFormError])\n\n  useLayoutEffect(() => {\n    try {\n      const popstateListener = () => {\n        const routerIndex = getIndex()\n        if (!isNaN(routerIndex)) {\n          setActiveIndex(routerIndex, {\n            skipStepChangeCallFromHook: true,\n            skipStepChangeCallBeforeMounted: true,\n          })\n        }\n      }\n\n      // Initial setup call\n      popstateListener()\n\n      window.addEventListener('popstate', popstateListener)\n      return () => window.removeEventListener('popstate', popstateListener)\n    } catch (error) {\n      setFormError(error)\n    }\n  }, [getIndex, id, setActiveIndex, setFormError])\n\n  return { getIndex }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,OAAO,MAAM,WAAW;AAG/B,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGJ,KAAK,CAACK,SAAS,GAAGL,KAAK,CAACG,eAAe;AAEzE,eAAe,SAASG,eAAeA,CAAA,EAAyB;EAAA,IAAxBC,EAAU,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGE,SAAS;EAC5D,MAAM;IAAEC;EAAa,CAAC,GAAGT,OAAO,CAACK,EAAE,CAAC;EACpC,MAAMK,IAAI,GAAGL,EAAE,GAAI,GAAEA,EAAG,OAAM,GAAG,MAAM;EAEvC,MAAMM,YAAY,GAAGZ,WAAW,CAC7Ba,KAAa,IAAK;IACjB,IAAI;MACF,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAACZ,MAAM,CAACa,QAAQ,CAACC,IAAI,CAAC;MACzCH,GAAG,CAACI,YAAY,CAACC,GAAG,CAACR,IAAI,EAAES,MAAM,CAACP,KAAK,CAAC,CAAC;MACzCV,MAAM,CAACkB,OAAO,CAACC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAER,GAAG,CAACS,QAAQ,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdd,YAAY,CAACc,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACb,IAAI,EAAED,YAAY,CACrB,CAAC;EAED,MAAM;IAAEe;EAAe,CAAC,GAAGxB,OAAO,CAACK,EAAE,EAAE;IAAEM;EAAa,CAAC,CAAC;EAExD,MAAMc,QAAQ,GAAG1B,WAAW,CAAC,MAAM;IACjC,IAAI;MACF,MAAMkB,YAAY,GAAG,IAAIS,eAAe,CAACxB,MAAM,CAACa,QAAQ,CAACY,MAAM,CAAC;MAChE,OAAOC,UAAU,CAACX,YAAY,CAACY,GAAG,CAACnB,IAAI,CAAC,CAAC;IAC3C,CAAC,CAAC,OAAOa,KAAK,EAAE;MACdd,YAAY,CAACc,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACb,IAAI,EAAED,YAAY,CAAC,CAAC;EAExBR,eAAe,CAAC,MAAM;IACpB,IAAI;MACF,MAAM6B,gBAAgB,GAAGA,CAAA,KAAM;QAC7B,MAAMC,WAAW,GAAGN,QAAQ,CAAC,CAAC;QAC9B,IAAI,CAACO,KAAK,CAACD,WAAW,CAAC,EAAE;UACvBP,cAAc,CAACO,WAAW,EAAE;YAC1BE,0BAA0B,EAAE,IAAI;YAChCC,+BAA+B,EAAE;UACnC,CAAC,CAAC;QACJ;MACF,CAAC;MAGDJ,gBAAgB,CAAC,CAAC;MAElB5B,MAAM,CAACiC,gBAAgB,CAAC,UAAU,EAAEL,gBAAgB,CAAC;MACrD,OAAO,MAAM5B,MAAM,CAACkC,mBAAmB,CAAC,UAAU,EAAEN,gBAAgB,CAAC;IACvE,CAAC,CAAC,OAAOP,KAAK,EAAE;MACdd,YAAY,CAACc,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACE,QAAQ,EAAEpB,EAAE,EAAEmB,cAAc,EAAEf,YAAY,CAAC,CAAC;EAEhD,OAAO;IAAEgB;EAAS,CAAC;AACrB"}

package/extensions/forms/Wizard/hooks/useReachRouter.js

@@ -1,11 +1,13 @@
 import React, { useCallback } from 'react';
 import useStep from './useStep';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
-export default function useReachRouter(id, _ref) {
+export default function useReachRouter() {
+  let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let {
     useLocation,
     navigate
-  } = _ref;
+  } = arguments.length > 1 ? arguments[1] : undefined;
+  const name = id ? `${id}-step` : 'step';
   const {
     setFormError
   } = useStep(id);
@@ -13,12 +15,12 @@ export default function useReachRouter(id, _ref) {
   const onStepChange = useCallback(index => {
     try {
       const url = new URL(location.href);
-      url.searchParams.set(`${id}-step`, String(index));
+      url.searchParams.set(name, String(index));
       navigate(url.href);
     } catch (error) {
       setFormError(error);
     }
-  }, [id, location.href, navigate, setFormError]);
+  }, [location.href, name, navigate, setFormError]);
   const {
     setActiveIndex
   } = useStep(id, {
@@ -27,11 +29,11 @@ export default function useReachRouter(id, _ref) {
   const getIndex = useCallback(() => {
     try {
       const searchParams = new URLSearchParams(location.search);
-      return parseFloat(searchParams.get(`${id}-step`));
+      return parseFloat(searchParams.get(name));
     } catch (error) {
       setFormError(error);
     }
-  }, [id, location.search, setFormError]);
+  }, [location.search, name, setFormError]);
   useLayoutEffect(() => {
     const routerIndex = getIndex();
     if (!isNaN(routerIndex)) {

package/extensions/forms/Wizard/hooks/useReachRouter.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReachRouter.js","names":["React","useCallback","useStep","useLayoutEffect","window","useEffect","useReachRouter","id","_ref","useLocation","navigate","setFormError","location","onStepChange","index","url","URL","href","searchParams","set","String","error","setActiveIndex","getIndex","URLSearchParams","search","parseFloat","get","routerIndex","isNaN","skipStepChangeCallFromHook","skipStepChangeCallBeforeMounted"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useReachRouter.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport useStep from './useStep'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useReachRouter(\n  id: string,\n  { useLocation, navigate }\n) {\n  const { setFormError } = useStep(id)\n  const location = useLocation()\n\n  const onStepChange = useCallback(\n    (index: number) => {\n      try {\n        const url = new URL(location.href)\n        url.searchParams.set(`${id}-step`, String(index))\n        navigate(url.href)\n      } catch (error) {\n        setFormError(error)\n      }\n    },\n    [id, location.href, navigate, setFormError]\n  )\n\n  const { setActiveIndex } = useStep(id, { onStepChange })\n\n  const getIndex = useCallback(() => {\n    try {\n      const searchParams = new URLSearchParams(location.search)\n      return parseFloat(searchParams.get(`${id}-step`))\n    } catch (error) {\n      setFormError(error)\n    }\n  }, [id, location.search, setFormError])\n\n  useLayoutEffect(() => {\n    const routerIndex = getIndex()\n    if (!isNaN(routerIndex)) {\n      setActiveIndex(routerIndex, {\n        skipStepChangeCallFromHook: true,\n        skipStepChangeCallBeforeMounted: true,\n      })\n    }\n  }, [getIndex, setActiveIndex])\n\n  return { getIndex }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,OAAO,MAAM,WAAW;AAG/B,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGJ,KAAK,CAACK,SAAS,GAAGL,KAAK,CAACG,eAAe;AAEzE,eAAe,SAASG,cAAcA,CACpCC,EAAU,EAAAC,IAAA,EAEV;EAAA,IADA;IAAEC,WAAW;IAAEC;EAAS,CAAC,GAAAF,IAAA;EAEzB,MAAM;IAAEG;EAAa,CAAC,GAAGT,OAAO,CAACK,EAAE,CAAC;EACpC,MAAMK,QAAQ,GAAGH,WAAW,CAAC,CAAC;EAE9B,MAAMI,YAAY,GAAGZ,WAAW,CAC7Ba,KAAa,IAAK;IACjB,IAAI;MACF,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAACJ,QAAQ,CAACK,IAAI,CAAC;MAClCF,GAAG,CAACG,YAAY,CAACC,GAAG,CAAE,GAAEZ,EAAG,OAAM,EAAEa,MAAM,CAACN,KAAK,CAAC,CAAC;MACjDJ,QAAQ,CAACK,GAAG,CAACE,IAAI,CAAC;IACpB,CAAC,CAAC,OAAOI,KAAK,EAAE;MACdV,YAAY,CAACU,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACd,EAAE,EAAEK,QAAQ,CAACK,IAAI,EAAEP,QAAQ,EAAEC,YAAY,CAC5C,CAAC;EAED,MAAM;IAAEW;EAAe,CAAC,GAAGpB,OAAO,CAACK,EAAE,EAAE;IAAEM;EAAa,CAAC,CAAC;EAExD,MAAMU,QAAQ,GAAGtB,WAAW,CAAC,MAAM;IACjC,IAAI;MACF,MAAMiB,YAAY,GAAG,IAAIM,eAAe,CAACZ,QAAQ,CAACa,MAAM,CAAC;MACzD,OAAOC,UAAU,CAACR,YAAY,CAACS,GAAG,CAAE,GAAEpB,EAAG,OAAM,CAAC,CAAC;IACnD,CAAC,CAAC,OAAOc,KAAK,EAAE;MACdV,YAAY,CAACU,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACd,EAAE,EAAEK,QAAQ,CAACa,MAAM,EAAEd,YAAY,CAAC,CAAC;EAEvCR,eAAe,CAAC,MAAM;IACpB,MAAMyB,WAAW,GAAGL,QAAQ,CAAC,CAAC;IAC9B,IAAI,CAACM,KAAK,CAACD,WAAW,CAAC,EAAE;MACvBN,cAAc,CAACM,WAAW,EAAE;QAC1BE,0BAA0B,EAAE,IAAI;QAChCC,+BAA+B,EAAE;MACnC,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACR,QAAQ,EAAED,cAAc,CAAC,CAAC;EAE9B,OAAO;IAAEC;EAAS,CAAC;AACrB"}
+{"version":3,"file":"useReachRouter.js","names":["React","useCallback","useStep","useLayoutEffect","window","useEffect","useReachRouter","id","arguments","length","undefined","useLocation","navigate","name","setFormError","location","onStepChange","index","url","URL","href","searchParams","set","String","error","setActiveIndex","getIndex","URLSearchParams","search","parseFloat","get","routerIndex","isNaN","skipStepChangeCallFromHook","skipStepChangeCallBeforeMounted"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useReachRouter.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport useStep from './useStep'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useReachRouter(\n  id: string = null,\n  { useLocation, navigate }\n) {\n  const name = id ? `${id}-step` : 'step'\n  const { setFormError } = useStep(id)\n  const location = useLocation()\n\n  const onStepChange = useCallback(\n    (index: number) => {\n      try {\n        const url = new URL(location.href)\n        url.searchParams.set(name, String(index))\n        navigate(url.href)\n      } catch (error) {\n        setFormError(error)\n      }\n    },\n    [location.href, name, navigate, setFormError]\n  )\n\n  const { setActiveIndex } = useStep(id, { onStepChange })\n\n  const getIndex = useCallback(() => {\n    try {\n      const searchParams = new URLSearchParams(location.search)\n      return parseFloat(searchParams.get(name))\n    } catch (error) {\n      setFormError(error)\n    }\n  }, [location.search, name, setFormError])\n\n  useLayoutEffect(() => {\n    const routerIndex = getIndex()\n    if (!isNaN(routerIndex)) {\n      setActiveIndex(routerIndex, {\n        skipStepChangeCallFromHook: true,\n        skipStepChangeCallBeforeMounted: true,\n      })\n    }\n  }, [getIndex, setActiveIndex])\n\n  return { getIndex }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,OAAO,MAAM,WAAW;AAG/B,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGJ,KAAK,CAACK,SAAS,GAAGL,KAAK,CAACG,eAAe;AAEzE,eAAe,SAASG,cAAcA,CAAA,EAGpC;EAAA,IAFAC,EAAU,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAAA,IACjB;IAAEG,WAAW;IAAEC;EAAS,CAAC,GAAAJ,SAAA,CAAAC,MAAA,OAAAD,SAAA,MAAAE,SAAA;EAEzB,MAAMG,IAAI,GAAGN,EAAE,GAAI,GAAEA,EAAG,OAAM,GAAG,MAAM;EACvC,MAAM;IAAEO;EAAa,CAAC,GAAGZ,OAAO,CAACK,EAAE,CAAC;EACpC,MAAMQ,QAAQ,GAAGJ,WAAW,CAAC,CAAC;EAE9B,MAAMK,YAAY,GAAGf,WAAW,CAC7BgB,KAAa,IAAK;IACjB,IAAI;MACF,MAAMC,GAAG,GAAG,IAAIC,GAAG,CAACJ,QAAQ,CAACK,IAAI,CAAC;MAClCF,GAAG,CAACG,YAAY,CAACC,GAAG,CAACT,IAAI,EAAEU,MAAM,CAACN,KAAK,CAAC,CAAC;MACzCL,QAAQ,CAACM,GAAG,CAACE,IAAI,CAAC;IACpB,CAAC,CAAC,OAAOI,KAAK,EAAE;MACdV,YAAY,CAACU,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACT,QAAQ,CAACK,IAAI,EAAEP,IAAI,EAAED,QAAQ,EAAEE,YAAY,CAC9C,CAAC;EAED,MAAM;IAAEW;EAAe,CAAC,GAAGvB,OAAO,CAACK,EAAE,EAAE;IAAES;EAAa,CAAC,CAAC;EAExD,MAAMU,QAAQ,GAAGzB,WAAW,CAAC,MAAM;IACjC,IAAI;MACF,MAAMoB,YAAY,GAAG,IAAIM,eAAe,CAACZ,QAAQ,CAACa,MAAM,CAAC;MACzD,OAAOC,UAAU,CAACR,YAAY,CAACS,GAAG,CAACjB,IAAI,CAAC,CAAC;IAC3C,CAAC,CAAC,OAAOW,KAAK,EAAE;MACdV,YAAY,CAACU,KAAK,CAAC;IACrB;EACF,CAAC,EAAE,CAACT,QAAQ,CAACa,MAAM,EAAEf,IAAI,EAAEC,YAAY,CAAC,CAAC;EAEzCX,eAAe,CAAC,MAAM;IACpB,MAAM4B,WAAW,GAAGL,QAAQ,CAAC,CAAC;IAC9B,IAAI,CAACM,KAAK,CAACD,WAAW,CAAC,EAAE;MACvBN,cAAc,CAACM,WAAW,EAAE;QAC1BE,0BAA0B,EAAE,IAAI;QAChCC,+BAA+B,EAAE;MACnC,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACR,QAAQ,EAAED,cAAc,CAAC,CAAC;EAE9B,OAAO;IAAEC;EAAS,CAAC;AACrB"}

package/extensions/forms/Wizard/hooks/useReactRouter.js

@@ -1,28 +1,30 @@
 import React, { useCallback } from 'react';
 import useStep from './useStep';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
-export default function useReactRouter(id, _ref) {
+export default function useReactRouter() {
+  let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let {
     useSearchParams
-  } = _ref;
+  } = arguments.length > 1 ? arguments[1] : undefined;
+  const name = id ? `${id}-step` : 'step';
   const {
     setFormError
   } = useStep(id);
   const [searchParams, setSearchParams] = useSearchParams();
   const onStepChange = useCallback(index => {
     try {
-      searchParams.set(`${id}-step`, index);
+      searchParams.set(name, index);
       setSearchParams(searchParams);
     } catch (error) {
       setFormError(error);
     }
-  }, [id, searchParams, setFormError, setSearchParams]);
+  }, [name, searchParams, setFormError, setSearchParams]);
   const {
     setActiveIndex
   } = useStep(id, {
     onStepChange
   });
-  const getIndex = useCallback(() => parseFloat(searchParams.get(`${id}-step`)), [id, searchParams]);
+  const getIndex = useCallback(() => parseFloat(searchParams.get(name)), [name, searchParams]);
   useLayoutEffect(() => {
     const routerIndex = getIndex();
     if (!isNaN(routerIndex)) {

package/extensions/forms/Wizard/hooks/useReactRouter.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReactRouter.js","names":["React","useCallback","useStep","useLayoutEffect","window","useEffect","useReactRouter","id","_ref","useSearchParams","setFormError","searchParams","setSearchParams","onStepChange","index","set","error","setActiveIndex","getIndex","parseFloat","get","routerIndex","isNaN","skipStepChangeCallFromHook","skipStepChangeCallBeforeMounted"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useReactRouter.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport useStep from './useStep'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useReactRouter(id: string, { useSearchParams }) {\n  const { setFormError } = useStep(id)\n  const [searchParams, setSearchParams] = useSearchParams()\n\n  const onStepChange = useCallback(\n    (index: number) => {\n      try {\n        searchParams.set(`${id}-step`, index)\n        setSearchParams(searchParams)\n      } catch (error) {\n        setFormError(error)\n      }\n    },\n    [id, searchParams, setFormError, setSearchParams]\n  )\n\n  const { setActiveIndex } = useStep(id, { onStepChange })\n\n  const getIndex = useCallback(\n    () => parseFloat(searchParams.get(`${id}-step`)),\n    [id, searchParams]\n  )\n\n  useLayoutEffect(() => {\n    const routerIndex = getIndex()\n    if (!isNaN(routerIndex)) {\n      setActiveIndex(routerIndex, {\n        skipStepChangeCallFromHook: true,\n        skipStepChangeCallBeforeMounted: true,\n      })\n    }\n  }, [getIndex, id, searchParams, setActiveIndex, setFormError])\n\n  return { getIndex }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,OAAO,MAAM,WAAW;AAG/B,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGJ,KAAK,CAACK,SAAS,GAAGL,KAAK,CAACG,eAAe;AAEzE,eAAe,SAASG,cAAcA,CAACC,EAAU,EAAAC,IAAA,EAAuB;EAAA,IAArB;IAAEC;EAAgB,CAAC,GAAAD,IAAA;EACpE,MAAM;IAAEE;EAAa,CAAC,GAAGR,OAAO,CAACK,EAAE,CAAC;EACpC,MAAM,CAACI,YAAY,EAAEC,eAAe,CAAC,GAAGH,eAAe,CAAC,CAAC;EAEzD,MAAMI,YAAY,GAAGZ,WAAW,CAC7Ba,KAAa,IAAK;IACjB,IAAI;MACFH,YAAY,CAACI,GAAG,CAAE,GAAER,EAAG,OAAM,EAAEO,KAAK,CAAC;MACrCF,eAAe,CAACD,YAAY,CAAC;IAC/B,CAAC,CAAC,OAAOK,KAAK,EAAE;MACdN,YAAY,CAACM,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACT,EAAE,EAAEI,YAAY,EAAED,YAAY,EAAEE,eAAe,CAClD,CAAC;EAED,MAAM;IAAEK;EAAe,CAAC,GAAGf,OAAO,CAACK,EAAE,EAAE;IAAEM;EAAa,CAAC,CAAC;EAExD,MAAMK,QAAQ,GAAGjB,WAAW,CAC1B,MAAMkB,UAAU,CAACR,YAAY,CAACS,GAAG,CAAE,GAAEb,EAAG,OAAM,CAAC,CAAC,EAChD,CAACA,EAAE,EAAEI,YAAY,CACnB,CAAC;EAEDR,eAAe,CAAC,MAAM;IACpB,MAAMkB,WAAW,GAAGH,QAAQ,CAAC,CAAC;IAC9B,IAAI,CAACI,KAAK,CAACD,WAAW,CAAC,EAAE;MACvBJ,cAAc,CAACI,WAAW,EAAE;QAC1BE,0BAA0B,EAAE,IAAI;QAChCC,+BAA+B,EAAE;MACnC,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACN,QAAQ,EAAEX,EAAE,EAAEI,YAAY,EAAEM,cAAc,EAAEP,YAAY,CAAC,CAAC;EAE9D,OAAO;IAAEQ;EAAS,CAAC;AACrB"}
+{"version":3,"file":"useReactRouter.js","names":["React","useCallback","useStep","useLayoutEffect","window","useEffect","useReactRouter","id","arguments","length","undefined","useSearchParams","name","setFormError","searchParams","setSearchParams","onStepChange","index","set","error","setActiveIndex","getIndex","parseFloat","get","routerIndex","isNaN","skipStepChangeCallFromHook","skipStepChangeCallBeforeMounted"],"sources":["../../../../../../src/extensions/forms/Wizard/hooks/useReactRouter.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport useStep from './useStep'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport default function useReactRouter(\n  id: string = null,\n  { useSearchParams }\n) {\n  const name = id ? `${id}-step` : 'step'\n  const { setFormError } = useStep(id)\n  const [searchParams, setSearchParams] = useSearchParams()\n\n  const onStepChange = useCallback(\n    (index: number) => {\n      try {\n        searchParams.set(name, index)\n        setSearchParams(searchParams)\n      } catch (error) {\n        setFormError(error)\n      }\n    },\n    [name, searchParams, setFormError, setSearchParams]\n  )\n\n  const { setActiveIndex } = useStep(id, { onStepChange })\n\n  const getIndex = useCallback(\n    () => parseFloat(searchParams.get(name)),\n    [name, searchParams]\n  )\n\n  useLayoutEffect(() => {\n    const routerIndex = getIndex()\n    if (!isNaN(routerIndex)) {\n      setActiveIndex(routerIndex, {\n        skipStepChangeCallFromHook: true,\n        skipStepChangeCallBeforeMounted: true,\n      })\n    }\n  }, [getIndex, id, searchParams, setActiveIndex, setFormError])\n\n  return { getIndex }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,OAAO,MAAM,WAAW;AAG/B,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGJ,KAAK,CAACK,SAAS,GAAGL,KAAK,CAACG,eAAe;AAEzE,eAAe,SAASG,cAAcA,CAAA,EAGpC;EAAA,IAFAC,EAAU,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAAA,IACjB;IAAEG;EAAgB,CAAC,GAAAH,SAAA,CAAAC,MAAA,OAAAD,SAAA,MAAAE,SAAA;EAEnB,MAAME,IAAI,GAAGL,EAAE,GAAI,GAAEA,EAAG,OAAM,GAAG,MAAM;EACvC,MAAM;IAAEM;EAAa,CAAC,GAAGX,OAAO,CAACK,EAAE,CAAC;EACpC,MAAM,CAACO,YAAY,EAAEC,eAAe,CAAC,GAAGJ,eAAe,CAAC,CAAC;EAEzD,MAAMK,YAAY,GAAGf,WAAW,CAC7BgB,KAAa,IAAK;IACjB,IAAI;MACFH,YAAY,CAACI,GAAG,CAACN,IAAI,EAAEK,KAAK,CAAC;MAC7BF,eAAe,CAACD,YAAY,CAAC;IAC/B,CAAC,CAAC,OAAOK,KAAK,EAAE;MACdN,YAAY,CAACM,KAAK,CAAC;IACrB;EACF,CAAC,EACD,CAACP,IAAI,EAAEE,YAAY,EAAED,YAAY,EAAEE,eAAe,CACpD,CAAC;EAED,MAAM;IAAEK;EAAe,CAAC,GAAGlB,OAAO,CAACK,EAAE,EAAE;IAAES;EAAa,CAAC,CAAC;EAExD,MAAMK,QAAQ,GAAGpB,WAAW,CAC1B,MAAMqB,UAAU,CAACR,YAAY,CAACS,GAAG,CAACX,IAAI,CAAC,CAAC,EACxC,CAACA,IAAI,EAAEE,YAAY,CACrB,CAAC;EAEDX,eAAe,CAAC,MAAM;IACpB,MAAMqB,WAAW,GAAGH,QAAQ,CAAC,CAAC;IAC9B,IAAI,CAACI,KAAK,CAACD,WAAW,CAAC,EAAE;MACvBJ,cAAc,CAACI,WAAW,EAAE;QAC1BE,0BAA0B,EAAE,IAAI;QAChCC,+BAA+B,EAAE;MACnC,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACN,QAAQ,EAAEd,EAAE,EAAEO,YAAY,EAAEM,cAAc,EAAEP,YAAY,CAAC,CAAC;EAE9D,OAAO;IAAEQ;EAAS,CAAC;AACrB"}

package/extensions/forms/hooks/useFieldProps.d.ts

@@ -2,9 +2,9 @@ import { AriaAttributes } from 'react';
 import { FieldProps, AdditionalEventArgs, SubmitState, Path } from '../types';
 import { ContextState } from '../DataContext';
 export type DataAttributes = {
-    [property: `data-${string}`]: string;
+    [property: `data-${string}`]: string | boolean | number;
 };
-export default function useFieldProps<Value = unknown, Props extends FieldProps<Value> = FieldProps<Value>>(props: Props): Props & FieldProps<Value> & ReturnAdditional<Value>;
+export default function useFieldProps<Value = unknown, Props extends FieldProps<Value> = FieldProps<Value>>(localeProps: Props): Props & FieldProps<Value> & ReturnAdditional<Value>;
 export interface ReturnAdditional<Value> {
     /** Documented APIs */
     value: Value;

package/extensions/forms/hooks/useFieldProps.js

@@ -22,7 +22,7 @@ import useProcessManager from './useProcessManager';
 import { createSharedState, useSharedState } from '../../../shared/helpers/useSharedState';
 import { isAsync } from '../../../shared/helpers/isAsync';
 import useTranslation from './useTranslation';
-export default function useFieldProps(props) {
+export default function useFieldProps(localeProps) {
   var _dataContext$props,
     _dataContext$ajvInsta,
     _localErrorRef$curren,
@@ -33,6 +33,7 @@ export default function useFieldProps(props) {
   const {
     extend
   } = useContext(FieldPropsContext);
+  const props = extend(localeProps);
   const {
     path,
     itemPath,
@@ -68,7 +69,7 @@ export default function useFieldProps(props) {
       const res = required && (value === emptyValue || typeof emptyValue === 'undefined' && value === '') ? error : undefined;
       return res;
     }
-  } = extend(props);
+  } = props;
   const [, forceUpdate] = useReducer(() => ({}), {});
   const {
     startProcess
@@ -214,7 +215,6 @@ export default function useFieldProps(props) {
     }
     cb === null || cb === void 0 ? void 0 : cb();
   }, []);
-  setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
   const fieldStateRef = useRef();
   const setFieldState = useCallback(state => {
     fieldStateRef.current = state;
@@ -592,8 +592,10 @@ export default function useFieldProps(props) {
   }, [addToPool, asyncBehaviorIsEnabled, handleChangeIterateContext, hasError, hideError, itemPath, iterateElementIndex, onChange, runPool, defineAsyncProcess, setEventResult, updateValue, yieldAsyncProcess]);
   const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
+  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(() => {