@dnb/eufemia 10.34.1 → 10.35.0

package/extensions/forms/Field/ArraySelection/ArraySelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","ToggleButton","classnames","OptionField","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","info","warning","disabled","emptyValue","handleChange","children","fieldSectionProps","_objectSpread","forId","contentClassName","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","title","handleSelect","selected","newValue","includes","length","createElement","Provider","status","undefined","i","key","text","checked","on_change","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldProps<Array<string | number> | undefined> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button'\n  optionsLayout?: 'horizontal' | 'vertical'\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const fieldSectionProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    ...pickSpacingProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options.map((option, i) => (\n              <ToggleButton\n                key={`option-${i}-${option.value}`}\n                text={option.title}\n                checked={value?.includes(option.value)}\n                on_change={option.handleSelect}\n              />\n            ))}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n              status={hasError ? 'error' : undefined}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["React","useMemo","Checkbox","HelpButton","ToggleButton","classnames","OptionField","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","handleChange","children","fieldSectionProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","handleSelect","selected","newValue","includes","length","Provider","status","i","key","text","checked","on_change","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const fieldSectionProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            const newValue = value?.includes(selected)\n              ? value.filter((value) => value !== selected)\n              : [...(value ?? []), selected]\n\n            handleChange?.(newValue.length === 0 ? emptyValue : newValue)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options.map((option, i) => (\n              <ToggleButton\n                key={`option-${i}-${option.value}`}\n                text={option.title}\n                checked={value?.includes(option.value)}\n                on_change={option.handleSelect}\n              />\n            ))}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          {options.map((option, i) => (\n            <Checkbox\n              key={`option-${i}-${option.value}`}\n              className=\"dnb-forms-field-array-selection__checkbox\"\n              label={option.title}\n              checked={value?.includes(option.value)}\n              disabled={disabled}\n              on_change={option.handleSelect}\n              status={hasError ? 'error' : undefined}\n            />\n          ))}\n        </FieldBlock>\n      )\n  }\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

package/extensions/forms/Field/Option/Option.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { FieldProps } from '../../types';
+import type { FieldHelpProps, FieldProps } from '../../types';
 import { DrawerListProps } from '../../../../fragments/DrawerList';
-export type Props = FieldProps<number | string> & {
+export type Props = FieldHelpProps & FieldProps<number | string> & {
     title?: string;
     text?: string;
     children?: React.ReactNode;

package/extensions/forms/Field/Option/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","names":["React","classnames","Option","_ref","className","title","text","children","createElement","role","makeOptions","Children","map","child","isValidElement","type","_child$props$value","_ref2","_child$props$children","_child$props$children2","props","selectedKey","String","value","content","_em","filter","Boolean"],"sources":["../../../../../../src/extensions/forms/Field/Option/Option.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport type { FieldProps } from '../../types'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\n\nexport type Props = FieldProps<number | string> & {\n  title?: string\n  text?: string\n  children?: React.ReactNode\n}\n\nexport default function Option({\n  className,\n  title,\n  text,\n  children,\n}: Props) {\n  return (\n    <span\n      className={classnames('dnb-forms-field-option', className)}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\"\n    >\n      {children ?? title}\n      {text}\n    </span>\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode\n): T {\n  return React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.type === Option) {\n      // Option components\n      return child.props.text\n        ? {\n            selectedKey: String(child.props.value ?? ''),\n            content: [\n              child.props.children ?? child.props.title ?? (\n                <em>Untitled</em>\n              ),\n              child.props.text,\n            ],\n          }\n        : {\n            selectedKey: child.props.value,\n            content: child.props.children ?? child.props.title,\n          }\n    }\n\n    if (child) {\n      // For other children, just show them as content\n      return {\n        content: child,\n      }\n    }\n  }).filter(Boolean) as T\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAUnC,eAAe,SAASC,MAAMA,CAAAC,IAAA,EAKpB;EAAA,IALqB;IAC7BC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC;EACK,CAAC,GAAAJ,IAAA;EACN,OACEH,KAAA,CAAAQ,aAAA;IACEJ,SAAS,EAAEH,UAAU,CAAC,wBAAwB,EAAEG,SAAS,CAAE;IAE3DK,IAAI,EAAC;EAAQ,GAEZF,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIF,KAAK,EACjBC,IACG,CAAC;AAEX;AAEA,OAAO,SAASI,WAAWA,CACzBH,QAAyB,EACtB;EACH,OAAOP,KAAK,CAACW,QAAQ,CAACC,GAAG,CAACL,QAAQ,EAAGM,KAAK,IAAK;IAC7C,IAAIb,KAAK,CAACc,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKb,MAAM,EAAE;MAAA,IAAAc,kBAAA,EAAAC,KAAA,EAAAC,qBAAA,EAAAC,sBAAA;MAExD,OAAON,KAAK,CAACO,KAAK,CAACd,IAAI,GACnB;QACEe,WAAW,EAAEC,MAAM,EAAAN,kBAAA,GAACH,KAAK,CAACO,KAAK,CAACG,KAAK,cAAAP,kBAAA,cAAAA,kBAAA,GAAI,EAAE,CAAC;QAC5CQ,OAAO,EAAE,EAAAP,KAAA,IAAAC,qBAAA,GACPL,KAAK,CAACO,KAAK,CAACb,QAAQ,cAAAW,qBAAA,cAAAA,qBAAA,GAAIL,KAAK,CAACO,KAAK,CAACf,KAAK,cAAAY,KAAA,cAAAA,KAAA,GAAAQ,GAAA,KAAAA,GAAA,GACvCzB,KAAA,CAAAQ,aAAA,aAAI,UAAY,CAAC,GAEnBK,KAAK,CAACO,KAAK,CAACd,IAAI;MAEpB,CAAC,GACD;QACEe,WAAW,EAAER,KAAK,CAACO,KAAK,CAACG,KAAK;QAC9BC,OAAO,GAAAL,sBAAA,GAAEN,KAAK,CAACO,KAAK,CAACb,QAAQ,cAAAY,sBAAA,cAAAA,sBAAA,GAAIN,KAAK,CAACO,KAAK,CAACf;MAC/C,CAAC;IACP;IAEA,IAAIQ,KAAK,EAAE;MAET,OAAO;QACLW,OAAO,EAAEX;MACX,CAAC;IACH;EACF,CAAC,CAAC,CAACa,MAAM,CAACC,OAAO,CAAC;AACpB"}
+{"version":3,"file":"Option.js","names":["React","classnames","Option","_ref","className","title","text","children","createElement","role","makeOptions","Children","map","child","isValidElement","type","_child$props$value","_ref2","_child$props$children","_child$props$children2","props","selectedKey","String","value","content","_em","filter","Boolean"],"sources":["../../../../../../src/extensions/forms/Field/Option/Option.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport type { FieldHelpProps, FieldProps } from '../../types'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\n\nexport type Props = FieldHelpProps &\n  FieldProps<number | string> & {\n    title?: string\n    text?: string\n    children?: React.ReactNode\n  }\n\nexport default function Option({\n  className,\n  title,\n  text,\n  children,\n}: Props) {\n  return (\n    <span\n      className={classnames('dnb-forms-field-option', className)}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      role=\"option\"\n    >\n      {children ?? title}\n      {text}\n    </span>\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode\n): T {\n  return React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.type === Option) {\n      // Option components\n      return child.props.text\n        ? {\n            selectedKey: String(child.props.value ?? ''),\n            content: [\n              child.props.children ?? child.props.title ?? (\n                <em>Untitled</em>\n              ),\n              child.props.text,\n            ],\n          }\n        : {\n            selectedKey: child.props.value,\n            content: child.props.children ?? child.props.title,\n          }\n    }\n\n    if (child) {\n      // For other children, just show them as content\n      return {\n        content: child,\n      }\n    }\n  }).filter(Boolean) as T\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAWnC,eAAe,SAASC,MAAMA,CAAAC,IAAA,EAKpB;EAAA,IALqB;IAC7BC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC;EACK,CAAC,GAAAJ,IAAA;EACN,OACEH,KAAA,CAAAQ,aAAA;IACEJ,SAAS,EAAEH,UAAU,CAAC,wBAAwB,EAAEG,SAAS,CAAE;IAE3DK,IAAI,EAAC;EAAQ,GAEZF,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIF,KAAK,EACjBC,IACG,CAAC;AAEX;AAEA,OAAO,SAASI,WAAWA,CACzBH,QAAyB,EACtB;EACH,OAAOP,KAAK,CAACW,QAAQ,CAACC,GAAG,CAACL,QAAQ,EAAGM,KAAK,IAAK;IAC7C,IAAIb,KAAK,CAACc,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKb,MAAM,EAAE;MAAA,IAAAc,kBAAA,EAAAC,KAAA,EAAAC,qBAAA,EAAAC,sBAAA;MAExD,OAAON,KAAK,CAACO,KAAK,CAACd,IAAI,GACnB;QACEe,WAAW,EAAEC,MAAM,EAAAN,kBAAA,GAACH,KAAK,CAACO,KAAK,CAACG,KAAK,cAAAP,kBAAA,cAAAA,kBAAA,GAAI,EAAE,CAAC;QAC5CQ,OAAO,EAAE,EAAAP,KAAA,IAAAC,qBAAA,GACPL,KAAK,CAACO,KAAK,CAACb,QAAQ,cAAAW,qBAAA,cAAAA,qBAAA,GAAIL,KAAK,CAACO,KAAK,CAACf,KAAK,cAAAY,KAAA,cAAAA,KAAA,GAAAQ,GAAA,KAAAA,GAAA,GACvCzB,KAAA,CAAAQ,aAAA,aAAI,UAAY,CAAC,GAEnBK,KAAK,CAACO,KAAK,CAACd,IAAI;MAEpB,CAAC,GACD;QACEe,WAAW,EAAER,KAAK,CAACO,KAAK,CAACG,KAAK;QAC9BC,OAAO,GAAAL,sBAAA,GAAEN,KAAK,CAACO,KAAK,CAACb,QAAQ,cAAAY,sBAAA,cAAAA,sBAAA,GAAIN,KAAK,CAACO,KAAK,CAACf;MAC/C,CAAC;IACP;IAEA,IAAIQ,KAAK,EAAE;MAET,OAAO;QACLW,OAAO,EAAEX;MACX,CAAC;IACH;EACF,CAAC,CAAC,CAACa,MAAM,CAACC,OAAO,CAAC;AACpB"}

package/extensions/forms/Field/PhoneNumber/PhoneNumber.js

@@ -117,7 +117,7 @@ function PhoneNumber(props) {
   const updateCurrentDataSet = useCallback(() => {
     dataRef.current = getCountryData({
       lang,
-      filter: ccFilter === 'Prioritized' && !wasFilled.current ? country => `${formattCountryCode(country.cdc)}` === countryCodeRef.current : filterCountries,
+      filter: ccFilter === 'Prioritized' && !wasFilled.current ? country => `${formatCountryCode(country.cdc)}` === countryCodeRef.current : filterCountries,
       sort: ccFilter,
       makeObject
     });
@@ -192,7 +192,7 @@ function PhoneNumber(props) {
         return cdc === cdcVal;
       });
       if (country !== null && country !== void 0 && country.cdc) {
-        const countryCode = countryCodeRef.current = formattCountryCode(country.cdc);
+        const countryCode = countryCodeRef.current = formatCountryCode(country.cdc);
         updateCurrentDataSet();
         updateData(dataRef.current);
         callOnChange({
@@ -264,12 +264,12 @@ function PhoneNumber(props) {
 function makeObject(country, lang) {
   var _country$i18n$lang;
   return {
-    selectedKey: formattCountryCode(country.cdc),
-    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,
-    content: `${formattCountryCode(country.cdc)} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
+    selectedKey: formatCountryCode(country.cdc),
+    selected_value: `${country.iso} (${formatCountryCode(country.cdc)})`,
+    content: `${formatCountryCode(country.cdc)} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
   };
 }
-function formattCountryCode(value) {
+function formatCountryCode(value) {
   return `+${value}`;
 }
 function splitValue(value) {

package/extensions/forms/Field/PhoneNumber/PhoneNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringField","FieldBlock","useFieldProps","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","useErrorMessage","useTranslation","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","translations","lang","locale","split","countryCodeRef","useRef","emptyValue","numberRef","dataRef","langRef","wasFilled","errorMessages","path","required","errorRequired","pattern","validateRequired","value","_ref","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","schema","_props$schema","type","defaultProps","preparedProps","_objectSpread","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","numberMask","ccFilter","info","warning","hasError","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","filterCountries","external","updateCurrentDataSet","filter","country","formattCountryCode","cdc","sort","makeObject","callOnChange","_ref2","joinValue","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","onFocusHandler","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","createElement","_extends","Horizontal","align","mode","label_direction","status","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","layout","mask","Array","fill","onFocus","onBlur","onChange","inputMode","_country$i18n$lang","selected_value","iso","content","i18n","en","match","slice","array","Boolean","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, {\n  type CountryLang,\n  type CountryType,\n} from '../../constants/countries'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldHelpProps,\n  FieldProps,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DrawerListDataObject } from '../../../../fragments/DrawerList'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    pattern?: StringFieldProps['pattern']\n    width?: 'large' | 'stretch'\n    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n    countries?: CountryFilterSet\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\n// Important for the default value to be defined here, and not after the useFieldProps call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const translations = useTranslation()\n  const lang = sharedContext.locale?.split('-')[0] as CountryLang\n\n  const countryCodeRef = React.useRef<Props['value']>(props?.emptyValue)\n  const numberRef = React.useRef<Props['value']>(props?.emptyValue)\n  const dataRef = React.useRef<Array<DrawerListDataObject>>(null)\n  const langRef = React.useRef<string>(lang)\n  const wasFilled = React.useRef<boolean>(false)\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.PhoneNumber.errorRequired,\n    pattern: translations.PhoneNumber.errorRequired,\n  })\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged, error }) => {\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n  const defaultProps: Partial<Props> = {\n    schema,\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...props,\n    ...defaultProps,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\n    value,\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = translations.PhoneNumber.label,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    width = 'large',\n    help,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useFieldProps(preparedProps)\n\n  function fromExternal(external: string) {\n    const [, phoneNumber] = splitValue(external)\n    if (!phoneNumber && !props.omitCountryCodeField) {\n      return countryCodeRef.current\n    }\n    return external\n  }\n\n  function toEvent(value: string) {\n    const [, phoneNumber] = splitValue(value)\n    if (!phoneNumber) {\n      return emptyValue\n    }\n    return value\n  }\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter:\n        // Make sure the whole cc list is displayed when cc filter is set to specific region\n        ccFilter === 'Prioritized' && !wasFilled.current\n          ? (country) =>\n              `${formattCountryCode(country.cdc)}` ===\n              countryCodeRef.current\n          : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, handleChange]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update countryCode and phoneNumber when value changes.\n   */\n  useMemo(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value || value)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      if (!countryCodeRef.current || countryCode) {\n        countryCodeRef.current = countryCode || defaultCountryCode\n      }\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [value, props.value, lang, updateCurrentDataSet])\n\n  const prevCountryCodeRef = React.useRef(countryCodeRef.current)\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formattCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={\n              countryCodeLabel ?? translations.PhoneNumber.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={hasError ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={onFocusHandler}\n            on_blur={handleBlur}\n            on_change={handleCountryCodeChange}\n            on_type={onTypeHandler}\n            independent_width\n            search_numbers\n            keep_selection\n            autoComplete=\"tel-country-code\"\n            no_animation={props.noAnimation}\n            stretch={width === 'stretch'}\n          />\n        )}\n\n        <StringField\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          emptyValue={emptyValue}\n          layout=\"vertical\"\n          label={label}\n          placeholder={\n            placeholder ?? (isDefault ? defaultPlaceholder : undefined)\n          }\n          mask={\n            numberMask ?? (isDefault ? defaultMask : Array(12).fill(/\\d/))\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\n          required={required}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formattCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringField","FieldBlock","useFieldProps","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","useErrorMessage","useTranslation","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","translations","lang","locale","split","countryCodeRef","useRef","emptyValue","numberRef","dataRef","langRef","wasFilled","errorMessages","path","required","errorRequired","pattern","validateRequired","value","_ref","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","schema","_props$schema","type","defaultProps","preparedProps","_objectSpread","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","numberMask","ccFilter","info","warning","hasError","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","filterCountries","external","updateCurrentDataSet","filter","country","formatCountryCode","cdc","sort","makeObject","callOnChange","_ref2","joinValue","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","onFocusHandler","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","createElement","_extends","Horizontal","align","mode","label_direction","status","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","layout","mask","Array","fill","onFocus","onBlur","onChange","inputMode","_country$i18n$lang","selected_value","iso","content","i18n","en","match","slice","array","Boolean","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, {\n  type CountryLang,\n  type CountryType,\n} from '../../constants/countries'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldHelpProps,\n  FieldProps,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DrawerListDataObject } from '../../../../fragments/DrawerList'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    pattern?: StringFieldProps['pattern']\n    width?: 'large' | 'stretch'\n    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n    countries?: CountryFilterSet\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\n// Important for the default value to be defined here, and not after the useFieldProps call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const translations = useTranslation()\n  const lang = sharedContext.locale?.split('-')[0] as CountryLang\n\n  const countryCodeRef = React.useRef<Props['value']>(props?.emptyValue)\n  const numberRef = React.useRef<Props['value']>(props?.emptyValue)\n  const dataRef = React.useRef<Array<DrawerListDataObject>>(null)\n  const langRef = React.useRef<string>(lang)\n  const wasFilled = React.useRef<boolean>(false)\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.PhoneNumber.errorRequired,\n    pattern: translations.PhoneNumber.errorRequired,\n  })\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged, error }) => {\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n  const defaultProps: Partial<Props> = {\n    schema,\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...props,\n    ...defaultProps,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\n    value,\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = translations.PhoneNumber.label,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    width = 'large',\n    help,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useFieldProps(preparedProps)\n\n  function fromExternal(external: string) {\n    const [, phoneNumber] = splitValue(external)\n    if (!phoneNumber && !props.omitCountryCodeField) {\n      return countryCodeRef.current\n    }\n    return external\n  }\n\n  function toEvent(value: string) {\n    const [, phoneNumber] = splitValue(value)\n    if (!phoneNumber) {\n      return emptyValue\n    }\n    return value\n  }\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter:\n        // Make sure the whole cc list is displayed when cc filter is set to specific region\n        ccFilter === 'Prioritized' && !wasFilled.current\n          ? (country) =>\n              `${formatCountryCode(country.cdc)}` ===\n              countryCodeRef.current\n          : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, handleChange]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update countryCode and phoneNumber when value changes.\n   */\n  useMemo(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value || value)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      if (!countryCodeRef.current || countryCode) {\n        countryCodeRef.current = countryCode || defaultCountryCode\n      }\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [value, props.value, lang, updateCurrentDataSet])\n\n  const prevCountryCodeRef = React.useRef(countryCodeRef.current)\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formatCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={\n              countryCodeLabel ?? translations.PhoneNumber.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={hasError ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={onFocusHandler}\n            on_blur={handleBlur}\n            on_change={handleCountryCodeChange}\n            on_type={onTypeHandler}\n            independent_width\n            search_numbers\n            keep_selection\n            autoComplete=\"tel-country-code\"\n            no_animation={props.noAnimation}\n            stretch={width === 'stretch'}\n          />\n        )}\n\n        <StringField\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          emptyValue={emptyValue}\n          layout=\"vertical\"\n          label={label}\n          placeholder={\n            placeholder ?? (isDefault ? defaultPlaceholder : undefined)\n          }\n          mask={\n            numberMask ?? (isDefault ? defaultMask : Array(12).fill(/\\d/))\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\n          required={required}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formatCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formatCountryCode(country.cdc)})`,\n    content: `${formatCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formatCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

package/extensions/forms/Field/Selection/Selection.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["error", "title", "children"],
+const _excluded = ["error", "title", "help", "children"],
   _excluded2 = ["value", "title", "status"];
 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; }
@@ -94,13 +94,18 @@ function Selection(props) {
             {
               error,
               title,
+              help,
               children
             } = _option$props,
             rest = _objectWithoutProperties(_option$props, _excluded);
           const status = getStatus(error);
           return _objectSpread({
             title: title !== null && title !== void 0 ? title : children,
-            status
+            status,
+            suffix: help ? React.createElement(HelpButton, {
+              size: "small",
+              title: help.title
+            }, help.content) : undefined
           }, rest);
         });
         const Component = variant === 'radio' ? Radio : ToggleButton;

package/extensions/forms/Field/Selection/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","makeOptions","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","children","data","autocompleteProps","dropdownProps","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldSectionProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","status","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","title","rest","_objectWithoutProperties","_excluded","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","sharedProps","list_class","portal_class","suffix","content","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { makeOptions } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type {\n  AutocompleteAllProps,\n  AutocompleteProps,\n} from '../../../../components/Autocomplete'\nimport type {\n  DropdownAllProps,\n  DropdownProps,\n} from '../../../../components/Dropdown'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Data = AutocompleteAllProps['data'] | DropdownAllProps['data']\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    children?: React.ReactNode\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps?: ToCamelCase<AutocompleteProps>\n    dropdownProps?: ToCamelCase<DropdownProps>\n    data?: Data\n    width?: FieldBlockWidth\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    data,\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldSectionProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const options: IOption[] = React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const { error, title, children, ...rest } = option.props\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            status,\n            ...rest,\n          }\n        })\n\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={(hasError || status) && 'error'}\n                  {...htmlAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data: data ?? makeOptions<Data>(children),\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldSectionProps} width={width}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","makeOptions","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","children","data","autocompleteProps","dropdownProps","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldSectionProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","status","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","title","rest","_objectWithoutProperties","_excluded","suffix","createElement","size","content","Component","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","sharedProps","list_class","portal_class","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { makeOptions } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type {\n  AutocompleteAllProps,\n  AutocompleteProps,\n} from '../../../../components/Autocomplete'\nimport type {\n  DropdownAllProps,\n  DropdownProps,\n} from '../../../../components/Dropdown'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Data = AutocompleteAllProps['data'] | DropdownAllProps['data']\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    children?: React.ReactNode\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps?: ToCamelCase<AutocompleteProps>\n    dropdownProps?: ToCamelCase<DropdownProps>\n    data?: Data\n    width?: FieldBlockWidth\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    data,\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldSectionProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const options: IOption[] = React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const { error, title, help, children, ...rest } = option.props\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            status,\n            suffix: help ? (\n              <HelpButton size=\"small\" title={help.title}>\n                {help.content}\n              </HelpButton>\n            ) : undefined,\n            ...rest,\n          }\n        })\n\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={(hasError || status) && 'error'}\n                  {...htmlAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data: data ?? makeOptions<Data>(children),\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldSectionProps} width={width}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/extensions/forms/Field/Toggle/Toggle.js

@@ -96,7 +96,12 @@ function Toggle(props) {
       }, htmlAttributes)));
     case 'buttons':
       return React.createElement(FieldBlock, _extends({}, fieldSectionProps, {
-        asFieldset: true
+        asFieldset: true,
+        labelDescription: React.createElement(React.Fragment, null, labelDescription, help ? React.createElement(HelpButton, {
+          size: "small",
+          left: labelDescription ? 'x-small' : false,
+          title: help.title
+        }, help.content) : undefined)
       }), React.createElement(ButtonRow, {
         bottom: "x-small"
       }, React.createElement(ToggleButtonGroupContext.Provider, {
@@ -104,8 +109,7 @@ function Toggle(props) {
           value: isOn ? 'on' : isOff ? 'off' : null,
           onChange: handleToggleChange,
           status: hasError ? 'error' : undefined,
-          disabled,
-          suffix
+          disabled
         }
       }, React.createElement(ToggleButton, _extends({
         text: textOn !== null && textOn !== void 0 ? textOn : translations.yes,

package/extensions/forms/Field/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useCallback","classnames","Checkbox","HelpButton","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","BooleanField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","help","info","warning","error","hasError","htmlAttributes","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldSectionPropsWithoutLabel","forId","fieldSectionProps","suffix","createElement","title","content","undefined","isOn","isOff","_extends","yes","no","status","onChange","text","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = FieldHelpProps & FieldProps<unknown> & ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().BooleanField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    help,\n    info,\n    warning,\n    error,\n    hasError,\n    htmlAttributes,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldSectionPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldSectionProps = {\n    ...fieldSectionPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    disabled,\n  }\n\n  const suffix = help ? (\n    <HelpButton title={help.title}>{help.content}</HelpButton>\n  ) : undefined\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldSectionPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              label ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            onChange={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldSectionProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n                suffix,\n              }}\n            >\n              <ToggleButton\n                text={textOn ?? translations.yes}\n                value=\"on\"\n                {...htmlAttributes}\n              />\n              <ToggleButton\n                text={textOff ?? translations.no}\n                value=\"off\"\n                {...htmlAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useCallback","classnames","Checkbox","HelpButton","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","BooleanField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","help","info","warning","error","hasError","htmlAttributes","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldSectionPropsWithoutLabel","forId","fieldSectionProps","suffix","createElement","title","content","undefined","isOn","isOff","_extends","yes","no","status","onChange","text","on_change","asFieldset","Fragment","size","left","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = FieldHelpProps & FieldProps<unknown> & ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().BooleanField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    help,\n    info,\n    warning,\n    error,\n    hasError,\n    htmlAttributes,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldSectionPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldSectionProps = {\n    ...fieldSectionPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    disabled,\n  }\n\n  const suffix = help ? (\n    <HelpButton title={help.title}>{help.content}</HelpButton>\n  ) : undefined\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldSectionPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              label ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            onChange={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock\n          {...fieldSectionProps}\n          asFieldset\n          labelDescription={\n            <>\n              {labelDescription}\n              {help ? (\n                <HelpButton\n                  size=\"small\"\n                  left={labelDescription ? 'x-small' : false}\n                  title={help.title}\n                >\n                  {help.content}\n                </HelpButton>\n              ) : undefined}\n            </>\n          }\n        >\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={textOn ?? translations.yes}\n                value=\"on\"\n                {...htmlAttributes}\n              />\n              <ToggleButton\n                text={textOff ?? translations.no}\n                value=\"off\"\n                {...htmlAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

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

@@ -10,8 +10,9 @@ import DataContext from '../../DataContext/Context';
 import { assignPropsWithContext, extendDeep } from '../../../../shared/component-helper';
 import FieldPropsContext from './FieldPropsContext';
 import SharedProvider from '../../../../shared/Provider';
+import SharedContext from '../../../../shared/Context';
 function FieldPropsProvider(props) {
-  var _dataContextRef$curre, _dataContextRef$curre2, _dataContextRef$curre3, _dataContextRef$curre4, _dataContextRef$curre5;
+  var _dataContextRef$curre, _dataContextRef$curre2, _dataContextRef$curre3;
   const {
       children,
       formElement,
@@ -20,43 +21,40 @@ function FieldPropsProvider(props) {
       deep
     } = props,
     restProps = _objectWithoutProperties(props, _excluded);
+  const sharedProviderParams = {};
   const nestedContext = useContext(FieldPropsContext);
+  const sharedContext = useContext(SharedContext);
   const dataContextRef = useRef();
   dataContextRef.current = useContext(DataContext);
-  const sharedProviderProps = {};
   const locale = (_dataContextRef$curre = (_dataContextRef$curre2 = dataContextRef.current) === null || _dataContextRef$curre2 === void 0 ? void 0 : (_dataContextRef$curre3 = _dataContextRef$curre2.props) === null || _dataContextRef$curre3 === void 0 ? void 0 : _dataContextRef$curre3.locale) !== null && _dataContextRef$curre !== void 0 ? _dataContextRef$curre : restProps === null || restProps === void 0 ? void 0 : restProps.locale;
-  const translations = extendDeep({}, restProps === null || restProps === void 0 ? void 0 : restProps.translations, (_dataContextRef$curre4 = dataContextRef.current) === null || _dataContextRef$curre4 === void 0 ? void 0 : (_dataContextRef$curre5 = _dataContextRef$curre4.props) === null || _dataContextRef$curre5 === void 0 ? void 0 : _dataContextRef$curre5.translations);
   const nestedFieldProps = useMemo(() => {
     return Object.assign((nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedProps) || {}, restProps);
   }, [nestedContext === null || nestedContext === void 0 ? void 0 : nestedContext.inheritedProps, restProps]);
   if (typeof nestedFieldProps.disabled === 'boolean') {
-    sharedProviderProps.formElement = {
+    sharedProviderParams.formElement = {
       disabled: nestedFieldProps.disabled
     };
   }
   if (formElement) {
-    sharedProviderProps.formElement = formElement;
+    sharedProviderParams.formElement = formElement;
   }
   if (FormStatus) {
-    sharedProviderProps.FormStatus = FormStatus;
+    sharedProviderParams.FormStatus = FormStatus;
   }
   if (locale) {
-    sharedProviderProps.locale = locale;
-  }
-  const formTranslations = useMemo(() => {
-    if (translations) {
-      return transformTranslations(translations);
-    }
-  }, [translations]);
-  if (formTranslations) {
-    sharedProviderProps.translations = formTranslations;
+    sharedProviderParams.locale = locale;
   }
+  sharedProviderParams.translations = useMemo(() => {
+    var _dataContextRef$curre4, _dataContextRef$curre5;
+    const translations = extendDeep({}, sharedContext.translations, restProps === null || restProps === void 0 ? void 0 : restProps.translations, (_dataContextRef$curre4 = dataContextRef.current) === null || _dataContextRef$curre4 === void 0 ? void 0 : (_dataContextRef$curre5 = _dataContextRef$curre4.props) === null || _dataContextRef$curre5 === void 0 ? void 0 : _dataContextRef$curre5.translations);
+    return translations;
+  }, [restProps === null || restProps === void 0 ? void 0 : restProps.translations, sharedContext.translations]);
   const extend = useCallback(fieldProps => {
     var _fieldProps$path, _fieldProps$path$spli, _nestedContext$inheri;
     const {
       required: requiredByContext
     } = dataContextRef.current;
-    const key = fieldProps === null || fieldProps === void 0 ? void 0 : (_fieldProps$path = fieldProps.path) === null || _fieldProps$path === void 0 ? void 0 : (_fieldProps$path$spli = _fieldProps$path.split('/')) === null || _fieldProps$path$spli === void 0 ? void 0 : _fieldProps$path$spli.pop();
+    const key = overwriteProps && (fieldProps === null || fieldProps === void 0 ? void 0 : (_fieldProps$path = fieldProps.path) === null || _fieldProps$path === void 0 ? void 0 : (_fieldProps$path$spli = _fieldProps$path.split('/')) === null || _fieldProps$path$spli === void 0 ? void 0 : _fieldProps$path$spli.pop());
     const overwrite = overwriteProps === null || overwriteProps === void 0 ? void 0 : overwriteProps[key];
     if (overwrite && fieldProps !== null && fieldProps !== void 0 && fieldProps.schema) {
       Object.keys(fieldProps.schema).forEach(key => {
@@ -69,32 +67,14 @@ function FieldPropsProvider(props) {
       required: requiredByContext !== null && requiredByContext !== void 0 ? requiredByContext : nestedContext === null || nestedContext === void 0 ? void 0 : (_nestedContext$inheri = nestedContext.inheritedContext) === null || _nestedContext$inheri === void 0 ? void 0 : _nestedContext$inheri.required
     }, nestedFieldProps);
     return deep ? nestedContext.extend(value) : value;
-  }, [deep, nestedContext, overwriteProps, nestedFieldProps]);
+  }, [deep, nestedContext, nestedFieldProps, overwriteProps]);
   return React.createElement(FieldPropsContext.Provider, {
     value: {
       extend,
       inheritedProps: restProps,
       inheritedContext: nestedFieldProps
     }
-  }, React.createElement(SharedProvider, sharedProviderProps, children));
-}
-function transformTranslations(translations) {
-  const result = {};
-  const trObj = translations;
-  for (const locale in trObj) {
-    const newObj = {
-      Forms: {}
-    };
-    for (const key in trObj[locale]) {
-      const newKeyObj = {};
-      for (const subKey in trObj[locale][key]) {
-        newKeyObj[subKey] = trObj[locale][key][subKey];
-      }
-      newObj.Forms[key] = newKeyObj;
-    }
-    result[locale] = newObj;
-  }
-  return result;
+  }, React.createElement(SharedProvider, sharedProviderParams, children));
 }
 FieldPropsProvider._supportsSpacingProps = 'children';
 export default FieldPropsProvider;

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

@@ -1 +1 @@
-{"version":3,"file":"FieldProps.js","names":["React","useCallback","useContext","useMemo","useRef","DataContext","assignPropsWithContext","extendDeep","FieldPropsContext","SharedProvider","FieldPropsProvider","props","_dataContextRef$curre","_dataContextRef$curre2","_dataContextRef$curre3","_dataContextRef$curre4","_dataContextRef$curre5","children","formElement","FormStatus","overwriteProps","deep","restProps","_objectWithoutProperties","_excluded","nestedContext","dataContextRef","current","sharedProviderProps","locale","translations","nestedFieldProps","Object","assign","inheritedProps","disabled","formTranslations","transformTranslations","extend","fieldProps","_fieldProps$path","_fieldProps$path$spli","_nestedContext$inheri","required","requiredByContext","key","path","split","pop","overwrite","schema","keys","forEach","value","_objectSpread","inheritedContext","createElement","Provider","result","trObj","newObj","Forms","newKeyObj","subKey","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldProps.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport {\n  assignPropsWithContext,\n  extendDeep,\n} from '../../../../shared/component-helper'\nimport FieldPropsContext from './FieldPropsContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport { ContextProps } from '../../../../shared/Context'\nimport type { FieldProps, Path, UseFieldProps } from '../../types'\n\nexport type FieldPropsProps = FieldProps & {\n  children: React.ReactNode\n\n  /**\n   * Locale to use for all nested Eufemia components\n   */\n  locale?: DataContextProps<unknown>['locale']\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translations?: DataContextProps<unknown>['translations']\n\n  /** For internal use only */\n  overwriteProps?: {\n    [key: Path]: FieldProps\n  }\n\n  /** For internal use only */\n  deep?: boolean\n\n  /** For internal use only */\n  formElement?: ContextProps['formElement']\n\n  /** For internal use only */\n  FormStatus?: { globalStatus: FormStatusProps }\n}\n\nfunction FieldPropsProvider(props: FieldPropsProps) {\n  const {\n    children,\n    formElement,\n    FormStatus,\n    overwriteProps,\n    deep,\n    ...restProps\n  } = 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  /**\n   * Always use data context as the last source for localization\n   */\n  const locale = dataContextRef.current?.props?.locale ?? restProps?.locale\n  const translations = extendDeep(\n    {},\n    restProps?.translations,\n    dataContextRef.current?.props?.translations\n  ) as ContextProps\n\n  const nestedFieldProps = useMemo(() => {\n    return Object.assign(\n      nestedContext?.inheritedProps || {},\n      restProps\n    ) as UseFieldProps\n  }, [nestedContext?.inheritedProps, restProps])\n\n  if (typeof nestedFieldProps.disabled === 'boolean') {\n    sharedProviderProps.formElement = {\n      disabled: nestedFieldProps.disabled,\n    }\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  const formTranslations = useMemo(() => {\n    if (translations) {\n      return transformTranslations(translations)\n    }\n  }, [translations])\n  if (formTranslations) {\n    sharedProviderProps.translations = formTranslations\n  }\n\n  const extend = useCallback(\n    <T extends FieldProps>(fieldProps: T) => {\n      // Extract props from data context to be used in fields\n      const { required: requiredByContext } = dataContextRef.current\n\n      // Extract props from overwriteProps to be used in fields\n      const key = fieldProps?.path?.split('/')?.pop()\n      const overwrite = overwriteProps?.[key]\n\n      // Overwrite given schema props\n      if (overwrite && fieldProps?.schema) {\n        Object.keys(fieldProps.schema).forEach((key) => {\n          if (overwrite?.[key]) {\n            fieldProps.schema[key] = overwrite[key]\n          }\n        })\n      }\n\n      const value = assignPropsWithContext(\n        overwrite ? { ...fieldProps, ...overwrite } : fieldProps,\n        {\n          required:\n            requiredByContext ?? nestedContext?.inheritedContext?.required,\n        },\n        nestedFieldProps as Record<string, unknown>\n      )\n\n      return (deep ? nestedContext.extend(value) : value) as T\n    },\n    [deep, nestedContext, overwriteProps, nestedFieldProps]\n  )\n\n  return (\n    <FieldPropsContext.Provider\n      value={{\n        extend,\n        inheritedProps: restProps,\n        inheritedContext: nestedFieldProps,\n      }}\n    >\n      <SharedProvider {...sharedProviderProps}>{children}</SharedProvider>\n    </FieldPropsContext.Provider>\n  )\n}\n\n/**\n * Transform translations into { 'nb-NO': { Forms: { ... } } }\n */\nfunction transformTranslations(\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\nFieldPropsProvider._supportsSpacingProps = 'children'\nexport default FieldPropsProvider\n"],"mappings":"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"}
+{"version":3,"file":"FieldProps.js","names":["React","useCallback","useContext","useMemo","useRef","DataContext","assignPropsWithContext","extendDeep","FieldPropsContext","SharedProvider","SharedContext","FieldPropsProvider","props","_dataContextRef$curre","_dataContextRef$curre2","_dataContextRef$curre3","children","formElement","FormStatus","overwriteProps","deep","restProps","_objectWithoutProperties","_excluded","sharedProviderParams","nestedContext","sharedContext","dataContextRef","current","locale","nestedFieldProps","Object","assign","inheritedProps","disabled","translations","_dataContextRef$curre4","_dataContextRef$curre5","extend","fieldProps","_fieldProps$path","_fieldProps$path$spli","_nestedContext$inheri","required","requiredByContext","key","path","split","pop","overwrite","schema","keys","forEach","value","_objectSpread","inheritedContext","createElement","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/FieldProps/FieldProps.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport { Props as DataContextProps } from '../../DataContext/Provider'\nimport { FormStatusProps } from '../../../../components/FormStatus'\nimport {\n  assignPropsWithContext,\n  extendDeep,\n} from '../../../../shared/component-helper'\nimport FieldPropsContext from './FieldPropsContext'\nimport SharedProvider from '../../../../shared/Provider'\nimport SharedContext, { ContextProps } from '../../../../shared/Context'\nimport type { FieldProps, Path, UseFieldProps } from '../../types'\n\nexport type FieldPropsProps = FieldProps & {\n  children: React.ReactNode\n\n  /**\n   * Locale to use for all nested Eufemia components\n   */\n  locale?: DataContextProps<unknown>['locale']\n\n  /**\n   * Provide your own translations. Use the same format as defined in the translation files\n   */\n  translations?: DataContextProps<unknown>['translations']\n\n  /** For internal use only */\n  overwriteProps?: {\n    [key: Path]: FieldProps\n  }\n\n  /** For internal use only */\n  deep?: boolean\n\n  /** For internal use only */\n  formElement?: ContextProps['formElement']\n\n  /** For internal use only */\n  FormStatus?: { globalStatus: FormStatusProps }\n}\n\nfunction FieldPropsProvider(props: FieldPropsProps) {\n  const {\n    children,\n    formElement,\n    FormStatus,\n    overwriteProps,\n    deep,\n    ...restProps\n  } = props\n\n  const sharedProviderParams: ContextProps = {}\n  const nestedContext = useContext(FieldPropsContext)\n  const sharedContext = useContext(SharedContext)\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext(DataContext)\n\n  /**\n   * Always use data context as the last source for localization\n   */\n  const locale = dataContextRef.current?.props?.locale ?? restProps?.locale\n\n  const nestedFieldProps = useMemo(() => {\n    return Object.assign(\n      nestedContext?.inheritedProps || {},\n      restProps\n    ) as UseFieldProps\n  }, [nestedContext?.inheritedProps, restProps])\n\n  if (typeof nestedFieldProps.disabled === 'boolean') {\n    sharedProviderParams.formElement = {\n      disabled: nestedFieldProps.disabled,\n    }\n  }\n  if (formElement) {\n    sharedProviderParams.formElement = formElement\n  }\n  if (FormStatus) {\n    sharedProviderParams.FormStatus = FormStatus\n  }\n  if (locale) {\n    sharedProviderParams.locale = locale\n  }\n  sharedProviderParams.translations = useMemo(() => {\n    const translations = extendDeep(\n      {},\n      sharedContext.translations,\n      restProps?.translations,\n      dataContextRef.current?.props?.translations\n    ) as ContextProps\n\n    return translations\n  }, [restProps?.translations, sharedContext.translations])\n\n  const extend = useCallback(\n    <T extends FieldProps>(fieldProps: T) => {\n      // Extract props from data context to be used in fields\n      const { required: requiredByContext } = dataContextRef.current\n\n      // Extract props from overwriteProps to be used in fields\n      const key = overwriteProps && fieldProps?.path?.split('/')?.pop()\n      const overwrite = overwriteProps?.[key]\n\n      // Overwrite given schema props\n      if (overwrite && fieldProps?.schema) {\n        Object.keys(fieldProps.schema).forEach((key) => {\n          if (overwrite?.[key]) {\n            fieldProps.schema[key] = overwrite[key]\n          }\n        })\n      }\n\n      const value = assignPropsWithContext(\n        overwrite ? { ...fieldProps, ...overwrite } : fieldProps,\n        {\n          required:\n            requiredByContext ?? nestedContext?.inheritedContext?.required,\n        },\n        nestedFieldProps as Record<string, unknown>\n      )\n\n      return (deep ? nestedContext.extend(value) : value) as T\n    },\n    [deep, nestedContext, nestedFieldProps, overwriteProps]\n  )\n\n  return (\n    <FieldPropsContext.Provider\n      value={{\n        extend,\n        inheritedProps: restProps,\n        inheritedContext: nestedFieldProps,\n      }}\n    >\n      <SharedProvider {...sharedProviderParams}>{children}</SharedProvider>\n    </FieldPropsContext.Provider>\n  )\n}\n\nFieldPropsProvider._supportsSpacingProps = 'children'\nexport default FieldPropsProvider\n"],"mappings":"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"}

package/extensions/forms/Form/Section/EditContainer/EditContainer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Props as FlexContainerProps } from '../../../../../components/flex/Container';
+import { SectionContainerProps } from '../containers/SectionContainer';
+export type Props = {
+    title?: React.ReactNode;
+};
+export type AllProps = Props & SectionContainerProps & FlexContainerProps;
+declare function EditContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;
+declare namespace EditContainer {
+    var _supportsSpacingProps: boolean;
+}
+export default EditContainer;