@dnb/eufemia 10.52.1 → 10.54.0

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

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useMemo, useContext, useCallback } from 'react';
+import React, { useMemo, useContext, useCallback, useEffect, useRef } from 'react';
 import { Autocomplete, Flex } from '../../../../components';
 import classnames from 'classnames';
 import countries from '../../constants/countries';
@@ -14,25 +14,28 @@ import { useFieldProps } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 import { countryFilter, getCountryData } from '../SelectCountry';
-import useErrorMessage from '../../hooks/useErrorMessage';
 import useTranslation from '../../hooks/useTranslation';
 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;
+  var _sharedContext$locale, _props$inputRef, _countryCodeRef$curre;
   const sharedContext = useContext(SharedContext);
-  const translations = useTranslation();
+  const {
+    label: defaultLabel,
+    countryCodeLabel: defaultCountryCodeLabel,
+    errorRequired
+  } = useTranslation().PhoneNumber;
   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);
-  const dataRef = React.useRef(null);
-  const langRef = React.useRef(lang);
-  const wasFilled = React.useRef(false);
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: translations.PhoneNumber.errorRequired,
-    pattern: translations.PhoneNumber.errorRequired
-  });
+  const countryCodeRef = useRef(props === null || props === void 0 ? void 0 : props.emptyValue);
+  const numberRef = useRef(props === null || props === void 0 ? void 0 : props.emptyValue);
+  const dataRef = useRef(null);
+  const langRef = useRef(lang);
+  const wasFilled = useRef(false);
+  const errorMessages = useMemo(() => _objectSpread({
+    'Field.errorRequired': errorRequired,
+    'Field.errorPattern': errorRequired
+  }, props.errorMessages), [errorRequired, props.errorMessages]);
   const validateRequired = useCallback((value, {
     required,
     isChanged,
@@ -52,6 +55,20 @@ function PhoneNumber(props) {
     }
     return undefined;
   }, []);
+  const fromExternal = useCallback(external => {
+    const [, phoneNumber] = splitValue(external);
+    if (!phoneNumber && !props.omitCountryCodeField) {
+      return countryCodeRef.current;
+    }
+    return external;
+  }, [props.omitCountryCodeField]);
+  const toEvent = useCallback(value => {
+    const [, phoneNumber] = splitValue(value);
+    if (!phoneNumber) {
+      return props.emptyValue;
+    }
+    return value;
+  }, [props.emptyValue]);
   const schema = useMemo(() => {
     var _props$schema;
     return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
@@ -63,20 +80,23 @@ function PhoneNumber(props) {
     schema,
     errorMessages
   };
+  const ref = useRef();
   const preparedProps = _objectSpread(_objectSpread(_objectSpread({}, props), defaultProps), {}, {
     validateRequired,
     fromExternal,
-    toEvent
+    toEvent,
+    inputRef: (_props$inputRef = props.inputRef) !== null && _props$inputRef !== void 0 ? _props$inputRef : ref
   });
   const {
     value,
     className,
+    inputRef,
     countryCodeFieldClassName,
     numberFieldClassName,
     countryCodePlaceholder,
     placeholder,
     countryCodeLabel,
-    label = translations.PhoneNumber.label,
+    label = defaultLabel,
     numberMask,
     countries: ccFilter = 'Prioritized',
     emptyValue,
@@ -94,24 +114,16 @@ function PhoneNumber(props) {
     omitCountryCodeField,
     setHasFocus,
     handleChange,
+    setDisplayValue,
     onCountryCodeChange,
     onNumberChange,
     filterCountries
   } = useFieldProps(preparedProps);
-  function fromExternal(external) {
-    const [, phoneNumber] = splitValue(external);
-    if (!phoneNumber && !props.omitCountryCodeField) {
-      return countryCodeRef.current;
-    }
-    return external;
-  }
-  function toEvent(value) {
-    const [, phoneNumber] = splitValue(value);
-    if (!phoneNumber) {
-      return emptyValue;
-    }
-    return value;
-  }
+  useEffect(() => {
+    var _inputRef$current;
+    const number = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
+    setDisplayValue(props.path, (number === null || number === void 0 ? void 0 : number.length) > 0 ? joinValue([countryCodeRef.current, number]) : undefined);
+  }, [inputRef, props.path, setDisplayValue, value]);
   const filter = useCallback(country => {
     return countryFilter(country, filterCountries, ccFilter);
   }, [ccFilter, filterCountries]);
@@ -157,7 +169,7 @@ function PhoneNumber(props) {
       updateCurrentDataSet();
     }
   }, [value, props.value, lang, updateCurrentDataSet]);
-  const prevCountryCodeRef = React.useRef(countryCodeRef.current);
+  const prevCountryCodeRef = useRef(countryCodeRef.current);
   const handleCountryCodeChange = useCallback(({
     data
   }) => {
@@ -231,7 +243,7 @@ function PhoneNumber(props) {
     mode: "async",
     placeholder: countryCodePlaceholder,
     label_direction: "vertical",
-    label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : translations.PhoneNumber.countryCodeLabel,
+    label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : defaultCountryCodeLabel,
     data: dataRef.current,
     value: countryCodeRef.current,
     status: hasError ? 'error' : undefined,
@@ -259,6 +271,7 @@ function PhoneNumber(props) {
     onBlur: handleOnBlur,
     onChange: handleNumberChange,
     value: numberRef.current,
+    innerRef: inputRef,
     info: info,
     warning: warning,
     error: error,

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","countryFilter","getCountryData","useErrorMessage","useTranslation","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","translations","lang","locale","split","countryCodeRef","useRef","emptyValue","numberRef","dataRef","langRef","wasFilled","errorMessages","path","required","errorRequired","pattern","validateRequired","value","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","setHasFocus","handleChange","onCountryCodeChange","onNumberChange","filterCountries","external","filter","country","updateCurrentDataSet","formatCountryCode","cdc","sort","makeObject","getEventValues","callOnChange","eventValues","joinValue","callOnBlurOrFocus","hasFocus","handleCountryCodeChange","data","_data$selectedKey","selectedKey","trim","handleNumberChange","handleOnBlur","handleOnFocus","handleCountryCodeFocus","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  FieldPropsWithExtraValue,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  countryFilter,\n  CountryFilterSet,\n  getCountryData,\n} from '../SelectCountry'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DrawerListDataObject } from '../../../../fragments/DrawerList'\n\nexport type Props = FieldHelpProps &\n  FieldPropsWithExtraValue<\n    string,\n    { country: string; phone: string },\n    undefined | string\n  > & {\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\n    /**\n     * Defines the countries to filter. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.\n     * Defaults to `Prioritized`.\n     */\n    countries?: CountryFilterSet\n\n    /**\n     * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\n// Important for the default value to be defined here, and not after the useFieldProps call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const translations = useTranslation()\n  const lang = sharedContext.locale?.split('-')[0] as CountryLang\n\n  const countryCodeRef = React.useRef<Props['value']>(props?.emptyValue)\n  const numberRef = React.useRef<Props['value']>(props?.emptyValue)\n  const dataRef = React.useRef<Array<DrawerListDataObject>>(null)\n  const langRef = React.useRef<string>(lang)\n  const wasFilled = React.useRef<boolean>(false)\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.PhoneNumber.errorRequired,\n    pattern: translations.PhoneNumber.errorRequired,\n  })\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged, error }) => {\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n  const defaultProps: Partial<Props> = {\n    schema,\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...props,\n    ...defaultProps,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\n    value,\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = translations.PhoneNumber.label,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    width = 'large',\n    help,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    setHasFocus,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries,\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 filter = useCallback(\n    (country: CountryType) => {\n      return countryFilter(country, filterCountries, ccFilter)\n    },\n    [ccFilter, filterCountries]\n  )\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter:\n        // Make sure the whole cc list is displayed when cc filter is set to specific region\n        ccFilter === 'Prioritized' && !wasFilled.current\n          ? (country) =>\n              `${formatCountryCode(country.cdc)}` ===\n              countryCodeRef.current\n          : filter,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filter, ccFilter])\n\n  const getEventValues = useCallback(\n    ({\n      countryCode = countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    } = {}) => {\n      return {\n        ...(!omitCountryCodeField ? { countryCode } : {}),\n        phoneNumber,\n      }\n    },\n    [omitCountryCodeField, emptyValue]\n  )\n\n  const callOnChange = useCallback(\n    ({ countryCode = undefined, phoneNumber = undefined }) => {\n      const eventValues = getEventValues({ countryCode, phoneNumber })\n      handleChange(\n        joinValue([eventValues.countryCode, eventValues.phoneNumber]),\n        eventValues\n      )\n    },\n    [getEventValues, handleChange]\n  )\n\n  const callOnBlurOrFocus = useCallback(\n    (hasFocus: boolean) => {\n      setHasFocus(hasFocus, undefined, getEventValues())\n    },\n    [setHasFocus, getEventValues]\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 handleOnBlur = useCallback(() => {\n    callOnBlurOrFocus(false)\n  }, [callOnBlurOrFocus])\n\n  const handleOnFocus = useCallback(() => {\n    callOnBlurOrFocus(true)\n  }, [callOnBlurOrFocus])\n\n  const handleCountryCodeFocus = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleOnFocus()\n    },\n    [handleOnFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formatCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={\n              countryCodeLabel ?? translations.PhoneNumber.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={hasError ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={handleCountryCodeFocus}\n            on_blur={handleOnBlur}\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={handleOnFocus}\n          onBlur={handleOnBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\n          required={required}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formatCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formatCountryCode(country.cdc)})`,\n    content: `${formatCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formatCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","useEffect","useRef","Autocomplete","Flex","classnames","countries","StringField","FieldBlock","useFieldProps","pickSpacingProps","SharedContext","countryFilter","getCountryData","useTranslation","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_props$inputRef","_countryCodeRef$curre","sharedContext","label","defaultLabel","countryCodeLabel","defaultCountryCodeLabel","errorRequired","lang","locale","split","countryCodeRef","emptyValue","numberRef","dataRef","langRef","wasFilled","errorMessages","_objectSpread","validateRequired","value","required","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","fromExternal","external","omitCountryCodeField","toEvent","schema","_props$schema","type","pattern","defaultProps","ref","preparedProps","inputRef","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","numberMask","ccFilter","info","warning","hasError","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","setHasFocus","handleChange","setDisplayValue","onCountryCodeChange","onNumberChange","filterCountries","_inputRef$current","number","path","length","joinValue","filter","country","updateCurrentDataSet","formatCountryCode","cdc","sort","makeObject","getEventValues","callOnChange","eventValues","callOnBlurOrFocus","hasFocus","handleCountryCodeChange","data","_data$selectedKey","selectedKey","trim","handleNumberChange","handleOnBlur","handleOnFocus","handleCountryCodeFocus","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","innerRef","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, {\n  useMemo,\n  useContext,\n  useCallback,\n  useEffect,\n  useRef,\n} 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  FieldPropsWithExtraValue,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  countryFilter,\n  CountryFilterSet,\n  getCountryData,\n} from '../SelectCountry'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DrawerListDataObject } from '../../../../fragments/DrawerList'\n\nexport type Props = FieldHelpProps &\n  FieldPropsWithExtraValue<\n    string,\n    { country: string; phone: string },\n    undefined | string\n  > & {\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    inputRef?: React.RefObject<HTMLInputElement>\n    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n\n    /**\n     * Defines the countries to filter. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.\n     * Defaults to `Prioritized`.\n     */\n    countries?: CountryFilterSet\n\n    /**\n     * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.\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 {\n    label: defaultLabel,\n    countryCodeLabel: defaultCountryCodeLabel,\n    errorRequired,\n  } = useTranslation().PhoneNumber\n  const lang = sharedContext.locale?.split('-')[0] as CountryLang\n\n  const countryCodeRef = useRef<Props['value']>(props?.emptyValue)\n  const numberRef = useRef<Props['value']>(props?.emptyValue)\n  const dataRef = useRef<Array<DrawerListDataObject>>(null)\n  const langRef = useRef<string>(lang)\n  const wasFilled = useRef<boolean>(false)\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorRequired,\n      ...props.errorMessages,\n    }),\n    [errorRequired, props.errorMessages]\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 fromExternal = useCallback(\n    (external: string) => {\n      const [, phoneNumber] = splitValue(external)\n      if (!phoneNumber && !props.omitCountryCodeField) {\n        return countryCodeRef.current\n      }\n      return external\n    },\n    [props.omitCountryCodeField]\n  )\n\n  const toEvent = useCallback(\n    (value: string) => {\n      const [, phoneNumber] = splitValue(value)\n      if (!phoneNumber) {\n        return props.emptyValue\n      }\n      return value\n    },\n    [props.emptyValue]\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 ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    ...defaultProps,\n    validateRequired,\n    fromExternal,\n    toEvent,\n    inputRef: props.inputRef ?? ref,\n  }\n\n  const {\n    value,\n    className,\n    inputRef,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = defaultLabel,\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    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    const number = inputRef.current?.value\n    setDisplayValue(\n      props.path,\n      number?.length > 0\n        ? joinValue([countryCodeRef.current, number])\n        : undefined\n    )\n  }, [inputRef, props.path, setDisplayValue, value])\n\n  const filter = useCallback(\n    (country: CountryType) => {\n      return countryFilter(country, filterCountries, ccFilter)\n    },\n    [ccFilter, filterCountries]\n  )\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter:\n        // Make sure the whole cc list is displayed when cc filter is set to specific region\n        ccFilter === 'Prioritized' && !wasFilled.current\n          ? (country) =>\n              `${formatCountryCode(country.cdc)}` ===\n              countryCodeRef.current\n          : filter,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filter, ccFilter])\n\n  const getEventValues = useCallback(\n    ({\n      countryCode = countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    } = {}) => {\n      return {\n        ...(!omitCountryCodeField ? { countryCode } : {}),\n        phoneNumber,\n      }\n    },\n    [omitCountryCodeField, emptyValue]\n  )\n\n  const callOnChange = useCallback(\n    ({ countryCode = undefined, phoneNumber = undefined }) => {\n      const eventValues = getEventValues({ countryCode, phoneNumber })\n      handleChange(\n        joinValue([eventValues.countryCode, eventValues.phoneNumber]),\n        eventValues\n      )\n    },\n    [getEventValues, handleChange]\n  )\n\n  const callOnBlurOrFocus = useCallback(\n    (hasFocus: boolean) => {\n      setHasFocus(hasFocus, undefined, getEventValues())\n    },\n    [setHasFocus, getEventValues]\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 = 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 handleOnBlur = useCallback(() => {\n    callOnBlurOrFocus(false)\n  }, [callOnBlurOrFocus])\n\n  const handleOnFocus = useCallback(() => {\n    callOnBlurOrFocus(true)\n  }, [callOnBlurOrFocus])\n\n  const handleCountryCodeFocus = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleOnFocus()\n    },\n    [handleOnFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formatCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={countryCodeLabel ?? defaultCountryCodeLabel}\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={hasError ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={handleCountryCodeFocus}\n            on_blur={handleOnBlur}\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={handleOnFocus}\n          onBlur={handleOnBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          innerRef={inputRef}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\n          required={required}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formatCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formatCountryCode(country.cdc)})`,\n    content: `${formatCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formatCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

@@ -1,7 +1,15 @@
 import { Props as FieldBlockProps } from '../../FieldBlock';
 import { Props as StringFieldProps } from '../String';
-import { FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & Omit<FieldBlockProps, 'children'> & Partial<Record<'postalCode' | 'city', StringFieldProps>>;
+import { FieldHelpProps, Path } from '../../types';
+export type Props = FieldHelpProps & Omit<FieldBlockProps, 'children'> & Partial<Record<'postalCode' | 'city', StringFieldProps>> & {
+    /**
+     * Defines which country the postal code and city is for.
+     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.
+     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.
+     * Default: `NO`
+     */
+    country?: Path | string;
+};
 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,52 +1,94 @@
 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"];
+const _excluded = ["postalCode", "city", "help", "width", "country"];
 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 from 'react';
+import React, { useCallback } from 'react';
 import classnames from 'classnames';
 import StringField from '../String';
 import CompositionField from '../Composition';
 import useTranslation from '../../hooks/useTranslation';
+import useDataValue from '../../hooks/useDataValue';
+import { COUNTRY as defaultCountry } from '../../../../shared/defaults';
 function PostalCodeAndCity(props) {
-  var _postalCode$pattern, _postalCode$label, _postalCode$placehold, _city$label, _city$pattern;
   const translations = useTranslation();
+  const {
+    getSourceValue
+  } = useDataValue();
   const {
       postalCode = {},
       city = {},
       help,
-      width = 'large'
+      width = 'large',
+      country = defaultCountry
     } = props,
     fieldBlockProps = _objectWithoutProperties(props, _excluded);
+  const {
+    pattern: cityPattern,
+    className: cityClassName,
+    label: cityLabel,
+    width: cityWidth,
+    errorMessages: cityErrorMessages
+  } = city;
+  const countryValue = getSourceValue(country);
+  const handleDefaults = useCallback(postalCode => {
+    const props = {};
+    switch (countryValue) {
+      case defaultCountry:
+      case 'DK':
+      case 'CH':
+        {
+          props.mask = [/\d/, /\d/, /\d/, /\d/];
+          props.pattern = '^[0-9]{4}$';
+          props.placeholder = '0000';
+          break;
+        }
+      default:
+        props.width = '8rem';
+        break;
+    }
+    return _objectSpread(_objectSpread({}, props), postalCode);
+  }, [countryValue]);
+  const {
+    mask: postalCodeMask,
+    pattern: postalCodePattern,
+    placeholder: postalCodePlaceHolder,
+    className: postalCodeClassName,
+    label: postalCodeLabel,
+    width: postalCodeWidth,
+    errorMessages: postalCodeErrorMessages
+  } = handleDefaults(postalCode);
+  const postalCodeValidationProps = {
+    mask: postalCodeMask,
+    pattern: postalCodePattern,
+    placeholder: postalCodePlaceHolder
+  };
   return React.createElement(CompositionField, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldBlockProps, {
     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 : translations.PostalCode.label,
+  }), React.createElement(StringField, _extends({}, postalCode, postalCodeValidationProps, {
+    className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCodeClassName),
+    label: postalCodeLabel !== null && postalCodeLabel !== void 0 ? postalCodeLabel : translations.PostalCode.label,
     errorMessages: _objectSpread({
-      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,
+      'Field.errorRequired': translations.PostalCode.errorRequired,
+      'Field.errorPattern': translations.PostalCode.errorPattern
+    }, postalCodeErrorMessages),
+    width: postalCodeWidth !== null && postalCodeWidth !== void 0 ? postalCodeWidth : false,
     inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input",
     inputMode: "numeric",
     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 : translations.City.label,
+    className: classnames('dnb-forms-field-postal-code-and-city__city', cityClassName),
+    label: cityLabel !== null && cityLabel !== void 0 ? cityLabel : translations.City.label,
     errorMessages: _objectSpread({
-      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ÆØÅæøå -]+$',
+      'Field.errorRequired': translations.City.errorRequired,
+      'Field.errorPattern': translations.City.errorPattern
+    }, cityErrorMessages),
+    pattern: cityPattern !== null && cityPattern !== void 0 ? cityPattern : '^[A-Za-zÆØÅæøå -]+$',
     trim: true,
-    width: "stretch",
+    width: cityWidth !== null && cityWidth !== void 0 ? cityWidth : 'stretch',
     autoComplete: "address-level2",
     help: help
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","classnames","StringField","CompositionField","useTranslation","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 useTranslation from '../../hooks/useTranslation'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>>\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\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,cAAc,MAAM,4BAA4B;AAMvD,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA,EAAAC,aAAA;EACvC,MAAMC,YAAY,GAAGR,cAAc,CAAC,CAAC;EAErC,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"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useCallback","classnames","StringField","CompositionField","useTranslation","useDataValue","COUNTRY","defaultCountry","PostalCodeAndCity","props","translations","getSourceValue","postalCode","city","help","width","country","fieldBlockProps","_objectWithoutProperties","_excluded","pattern","cityPattern","className","cityClassName","label","cityLabel","cityWidth","errorMessages","cityErrorMessages","countryValue","handleDefaults","mask","placeholder","_objectSpread","postalCodeMask","postalCodePattern","postalCodePlaceHolder","postalCodeClassName","postalCodeLabel","postalCodeWidth","postalCodeErrorMessages","postalCodeValidationProps","createElement","_extends","PostalCode","errorRequired","errorPattern","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useCallback } 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, Path } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\nimport useDataValue from '../../hooks/useDataValue'\nimport { COUNTRY as defaultCountry } from '../../../../shared/defaults'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>> & {\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.\n     * Default: `NO`\n     */\n    // Add type for all country codes?\n    country?: Path | string\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n  const { getSourceValue } = useDataValue()\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    country = defaultCountry,\n    ...fieldBlockProps\n  } = props\n\n  const {\n    pattern: cityPattern,\n    className: cityClassName,\n    label: cityLabel,\n    width: cityWidth,\n    errorMessages: cityErrorMessages,\n  } = city\n\n  const countryValue = getSourceValue(country)\n  const handleDefaults = useCallback(\n    (postalCode: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryValue) {\n        case defaultCountry:\n        case 'DK':\n        case 'CH': {\n          props.mask = [/\\d/, /\\d/, /\\d/, /\\d/]\n          props.pattern = '^[0-9]{4}$'\n          props.placeholder = '0000'\n          break\n        }\n        default:\n          props.width = '8rem'\n          break\n      }\n\n      return { ...props, ...postalCode }\n    },\n    [countryValue]\n  )\n\n  const {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n    className: postalCodeClassName,\n    label: postalCodeLabel,\n    width: postalCodeWidth,\n    errorMessages: postalCodeErrorMessages,\n  } = handleDefaults(postalCode)\n\n  const postalCodeValidationProps = {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n  }\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        {...postalCodeValidationProps}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCodeClassName\n        )}\n        label={postalCodeLabel ?? translations.PostalCode.label}\n        errorMessages={{\n          'Field.errorRequired': translations.PostalCode.errorRequired,\n          'Field.errorPattern': translations.PostalCode.errorPattern,\n          ...postalCodeErrorMessages,\n        }}\n        width={postalCodeWidth ?? false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          cityClassName\n        )}\n        label={cityLabel ?? translations.City.label}\n        errorMessages={{\n          'Field.errorRequired': translations.City.errorRequired,\n          'Field.errorPattern': translations.City.errorPattern,\n          ...cityErrorMessages,\n        }}\n        pattern={cityPattern ?? '^[A-Za-zÆØÅæøå -]+$'}\n        trim\n        width={cityWidth ?? 'stretch'}\n        autoComplete=\"address-level2\"\n        help={help}\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":"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"}

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

@@ -1,4 +1,9 @@
 export const PostalCodeAndCityProperties = {
+  country: {
+    doc: 'Defines which country the postal code and city is for, based on the ISO 3166-1 alpha-2 format i.e. `NO`, `DE` etc. ' + 'Setting it to anything other than `NO` will remove the default norwegian postal code pattern. ' + 'You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`. ' + 'Defaults to `NO`',
+    type: ['Path', 'string'],
+    status: 'optional'
+  },
   postalCode: {
     doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postcode.',
     type: 'object',

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCityDocs.js","names":["PostalCodeAndCityProperties","postalCode","doc","type","status","city","help"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PostalCodeAndCityProperties: PropertiesTableProps = {\n  postalCode: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postcode.',\n    type: 'object',\n    status: 'required',\n  },\n  city: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for city.',\n    type: 'object',\n    status: 'required',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,UAAU,EAAE;IACVC,GAAG,EAAE,wGAAwG;IAC7GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"PostalCodeAndCityDocs.js","names":["PostalCodeAndCityProperties","country","doc","type","status","postalCode","city","help"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PostalCodeAndCityProperties: PropertiesTableProps = {\n  country: {\n    doc:\n      'Defines which country the postal code and city is for, based on the ISO 3166-1 alpha-2 format i.e. `NO`, `DE` etc. ' +\n      'Setting it to anything other than `NO` will remove the default norwegian postal code pattern. ' +\n      'You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`. ' +\n      'Defaults to `NO`',\n    type: ['Path', 'string'],\n    status: 'optional',\n  },\n  postalCode: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postcode.',\n    type: 'object',\n    status: 'required',\n  },\n  city: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for city.',\n    type: 'object',\n    status: 'required',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,OAAO,EAAE;IACPC,GAAG,EACD,qHAAqH,GACrH,gGAAgG,GAChG,kHAAkH,GAClH,kBAAkB;IACpBC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;IACxBC,MAAM,EAAE;EACV,CAAC;EACDC,UAAU,EAAE;IACVH,GAAG,EAAE,wGAAwG;IAC7GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAE;IACJL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/Field/Provider/useFieldProvider.d.ts

@@ -5,7 +5,10 @@ import { FieldProviderProps } from './FieldProvider';
 declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>): {
     extend: <T extends FieldProps>(fieldProps: T) => T;
     inheritedProps: {
-        error?: Error | import("../../types").FormError;
+        space?: import("../../../../shared/types").SpaceTypeAll;
+        left?: import("../../../../shared/types").SpaceType;
+        right?: import("../../../../shared/types").SpaceType;
+        error?: Error | import("../..").FormError;
         label?: import("react").ReactNode;
         path?: string;
         'aria-hidden'?: boolean | "true" | "false";
@@ -15,12 +18,9 @@ declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>):
         'aria-describedby'?: string;
         'aria-details'?: string;
         'aria-disabled'?: boolean | "true" | "false";
-        space?: import("../../../../shared/types").SpaceTypeAll;
         innerSpace?: import("../../../../shared/types").SpaceTypeAll | import("../../../../shared/types").SpaceTypeMedia;
         top?: import("../../../../shared/types").SpaceType;
-        right?: import("../../../../shared/types").SpaceType;
         bottom?: import("../../../../shared/types").SpaceType;
-        left?: import("../../../../shared/types").SpaceType;
         required?: boolean;
         defaultValue?: unknown;
         className?: string;
@@ -96,8 +96,8 @@ declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>):
             emptyValue: unknown;
             required: boolean;
             isChanged: boolean;
-            error: import("../../types").FormError;
-        }) => import("../../types").FormError;
+            error: import("../..").FormError;
+        }) => import("../..").FormError;
         validateInitially?: boolean;
         validateUnchanged?: boolean;
         continuousValidation?: boolean;

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

@@ -13,11 +13,14 @@ import { pickSpacingProps } from '../../../../components/flex/utils';
 import countries, { prioritizedCountries } from '../../constants/countries';
 import { useFieldProps } from '../../hooks';
 import FieldBlock from '../../FieldBlock';
-import useErrorMessage from '../../hooks/useErrorMessage';
 import useTranslation from '../../hooks/useTranslation';
 function SelectCountry(props) {
   const sharedContext = useContext(SharedContext);
-  const translations = useTranslation().SelectCountry;
+  const {
+    label: defaultLabel,
+    placeholder: defaultPlaceholder,
+    errorRequired
+  } = useTranslation().SelectCountry;
   const lang = (sharedContext.locale || LOCALE).split('-')[0];
   const getCountryObjectByIso = useCallback(value => {
     const country = countries.find(({
@@ -34,19 +37,18 @@ function SelectCountry(props) {
       return country;
     }
   }, [getCountryObjectByIso]);
-  const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: translations.errorRequired
-  });
-  const defaultProps = {
+  const errorMessages = useMemo(() => ({
+    required: errorRequired
+  }), [errorRequired]);
+  const preparedProps = _objectSpread(_objectSpread({
     errorMessages
-  };
-  const preparedProps = _objectSpread(_objectSpread(_objectSpread({}, defaultProps), props), {}, {
+  }, props), {}, {
     provideAdditionalArgs
   });
   const {
     className,
-    placeholder = translations.placeholder,
-    label = translations.label,
+    placeholder = defaultPlaceholder,
+    label = defaultLabel,
     countries: ccFilter = 'Prioritized',
     info,
     warning,
@@ -61,6 +63,7 @@ function SelectCountry(props) {
     handleBlur,
     handleChange,
     updateValue,
+    setDisplayValue,
     forceUpdate,
     filterCountries
   } = useFieldProps(preparedProps);
@@ -131,6 +134,10 @@ function SelectCountry(props) {
       }
     }
   }, [handleChange]);
+  useMemo(() => {
+    var _getCountryObjectByIs, _getCountryObjectByIs2;
+    setDisplayValue(props.path, (_getCountryObjectByIs = getCountryObjectByIso(value)) === null || _getCountryObjectByIs === void 0 ? void 0 : (_getCountryObjectByIs2 = _getCountryObjectByIs.i18n) === null || _getCountryObjectByIs2 === void 0 ? void 0 : _getCountryObjectByIs2[langRef.current]);
+  }, [getCountryObjectByIso, props.path, setDisplayValue, value]);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-select-country', className),
     width: width,
@@ -198,7 +205,7 @@ export function getCountryData({
         return 1;
       }
     }
-    return (_String = String(a[lang])) === null || _String === void 0 ? void 0 : (_String$localeCompare = _String.localeCompare) === null || _String$localeCompare === void 0 ? void 0 : _String$localeCompare.call(_String, b[lang]);
+    return (_String = String(a[lang])) === null || _String === void 0 ? void 0 : (_String$localeCompare = _String.localeCompare) === null || _String$localeCompare === void 0 ? void 0 : _String$localeCompare.call(_String, b[lang], 'nb');
   }).map(country => makeObject(country, lang));
 }
 export function countryFilter(country, filterCountries, ccFilter) {