@dnb/eufemia 10.29.0 → 10.30.1

package/extensions/forms/Form/FieldProps/FieldProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldProps.js","names":["React","useContext","useRef","DataContext","assignPropsWithContext","FieldPropsContext","SharedProvider","FieldProps","props","children","formElement","FormStatus","rest","_objectWithoutProperties","_excluded","nestedContext","dataContextRef","current","sharedProviderProps","_ref","Object","assign","inheritedContext","locale","translations","restOfRest","_excluded2","disabled","wrapFormsTranslations","extend","fieldProps","required","createElement","Provider","value","result","trObj","newObj","Forms","key","newKeyObj","subKey"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldProps.tsx"],"sourcesContent":["import React, { useContext, useRef } from 'react'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { UseFieldProps } from '../../types'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport { assignPropsWithContext } from '../../../../shared/component-helper'\nimport FieldPropsContext from './FieldPropsContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport { ContextProps } from '../../../../shared/Context'\n\nexport type FieldPropsProps = UseFieldProps & {\n  children: React.ReactNode\n  formElement?: ContextProps['formElement']\n  FormStatus?: { globalStatus: FormStatusProps }\n  locale?: DataContextProps<unknown>['locale']\n  translations?: DataContextProps<unknown>['translations']\n}\n\nexport default function FieldProps(props: FieldPropsProps) {\n  const { children, formElement, FormStatus, ...rest } = props\n\n  const nestedContext = useContext(FieldPropsContext)\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const sharedProviderProps: ContextProps = {}\n\n  // Extract props to be used in the shared global context\n  const { locale, translations, ...restOfRest } = Object.assign(\n    nestedContext?.inheritedContext || {},\n    rest\n  ) as ContextProps & {\n    disabled?: boolean\n  }\n  if (typeof restOfRest.disabled === 'boolean') {\n    sharedProviderProps.formElement = { disabled: restOfRest.disabled }\n  }\n  if (formElement) {\n    sharedProviderProps.formElement = formElement\n  }\n  if (FormStatus) {\n    sharedProviderProps.FormStatus = FormStatus\n  }\n  if (locale) {\n    sharedProviderProps.locale = locale\n  }\n  if (translations) {\n    sharedProviderProps.translations = wrapFormsTranslations(translations)\n  }\n\n  function extend<T>(fieldProps: T) {\n    // Extract props from data context to be used in fields\n    const { required } = dataContextRef.current\n\n    return nestedContext.extend(\n      assignPropsWithContext(fieldProps, { required }, restOfRest)\n    ) as T\n  }\n\n  return (\n    <FieldPropsContext.Provider value={{ extend, inheritedContext: rest }}>\n      <SharedProvider {...sharedProviderProps}>{children}</SharedProvider>\n    </FieldPropsContext.Provider>\n  )\n}\n\nfunction wrapFormsTranslations(\n  translations: ContextProps['translations']\n) {\n  const result = {}\n  const trObj = translations as Record<\n    ContextProps['locale'],\n    Record<string, Record<string, string>>\n  >\n\n  for (const locale in trObj) {\n    const newObj: Record<\n      'Forms',\n      Record<string, Record<string, string>>\n    > = {\n      Forms: {},\n    }\n\n    for (const key in trObj[locale]) {\n      const newKeyObj: Record<string, string> = {}\n\n      for (const subKey in trObj[locale][key]) {\n        newKeyObj[subKey] = trObj[locale][key][subKey]\n      }\n\n      newObj.Forms[key] = newKeyObj\n    }\n\n    result[locale] = newObj\n  }\n\n  return result\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AACjD,OAAOC,WAAW,MAAwB,2BAA2B;AAIrE,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,cAAc,MAAM,6BAA6B;AAWxD,eAAe,SAASC,UAAUA,CAACC,KAAsB,EAAE;EACzD,MAAM;MAAEC,QAAQ;MAAEC,WAAW;MAAEC;IAAoB,CAAC,GAAGH,KAAK;IAAdI,IAAI,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA;EAE5D,MAAMC,aAAa,GAAGd,UAAU,CAACI,iBAAiB,CAAC;EACnD,MAAMW,cAAc,GAAGd,MAAM,CAAe,CAAC;EAC7Cc,cAAc,CAACC,OAAO,GAAGhB,UAAU,CAAeE,WAAW,CAAC;EAE9D,MAAMe,mBAAiC,GAAG,CAAC,CAAC;EAG5C,MAAAC,IAAA,GAAgDC,MAAM,CAACC,MAAM,CAC3D,CAAAN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEO,gBAAgB,KAAI,CAAC,CAAC,EACrCV,IACF,CAAC;IAHK;MAAEW,MAAM;MAAEC;IAA4B,CAAC,GAAAL,IAAA;IAAZM,UAAU,GAAAZ,wBAAA,CAAAM,IAAA,EAAAO,UAAA;EAM3C,IAAI,OAAOD,UAAU,CAACE,QAAQ,KAAK,SAAS,EAAE;IAC5CT,mBAAmB,CAACR,WAAW,GAAG;MAAEiB,QAAQ,EAAEF,UAAU,CAACE;IAAS,CAAC;EACrE;EACA,IAAIjB,WAAW,EAAE;IACfQ,mBAAmB,CAACR,WAAW,GAAGA,WAAW;EAC/C;EACA,IAAIC,UAAU,EAAE;IACdO,mBAAmB,CAACP,UAAU,GAAGA,UAAU;EAC7C;EACA,IAAIY,MAAM,EAAE;IACVL,mBAAmB,CAACK,MAAM,GAAGA,MAAM;EACrC;EACA,IAAIC,YAAY,EAAE;IAChBN,mBAAmB,CAACM,YAAY,GAAGI,qBAAqB,CAACJ,YAAY,CAAC;EACxE;EAEA,SAASK,MAAMA,CAAIC,UAAa,EAAE;IAEhC,MAAM;MAAEC;IAAS,CAAC,GAAGf,cAAc,CAACC,OAAO;IAE3C,OAAOF,aAAa,CAACc,MAAM,CACzBzB,sBAAsB,CAAC0B,UAAU,EAAE;MAAEC;IAAS,CAAC,EAAEN,UAAU,CAC7D,CAAC;EACH;EAEA,OACEzB,KAAA,CAAAgC,aAAA,CAAC3B,iBAAiB,CAAC4B,QAAQ;IAACC,KAAK,EAAE;MAAEL,MAAM;MAAEP,gBAAgB,EAAEV;IAAK;EAAE,GACpEZ,KAAA,CAAAgC,aAAA,CAAC1B,cAAc,EAAKY,mBAAmB,EAAGT,QAAyB,CACzC,CAAC;AAEjC;AAEA,SAASmB,qBAAqBA,CAC5BJ,YAA0C,EAC1C;EACA,MAAMW,MAAM,GAAG,CAAC,CAAC;EACjB,MAAMC,KAAK,GAAGZ,YAGb;EAED,KAAK,MAAMD,MAAM,IAAIa,KAAK,EAAE;IAC1B,MAAMC,MAGL,GAAG;MACFC,KAAK,EAAE,CAAC;IACV,CAAC;IAED,KAAK,MAAMC,GAAG,IAAIH,KAAK,CAACb,MAAM,CAAC,EAAE;MAC/B,MAAMiB,SAAiC,GAAG,CAAC,CAAC;MAE5C,KAAK,MAAMC,MAAM,IAAIL,KAAK,CAACb,MAAM,CAAC,CAACgB,GAAG,CAAC,EAAE;QACvCC,SAAS,CAACC,MAAM,CAAC,GAAGL,KAAK,CAACb,MAAM,CAAC,CAACgB,GAAG,CAAC,CAACE,MAAM,CAAC;MAChD;MAEAJ,MAAM,CAACC,KAAK,CAACC,GAAG,CAAC,GAAGC,SAAS;IAC/B;IAEAL,MAAM,CAACZ,MAAM,CAAC,GAAGc,MAAM;EACzB;EAEA,OAAOF,MAAM;AACf"}

package/extensions/forms/Form/FieldProps/FieldPropsContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UseFieldProps } from '../../types';
+export type FieldPropsContextProps = {
+    extend: <T = UseFieldProps>(props: T) => T;
+    inheritedContext?: UseFieldProps;
+};
+declare const FieldPropsContext: React.Context<FieldPropsContextProps>;
+export default FieldPropsContext;

package/extensions/forms/Form/FieldProps/FieldPropsContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+const extend = props => props;
+const FieldPropsContext = React.createContext({
+  extend
+});
+export default FieldPropsContext;
+//# sourceMappingURL=FieldPropsContext.js.map

package/extensions/forms/Form/FieldProps/FieldPropsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPropsContext.js","names":["React","extend","props","FieldPropsContext","createContext"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldPropsContext.ts"],"sourcesContent":["import React from 'react'\nimport { UseFieldProps } from '../../types'\n\nexport type FieldPropsContextProps = {\n  extend: <T = UseFieldProps>(props: T) => T\n  inheritedContext?: UseFieldProps\n}\n\nconst extend: FieldPropsContextProps['extend'] = (props) => props\nconst FieldPropsContext = React.createContext<FieldPropsContextProps>({\n  extend,\n})\n\nexport default FieldPropsContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,MAAwC,GAAIC,KAAK,IAAKA,KAAK;AACjE,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,aAAa,CAAyB;EACpEH;AACF,CAAC,CAAC;AAEF,eAAeE,iBAAiB"}

package/extensions/forms/Form/FieldProps/FieldPropsDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../../../shared/types';
+export declare const FieldPropsProperties: PropertiesTableProps;

package/extensions/forms/Form/FieldProps/FieldPropsDocs.js

@@ -0,0 +1,11 @@
+import { dataValueProperties } from '../../hooks/DataValueDocs';
+export const FieldPropsProperties = {
+  required: dataValueProperties.required,
+  disabled: dataValueProperties.disabled,
+  locale: {
+    doc: 'Locale (language) to use for all nested Eufemia components.',
+    type: 'string',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=FieldPropsDocs.js.map

package/extensions/forms/Form/FieldProps/FieldPropsDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPropsDocs.js","names":["dataValueProperties","FieldPropsProperties","required","disabled","locale","doc","type","status"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldPropsDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { dataValueProperties } from '../../hooks/DataValueDocs'\n\nexport const FieldPropsProperties: PropertiesTableProps = {\n  required: dataValueProperties.required,\n  disabled: dataValueProperties.disabled,\n  locale: {\n    doc: 'Locale (language) to use for all nested Eufemia components.',\n    type: 'string',\n    status: 'optional',\n  },\n}\n"],"mappings":"AACA,SAASA,mBAAmB,QAAQ,2BAA2B;AAE/D,OAAO,MAAMC,oBAA0C,GAAG;EACxDC,QAAQ,EAAEF,mBAAmB,CAACE,QAAQ;EACtCC,QAAQ,EAAEH,mBAAmB,CAACG,QAAQ;EACtCC,MAAM,EAAE;IACNC,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Form/FieldProps/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldProps';
+export * from './FieldProps';

package/extensions/forms/Form/FieldProps/index.js

@@ -0,0 +1,3 @@
+export { default } from './FieldProps';
+export * from './FieldProps';
+//# sourceMappingURL=index.js.map

package/extensions/forms/Form/FieldProps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/index.ts"],"sourcesContent":["export { default } from './FieldProps'\nexport * from './FieldProps'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc;AACtC,cAAc,cAAc"}

package/extensions/forms/Form/Handler/Handler.d.ts

@@ -7,4 +7,4 @@ export type Props = Omit<ElementAllProps, 'data' | 'as' | 'autoComplete'> & {
      */
     autoComplete?: boolean;
 };
-export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, ajvInstance, errorMessages, globalStatusId, filterSubmitData, filterData, transformIn, onChange, onPathChange, onSubmit, onSubmitRequest, onSubmitComplete, minimumAsyncBehaviorTime, asyncSubmitTimeout, scrollTopOnSubmit, sessionStorageId, autoComplete, ...rest }: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;
+export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, ajvInstance, errorMessages, globalStatusId, filterSubmitData, filterData, transformIn, onChange, onPathChange, onSubmit, onSubmitRequest, onSubmitComplete, minimumAsyncBehaviorTime, asyncSubmitTimeout, scrollTopOnSubmit, sessionStorageId, autoComplete, locale, translations, disabled, required, ...rest }: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Form/Handler/Handler.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "defaultData", "data", "schema", "ajvInstance", "errorMessages", "globalStatusId", "filterSubmitData", "filterData", "transformIn", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "minimumAsyncBehaviorTime", "asyncSubmitTimeout", "scrollTopOnSubmit", "sessionStorageId", "autoComplete"],
+const _excluded = ["children", "defaultData", "data", "schema", "ajvInstance", "errorMessages", "globalStatusId", "filterSubmitData", "filterData", "transformIn", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "minimumAsyncBehaviorTime", "asyncSubmitTimeout", "scrollTopOnSubmit", "sessionStorageId", "autoComplete", "locale", "translations", "disabled", "required"],
   _excluded2 = ["children"];
 import React, { useContext } from 'react';
 import DataContextProvider from '../../DataContext/Provider';
@@ -32,7 +32,11 @@ export default function FormHandler(_ref) {
       asyncSubmitTimeout,
       scrollTopOnSubmit,
       sessionStorageId,
-      autoComplete
+      autoComplete,
+      locale,
+      translations,
+      disabled,
+      required
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const providerProps = {
@@ -55,7 +59,11 @@ export default function FormHandler(_ref) {
     asyncSubmitTimeout,
     scrollTopOnSubmit,
     sessionStorageId,
-    autoComplete
+    autoComplete,
+    locale,
+    translations,
+    disabled,
+    required
   };
   return React.createElement(DataContextProvider, providerProps, React.createElement(FormElementWithState, rest, children));
 }

package/extensions/forms/Form/Handler/Handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handler.js","names":["React","useContext","DataContextProvider","DataContext","FormElement","FormStatus","useId","combineLabelledBy","FormHandler","_ref","children","defaultData","data","schema","ajvInstance","errorMessages","globalStatusId","filterSubmitData","filterData","transformIn","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete","minimumAsyncBehaviorTime","asyncSubmitTimeout","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","id","createElement","FormElementWithState","_ref2","_excluded2","submitState","states","Object","entries","filter","_ref3","value","_extends","map","_ref4","key","undefined","state","className","show","Boolean","no_animation","shellSpace","top","bottom","String"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { JsonObject } from 'json-pointer'\nimport DataContextProvider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport DataContext from '../../DataContext/Context'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\nimport FormStatus from '../../../../components/FormStatus'\nimport useId from '../../../../shared/helpers/useId'\nimport { combineLabelledBy } from '../../../../shared/component-helper'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  ajvInstance,\n  errorMessages,\n  globalStatusId,\n  filterSubmitData,\n  filterData,\n  transformIn,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  onSubmitComplete,\n  minimumAsyncBehaviorTime,\n  asyncSubmitTimeout,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    id: rest.id,\n    defaultData,\n    data,\n    schema,\n    ajvInstance,\n    errorMessages,\n    globalStatusId,\n    filterSubmitData,\n    filterData,\n    transformIn,\n    onChange,\n    onPathChange,\n    onSubmit,\n    onSubmitRequest,\n    onSubmitComplete,\n    minimumAsyncBehaviorTime,\n    asyncSubmitTimeout,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  }\n\n  return (\n    <DataContextProvider {...providerProps}>\n      <FormElementWithState {...rest}>{children}</FormElementWithState>\n    </DataContextProvider>\n  )\n}\n\nfunction FormElementWithState({ children, ...rest }) {\n  const id = useId()\n  const { submitState } = useContext(DataContext) || {}\n  const states = Object.entries(submitState).filter(([, value]) => value)\n\n  return (\n    <FormElement\n      {...rest}\n      aria-labelledby={\n        combineLabelledBy(\n          rest,\n          states.map(([key]) => {\n            return `${id}-form-status-${key}`\n          })\n        ) || undefined\n      }\n    >\n      {children}\n\n      {['error', 'warning', 'info'].map((key) => {\n        const value = submitState[key]\n        return (\n          <FormStatus\n            key={key}\n            state={key}\n            id={`${id}-form-status-${key}`}\n            className=\"dnb-forms-status\"\n            show={Boolean(value)}\n            no_animation={false}\n            shellSpace={{ top: 'small', bottom: 'medium' }}\n          >\n            {String(value?.['message'] || value || '')}\n          </FormStatus>\n        )\n      })}\n    </FormElement>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Handler.js","names":["React","useContext","DataContextProvider","DataContext","FormElement","FormStatus","useId","combineLabelledBy","FormHandler","_ref","children","defaultData","data","schema","ajvInstance","errorMessages","globalStatusId","filterSubmitData","filterData","transformIn","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete","minimumAsyncBehaviorTime","asyncSubmitTimeout","scrollTopOnSubmit","sessionStorageId","autoComplete","locale","translations","disabled","required","rest","_objectWithoutProperties","_excluded","providerProps","id","createElement","FormElementWithState","_ref2","_excluded2","submitState","states","Object","entries","filter","_ref3","value","_extends","map","_ref4","key","undefined","state","className","show","Boolean","no_animation","shellSpace","top","bottom","String"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { JsonObject } from 'json-pointer'\nimport DataContextProvider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport DataContext from '../../DataContext/Context'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\nimport FormStatus from '../../../../components/FormStatus'\nimport useId from '../../../../shared/helpers/useId'\nimport { combineLabelledBy } from '../../../../shared/component-helper'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  ajvInstance,\n  errorMessages,\n  globalStatusId,\n  filterSubmitData,\n  filterData,\n  transformIn,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  onSubmitComplete,\n  minimumAsyncBehaviorTime,\n  asyncSubmitTimeout,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  locale,\n  translations,\n  disabled,\n  required,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    id: rest.id,\n    defaultData,\n    data,\n    schema,\n    ajvInstance,\n    errorMessages,\n    globalStatusId,\n    filterSubmitData,\n    filterData,\n    transformIn,\n    onChange,\n    onPathChange,\n    onSubmit,\n    onSubmitRequest,\n    onSubmitComplete,\n    minimumAsyncBehaviorTime,\n    asyncSubmitTimeout,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n    locale,\n    translations,\n    disabled,\n    required,\n  }\n\n  return (\n    <DataContextProvider {...providerProps}>\n      <FormElementWithState {...rest}>{children}</FormElementWithState>\n    </DataContextProvider>\n  )\n}\n\nfunction FormElementWithState({ children, ...rest }) {\n  const id = useId()\n  const { submitState } = useContext(DataContext) || {}\n  const states = Object.entries(submitState).filter(([, value]) => value)\n\n  return (\n    <FormElement\n      {...rest}\n      aria-labelledby={\n        combineLabelledBy(\n          rest,\n          states.map(([key]) => {\n            return `${id}-form-status-${key}`\n          })\n        ) || undefined\n      }\n    >\n      {children}\n\n      {['error', 'warning', 'info'].map((key) => {\n        const value = submitState[key]\n        return (\n          <FormStatus\n            key={key}\n            state={key}\n            id={`${id}-form-status-${key}`}\n            className=\"dnb-forms-status\"\n            show={Boolean(value)}\n            no_animation={false}\n            shellSpace={{ top: 'small', bottom: 'medium' }}\n          >\n            {String(value?.['message'] || value || '')}\n          </FormStatus>\n        )\n      })}\n    </FormElement>\n  )\n}\n"],"mappings":"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"}

package/extensions/forms/Form/Visibility/Visibility.d.ts

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { HeightAnimationProps } from '../../../../components/HeightAnimation';
+import type { UseFieldProps } from '../../types';
+import type { DataAttributes } from '../../hooks/useFieldProps';
 export type Props = {
     visible?: boolean;
     /** Given data context path must be defined to show children */
@@ -24,10 +26,12 @@ export type Props = {
     animate?: boolean;
     /** Keep the content in the DOM, even if it's not visible */
     keepInDOM?: boolean;
+    /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */
+    fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes;
     element?: HeightAnimationProps['element'];
     children: React.ReactNode;
 };
-declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, inferData, animate, keepInDOM, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, inferData, animate, keepInDOM, fieldPropsWhenHidden, children, ...rest }: Props): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
 declare namespace Visibility {
     var _supportsSpacingProps: string;
 }

package/extensions/forms/Form/Visibility/Visibility.js

@@ -2,11 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["visible", "pathDefined", "pathUndefined", "pathTruthy", "pathFalsy", "pathTrue", "pathFalse", "pathValue", "whenValue", "inferData", "animate", "keepInDOM", "children"];
+const _excluded = ["visible", "pathDefined", "pathUndefined", "pathTruthy", "pathFalsy", "pathTrue", "pathFalse", "pathValue", "whenValue", "inferData", "animate", "keepInDOM", "fieldPropsWhenHidden", "children"];
 import React, { useContext } from 'react';
 import pointer from 'json-pointer';
-import * as DataContext from '../../DataContext';
+import { warn } from '../../../../shared/helpers';
+import useMountEffect from '../../../../shared/helpers/useMountEffect';
 import HeightAnimation from '../../../../components/HeightAnimation';
+import DataContext from '../../DataContext/Context';
+import FieldProps from '../FieldProps';
 function Visibility(_ref) {
   let {
       visible,
@@ -21,10 +24,16 @@ function Visibility(_ref) {
       inferData,
       animate,
       keepInDOM,
+      fieldPropsWhenHidden,
       children
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const dataContext = useContext(DataContext.Context);
+  const dataContext = useContext(DataContext);
+  useMountEffect(() => {
+    if (fieldPropsWhenHidden && !keepInDOM) {
+      warn('Using "fieldPropsWhenHidden" requires "keepInDOM" to be true.');
+    }
+  });
   const check = () => {
     if (visible === false) {
       return;
@@ -55,23 +64,23 @@ function Visibility(_ref) {
     }
     return true;
   };
+  const open = Boolean(check());
   if (animate) {
+    const props = !open ? fieldPropsWhenHidden : null;
     return React.createElement(HeightAnimation, _extends({
-      open: Boolean(check()),
+      open: open,
       keepInDOM: keepInDOM,
       className: "dnb-forms-visibility"
-    }, rest), children);
-  }
-  if (check()) {
-    return React.createElement(React.Fragment, null, children);
+    }, rest), React.createElement(FieldProps, props, children));
   }
   if (keepInDOM) {
+    const props = !open ? fieldPropsWhenHidden : null;
     return React.createElement("span", {
       className: "dnb-forms-visibility",
-      hidden: true
-    }, children);
+      hidden: !open
+    }, React.createElement(FieldProps, props, children));
   }
-  return null;
+  return open ? children : null;
 }
 Visibility._supportsSpacingProps = 'children';
 export default Visibility;

package/extensions/forms/Form/Visibility/Visibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"Visibility.js","names":["React","useContext","pointer","DataContext","HeightAnimation","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","inferData","animate","keepInDOM","children","rest","_objectWithoutProperties","_excluded","dataContext","Context","check","has","data","get","Boolean","createElement","_extends","open","className","Fragment","hidden","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport pointer from 'json-pointer'\nimport * as DataContext from '../../DataContext'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: string\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: string\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: string\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: string\n  /** Given data context path must be true to show children */\n  pathTrue?: string\n  /** Given data context path must be false to show children */\n  pathFalse?: string\n  /** Given data context path must match, as well as the \"whenValue\" value */\n  pathValue?: string\n  /** Given data context value must match this value to show children */\n  whenValue?: unknown\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  inferData,\n  animate,\n  keepInDOM,\n  children,\n  ...rest\n}: Props) {\n  const dataContext = useContext(DataContext.Context)\n\n  const check = () => {\n    if (visible === false) {\n      return\n    }\n\n    if (pathDefined && !pointer.has(dataContext.data, pathDefined)) {\n      return\n    }\n    if (pathUndefined && pointer.has(dataContext.data, pathUndefined)) {\n      return\n    }\n\n    if (\n      pathTruthy &&\n      (!pointer.has(dataContext.data, pathTruthy) ||\n        !pointer.get(dataContext.data, pathTruthy))\n    ) {\n      return\n    }\n    if (\n      pathFalsy &&\n      pointer.has(dataContext.data, pathFalsy) &&\n      Boolean(pointer.get(dataContext.data, pathFalsy))\n    ) {\n      return\n    }\n\n    if (\n      pathTrue &&\n      (!pointer.has(dataContext.data, pathTrue) ||\n        pointer.get(dataContext.data, pathTrue) !== true)\n    ) {\n      return\n    }\n    if (\n      pathFalse &&\n      (!pointer.has(dataContext.data, pathFalse) ||\n        pointer.get(dataContext.data, pathFalse) !== false)\n    ) {\n      return\n    }\n\n    if (\n      pathValue &&\n      !(\n        pointer.has(dataContext.data, pathValue) &&\n        pointer.get(dataContext.data, pathValue) === whenValue\n      )\n    ) {\n      return\n    }\n\n    if (inferData && !inferData(dataContext.data)) {\n      return\n    }\n\n    return true\n  }\n\n  if (animate) {\n    return (\n      <HeightAnimation\n        open={Boolean(check())}\n        keepInDOM={keepInDOM}\n        className=\"dnb-forms-visibility\"\n        {...rest}\n      >\n        {children}\n      </HeightAnimation>\n    )\n  }\n\n  if (check()) {\n    return <>{children}</>\n  }\n\n  if (keepInDOM) {\n    return (\n      <span className=\"dnb-forms-visibility\" hidden>\n        {children}\n      </span>\n    )\n  }\n\n  return null\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,OAAO,MAAM,cAAc;AAClC,OAAO,KAAKC,WAAW,MAAM,mBAAmB;AAChD,OAAOC,eAAe,MAEf,wCAAwC;AA8B/C,SAASC,UAAUA,CAAAC,IAAA,EAeT;EAAA,IAfU;MAClBC,OAAO;MACPC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,OAAO;MACPC,SAAS;MACTC;IAEK,CAAC,GAAAb,IAAA;IADHc,IAAI,GAAAC,wBAAA,CAAAf,IAAA,EAAAgB,SAAA;EAEP,MAAMC,WAAW,GAAGtB,UAAU,CAACE,WAAW,CAACqB,OAAO,CAAC;EAEnD,MAAMC,KAAK,GAAGA,CAAA,KAAM;IAClB,IAAIlB,OAAO,KAAK,KAAK,EAAE;MACrB;IACF;IAEA,IAAIC,WAAW,IAAI,CAACN,OAAO,CAACwB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEnB,WAAW,CAAC,EAAE;MAC9D;IACF;IACA,IAAIC,aAAa,IAAIP,OAAO,CAACwB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAElB,aAAa,CAAC,EAAE;MACjE;IACF;IAEA,IACEC,UAAU,KACT,CAACR,OAAO,CAACwB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEjB,UAAU,CAAC,IACzC,CAACR,OAAO,CAAC0B,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEjB,UAAU,CAAC,CAAC,EAC7C;MACA;IACF;IACA,IACEC,SAAS,IACTT,OAAO,CAACwB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEhB,SAAS,CAAC,IACxCkB,OAAO,CAAC3B,OAAO,CAAC0B,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEhB,SAAS,CAAC,CAAC,EACjD;MACA;IACF;IAEA,IACEC,QAAQ,KACP,CAACV,OAAO,CAACwB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEf,QAAQ,CAAC,IACvCV,OAAO,CAAC0B,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEf,QAAQ,CAAC,KAAK,IAAI,CAAC,EACnD;MACA;IACF;IACA,IACEC,SAAS,KACR,CAACX,OAAO,CAACwB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEd,SAAS,CAAC,IACxCX,OAAO,CAAC0B,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEd,SAAS,CAAC,KAAK,KAAK,CAAC,EACrD;MACA;IACF;IAEA,IACEC,SAAS,IACT,EACEZ,OAAO,CAACwB,GAAG,CAACH,WAAW,CAACI,IAAI,EAAEb,SAAS,CAAC,IACxCZ,OAAO,CAAC0B,GAAG,CAACL,WAAW,CAACI,IAAI,EAAEb,SAAS,CAAC,KAAKC,SAAS,CACvD,EACD;MACA;IACF;IAEA,IAAIC,SAAS,IAAI,CAACA,SAAS,CAACO,WAAW,CAACI,IAAI,CAAC,EAAE;MAC7C;IACF;IAEA,OAAO,IAAI;EACb,CAAC;EAED,IAAIV,OAAO,EAAE;IACX,OACEjB,KAAA,CAAA8B,aAAA,CAAC1B,eAAe,EAAA2B,QAAA;MACdC,IAAI,EAAEH,OAAO,CAACJ,KAAK,CAAC,CAAC,CAAE;MACvBP,SAAS,EAAEA,SAAU;MACrBe,SAAS,EAAC;IAAsB,GAC5Bb,IAAI,GAEPD,QACc,CAAC;EAEtB;EAEA,IAAIM,KAAK,CAAC,CAAC,EAAE;IACX,OAAOzB,KAAA,CAAA8B,aAAA,CAAA9B,KAAA,CAAAkC,QAAA,QAAGf,QAAW,CAAC;EACxB;EAEA,IAAID,SAAS,EAAE;IACb,OACElB,KAAA,CAAA8B,aAAA;MAAMG,SAAS,EAAC,sBAAsB;MAACE,MAAM;IAAA,GAC1ChB,QACG,CAAC;EAEX;EAEA,OAAO,IAAI;AACb;AAEAd,UAAU,CAAC+B,qBAAqB,GAAG,UAAU;AAC7C,eAAe/B,UAAU"}
+{"version":3,"file":"Visibility.js","names":["React","useContext","pointer","warn","useMountEffect","HeightAnimation","DataContext","FieldProps","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","inferData","animate","keepInDOM","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","dataContext","check","has","data","get","Boolean","open","props","createElement","_extends","className","hidden","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes, useContext } from 'react'\nimport pointer from 'json-pointer'\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\nimport DataContext from '../../DataContext/Context'\nimport FieldProps from '../FieldProps'\nimport type { UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: string\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: string\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: string\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: string\n  /** Given data context path must be true to show children */\n  pathTrue?: string\n  /** Given data context path must be false to show children */\n  pathFalse?: string\n  /** Given data context path must match, as well as the \"whenValue\" value */\n  pathValue?: string\n  /** Given data context value must match this value to show children */\n  whenValue?: unknown\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  inferData,\n  animate,\n  keepInDOM,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  const dataContext = useContext(DataContext)\n\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const check = () => {\n    if (visible === false) {\n      return\n    }\n\n    if (pathDefined && !pointer.has(dataContext.data, pathDefined)) {\n      return\n    }\n    if (pathUndefined && pointer.has(dataContext.data, pathUndefined)) {\n      return\n    }\n\n    if (\n      pathTruthy &&\n      (!pointer.has(dataContext.data, pathTruthy) ||\n        !pointer.get(dataContext.data, pathTruthy))\n    ) {\n      return\n    }\n    if (\n      pathFalsy &&\n      pointer.has(dataContext.data, pathFalsy) &&\n      Boolean(pointer.get(dataContext.data, pathFalsy))\n    ) {\n      return\n    }\n\n    if (\n      pathTrue &&\n      (!pointer.has(dataContext.data, pathTrue) ||\n        pointer.get(dataContext.data, pathTrue) !== true)\n    ) {\n      return\n    }\n    if (\n      pathFalse &&\n      (!pointer.has(dataContext.data, pathFalse) ||\n        pointer.get(dataContext.data, pathFalse) !== false)\n    ) {\n      return\n    }\n\n    if (\n      pathValue &&\n      !(\n        pointer.has(dataContext.data, pathValue) &&\n        pointer.get(dataContext.data, pathValue) === whenValue\n      )\n    ) {\n      return\n    }\n\n    if (inferData && !inferData(dataContext.data)) {\n      return\n    }\n\n    return true\n  }\n\n  const open = Boolean(check())\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        keepInDOM={keepInDOM}\n        className=\"dnb-forms-visibility\"\n        {...rest}\n      >\n        <FieldProps {...props}>{children}</FieldProps>\n      </HeightAnimation>\n    )\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProps {...props}>{children}</FieldProps>\n      </span>\n    )\n  }\n\n  return open ? children : null\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":"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"}

package/extensions/forms/Form/Visibility/VisibilityDocs.js

@@ -59,6 +59,11 @@ export const VisibilityProperties = {
     type: 'boolean',
     status: 'optional'
   },
+  fieldPropsWhenHidden: {
+    doc: 'When visibility is hidden, and `keepInDOM` is true, pass these props to the children.',
+    type: 'various',
+    status: 'optional'
+  },
   element: {
     doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',
     type: 'string or React.Element',

package/extensions/forms/Form/Visibility/VisibilityDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityDocs.js","names":["VisibilityProperties","pathDefined","doc","type","status","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","inferData","visible","animate","keepInDOM","element","children"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathValue: {\n    doc: 'Given data context path must match, as well as the `whenValue` value.',\n    type: 'string',\n    status: 'optional',\n  },\n  whenValue: {\n    doc: 'The value to match. Should be used together with `pathValue`.',\n    type: 'string',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly by boolean value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbH,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,SAAS,EAAE;IACTR,GAAG,EAAE,uEAAuE;IAC5EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,OAAO,EAAE;IACPd,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDa,QAAQ,EAAE;IACRf,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"VisibilityDocs.js","names":["VisibilityProperties","pathDefined","doc","type","status","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","inferData","visible","animate","keepInDOM","fieldPropsWhenHidden","element","children"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathValue: {\n    doc: 'Given data context path must match, as well as the `whenValue` value.',\n    type: 'string',\n    status: 'optional',\n  },\n  whenValue: {\n    doc: 'The value to match. Should be used together with `pathValue`.',\n    type: 'string',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly by boolean value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  fieldPropsWhenHidden: {\n    doc: 'When visibility is hidden, and `keepInDOM` is true, pass these props to the children.',\n    type: 'various',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbH,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,SAAS,EAAE;IACTR,GAAG,EAAE,uEAAuE;IAC5EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,oBAAoB,EAAE;IACpBd,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDa,OAAO,EAAE;IACPf,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDc,QAAQ,EAAE;IACRhB,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Form/index.d.ts

@@ -7,6 +7,7 @@ export { default as ButtonRow } from './ButtonRow';
 export { default as MainHeading } from './MainHeading';
 export { default as SubHeading } from './SubHeading';
 export { default as Visibility } from './Visibility';
+export { default as FieldProps } from './FieldProps';
 export { default as useData } from './data-context/useData';
 export { default as setData } from './data-context/setData';
 export { default as getData } from './data-context/getData';

package/extensions/forms/Form/index.js

@@ -7,6 +7,7 @@ export { default as ButtonRow } from './ButtonRow';
 export { default as MainHeading } from './MainHeading';
 export { default as SubHeading } from './SubHeading';
 export { default as Visibility } from './Visibility';
+export { default as FieldProps } from './FieldProps';
 export { default as useData } from './data-context/useData';
 export { default as setData } from './data-context/setData';
 export { default as getData } from './data-context/getData';

package/extensions/forms/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Handler","Element","Appearance","SubmitButton","SubmitIndicator","ButtonRow","MainHeading","SubHeading","Visibility","useData","setData","getData","useError","useTranslation","useLocale"],"sources":["../../../../../src/extensions/forms/Form/index.ts"],"sourcesContent":["export { default as Handler } from './Handler'\nexport { default as Element } from './Element'\nexport { default as Appearance } from './Appearance'\nexport { default as SubmitButton } from './SubmitButton'\nexport { default as SubmitIndicator } from './SubmitIndicator'\nexport { default as ButtonRow } from './ButtonRow'\nexport { default as MainHeading } from './MainHeading'\nexport { default as SubHeading } from './SubHeading'\nexport { default as Visibility } from './Visibility'\nexport { default as useData } from './data-context/useData'\nexport { default as setData } from './data-context/setData'\nexport { default as getData } from './data-context/getData'\nexport { default as useError } from './data-context/useError'\nexport { default as useTranslation } from '../hooks/useTranslation'\n\n/**\n * Can be removed in v11\n * @deprecated Use `useTranslation` instead\n */\nexport { default as useLocale } from '../hooks/useTranslation'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,WAAW;AAC9C,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,UAAU,QAAQ,cAAc;AACpD,SAASH,OAAO,IAAII,YAAY,QAAQ,gBAAgB;AACxD,SAASJ,OAAO,IAAIK,eAAe,QAAQ,mBAAmB;AAC9D,SAASL,OAAO,IAAIM,SAAS,QAAQ,aAAa;AAClD,SAASN,OAAO,IAAIO,WAAW,QAAQ,eAAe;AACtD,SAASP,OAAO,IAAIQ,UAAU,QAAQ,cAAc;AACpD,SAASR,OAAO,IAAIS,UAAU,QAAQ,cAAc;AACpD,SAAST,OAAO,IAAIU,OAAO,QAAQ,wBAAwB;AAC3D,SAASV,OAAO,IAAIW,OAAO,QAAQ,wBAAwB;AAC3D,SAASX,OAAO,IAAIY,OAAO,QAAQ,wBAAwB;AAC3D,SAASZ,OAAO,IAAIa,QAAQ,QAAQ,yBAAyB;AAC7D,SAASb,OAAO,IAAIc,cAAc,QAAQ,yBAAyB;AAMnE,SAASd,OAAO,IAAIe,SAAS,QAAQ,yBAAyB"}
+{"version":3,"file":"index.js","names":["default","Handler","Element","Appearance","SubmitButton","SubmitIndicator","ButtonRow","MainHeading","SubHeading","Visibility","FieldProps","useData","setData","getData","useError","useTranslation","useLocale"],"sources":["../../../../../src/extensions/forms/Form/index.ts"],"sourcesContent":["export { default as Handler } from './Handler'\nexport { default as Element } from './Element'\nexport { default as Appearance } from './Appearance'\nexport { default as SubmitButton } from './SubmitButton'\nexport { default as SubmitIndicator } from './SubmitIndicator'\nexport { default as ButtonRow } from './ButtonRow'\nexport { default as MainHeading } from './MainHeading'\nexport { default as SubHeading } from './SubHeading'\nexport { default as Visibility } from './Visibility'\nexport { default as FieldProps } from './FieldProps'\nexport { default as useData } from './data-context/useData'\nexport { default as setData } from './data-context/setData'\nexport { default as getData } from './data-context/getData'\nexport { default as useError } from './data-context/useError'\nexport { default as useTranslation } from '../hooks/useTranslation'\n\n/**\n * Can be removed in v11\n * @deprecated Use `useTranslation` instead\n */\nexport { default as useLocale } from '../hooks/useTranslation'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,OAAO,QAAQ,WAAW;AAC9C,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,UAAU,QAAQ,cAAc;AACpD,SAASH,OAAO,IAAII,YAAY,QAAQ,gBAAgB;AACxD,SAASJ,OAAO,IAAIK,eAAe,QAAQ,mBAAmB;AAC9D,SAASL,OAAO,IAAIM,SAAS,QAAQ,aAAa;AAClD,SAASN,OAAO,IAAIO,WAAW,QAAQ,eAAe;AACtD,SAASP,OAAO,IAAIQ,UAAU,QAAQ,cAAc;AACpD,SAASR,OAAO,IAAIS,UAAU,QAAQ,cAAc;AACpD,SAAST,OAAO,IAAIU,UAAU,QAAQ,cAAc;AACpD,SAASV,OAAO,IAAIW,OAAO,QAAQ,wBAAwB;AAC3D,SAASX,OAAO,IAAIY,OAAO,QAAQ,wBAAwB;AAC3D,SAASZ,OAAO,IAAIa,OAAO,QAAQ,wBAAwB;AAC3D,SAASb,OAAO,IAAIc,QAAQ,QAAQ,yBAAyB;AAC7D,SAASd,OAAO,IAAIe,cAAc,QAAQ,yBAAyB;AAMnE,SAASf,OAAO,IAAIgB,SAAS,QAAQ,yBAAyB"}

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":";;;;;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,UAAU,QAAQ,OAAO;AACnD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,EAAE,EAAEC,EAAE,EAAEC,EAAE,EAAEC,IAAI,QAAQ,mBAAmB;AACpD,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,OAAOC,kBAAkB,MAAM,yCAAyC;AAExE,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,OAAOC,iBAAiB,MAAM,qBAAqB;AAmBnD,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAMC,kBAAkB,GAAGZ,UAAU,CAACO,kBAAkB,CAAC;EACzD,MAAMM,iBAAiB,GAAGb,UAAU,CAACS,iBAAiB,CAAC;EAEvD,MAAM;IACJK,SAAS;IACTC,KAAK,EAAEC,SAAS;IAChBC,MAAM;IACNC,QAAQ,GAAGP,KAAK,CAACQ,WAAW,GAAGR,KAAK,CAACO,QAAQ,GAAG,OAAO;IACvDE,WAAW;IACXC,SAAS;IACTC,QAAQ;IACRH,WAAW;IACXI,GAAG,GAAG;EACR,CAAC,GAAGZ,KAAK;EAET,MAAMI,KAAK,GAAGE,MAAM,GAAG,IAAI,GAAGD,SAAS;EAEvC,IACE,CAACM,QAAQ,KAAKE,SAAS,IAAIF,QAAQ,KAAK,IAAI,IAAIA,QAAQ,KAAK,KAAK,KAClE,CAACD,SAAS,IACV,CAACD,WAAW,EACZ;IACA,OAAO,IAAI;EACb;EAEA,IAAIK,OAAO,GAAG,IAAI;EAElB,MAAMC,gBAAgB,GACpBP,WAAW,GACR,uCACCA,WAAW,KAAK,IAAI,GAAG,YAAY,GAAGA,WACvC,EAAC,KACL;EAED,IAAIP,kBAAkB,EAAE;IACtB,MAAMe,OAAO,GAAGf,kBAAkB,CAACgB,QAAQ,GACvCzB,EAAE,GACFS,kBAAkB,CAACiB,MAAM,KAAK,YAAY,GAC1C1B,EAAE,CAAC2B,IAAI,GACP/B,QAAQ;IAEZ,IAAI,CAACgB,KAAK,IAAIF,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEM,WAAW,EAAE;MAAA,IAAAY,KAAA;MAC5CN,OAAO,IAAAM,KAAA,GACLjC,KAAA,CAAAkC,aAAA;QACElB,SAAS,EACP,gCAAgC,IAChCS,GAAG,2CAA2CA,GAAI;MAClD,GAEDD,QACG,CAAC,cAAAS,KAAA,cAAAA,KAAA,GAEPjC,KAAA,CAAAkC,aAAA;QAAMlB,SAAS,EAAC;MAAoC,GACjDM,WACG,CACP;IACH,CAAC,MAAM;MACLK,OAAO,GACL3B,KAAA,CAAAkC,aAAA,CAACL,OAAO,QACN7B,KAAA,CAAAkC,aAAA,CAACzB,kBAAkB,CAAC0B,QAAQ;QAC1BC,KAAK,EAAAC,aAAA,CAAAA,aAAA,KAAOvB,kBAAkB;UAAEgB,QAAQ,EAAE;QAAI;MAAG,GAEhDb,KAAK,IACJjB,KAAA,CAAAkC,aAAA,CAAC5B,EAAE;QAACU,SAAS,EAAC;MAA8B,GAC1ChB,KAAA,CAAAkC,aAAA,iBAASjB,KAAc,CACrB,CACL,EACDjB,KAAA,CAAAkC,aAAA,CAAC9B,EAAE;QACDY,SAAS,EAAEb,UAAU,CAKnByB,gBAAgB,EAJhBd,kBAAkB,CAACiB,MAAM,KAAK,MAAM,IAClC,CAACjB,kBAAkB,CAACgB,QAAQ,IAC5BV,QAAQ,IACP,oCAAmCA,QAAS,EAEjD;MAAE,GAEDI,QAAQ,GACPxB,KAAA,CAAAkC,aAAA;QACElB,SAAS,EACP,gCAAgC,IAChCS,GAAG,2CAA2CA,GAAI;MAClD,GAEDD,QACG,CAAC,GAEPxB,KAAA,CAAAkC,aAAA;QAAMlB,SAAS,EAAC;MAAoC,GACjDM,WACG,CAEN,CACuB,CACtB,CACV;IACH;EACF,CAAC,MAAM;IACLK,OAAO,GACL3B,KAAA,CAAAkC,aAAA,CAAC3B,IAAI,EAAA+B,QAAA;MACHtB,SAAS,EAAEb,UAAU,CACnB,uBAAuB,EAGvByB,gBAAgB,EAChBZ,SAAS,EAHTG,MAAM,IAAI,+BAA+B,EACzCC,QAAQ,IAAK,oCAAmCA,QAAS,EAG3D;IAAE,GACEV,gBAAgB,CAACG,KAAK,CAAC,GAE1BI,KAAK,IACJjB,KAAA,CAAAkC,aAAA,CAAC1B,SAAS;MACR+B,OAAO,EAAC,QAAQ;MAChBvB,SAAS,EAAC,8BAA8B;MACxCwB,cAAc,EAAErB,MAAM,GAAG,YAAY,GAAG;IAAW,GAElDF,KACQ,CACZ,EACAO,QAAQ,GACPxB,KAAA,CAAAkC,aAAA;MACElB,SAAS,EACP,gCAAgC,IAChCS,GAAG,2CAA2CA,GAAI;IAClD,GAEDD,QACG,CAAC,GAEPxB,KAAA,CAAAkC,aAAA;MAAMlB,SAAS,EAAC;IAAoC,GACjDM,WACG,CAEJ,CACP;EACH;EAEA,OACEtB,KAAA,CAAAkC,aAAA,CAACvB,iBAAiB,CAACwB,QAAQ;IAACC,KAAK,EAAEvB;EAAM,GACtCc,OACyB,CAAC;AAEjC;AAEAf,UAAU,CAAC6B,qBAAqB,GAAG,IAAI;AACvC,eAAe7B,UAAU"}
+{"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 = () => {