@dnb/eufemia 10.24.0 → 10.26.0

package/es/extensions/forms/Field/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useFieldProps","pickSpacingProps","clamp","useErrorMessage","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","fieldBlockContext","sharedContext","tr","translation","Forms","currency","currencyDisplay","percent","mask","step","decimalLimit","prefix","suffix","showStepControls","errorMessages","path","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","_objectSpread","preparedProps","width","composition","id","name","className","inputClassName","autoComplete","layout","placeholder","label","labelDescription","disabled","htmlAttributes","info","warning","error","hasError","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentWidth","increaseProps","variant","icon","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","createElement","content","_extends","asFieldset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  CustomErrorMessages,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minimum: tr.numberFieldErrorMinimum,\n    maximum: tr.numberFieldErrorMaximum,\n    exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n    exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n    multipleOf: tr.numberFieldErrorMultipleOf,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = { prefix, suffix, decimalLimit }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n    inputClassName,\n    autoComplete,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    htmlAttributes,\n    info,\n    warning,\n    error,\n    hasError,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      hasError && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invalid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...htmlAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useFieldProps","pickSpacingProps","clamp","useErrorMessage","useLocale","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","fieldBlockContext","sharedContext","translations","currency","currencyDisplay","percent","mask","step","decimalLimit","prefix","suffix","showStepControls","errorMessages","path","required","Field","errorRequired","minimum","NumberField","errorMinimum","maximum","errorMaximum","exclusiveMinimum","errorExclusiveMinimum","exclusiveMaximum","errorExclusiveMaximum","multipleOf","errorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","_objectSpread","preparedProps","width","composition","id","name","className","inputClassName","autoComplete","layout","placeholder","label","labelDescription","disabled","htmlAttributes","info","warning","error","hasError","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentWidth","increaseProps","variant","icon","tabIndex","onClick","title","translation","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","createElement","content","_extends","asFieldset","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  CustomErrorMessages,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useLocale from '../../hooks/useLocale'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const translations = useLocale()\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.Field.errorRequired,\n    minimum: translations.NumberField.errorMinimum,\n    maximum: translations.NumberField.errorMaximum,\n    exclusiveMinimum: translations.NumberField.errorExclusiveMinimum,\n    exclusiveMaximum: translations.NumberField.errorExclusiveMaximum,\n    multipleOf: translations.NumberField.errorMultipleOf,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = { prefix, suffix, decimalLimit }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n    inputClassName,\n    autoComplete,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    htmlAttributes,\n    info,\n    warning,\n    error,\n    hasError,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      hasError && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invalid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...htmlAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/es/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js

@@ -1,29 +1,26 @@
-"use client";
-
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import StringField from '../String';
-import SharedContext from '../../../../shared/Context';
 import useErrorMessage from '../../hooks/useErrorMessage';
+import useLocale from '../../hooks/useLocale';
 function OrganizationNumber(props) {
   var _props$pattern, _props$label, _props$width;
-  const sharedContext = useContext(SharedContext);
-  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const translations = useLocale().OrganizationNumber;
   const {
     validate = true,
     omitMask
   } = props;
   const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: tr.organizationNumberErrorRequired,
-    pattern: tr.organizationNumberErrorPattern
+    required: translations.errorRequired,
+    pattern: translations.errorPattern
   });
   const mask = useMemo(() => omitMask ? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/] : [/\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/], [omitMask]);
   const StringFieldProps = _objectSpread(_objectSpread({}, props), {}, {
     className: 'dnb-forms-field-organization-number',
     pattern: (_props$pattern = props.pattern) !== null && _props$pattern !== void 0 ? _props$pattern : validate ? '^[0-9]{9}$' : undefined,
-    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.organizationNumberLabel,
+    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : translations.label,
     errorMessages,
     mask,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium',

package/es/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationNumber.js","names":["React","useContext","useMemo","StringField","SharedContext","useErrorMessage","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","validate","omitMask","errorMessages","path","required","organizationNumberErrorRequired","pattern","organizationNumberErrorPattern","mask","StringFieldProps","_objectSpread","className","undefined","label","organizationNumberLabel","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\nexport type Props = StringFieldProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.organizationNumberErrorRequired,\n    pattern: tr.organizationNumberErrorPattern,\n  })\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n        : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n    [omitMask]\n  )\n\n  const StringFieldProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.organizationNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,eAAe,MAAM,6BAA6B;AAOzD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,aAAa,GAAGV,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMQ,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGT,KAAK;EAE3C,MAAMU,aAAa,GAAGZ,eAAe,CAACE,KAAK,CAACW,IAAI,EAAEX,KAAK,CAACU,aAAa,EAAE;IACrEE,QAAQ,EAAEP,EAAE,CAACQ,+BAA+B;IAC5CC,OAAO,EAAET,EAAE,CAACU;EACd,CAAC,CAAC;EAEF,MAAMC,IAAI,GAAGrB,OAAO,CAClB,MACEc,QAAQ,GACJ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EACtE,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBlB,KAAK;IACRmB,SAAS,EAAE,qCAAqC;IAChDL,OAAO,GAAAb,cAAA,GAAED,KAAK,CAACc,OAAO,cAAAb,cAAA,cAAAA,cAAA,GAAKO,QAAQ,GAAG,YAAY,GAAGY,SAAU;IAC/DC,KAAK,GAAAnB,YAAA,GACHF,KAAK,CAACqB,KAAK,cAAAnB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACe,uBAAuB;IAC1DZ,aAAa;IACbM,IAAI;IACJO,KAAK,GAAApB,YAAA,GAAEH,KAAK,CAACuB,KAAK,cAAApB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BqB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO/B,KAAA,CAAAgC,aAAA,CAAC7B,WAAW,EAAKqB,gBAAmB,CAAC;AAC9C;AAEAlB,kBAAkB,CAAC2B,qBAAqB,GAAG,IAAI;AAC/C,eAAe3B,kBAAkB"}
+{"version":3,"file":"OrganizationNumber.js","names":["React","useMemo","StringField","useErrorMessage","useLocale","OrganizationNumber","props","_props$pattern","_props$label","_props$width","translations","validate","omitMask","errorMessages","path","required","errorRequired","pattern","errorPattern","mask","StringFieldProps","_objectSpread","className","undefined","label","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useLocale from '../../hooks/useLocale'\n\nexport type Props = StringFieldProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n  const translations = useLocale().OrganizationNumber\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.errorRequired,\n    pattern: translations.errorPattern,\n  })\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n        : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n    [omitMask]\n  )\n\n  const StringFieldProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n    label: props.label ?? translations.label,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,SAAS,MAAM,uBAAuB;AAO7C,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,YAAY,GAAGN,SAAS,CAAC,CAAC,CAACC,kBAAkB;EAEnD,MAAM;IAAEM,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGN,KAAK;EAE3C,MAAMO,aAAa,GAAGV,eAAe,CAACG,KAAK,CAACQ,IAAI,EAAER,KAAK,CAACO,aAAa,EAAE;IACrEE,QAAQ,EAAEL,YAAY,CAACM,aAAa;IACpCC,OAAO,EAAEP,YAAY,CAACQ;EACxB,CAAC,CAAC;EAEF,MAAMC,IAAI,GAAGlB,OAAO,CAClB,MACEW,QAAQ,GACJ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EACtE,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBf,KAAK;IACRgB,SAAS,EAAE,qCAAqC;IAChDL,OAAO,GAAAV,cAAA,GAAED,KAAK,CAACW,OAAO,cAAAV,cAAA,cAAAA,cAAA,GAAKI,QAAQ,GAAG,YAAY,GAAGY,SAAU;IAC/DC,KAAK,GAAAhB,YAAA,GAAEF,KAAK,CAACkB,KAAK,cAAAhB,YAAA,cAAAA,YAAA,GAAIE,YAAY,CAACc,KAAK;IACxCX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAhB,YAAA,GAAEH,KAAK,CAACmB,KAAK,cAAAhB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BiB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO1B,KAAA,CAAA2B,aAAA,CAACzB,WAAW,EAAKkB,gBAAmB,CAAC;AAC9C;AAEAf,kBAAkB,CAACuB,qBAAqB,GAAG,IAAI;AAC/C,eAAevB,kBAAkB"}

package/es/extensions/forms/Field/Password/Password.js

@@ -16,6 +16,7 @@ import IconViewOff from '../../../../icons/hide';
 import IconViewMedium from '../../../../icons/view_medium';
 import IconViewOffMedium from '../../../../icons/hide_medium';
 import { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps';
+import useLocale from '../../hooks/useLocale';
 function Password(_ref) {
   var _innerRef$current;
   let {
@@ -31,7 +32,7 @@ function Password(_ref) {
   const props = convertSnakeCaseProps(Object.freeze(externalProps));
   const [hidden, setHidden] = useState(true);
   const sharedContext = useContext(SharedContext);
-  const translations = sharedContext.translation.Forms;
+  const translations = useLocale().Password;
   const ref = useRef((_innerRef$current = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) !== null && _innerRef$current !== void 0 ? _innerRef$current : null);
   const toggleVisibility = useCallback(event => {
     const {
@@ -52,13 +53,9 @@ function Password(_ref) {
     }
   }, [props]);
   const getAriaLabel = useCallback(() => {
-    const {
-      passwordShowLabel,
-      passwordHideLabel
-    } = translations;
     const ariaLabels = {
-      showPassword: passwordShowLabel,
-      hidePassword: passwordHideLabel
+      showPassword: translations.ariaLabelShow,
+      hidePassword: translations.ariaLabelHide
     };
     if (externalProps.show_password) {
       ariaLabels['showPassword'] = externalProps.show_password;
@@ -85,7 +82,7 @@ function Password(_ref) {
   return React.createElement(StringField, _extends({
     id: id,
     className: classnames('dnb-forms-field-password', className),
-    label: label !== null && label !== void 0 ? label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.passwordLabel,
+    label: label !== null && label !== void 0 ? label : translations.label,
     type: hidden ? 'password' : 'text',
     value: value,
     innerRef: ref,

package/es/extensions/forms/Field/Password/Password.js.map

@@ -1 +1 @@
-{"version":3,"file":"Password.js","names":["React","useContext","useRef","useState","useCallback","classnames","SharedContext","StringField","SubmitButton","IconView","IconViewOff","IconViewMedium","IconViewOffMedium","convertSnakeCaseProps","Password","_ref","_innerRef$current","id","className","innerRef","value","label","disabled","size","externalProps","_objectWithoutProperties","_excluded","props","Object","freeze","hidden","setHidden","sharedContext","translations","translation","Forms","ref","current","toggleVisibility","event","onShowPassword","onHidePassword","_objectSpread","focus","getAriaLabel","passwordShowLabel","passwordHideLabel","ariaLabels","showPassword","hidePassword","show_password","hide_password","ToggleVisibilityButton","createElement","type","variant","icon","skeleton","onClick","_extends","passwordLabel","submitElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Password/Password.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useRef,\n  useState,\n  ElementRef,\n  MutableRefObject,\n  useCallback,\n} from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport { InputProps, SubmitButton } from '../../../../components/Input'\nimport IconView from '../../../../icons/view'\nimport IconViewOff from '../../../../icons/hide'\nimport IconViewMedium from '../../../../icons/view_medium'\nimport IconViewOffMedium from '../../../../icons/hide_medium'\nimport { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps'\n\nexport type PasswordVisibilityEvent =\n  React.MouseEvent<HTMLButtonElement> & {\n    value: string\n  }\n\nexport type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {\n  /**\n   * Fires when the input toggles to show the password.\n   */\n  onShowPassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * Fires when the input toggles to hide the password.\n   */\n  onHidePassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute.\n   */\n  size?: InputProps['size']\n  /**\n   * ElementRef passed on to the password input element.\n   */\n  innerRef?: MutableRefObject<HTMLInputElement>\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordShowLabel` instead.\n   */\n  show_password?: string\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordHideLabel` instead.\n   */\n  hide_password?: string\n  /**\n   * @deprecated in v11, use `onShowPassword` instead.\n   */\n  on_show_password?: (event: PasswordVisibilityEvent) => void\n  /**\n   * @deprecated in v11, use `onHidePassword` instead.\n   */\n  on_hide_password?: (event: PasswordVisibilityEvent) => void\n}\n\nfunction Password({\n  id,\n  className,\n  innerRef,\n  value,\n  label,\n  disabled,\n  size,\n  ...externalProps\n}: PasswordProps) {\n  // Object freeze used to prevent mutation of show_password and hide_password props. Freeze and convertToSnakeCase can be removed in v11.\n  const props = convertSnakeCaseProps(Object.freeze(externalProps))\n\n  const [hidden, setHidden] = useState<boolean>(true)\n\n  const sharedContext = useContext(SharedContext)\n  const translations = sharedContext.translation.Forms\n\n  const ref = useRef<ElementRef<'input'>>(innerRef?.current ?? null)\n\n  const toggleVisibility = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      const { onShowPassword, onHidePassword } =\n        convertSnakeCaseProps(props)\n\n      const value = ref.current.value\n\n      setHidden((hidden) => {\n        hidden\n          ? onShowPassword?.({ ...event, value })\n          : onHidePassword?.({ ...event, value })\n\n        return !hidden\n      })\n\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [props]\n  )\n\n  // Can be removed with v11, just used to make sure that the old show_password and hide_password are still backward compatible.\n  const getAriaLabel = useCallback(() => {\n    const { passwordShowLabel, passwordHideLabel } = translations\n\n    const ariaLabels = {\n      showPassword: passwordShowLabel,\n      hidePassword: passwordHideLabel,\n    }\n\n    if (externalProps.show_password) {\n      ariaLabels['showPassword'] = externalProps.show_password\n    }\n\n    if (externalProps.hide_password) {\n      ariaLabels['hidePassword'] = externalProps.hide_password\n    }\n\n    return ariaLabels\n  }, [\n    externalProps.show_password,\n    externalProps.hide_password,\n    translations,\n  ])\n\n  const ariaLabels = getAriaLabel()\n\n  const ToggleVisibilityButton = useCallback(() => {\n    return (\n      <SubmitButton\n        id={id + '-submit-button'}\n        type=\"button\"\n        variant=\"secondary\"\n        aria-controls={id}\n        aria-label={\n          hidden ? ariaLabels.showPassword : ariaLabels.hidePassword\n        }\n        icon={\n          size === 'large'\n            ? hidden\n              ? IconViewMedium\n              : IconViewOffMedium\n            : hidden\n            ? IconView\n            : IconViewOff\n        }\n        // status={hasError ? 'error' : undefined}\n        disabled={disabled}\n        skeleton={sharedContext.skeleton}\n        onClick={toggleVisibility}\n      />\n    )\n  }, [\n    id,\n    hidden,\n    sharedContext.skeleton,\n    disabled,\n    size,\n    toggleVisibility,\n    ariaLabels,\n  ])\n\n  return (\n    <StringField\n      id={id}\n      className={classnames('dnb-forms-field-password', className)}\n      label={label ?? sharedContext?.translation.Forms.passwordLabel}\n      type={hidden ? 'password' : 'text'}\n      value={value}\n      innerRef={ref}\n      aria-describedby={id + '-submit-button'}\n      submitElement={<ToggleVisibilityButton />}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nexport default Password\n\nPassword._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Password.js","names":["React","useContext","useRef","useState","useCallback","classnames","SharedContext","StringField","SubmitButton","IconView","IconViewOff","IconViewMedium","IconViewOffMedium","convertSnakeCaseProps","useLocale","Password","_ref","_innerRef$current","id","className","innerRef","value","label","disabled","size","externalProps","_objectWithoutProperties","_excluded","props","Object","freeze","hidden","setHidden","sharedContext","translations","ref","current","toggleVisibility","event","onShowPassword","onHidePassword","_objectSpread","focus","getAriaLabel","ariaLabels","showPassword","ariaLabelShow","hidePassword","ariaLabelHide","show_password","hide_password","ToggleVisibilityButton","createElement","type","variant","icon","skeleton","onClick","_extends","submitElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Password/Password.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useRef,\n  useState,\n  ElementRef,\n  MutableRefObject,\n  useCallback,\n} from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport { InputProps, SubmitButton } from '../../../../components/Input'\nimport IconView from '../../../../icons/view'\nimport IconViewOff from '../../../../icons/hide'\nimport IconViewMedium from '../../../../icons/view_medium'\nimport IconViewOffMedium from '../../../../icons/hide_medium'\nimport { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps'\nimport useLocale from '../../hooks/useLocale'\n\nexport type PasswordVisibilityEvent =\n  React.MouseEvent<HTMLButtonElement> & {\n    value: string\n  }\n\nexport type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {\n  /**\n   * Fires when the input toggles to show the password.\n   */\n  onShowPassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * Fires when the input toggles to hide the password.\n   */\n  onHidePassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute.\n   */\n  size?: InputProps['size']\n  /**\n   * ElementRef passed on to the password input element.\n   */\n  innerRef?: MutableRefObject<HTMLInputElement>\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordShowLabel` instead.\n   */\n  show_password?: string\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordHideLabel` instead.\n   */\n  hide_password?: string\n  /**\n   * @deprecated in v11, use `onShowPassword` instead.\n   */\n  on_show_password?: (event: PasswordVisibilityEvent) => void\n  /**\n   * @deprecated in v11, use `onHidePassword` instead.\n   */\n  on_hide_password?: (event: PasswordVisibilityEvent) => void\n}\n\nfunction Password({\n  id,\n  className,\n  innerRef,\n  value,\n  label,\n  disabled,\n  size,\n  ...externalProps\n}: PasswordProps) {\n  // Object freeze used to prevent mutation of show_password and hide_password props. Freeze and convertToSnakeCase can be removed in v11.\n  const props = convertSnakeCaseProps(Object.freeze(externalProps))\n\n  const [hidden, setHidden] = useState<boolean>(true)\n\n  const sharedContext = useContext(SharedContext)\n  const translations = useLocale().Password\n\n  const ref = useRef<ElementRef<'input'>>(innerRef?.current ?? null)\n\n  const toggleVisibility = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      const { onShowPassword, onHidePassword } =\n        convertSnakeCaseProps(props)\n\n      const value = ref.current.value\n\n      setHidden((hidden) => {\n        hidden\n          ? onShowPassword?.({ ...event, value })\n          : onHidePassword?.({ ...event, value })\n\n        return !hidden\n      })\n\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [props]\n  )\n\n  // Can be removed with v11, just used to make sure that the old show_password and hide_password are still backward compatible.\n  const getAriaLabel = useCallback(() => {\n    const ariaLabels = {\n      showPassword: translations.ariaLabelShow,\n      hidePassword: translations.ariaLabelHide,\n    }\n\n    if (externalProps.show_password) {\n      ariaLabels['showPassword'] = externalProps.show_password\n    }\n\n    if (externalProps.hide_password) {\n      ariaLabels['hidePassword'] = externalProps.hide_password\n    }\n\n    return ariaLabels\n  }, [\n    externalProps.show_password,\n    externalProps.hide_password,\n    translations,\n  ])\n\n  const ariaLabels = getAriaLabel()\n\n  const ToggleVisibilityButton = useCallback(() => {\n    return (\n      <SubmitButton\n        id={id + '-submit-button'}\n        type=\"button\"\n        variant=\"secondary\"\n        aria-controls={id}\n        aria-label={\n          hidden ? ariaLabels.showPassword : ariaLabels.hidePassword\n        }\n        icon={\n          size === 'large'\n            ? hidden\n              ? IconViewMedium\n              : IconViewOffMedium\n            : hidden\n            ? IconView\n            : IconViewOff\n        }\n        // status={hasError ? 'error' : undefined}\n        disabled={disabled}\n        skeleton={sharedContext.skeleton}\n        onClick={toggleVisibility}\n      />\n    )\n  }, [\n    id,\n    hidden,\n    sharedContext.skeleton,\n    disabled,\n    size,\n    toggleVisibility,\n    ariaLabels,\n  ])\n\n  return (\n    <StringField\n      id={id}\n      className={classnames('dnb-forms-field-password', className)}\n      label={label ?? translations.label}\n      type={hidden ? 'password' : 'text'}\n      value={value}\n      innerRef={ref}\n      aria-describedby={id + '-submit-button'}\n      submitElement={<ToggleVisibilityButton />}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nexport default Password\n\nPassword._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/extensions/forms/Field/PhoneNumber/PhoneNumber.d.ts

@@ -1,5 +1,5 @@
 import { InputMaskedProps } from '../../../../components/InputMasked';
-import { CountryType } from '../../constants/countries';
+import { type CountryType } from '../../constants/countries';
 import { Props as StringFieldProps } from '../String';
 import { FieldHelpProps, FieldProps } from '../../types';
 import { CountryFilterSet } from '../SelectCountry';

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

@@ -15,13 +15,14 @@ import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 import { getCountryData, makeCountryFilterSet } from '../SelectCountry';
 import useErrorMessage from '../../hooks/useErrorMessage';
+import useLocale from '../../hooks/useLocale';
 const defaultCountryCode = '+47';
 const defaultPlaceholder = '00 00 00 00';
 const defaultMask = [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/];
 function PhoneNumber(props) {
   var _sharedContext$locale, _countryCodeRef$curre;
   const sharedContext = useContext(SharedContext);
-  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const translations = useLocale();
   const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
   const countryCodeRef = React.useRef(props === null || props === void 0 ? void 0 : props.emptyValue);
   const numberRef = React.useRef(props === null || props === void 0 ? void 0 : props.emptyValue);
@@ -29,8 +30,8 @@ function PhoneNumber(props) {
   const langRef = React.useRef(lang);
   const wasFilled = React.useRef(false);
   const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: tr.phoneNumberErrorRequired,
-    pattern: tr.phoneNumberErrorRequired
+    required: translations.PhoneNumber.errorRequired,
+    pattern: translations.PhoneNumber.errorRequired
   });
   const validateRequired = useCallback((value, {
     required,
@@ -75,7 +76,7 @@ function PhoneNumber(props) {
     countryCodePlaceholder,
     placeholder,
     countryCodeLabel,
-    label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberLabel,
+    label = translations.PhoneNumber.label,
     numberMask,
     countries: ccFilter = 'Prioritized',
     emptyValue,
@@ -210,7 +211,7 @@ function PhoneNumber(props) {
     mode: "async",
     placeholder: countryCodePlaceholder,
     label_direction: "vertical",
-    label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
+    label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : translations.PhoneNumber.countryCodeLabel,
     data: dataRef.current,
     value: countryCodeRef.current,
     status: hasError ? 'error' : undefined,

package/es/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","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","useRef","emptyValue","numberRef","dataRef","langRef","wasFilled","errorMessages","path","required","phoneNumberErrorRequired","pattern","validateRequired","value","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","schema","_props$schema","type","defaultProps","preparedProps","_objectSpread","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","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","joinValue","handleCountryCodeChange","data","_data$selectedKey","selectedKey","trim","handleNumberChange","onFocusHandler","updateData","onTypeHandler","revalidateInputValue","event","_event$nativeEvent","nativeEvent","cdcVal","test","find","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, { CountryType } 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'\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 tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const countryCodeRef = React.useRef(props?.emptyValue)\n  const numberRef = React.useRef(props?.emptyValue)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.phoneNumberErrorRequired,\n    pattern: tr.phoneNumberErrorRequired,\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 = sharedContext?.translation.Forms.phoneNumberLabel,\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: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === 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 ??\n              sharedContext?.translation.Forms.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":";;;;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAC/D,SAASC,YAAY,EAAEC,IAAI,QAAQ,wBAAwB;AAE3D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAuB,2BAA2B;AAClE,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAM3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAEEC,cAAc,EACdC,oBAAoB,QACf,kBAAkB;AACzB,OAAOC,eAAe,MAAM,6BAA6B;AAgCzD,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,kBAAkB,GAAG,aAAa;AACxC,MAAMC,WAAW,GAAG,CAClB,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,CACL;AAED,SAASC,WAAWA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACjC,MAAMC,aAAa,GAAGrB,UAAU,CAACU,aAAa,CAAC;EAC/C,MAAMY,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAC3C,MAAMC,IAAI,IAAAN,qBAAA,GAAGE,aAAa,CAACK,MAAM,cAAAP,qBAAA,uBAApBA,qBAAA,CAAsBQ,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAEhD,MAAMC,cAAc,GAAG9B,KAAK,CAAC+B,MAAM,CAACX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,UAAU,CAAC;EACtD,MAAMC,SAAS,GAAGjC,KAAK,CAAC+B,MAAM,CAACX,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEY,UAAU,CAAC;EACjD,MAAME,OAAO,GAAGlC,KAAK,CAAC+B,MAAM,CAAC,IAAI,CAAC;EAClC,MAAMI,OAAO,GAAGnC,KAAK,CAAC+B,MAAM,CAACJ,IAAI,CAAC;EAClC,MAAMS,SAAS,GAAGpC,KAAK,CAAC+B,MAAM,CAAC,KAAK,CAAC;EAErC,MAAMM,aAAa,GAAGtB,eAAe,CAACK,KAAK,CAACkB,IAAI,EAAElB,KAAK,CAACiB,aAAa,EAAE;IACrEE,QAAQ,EAAEf,EAAE,CAACgB,wBAAwB;IACrCC,OAAO,EAAEjB,EAAE,CAACgB;EACd,CAAC,CAAC;EAEF,MAAME,gBAAgB,GAAGvC,WAAW,CAClC,CAACwC,KAAa,EAAE;IAAEJ,QAAQ;IAAEK,SAAS;IAAEC;EAAM,CAAC,KAAK;IACjD,IAAIN,QAAQ,EAAE;MACZ,MAAM,CAACO,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAACL,KAAK,CAAC;MAEpD,IAAIG,WAAW,KAAKG,kBAAkB,CAACC,OAAO,EAAE;QAC9C,IAAIJ,WAAW,EAAE;UACfG,kBAAkB,CAACC,OAAO,GAAGJ,WAAW;QAC1C;QACA,OAAOK,SAAS;MAClB;MAEA,IAAIP,SAAS,IAAI,CAACG,WAAW,EAAE;QAC7B,OAAOF,KAAK;MACd;IACF;IAEA,OAAOM,SAAS;EAClB,CAAC,EACD,EACF,CAAC;EAED,MAAMC,MAAM,GAAGnD,OAAO,CACpB;IAAA,IAAAoD,aAAA;IAAA,QAAAA,aAAA,GACEjC,KAAK,CAACgC,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdb,OAAO,EAAErB,KAAK,CAACqB;IACjB,CAAC;EAAA,GACH,CAACrB,KAAK,CAACgC,MAAM,EAAEhC,KAAK,CAACqB,OAAO,CAC9B,CAAC;EACD,MAAMc,YAA4B,GAAG;IACnCH,MAAM;IACNf;EACF,CAAC;EACD,MAAMmB,aAAoB,GAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACrBrC,KAAK,GACLmC,YAAY;IACfb,gBAAgB;IAChBgB,YAAY;IACZC;EAAO,EACR;EAED,MAAM;IACJhB,KAAK;IACLiB,SAAS;IACTC,yBAAyB;IACzBC,oBAAoB;IACpBC,sBAAsB;IACtBC,WAAW;IACXC,gBAAgB;IAChBC,KAAK,GAAG3C,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACyC,gBAAgB;IACzDC,UAAU;IACV7D,SAAS,EAAE8D,QAAQ,GAAG,aAAa;IACnCrC,UAAU;IACVsC,IAAI;IACJC,OAAO;IACP1B,KAAK;IACL2B,QAAQ;IACRC,QAAQ;IACRC,KAAK,GAAG,OAAO;IACfC,IAAI;IACJpC,QAAQ;IACRqC,iBAAiB;IACjBC,oBAAoB;IACpBC,iBAAiB;IACjBC,oBAAoB;IACpBC,WAAW;IACXC,UAAU;IACVC,YAAY;IACZC,mBAAmB;IACnBC,cAAc;IACdC,eAAe,GAAGhB,QAAQ,KAAK,aAAa,GACxCvD,oBAAoB,CAACuD,QAAQ,CAAC,GAC9BlB;EACN,CAAC,GAAGzC,aAAa,CAAC8C,aAAa,CAAC;EAEhC,SAASE,YAAYA,CAAC4B,QAAgB,EAAE;IACtC,MAAM,GAAGvC,WAAW,CAAC,GAAGC,UAAU,CAACsC,QAAQ,CAAC;IAC5C,IAAI,CAACvC,WAAW,IAAI,CAAC3B,KAAK,CAAC2D,oBAAoB,EAAE;MAC/C,OAAOjD,cAAc,CAACoB,OAAO;IAC/B;IACA,OAAOoC,QAAQ;EACjB;EAEA,SAAS3B,OAAOA,CAAChB,KAAa,EAAE;IAC9B,MAAM,GAAGI,WAAW,CAAC,GAAGC,UAAU,CAACL,KAAK,CAAC;IACzC,IAAI,CAACI,WAAW,EAAE;MAChB,OAAOf,UAAU;IACnB;IACA,OAAOW,KAAK;EACd;EAEA,MAAM4C,oBAAoB,GAAGpF,WAAW,CAAC,MAAM;IAC7C+B,OAAO,CAACgB,OAAO,GAAGrC,cAAc,CAAC;MAC/Bc,IAAI;MACJ6D,MAAM,EAAE,CAACpD,SAAS,CAACc,OAAO,GACrBuC,OAAO,IACL,GAAEC,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,EAAC,KAAK7D,cAAc,CAACoB,OAAO,GACjEmC,eAAe;MACnBO,IAAI,EAAEvB,QAAoD;MAC1DwB;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAAClE,IAAI,EAAE0D,eAAe,EAAEhB,QAAQ,CAAC,CAAC;EAErC,MAAMyB,YAAY,GAAG3F,WAAW,CAC9B,CAAC;IACC2C,WAAW,GAAGiC,oBAAoB,GAC9B/C,UAAU,GACVF,cAAc,CAACoB,OAAO,IAAIlB,UAAU;IACxCe,WAAW,GAAGd,SAAS,CAACiB,OAAO,IAAIlB;EACrC,CAAC,KAAK;IACJkD,YAAY,CACVa,SAAS,CAAC,CAACjD,WAAW,EAAEC,WAAW,CAAC,CAAC,EACrCgC,oBAAoB,GAChB;MAAEhC;IAAY,CAAC,GACf;MAAED,WAAW;MAAEC;IAAY,CACjC,CAAC;EACH,CAAC,EACD,CAACgC,oBAAoB,EAAE/C,UAAU,EAAEkD,YAAY,CACjD,CAAC;EAUDjF,OAAO,CAAC,MAAM;IACZ,MAAM,CAAC6C,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAAC5B,KAAK,CAACuB,KAAK,IAAIA,KAAK,CAAC;IACnEV,SAAS,CAACiB,OAAO,GAAGH,WAAW;IAE/B,IAAIpB,IAAI,KAAKQ,OAAO,CAACe,OAAO,IAAI,CAACd,SAAS,CAACc,OAAO,EAAE;MAClD,IAAI,CAACpB,cAAc,CAACoB,OAAO,IAAIJ,WAAW,EAAE;QAC1ChB,cAAc,CAACoB,OAAO,GAAGJ,WAAW,IAAI9B,kBAAkB;MAC5D;MACAmB,OAAO,CAACe,OAAO,GAAGvB,IAAI;MAEtB4D,oBAAoB,CAAC,CAAC;IACxB;EACF,CAAC,EAAE,CAAC5C,KAAK,EAAEvB,KAAK,CAACuB,KAAK,EAAEhB,IAAI,EAAE4D,oBAAoB,CAAC,CAAC;EAEpD,MAAMtC,kBAAkB,GAAGjD,KAAK,CAAC+B,MAAM,CAACD,cAAc,CAACoB,OAAO,CAAC;EAE/D,MAAM8C,uBAAuB,GAAG7F,WAAW,CACzC,CAAC;IAAE8F;EAAwC,CAAC,KAAK;IAAA,IAAAC,iBAAA;IAC/C,MAAMpD,WAAW,GAAIhB,cAAc,CAACoB,OAAO,GACzC,CAAA+C,IAAI,aAAJA,IAAI,wBAAAC,iBAAA,GAAJD,IAAI,CAAEE,WAAW,cAAAD,iBAAA,uBAAjBA,iBAAA,CAAmBE,IAAI,CAAC,CAAC,KAAIpE,UAAW;IAE1C8D,YAAY,CAAC;MAAEhD;IAAY,CAAC,CAAC;IAC7BqC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAGrC,WAAW,CAAC;EACpC,CAAC,EACD,CAACd,UAAU,EAAE8D,YAAY,EAAEX,mBAAmB,CAChD,CAAC;EAED,MAAMkB,kBAAkB,GAAGlG,WAAW,CACnCwC,KAAa,IAAK;IACjB,MAAMI,WAAW,GAAId,SAAS,CAACiB,OAAO,GAAGP,KAAK,IAAIX,UAAW;IAE7D8D,YAAY,CAAC;MAAE/C;IAAY,CAAC,CAAC;IAC7BqC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGrC,WAAW,CAAC;EAC/B,CAAC,EACD,CAACf,UAAU,EAAE8D,YAAY,EAAEV,cAAc,CAC3C,CAAC;EAED,MAAMkB,cAAc,GAAGnG,WAAW,CAChC,CAAC;IAAEoG;EAAW,CAAC,KAAK;IAClB,IAAI,CAACnE,SAAS,CAACc,OAAO,EAAE;MACtBd,SAAS,CAACc,OAAO,GAAG,IAAI;MACxBqC,oBAAoB,CAAC,CAAC;MACtBgB,UAAU,CAACrE,OAAO,CAACgB,OAAO,CAAC;IAC7B;IACA8B,WAAW,CAAC,CAAC;EACf,CAAC,EACD,CAACA,WAAW,EAAEO,oBAAoB,CACpC,CAAC;EAED,MAAMiB,aAAa,GAAGrG,WAAW,CAC/B,CAAC;IAAEwC,KAAK;IAAE4D,UAAU;IAAEE,oBAAoB;IAAEC;EAAM,CAAC,KAAK;IAAA,IAAAC,kBAAA;IAEtD,IAAI,QAAOD,KAAK,aAALA,KAAK,wBAAAC,kBAAA,GAALD,KAAK,CAAEE,WAAW,cAAAD,kBAAA,uBAAlBA,kBAAA,CAAoBV,IAAI,MAAK,WAAW,EAAE;MACnD,MAAMY,MAAM,GAAG,mBAAmB,CAACC,IAAI,CAACnE,KAAK,CAAC,GAC1CK,UAAU,CAACL,KAAK,CAAC,CAAC,CAAC,CAAC,GACpBA,KAAK;MACT,MAAM8C,OAAO,GAAGlF,SAAS,CAACwG,IAAI,CAAC,CAAC;QAAEpB;MAAI,CAAC,KAAKA,GAAG,KAAKkB,MAAM,CAAC;MAC3D,IAAIpB,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEE,GAAG,EAAE;QAChB,MAAM7C,WAAW,GAAIhB,cAAc,CAACoB,OAAO,GAAGwC,kBAAkB,CAC9DD,OAAO,CAACE,GACV,CAAE;QAEFJ,oBAAoB,CAAC,CAAC;QACtBgB,UAAU,CAACrE,OAAO,CAACgB,OAAO,CAAC;QAC3B4C,YAAY,CAAC;UAAEhD;QAAY,CAAC,CAAC;QAI7BkE,MAAM,CAACC,qBAAqB,CAAC,MAAM;UACjCR,oBAAoB,CAAC,CAAC;QACxB,CAAC,CAAC;MACJ;IACF;EACF,CAAC,EACD,CAACX,YAAY,EAAEP,oBAAoB,CACrC,CAAC;EAED,MAAM2B,SAAS,IAAA5F,qBAAA,GAAGQ,cAAc,CAACoB,OAAO,cAAA5B,qBAAA,uBAAtBA,qBAAA,CAAwB6F,QAAQ,CAACnG,kBAAkB,CAAC;EAEtE,OACEhB,KAAA,CAAAoH,aAAA,CAAC3G,UAAU,EAAA4G,QAAA;IACTzD,SAAS,EAAEtD,UAAU,CAAC,8BAA8B,EAAEsD,SAAS,CAAE;IACjEc,KAAK,EAAEK,oBAAoB,GAAG5B,SAAS,GAAGuB,KAAM;IAChDJ,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjB1B,KAAK,EAAEA,KAAM;IACb4B,QAAQ,EAAEA;EAAS,GACf9D,gBAAgB,CAACS,KAAK,CAAC,GAE3BpB,KAAA,CAAAoH,aAAA,CAAC/G,IAAI,CAACiH,UAAU;IAACC,KAAK,EAAC;EAAU,GAC9B,CAACxC,oBAAoB,IACpB/E,KAAA,CAAAoH,aAAA,CAAChH,YAAY;IACXwD,SAAS,EAAEtD,UAAU,CACnB,4CAA4C,EAC5CuD,yBACF,CAAE;IACF2D,IAAI,EAAC,OAAO;IACZxD,WAAW,EAAED,sBAAuB;IACpC0D,eAAe,EAAC,UAAU;IAC1BvD,KAAK,EACHD,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAChB1C,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACuC,gBAClC;IACDgC,IAAI,EAAE/D,OAAO,CAACgB,OAAQ;IACtBP,KAAK,EAAEb,cAAc,CAACoB,OAAQ;IAC9BwE,MAAM,EAAElD,QAAQ,GAAG,OAAO,GAAGrB,SAAU;IACvCsB,QAAQ,EAAEA,QAAS;IACnBkD,QAAQ,EAAErB,cAAe;IACzBsB,OAAO,EAAE3C,UAAW;IACpB4C,SAAS,EAAE7B,uBAAwB;IACnC8B,OAAO,EAAEtB,aAAc;IACvBuB,iBAAiB;IACjBC,cAAc;IACdC,cAAc;IACdC,YAAY,EAAC,kBAAkB;IAC/BC,YAAY,EAAE/G,KAAK,CAACgH,WAAY;IAChCC,OAAO,EAAE3D,KAAK,KAAK;EAAU,CAC9B,CACF,EAED1E,KAAA,CAAAoH,aAAA,CAAC5G,WAAW;IACVoD,SAAS,EAAEtD,UAAU,CACnB,sCAAsC,EACtCwD,oBACF,CAAE;IACFR,IAAI,EAAC,KAAK;IACV4E,YAAY,EAAC,cAAc;IAC3BlG,UAAU,EAAEA,UAAW;IACvBsG,MAAM,EAAC,UAAU;IACjBpE,KAAK,EAAEA,KAAM;IACbF,WAAW,EACTA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAKkD,SAAS,GAAGjG,kBAAkB,GAAGkC,SAClD;IACDoF,IAAI,EACFnE,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAK8C,SAAS,GAAGhG,WAAW,GAAGsH,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,IAAI,CAC7D;IACDC,OAAO,EAAE1D,WAAY;IACrB2D,MAAM,EAAE1D,UAAW;IACnB2D,QAAQ,EAAEvC,kBAAmB;IAC7B1D,KAAK,EAAEV,SAAS,CAACiB,OAAQ;IACzBoB,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjB1B,KAAK,EAAEA,KAAM;IACb4B,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEK,oBAAoB,GAAG,QAAQ,GAAG,SAAU;IACnDJ,IAAI,EAAEA,IAAK;IACXpC,QAAQ,EAAEA,QAAS;IACnBF,aAAa,EAAEA,aAAc;IAC7BuC,iBAAiB,EAAEA,iBAAkB;IACrCC,oBAAoB,EAAEA,oBAAqB;IAC3CC,iBAAiB,EAAEA,iBAAkB;IACrC+D,SAAS,EAAC;EAAK,CAChB,CACc,CACP,CAAC;AAEjB;AAEA,SAAShD,UAAUA,CAACJ,OAAoB,EAAE9D,IAAY,EAAE;EAAA,IAAAmH,kBAAA;EACtD,OAAO;IACL3C,WAAW,EAAET,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAC;IAC5CoD,cAAc,EAAG,GAAEtD,OAAO,CAACuD,GAAI,KAAItD,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,GAAE;IACrEsD,OAAO,EAAG,GAAEvD,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,IAAC,CAAAmD,kBAAA,GAC3CrD,OAAO,CAACyD,IAAI,CAACvH,IAAI,CAAC,cAAAmH,kBAAA,cAAAA,kBAAA,GAAIrD,OAAO,CAACyD,IAAI,CAACC,EACpC;EACH,CAAC;AACH;AAEA,SAASzD,kBAAkBA,CAAC/C,KAAa,EAAE;EACzC,OAAQ,IAAGA,KAAM,EAAC;AACpB;AAEA,SAASK,UAAUA,CAACL,KAAa,EAAE;EACjC,OAAO,CACL,OAAOA,KAAK,KAAK,QAAQ,GACrBA,KAAK,CAACyG,KAAK,CAAC,oBAAoB,CAAC,GACjC,CAACjG,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EACvBkG,KAAK,CAAC,CAAC,CAAC;AACZ;AAEA,SAAStD,SAASA,CAACuD,KAAoB,EAAE;EACvC,OAAOA,KAAK,CAAC9D,MAAM,CAAC+D,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AACxC;AAEArI,WAAW,CAACsI,qBAAqB,GAAG,IAAI;AACxC,eAAetI,WAAW"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringField","FieldBlock","useFieldProps","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","useErrorMessage","useLocale","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","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","joinValue","handleCountryCodeChange","data","_data$selectedKey","selectedKey","trim","handleNumberChange","onFocusHandler","updateData","onTypeHandler","revalidateInputValue","event","_event$nativeEvent","nativeEvent","cdcVal","test","find","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 useLocale from '../../hooks/useLocale'\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 = useLocale()\n  const lang = sharedContext.locale?.split('-')[0] as CountryLang\n\n  const countryCodeRef = React.useRef(props?.emptyValue)\n  const numberRef = React.useRef(props?.emptyValue)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(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: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === 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":";;;;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AAC/D,SAASC,YAAY,EAAEC,IAAI,QAAQ,wBAAwB;AAE3D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAGT,2BAA2B;AAClC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAM3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAEEC,cAAc,EACdC,oBAAoB,QACf,kBAAkB;AACzB,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,SAAS,MAAM,uBAAuB;AAgC7C,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,kBAAkB,GAAG,aAAa;AACxC,MAAMC,WAAW,GAAG,CAClB,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,CACL;AAED,SAASC,WAAWA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACjC,MAAMC,aAAa,GAAGtB,UAAU,CAACU,aAAa,CAAC;EAC/C,MAAMa,YAAY,GAAGT,SAAS,CAAC,CAAC;EAChC,MAAMU,IAAI,IAAAJ,qBAAA,GAAGE,aAAa,CAACG,MAAM,cAAAL,qBAAA,uBAApBA,qBAAA,CAAsBM,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAgB;EAE/D,MAAMC,cAAc,GAAG7B,KAAK,CAAC8B,MAAM,CAACT,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,UAAU,CAAC;EACtD,MAAMC,SAAS,GAAGhC,KAAK,CAAC8B,MAAM,CAACT,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEU,UAAU,CAAC;EACjD,MAAME,OAAO,GAAGjC,KAAK,CAAC8B,MAAM,CAAC,IAAI,CAAC;EAClC,MAAMI,OAAO,GAAGlC,KAAK,CAAC8B,MAAM,CAACJ,IAAI,CAAC;EAClC,MAAMS,SAAS,GAAGnC,KAAK,CAAC8B,MAAM,CAAC,KAAK,CAAC;EAErC,MAAMM,aAAa,GAAGrB,eAAe,CAACM,KAAK,CAACgB,IAAI,EAAEhB,KAAK,CAACe,aAAa,EAAE;IACrEE,QAAQ,EAAEb,YAAY,CAACL,WAAW,CAACmB,aAAa;IAChDC,OAAO,EAAEf,YAAY,CAACL,WAAW,CAACmB;EACpC,CAAC,CAAC;EAEF,MAAME,gBAAgB,GAAGtC,WAAW,CAClC,CAACuC,KAAa,EAAE;IAAEJ,QAAQ;IAAEK,SAAS;IAAEC;EAAM,CAAC,KAAK;IACjD,IAAIN,QAAQ,EAAE;MACZ,MAAM,CAACO,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAACL,KAAK,CAAC;MAEpD,IAAIG,WAAW,KAAKG,kBAAkB,CAACC,OAAO,EAAE;QAC9C,IAAIJ,WAAW,EAAE;UACfG,kBAAkB,CAACC,OAAO,GAAGJ,WAAW;QAC1C;QACA,OAAOK,SAAS;MAClB;MAEA,IAAIP,SAAS,IAAI,CAACG,WAAW,EAAE;QAC7B,OAAOF,KAAK;MACd;IACF;IAEA,OAAOM,SAAS;EAClB,CAAC,EACD,EACF,CAAC;EAED,MAAMC,MAAM,GAAGlD,OAAO,CACpB;IAAA,IAAAmD,aAAA;IAAA,QAAAA,aAAA,GACE/B,KAAK,CAAC8B,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdb,OAAO,EAAEnB,KAAK,CAACmB;IACjB,CAAC;EAAA,GACH,CAACnB,KAAK,CAAC8B,MAAM,EAAE9B,KAAK,CAACmB,OAAO,CAC9B,CAAC;EACD,MAAMc,YAA4B,GAAG;IACnCH,MAAM;IACNf;EACF,CAAC;EACD,MAAMmB,aAAoB,GAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACrBnC,KAAK,GACLiC,YAAY;IACfb,gBAAgB;IAChBgB,YAAY;IACZC;EAAO,EACR;EAED,MAAM;IACJhB,KAAK;IACLiB,SAAS;IACTC,yBAAyB;IACzBC,oBAAoB;IACpBC,sBAAsB;IACtBC,WAAW;IACXC,gBAAgB;IAChBC,KAAK,GAAGxC,YAAY,CAACL,WAAW,CAAC6C,KAAK;IACtCC,UAAU;IACV3D,SAAS,EAAE4D,QAAQ,GAAG,aAAa;IACnCpC,UAAU;IACVqC,IAAI;IACJC,OAAO;IACPzB,KAAK;IACL0B,QAAQ;IACRC,QAAQ;IACRC,KAAK,GAAG,OAAO;IACfC,IAAI;IACJnC,QAAQ;IACRoC,iBAAiB;IACjBC,oBAAoB;IACpBC,iBAAiB;IACjBC,oBAAoB;IACpBC,WAAW;IACXC,UAAU;IACVC,YAAY;IACZC,mBAAmB;IACnBC,cAAc;IACdC,eAAe,GAAGhB,QAAQ,KAAK,aAAa,GACxCrD,oBAAoB,CAACqD,QAAQ,CAAC,GAC9BjB;EACN,CAAC,GAAGxC,aAAa,CAAC6C,aAAa,CAAC;EAEhC,SAASE,YAAYA,CAAC2B,QAAgB,EAAE;IACtC,MAAM,GAAGtC,WAAW,CAAC,GAAGC,UAAU,CAACqC,QAAQ,CAAC;IAC5C,IAAI,CAACtC,WAAW,IAAI,CAACzB,KAAK,CAACwD,oBAAoB,EAAE;MAC/C,OAAOhD,cAAc,CAACoB,OAAO;IAC/B;IACA,OAAOmC,QAAQ;EACjB;EAEA,SAAS1B,OAAOA,CAAChB,KAAa,EAAE;IAC9B,MAAM,GAAGI,WAAW,CAAC,GAAGC,UAAU,CAACL,KAAK,CAAC;IACzC,IAAI,CAACI,WAAW,EAAE;MAChB,OAAOf,UAAU;IACnB;IACA,OAAOW,KAAK;EACd;EAEA,MAAM2C,oBAAoB,GAAGlF,WAAW,CAAC,MAAM;IAC7C8B,OAAO,CAACgB,OAAO,GAAGpC,cAAc,CAAC;MAC/Ba,IAAI;MACJ4D,MAAM,EAAE,CAACnD,SAAS,CAACc,OAAO,GACrBsC,OAAO,IACL,GAAEC,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,EAAC,KAAK5D,cAAc,CAACoB,OAAO,GACjEkC,eAAe;MACnBO,IAAI,EAAEvB,QAAoD;MAC1DwB;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACjE,IAAI,EAAEyD,eAAe,EAAEhB,QAAQ,CAAC,CAAC;EAErC,MAAMyB,YAAY,GAAGzF,WAAW,CAC9B,CAAC;IACC0C,WAAW,GAAGgC,oBAAoB,GAC9B9C,UAAU,GACVF,cAAc,CAACoB,OAAO,IAAIlB,UAAU;IACxCe,WAAW,GAAGd,SAAS,CAACiB,OAAO,IAAIlB;EACrC,CAAC,KAAK;IACJiD,YAAY,CACVa,SAAS,CAAC,CAAChD,WAAW,EAAEC,WAAW,CAAC,CAAC,EACrC+B,oBAAoB,GAChB;MAAE/B;IAAY,CAAC,GACf;MAAED,WAAW;MAAEC;IAAY,CACjC,CAAC;EACH,CAAC,EACD,CAAC+B,oBAAoB,EAAE9C,UAAU,EAAEiD,YAAY,CACjD,CAAC;EAUD/E,OAAO,CAAC,MAAM;IACZ,MAAM,CAAC4C,WAAW,EAAEC,WAAW,CAAC,GAAGC,UAAU,CAAC1B,KAAK,CAACqB,KAAK,IAAIA,KAAK,CAAC;IACnEV,SAAS,CAACiB,OAAO,GAAGH,WAAW;IAE/B,IAAIpB,IAAI,KAAKQ,OAAO,CAACe,OAAO,IAAI,CAACd,SAAS,CAACc,OAAO,EAAE;MAClD,IAAI,CAACpB,cAAc,CAACoB,OAAO,IAAIJ,WAAW,EAAE;QAC1ChB,cAAc,CAACoB,OAAO,GAAGJ,WAAW,IAAI5B,kBAAkB;MAC5D;MACAiB,OAAO,CAACe,OAAO,GAAGvB,IAAI;MAEtB2D,oBAAoB,CAAC,CAAC;IACxB;EACF,CAAC,EAAE,CAAC3C,KAAK,EAAErB,KAAK,CAACqB,KAAK,EAAEhB,IAAI,EAAE2D,oBAAoB,CAAC,CAAC;EAEpD,MAAMrC,kBAAkB,GAAGhD,KAAK,CAAC8B,MAAM,CAACD,cAAc,CAACoB,OAAO,CAAC;EAE/D,MAAM6C,uBAAuB,GAAG3F,WAAW,CACzC,CAAC;IAAE4F;EAAwC,CAAC,KAAK;IAAA,IAAAC,iBAAA;IAC/C,MAAMnD,WAAW,GAAIhB,cAAc,CAACoB,OAAO,GACzC,CAAA8C,IAAI,aAAJA,IAAI,wBAAAC,iBAAA,GAAJD,IAAI,CAAEE,WAAW,cAAAD,iBAAA,uBAAjBA,iBAAA,CAAmBE,IAAI,CAAC,CAAC,KAAInE,UAAW;IAE1C6D,YAAY,CAAC;MAAE/C;IAAY,CAAC,CAAC;IAC7BoC,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAGpC,WAAW,CAAC;EACpC,CAAC,EACD,CAACd,UAAU,EAAE6D,YAAY,EAAEX,mBAAmB,CAChD,CAAC;EAED,MAAMkB,kBAAkB,GAAGhG,WAAW,CACnCuC,KAAa,IAAK;IACjB,MAAMI,WAAW,GAAId,SAAS,CAACiB,OAAO,GAAGP,KAAK,IAAIX,UAAW;IAE7D6D,YAAY,CAAC;MAAE9C;IAAY,CAAC,CAAC;IAC7BoC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGpC,WAAW,CAAC;EAC/B,CAAC,EACD,CAACf,UAAU,EAAE6D,YAAY,EAAEV,cAAc,CAC3C,CAAC;EAED,MAAMkB,cAAc,GAAGjG,WAAW,CAChC,CAAC;IAAEkG;EAAW,CAAC,KAAK;IAClB,IAAI,CAAClE,SAAS,CAACc,OAAO,EAAE;MACtBd,SAAS,CAACc,OAAO,GAAG,IAAI;MACxBoC,oBAAoB,CAAC,CAAC;MACtBgB,UAAU,CAACpE,OAAO,CAACgB,OAAO,CAAC;IAC7B;IACA6B,WAAW,CAAC,CAAC;EACf,CAAC,EACD,CAACA,WAAW,EAAEO,oBAAoB,CACpC,CAAC;EAED,MAAMiB,aAAa,GAAGnG,WAAW,CAC/B,CAAC;IAAEuC,KAAK;IAAE2D,UAAU;IAAEE,oBAAoB;IAAEC;EAAM,CAAC,KAAK;IAAA,IAAAC,kBAAA;IAEtD,IAAI,QAAOD,KAAK,aAALA,KAAK,wBAAAC,kBAAA,GAALD,KAAK,CAAEE,WAAW,cAAAD,kBAAA,uBAAlBA,kBAAA,CAAoBV,IAAI,MAAK,WAAW,EAAE;MACnD,MAAMY,MAAM,GAAG,mBAAmB,CAACC,IAAI,CAAClE,KAAK,CAAC,GAC1CK,UAAU,CAACL,KAAK,CAAC,CAAC,CAAC,CAAC,GACpBA,KAAK;MACT,MAAM6C,OAAO,GAAGhF,SAAS,CAACsG,IAAI,CAAC,CAAC;QAAEpB;MAAI,CAAC,KAAKA,GAAG,KAAKkB,MAAM,CAAC;MAC3D,IAAIpB,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEE,GAAG,EAAE;QAChB,MAAM5C,WAAW,GAAIhB,cAAc,CAACoB,OAAO,GAAGuC,kBAAkB,CAC9DD,OAAO,CAACE,GACV,CAAE;QAEFJ,oBAAoB,CAAC,CAAC;QACtBgB,UAAU,CAACpE,OAAO,CAACgB,OAAO,CAAC;QAC3B2C,YAAY,CAAC;UAAE/C;QAAY,CAAC,CAAC;QAI7BiE,MAAM,CAACC,qBAAqB,CAAC,MAAM;UACjCR,oBAAoB,CAAC,CAAC;QACxB,CAAC,CAAC;MACJ;IACF;EACF,CAAC,EACD,CAACX,YAAY,EAAEP,oBAAoB,CACrC,CAAC;EAED,MAAM2B,SAAS,IAAAzF,qBAAA,GAAGM,cAAc,CAACoB,OAAO,cAAA1B,qBAAA,uBAAtBA,qBAAA,CAAwB0F,QAAQ,CAAChG,kBAAkB,CAAC;EAEtE,OACEjB,KAAA,CAAAkH,aAAA,CAACzG,UAAU,EAAA0G,QAAA;IACTxD,SAAS,EAAErD,UAAU,CAAC,8BAA8B,EAAEqD,SAAS,CAAE;IACjEa,KAAK,EAAEK,oBAAoB,GAAG3B,SAAS,GAAGsB,KAAM;IAChDJ,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBzB,KAAK,EAAEA,KAAM;IACb2B,QAAQ,EAAEA;EAAS,GACf5D,gBAAgB,CAACU,KAAK,CAAC,GAE3BrB,KAAA,CAAAkH,aAAA,CAAC7G,IAAI,CAAC+G,UAAU;IAACC,KAAK,EAAC;EAAU,GAC9B,CAACxC,oBAAoB,IACpB7E,KAAA,CAAAkH,aAAA,CAAC9G,YAAY;IACXuD,SAAS,EAAErD,UAAU,CACnB,4CAA4C,EAC5CsD,yBACF,CAAE;IACF0D,IAAI,EAAC,OAAO;IACZvD,WAAW,EAAED,sBAAuB;IACpCyD,eAAe,EAAC,UAAU;IAC1BtD,KAAK,EACHD,gBAAgB,aAAhBA,gBAAgB,cAAhBA,gBAAgB,GAAIvC,YAAY,CAACL,WAAW,CAAC4C,gBAC9C;IACD+B,IAAI,EAAE9D,OAAO,CAACgB,OAAQ;IACtBP,KAAK,EAAEb,cAAc,CAACoB,OAAQ;IAC9BuE,MAAM,EAAElD,QAAQ,GAAG,OAAO,GAAGpB,SAAU;IACvCqB,QAAQ,EAAEA,QAAS;IACnBkD,QAAQ,EAAErB,cAAe;IACzBsB,OAAO,EAAE3C,UAAW;IACpB4C,SAAS,EAAE7B,uBAAwB;IACnC8B,OAAO,EAAEtB,aAAc;IACvBuB,iBAAiB;IACjBC,cAAc;IACdC,cAAc;IACdC,YAAY,EAAC,kBAAkB;IAC/BC,YAAY,EAAE5G,KAAK,CAAC6G,WAAY;IAChCC,OAAO,EAAE3D,KAAK,KAAK;EAAU,CAC9B,CACF,EAEDxE,KAAA,CAAAkH,aAAA,CAAC1G,WAAW;IACVmD,SAAS,EAAErD,UAAU,CACnB,sCAAsC,EACtCuD,oBACF,CAAE;IACFR,IAAI,EAAC,KAAK;IACV2E,YAAY,EAAC,cAAc;IAC3BjG,UAAU,EAAEA,UAAW;IACvBqG,MAAM,EAAC,UAAU;IACjBnE,KAAK,EAAEA,KAAM;IACbF,WAAW,EACTA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAKiD,SAAS,GAAG9F,kBAAkB,GAAGgC,SAClD;IACDmF,IAAI,EACFnE,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAK8C,SAAS,GAAG7F,WAAW,GAAGmH,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,IAAI,CAC7D;IACDC,OAAO,EAAE1D,WAAY;IACrB2D,MAAM,EAAE1D,UAAW;IACnB2D,QAAQ,EAAEvC,kBAAmB;IAC7BzD,KAAK,EAAEV,SAAS,CAACiB,OAAQ;IACzBmB,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBzB,KAAK,EAAEA,KAAM;IACb2B,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEK,oBAAoB,GAAG,QAAQ,GAAG,SAAU;IACnDJ,IAAI,EAAEA,IAAK;IACXnC,QAAQ,EAAEA,QAAS;IACnBF,aAAa,EAAEA,aAAc;IAC7BsC,iBAAiB,EAAEA,iBAAkB;IACrCC,oBAAoB,EAAEA,oBAAqB;IAC3CC,iBAAiB,EAAEA,iBAAkB;IACrC+D,SAAS,EAAC;EAAK,CAChB,CACc,CACP,CAAC;AAEjB;AAEA,SAAShD,UAAUA,CAACJ,OAAoB,EAAE7D,IAAY,EAAE;EAAA,IAAAkH,kBAAA;EACtD,OAAO;IACL3C,WAAW,EAAET,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAC;IAC5CoD,cAAc,EAAG,GAAEtD,OAAO,CAACuD,GAAI,KAAItD,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,GAAE;IACrEsD,OAAO,EAAG,GAAEvD,kBAAkB,CAACD,OAAO,CAACE,GAAG,CAAE,IAAC,CAAAmD,kBAAA,GAC3CrD,OAAO,CAACyD,IAAI,CAACtH,IAAI,CAAC,cAAAkH,kBAAA,cAAAA,kBAAA,GAAIrD,OAAO,CAACyD,IAAI,CAACC,EACpC;EACH,CAAC;AACH;AAEA,SAASzD,kBAAkBA,CAAC9C,KAAa,EAAE;EACzC,OAAQ,IAAGA,KAAM,EAAC;AACpB;AAEA,SAASK,UAAUA,CAACL,KAAa,EAAE;EACjC,OAAO,CACL,OAAOA,KAAK,KAAK,QAAQ,GACrBA,KAAK,CAACwG,KAAK,CAAC,oBAAoB,CAAC,GACjC,CAAChG,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EACvBiG,KAAK,CAAC,CAAC,CAAC;AACZ;AAEA,SAAStD,SAASA,CAACuD,KAAoB,EAAE;EACvC,OAAOA,KAAK,CAAC9D,MAAM,CAAC+D,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AACxC;AAEAlI,WAAW,CAACmI,qBAAqB,GAAG,IAAI;AACxC,eAAenI,WAAW"}

package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.d.ts

@@ -1,7 +1,7 @@
 import { Props as FieldBlockProps } from '../../FieldBlock';
 import { Props as StringFieldProps } from '../String';
 import { FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & Omit<FieldBlockProps, 'children'> & Record<'postalCode' | 'city', StringFieldProps>;
+export type Props = FieldHelpProps & Omit<FieldBlockProps, 'children'> & Partial<Record<'postalCode' | 'city', StringFieldProps>>;
 declare function PostalCodeAndCity(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PostalCodeAndCity {
     var _supportsSpacingProps: boolean;

package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js

@@ -1,19 +1,17 @@
-"use client";
-
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["postalCode", "city", "help", "width"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import SharedContext from '../../../../shared/Context';
-import FieldBlock from '../../FieldBlock';
 import StringField from '../String';
+import CompositionField from '../Composition';
+import useLocale from '../../hooks/useLocale';
 function PostalCodeAndCity(props) {
-  var _postalCode$pattern, _postalCode$label, _postalCode$placehold, _city$label;
-  const sharedContext = useContext(SharedContext);
+  var _postalCode$pattern, _postalCode$label, _postalCode$placehold, _city$label, _city$pattern;
+  const translations = useLocale();
   const {
       postalCode = {},
       city = {},
@@ -21,19 +19,18 @@ function PostalCodeAndCity(props) {
       width = 'large'
     } = props,
     fieldBlockProps = _objectWithoutProperties(props, _excluded);
-  return React.createElement(FieldBlock, _extends({
+  return React.createElement(CompositionField, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldBlockProps, {
-    width: width,
-    composition: true
+    width: width
   }), React.createElement(StringField, _extends({}, postalCode, {
     pattern: (_postalCode$pattern = postalCode.pattern) !== null && _postalCode$pattern !== void 0 ? _postalCode$pattern : '^[0-9]{4}$',
     mask: [/\d/, /\d/, /\d/, /\d/],
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),
-    label: (_postalCode$label = postalCode.label) !== null && _postalCode$label !== void 0 ? _postalCode$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeLabel,
+    label: (_postalCode$label = postalCode.label) !== null && _postalCode$label !== void 0 ? _postalCode$label : translations.PostalCode.label,
     errorMessages: _objectSpread({
-      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeErrorRequired,
-      pattern: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeErrorPattern
+      required: translations.PostalCode.errorRequired,
+      pattern: translations.PostalCode.errorPattern
     }, postalCode.errorMessages),
     placeholder: (_postalCode$placehold = postalCode.placeholder) !== null && _postalCode$placehold !== void 0 ? _postalCode$placehold : '0000',
     width: false,
@@ -42,10 +39,13 @@ function PostalCodeAndCity(props) {
     autoComplete: "postal-code"
   })), React.createElement(StringField, _extends({}, city, {
     className: classnames('dnb-forms-field-postal-code-and-city__city', city.className),
-    label: (_city$label = city.label) !== null && _city$label !== void 0 ? _city$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityLabel,
+    label: (_city$label = city.label) !== null && _city$label !== void 0 ? _city$label : translations.City.label,
     errorMessages: _objectSpread({
-      required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityErrorRequired
+      required: translations.City.errorRequired,
+      pattern: translations.City.errorPattern
     }, city.errorMessages),
+    pattern: (_city$pattern = city.pattern) !== null && _city$pattern !== void 0 ? _city$pattern : '^[A-Za-zÆØÅæøå -]+$',
+    trim: true,
     width: "stretch",
     autoComplete: "address-level2",
     help: help

package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringField","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","composition","pattern","mask","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","inputMode","autoComplete","cityLabel","cityErrorRequired","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringFieldProps>\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <FieldBlock\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n      composition\n    >\n      <StringField\n        {...postalCode}\n        pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n        mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCode.className\n        )}\n        label={\n          postalCode.label ??\n          sharedContext?.translation.Forms.postalCodeLabel\n        }\n        errorMessages={{\n          required:\n            sharedContext?.translation.Forms.postalCodeErrorRequired,\n          pattern: sharedContext?.translation.Forms.postalCodeErrorPattern,\n          ...postalCode.errorMessages,\n        }}\n        placeholder={postalCode.placeholder ?? '0000'}\n        width={false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          city.className\n        )}\n        label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n        errorMessages={{\n          required: sharedContext?.translation.Forms.cityErrorRequired,\n          ...city.errorMessages,\n        }}\n        width=\"stretch\"\n        autoComplete=\"address-level2\"\n        help={help}\n      />\n    </FieldBlock>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,OAAOC,WAAW,MAAqC,WAAW;AAOlE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA;EACvC,MAAMC,aAAa,GAAGX,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJU,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGT,KAAK;IADJU,eAAe,GAAAC,wBAAA,CAChBX,KAAK,EAAAY,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAAChB,UAAU,EAAAiB,QAAA;IACTC,SAAS,EAAEpB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACe,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA,KAAM;IACbO,WAAW;EAAA,IAEXvB,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNR,UAAU;IACdW,OAAO,GAAAhB,mBAAA,GAAEK,UAAU,CAACW,OAAO,cAAAhB,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CiB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BH,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFI,KAAK,GAAAjB,iBAAA,GACHI,UAAU,CAACa,KAAK,cAAAjB,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DT,OAAO,EAAEZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACM;IAAsB,GAC7DrB,UAAU,CAACiB,aAAa,CAC3B;IACFK,WAAW,GAAAzB,qBAAA,GAAEG,UAAU,CAACsB,WAAW,cAAAzB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACboB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC,SAAS;IACnBC,YAAY,EAAC;EAAa,EAC3B,CAAC,EACFtC,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFI,KAAK,GAAAf,WAAA,GAAEG,IAAI,CAACY,KAAK,cAAAf,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACW,SAAU;IAChET,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACY;IAAiB,GACzD1B,IAAI,CAACgB,aAAa,CACrB;IACFd,KAAK,EAAC,SAAS;IACfsB,YAAY,EAAC,gBAAgB;IAC7BvB,IAAI,EAAEA;EAAK,EACZ,CACS,CAAC;AAEjB;AAEAT,iBAAiB,CAACmC,qBAAqB,GAAG,IAAI;AAC9C,eAAenC,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","classnames","StringField","CompositionField","useLocale","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","_city$pattern","translations","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","mask","label","PostalCode","errorMessages","_objectSpread","required","errorRequired","errorPattern","placeholder","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { FieldHelpProps } from '../../types'\nimport useLocale from '../../hooks/useLocale'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>>\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useLocale()\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        {...postalCode}\n        pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n        mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCode.className\n        )}\n        label={postalCode.label ?? translations.PostalCode.label}\n        errorMessages={{\n          required: translations.PostalCode.errorRequired,\n          pattern: translations.PostalCode.errorPattern,\n          ...postalCode.errorMessages,\n        }}\n        placeholder={postalCode.placeholder ?? '0000'}\n        width={false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          city.className\n        )}\n        label={city.label ?? translations.City.label}\n        errorMessages={{\n          required: translations.City.errorRequired,\n          pattern: translations.City.errorPattern,\n          ...city.errorMessages,\n        }}\n        pattern={city.pattern ?? '^[A-Za-zÆØÅæøå -]+$'}\n        trim\n        width=\"stretch\"\n        autoComplete=\"address-level2\"\n        help={help}\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,gBAAgB,MAAM,gBAAgB;AAE7C,OAAOC,SAAS,MAAM,uBAAuB;AAM7C,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA,EAAAC,aAAA;EACvC,MAAMC,YAAY,GAAGR,SAAS,CAAC,CAAC;EAEhC,MAAM;MACJS,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGV,KAAK;IADJW,eAAe,GAAAC,wBAAA,CAChBZ,KAAK,EAAAa,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAACjB,gBAAgB,EAAAkB,QAAA;IACfC,SAAS,EAAErB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACgB,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA;EAAM,IAEbhB,KAAA,CAAAoB,aAAA,CAAClB,WAAW,EAAAmB,QAAA,KACNR,UAAU;IACdU,OAAO,GAAAhB,mBAAA,GAAEM,UAAU,CAACU,OAAO,cAAAhB,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CiB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BF,SAAS,EAAErB,UAAU,CACnB,mDAAmD,EACnDY,UAAU,CAACS,SACb,CAAE;IACFG,KAAK,GAAAjB,iBAAA,GAAEK,UAAU,CAACY,KAAK,cAAAjB,iBAAA,cAAAA,iBAAA,GAAII,YAAY,CAACc,UAAU,CAACD,KAAM;IACzDE,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEjB,YAAY,CAACc,UAAU,CAACI,aAAa;MAC/CP,OAAO,EAAEX,YAAY,CAACc,UAAU,CAACK;IAAY,GAC1ClB,UAAU,CAACc,aAAa,CAC3B;IACFK,WAAW,GAAAvB,qBAAA,GAAEI,UAAU,CAACmB,WAAW,cAAAvB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CO,KAAK,EAAE,KAAM;IACbiB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC,SAAS;IACnBC,YAAY,EAAC;EAAa,EAC3B,CAAC,EACFnC,KAAA,CAAAoB,aAAA,CAAClB,WAAW,EAAAmB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAErB,UAAU,CACnB,4CAA4C,EAC5Ca,IAAI,CAACQ,SACP,CAAE;IACFG,KAAK,GAAAf,WAAA,GAAEI,IAAI,CAACW,KAAK,cAAAf,WAAA,cAAAA,WAAA,GAAIE,YAAY,CAACwB,IAAI,CAACX,KAAM;IAC7CE,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEjB,YAAY,CAACwB,IAAI,CAACN,aAAa;MACzCP,OAAO,EAAEX,YAAY,CAACwB,IAAI,CAACL;IAAY,GACpCjB,IAAI,CAACa,aAAa,CACrB;IACFJ,OAAO,GAAAZ,aAAA,GAAEG,IAAI,CAACS,OAAO,cAAAZ,aAAA,cAAAA,aAAA,GAAI,qBAAsB;IAC/C0B,IAAI;IACJrB,KAAK,EAAC,SAAS;IACfmB,YAAY,EAAC,gBAAgB;IAC7BpB,IAAI,EAAEA;EAAK,EACZ,CACe,CAAC;AAEvB;AAEAV,iBAAiB,CAACiC,qBAAqB,GAAG,IAAI;AAC9C,eAAejC,iBAAiB"}

package/es/extensions/forms/Field/SelectCountry/SelectCountry.d.ts

@@ -1,4 +1,4 @@
-import { CountryType } from '../../constants/countries';
+import { type CountryType, type CountryLang } from '../../constants/countries';
 import { FieldHelpProps, FieldProps } from '../../types';
 export type CountryFilterSet = 'Scandinavia' | 'Nordic' | 'Europe' | 'Prioritized';
 export type Props = FieldHelpProps & FieldProps<string, undefined | string> & {
@@ -21,7 +21,7 @@ declare namespace SelectCountry {
     var _supportsSpacingProps: boolean;
 }
 type GetCountryData = {
-    lang?: string;
+    lang?: CountryLang;
     filter?: Props['filterCountries'];
     sort?: Extract<CountryFilterSet, 'Prioritized'>;
     makeObject?: (country: CountryType, lang: string) => {

package/es/extensions/forms/Field/SelectCountry/SelectCountry.js

@@ -13,13 +13,14 @@ import countries, { prioritizedCountries } from '../../constants/countries';
 import { useFieldProps } from '../../hooks';
 import FieldBlock from '../../FieldBlock';
 import useErrorMessage from '../../hooks/useErrorMessage';
+import useLocale from '../../hooks/useLocale';
 function SelectCountry(props) {
   var _sharedContext$locale;
   const sharedContext = useContext(SharedContext);
-  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const translations = useLocale().SelectCountry;
   const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
   const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: tr.selectCountryErrorRequired
+    required: translations.errorRequired
   });
   const defaultProps = {
     errorMessages
@@ -27,8 +28,8 @@ function SelectCountry(props) {
   const preparedProps = _objectSpread(_objectSpread({}, defaultProps), props);
   const {
     className,
-    placeholder = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryPlaceholder,
-    label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryLabel,
+    placeholder = translations.placeholder,
+    label = translations.label,
     countries: ccFilter = 'Prioritized',
     info,
     warning,
@@ -142,7 +143,7 @@ function SelectCountry(props) {
   }, htmlAttributes)));
 }
 export function getCountryData({
-  lang = 'no',
+  lang = 'nb',
   filter = null,
   sort = null,
   makeObject = (country, lang) => {