@dnb/eufemia 10.14.0 → 10.15.0

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

@@ -1,15 +1,27 @@
 import { InputMaskedProps } from '../../../../components/InputMasked';
+import { CountryType } from '../../constants/countries';
+import { Props as InputProps } from '../String';
 import { FieldHelpProps, FieldProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<string, undefined> & {
+import { CountryFilterSet } from '../SelectCountry';
+export type Props = FieldHelpProps & FieldProps<string, undefined | string> & {
     countryCodeFieldClassName?: string;
     numberFieldClassName?: string;
     countryCodePlaceholder?: string;
     countryCodeLabel?: string;
     numberMask?: InputMaskedProps['mask'];
+    pattern?: InputProps['pattern'];
     width?: 'large' | 'stretch';
+    omitCountryCodeField?: boolean;
     onCountryCodeChange?: (value: string | undefined) => void;
     onNumberChange?: (value: string | undefined) => void;
-} & {
+    countries?: CountryFilterSet;
+    /**
+     * For internal use only.
+     *
+     * @param country
+     * @returns boolean
+     */
+    filterCountries?: (country: CountryType) => boolean;
     /**
      * For internal testing purposes
      */

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 } from 'react';
 import { Autocomplete, Flex } from '../../../../components';
 import classnames from 'classnames';
 import countries from '../../constants/countries';
@@ -13,14 +13,20 @@ import { useDataValue } from '../../hooks';
 import FieldBlock from '../../FieldBlock';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
+import { getCountryData, makeCountryFilterSet } from '../SelectCountry';
+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;
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
+  const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
   const errorMessages = useMemo(() => _objectSpread({
-    required: tr.phoneNumberErrorRequired
+    required: tr.phoneNumberErrorRequired,
+    pattern: tr.phoneNumberErrorRequired
   }, props === null || props === void 0 ? void 0 : props.errorMessages), [tr, props.errorMessages]);
   const defaultProps = {
-    value: '+47',
     errorMessages
   };
   const preparedProps = _objectSpread(_objectSpread({}, defaultProps), props);
@@ -32,8 +38,8 @@ function PhoneNumber(props) {
     placeholder,
     countryCodeLabel,
     label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberLabel,
-    value,
     numberMask,
+    countries: ccFilter = 'Prioritized',
     emptyValue,
     info,
     warning,
@@ -41,99 +47,162 @@ function PhoneNumber(props) {
     disabled,
     width = 'large',
     help,
+    pattern,
     required,
     validateInitially,
     continuousValidation,
     validateUnchanged,
+    omitCountryCodeField,
     handleFocus,
     handleBlur,
     handleChange,
+    updateValue,
     onCountryCodeChange,
-    onNumberChange
+    onNumberChange,
+    filterCountries = ccFilter !== 'Prioritized' ? makeCountryFilterSet(ccFilter) : undefined
   } = useDataValue(preparedProps);
-  const [, countryCode, phoneNumber] = value !== undefined ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''];
-  const singleCountryCodeData = useMemo(() => {
-    var _sharedContext$locale;
-    return getCountryData({
-      lang: (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0],
-      filter: countryCode
+  const countryCodeRef = React.useRef(null);
+  const numberRef = React.useRef(null);
+  const dataRef = React.useRef(null);
+  const langRef = React.useRef(lang);
+  const wasFilled = React.useRef(false);
+  const updateCurrentDataSet = useCallback(() => {
+    dataRef.current = getCountryData({
+      lang,
+      filter: !wasFilled.current ? country => `${formattCountryCode(country.cdc)}` === countryCodeRef.current : filterCountries,
+      sort: ccFilter,
+      makeObject
+    });
+  }, [lang, filterCountries, ccFilter]);
+  const callOnChange = useCallback(({
+    countryCode = omitCountryCodeField ? emptyValue : countryCodeRef.current || emptyValue,
+    phoneNumber = numberRef.current || emptyValue
+  }) => {
+    updateValue('invalidate');
+    handleChange(phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue, omitCountryCodeField ? {
+      phoneNumber
+    } : {
+      countryCode,
+      phoneNumber
     });
-  }, []);
+  }, [omitCountryCodeField, emptyValue, updateValue, handleChange]);
+  useMemo(() => {
+    const [countryCode, phoneNumber] = splitValue(props.value);
+    numberRef.current = phoneNumber;
+    if (lang !== langRef.current || !wasFilled.current) {
+      countryCodeRef.current = countryCode || defaultCountryCode;
+      langRef.current = lang;
+      updateCurrentDataSet();
+    }
+  }, [props.value, lang, updateCurrentDataSet]);
+  useEffect(() => {
+    const [countryCode, phoneNumber] = splitValue(props.value);
+    const newValue = phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue;
+    updateValue(newValue);
+  }, [props.value, emptyValue, updateValue]);
   const handleCountryCodeChange = useCallback(({
     data
   }) => {
-    var _data$selectedKey$tri, _data$selectedKey;
-    const countryCode = (_data$selectedKey$tri = data === null || data === void 0 ? void 0 : (_data$selectedKey = data.selectedKey) === null || _data$selectedKey === void 0 ? void 0 : _data$selectedKey.trim()) !== null && _data$selectedKey$tri !== void 0 ? _data$selectedKey$tri : emptyValue;
-    if (!countryCode && !phoneNumber) {
-      handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
-      onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(emptyValue);
-      return;
-    }
-    handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
+    var _data$selectedKey;
+    const countryCode = countryCodeRef.current = (data === null || data === void 0 ? void 0 : (_data$selectedKey = data.selectedKey) === null || _data$selectedKey === void 0 ? void 0 : _data$selectedKey.trim()) || emptyValue;
+    callOnChange({
+      countryCode
+    });
     onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(countryCode);
-  }, [phoneNumber, emptyValue, handleChange, onCountryCodeChange]);
-  const handleNumberChange = useCallback(phoneNumber => {
-    if (!countryCode && !phoneNumber) {
-      handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
-      onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(emptyValue);
-      return;
-    }
-    handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
+  }, [emptyValue, callOnChange, onCountryCodeChange]);
+  const handleNumberChange = useCallback(value => {
+    const phoneNumber = numberRef.current = value || emptyValue;
+    callOnChange({
+      phoneNumber
+    });
     onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(phoneNumber);
-  }, [countryCode, emptyValue, handleChange, onNumberChange]);
-  const onFocusHandler = ({
-    dataList,
+  }, [emptyValue, callOnChange, onNumberChange]);
+  const onFocusHandler = useCallback(({
     updateData
   }) => {
-    if (dataList.length < 10) {
-      var _sharedContext$locale2;
-      updateData(getCountryData({
-        lang: (_sharedContext$locale2 = sharedContext.locale) === null || _sharedContext$locale2 === void 0 ? void 0 : _sharedContext$locale2.split('-')[0]
-      }));
+    if (!wasFilled.current) {
+      wasFilled.current = true;
+      updateCurrentDataSet();
+      updateData(dataRef.current);
     }
     handleFocus();
-  };
+  }, [handleFocus, updateCurrentDataSet]);
+  const onTypeHandler = useCallback(({
+    value,
+    updateData,
+    revalidateInputValue,
+    event
+  }) => {
+    var _event$nativeEvent;
+    if (typeof (event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.data) === 'undefined') {
+      const cdcVal = /\+\d{1,3}\s{1}\d+/.test(value) ? splitValue(value)[0] : value;
+      const country = countries.find(({
+        cdc
+      }) => cdc === cdcVal);
+      if (country !== null && country !== void 0 && country.cdc) {
+        const countryCode = countryCodeRef.current = formattCountryCode(country.cdc);
+        updateCurrentDataSet();
+        updateData(dataRef.current);
+        callOnChange({
+          countryCode
+        });
+        window.requestAnimationFrame(() => {
+          revalidateInputValue();
+        });
+      }
+    }
+  }, [callOnChange, updateCurrentDataSet]);
+  const isDefault = countryCodeRef.current.includes(defaultCountryCode);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-phone-number', className),
-    width: width !== 'stretch' ? width : undefined,
+    width: omitCountryCodeField ? undefined : width,
     info: info,
     warning: warning,
-    error: error
-  }, pickSpacingProps(props)), React.createElement(Flex.Horizontal, null, React.createElement(Autocomplete, {
+    error: error,
+    disabled: disabled
+  }, pickSpacingProps(props)), React.createElement(Flex.Horizontal, {
+    align: "baseline"
+  }, !omitCountryCodeField && React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
+    mode: "async",
     placeholder: countryCodePlaceholder !== null && countryCodePlaceholder !== void 0 ? countryCodePlaceholder : ' ',
     label_direction: "vertical",
     label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
-    data: singleCountryCodeData,
-    value: countryCode,
+    data: dataRef.current,
+    value: countryCodeRef.current,
     disabled: disabled,
     on_focus: onFocusHandler,
     on_blur: handleBlur,
     on_change: handleCountryCodeChange,
+    on_type: onTypeHandler,
     independent_width: true,
     search_numbers: true,
-    keep_value_and_selection: true,
+    keep_selection: true,
+    autoComplete: "tel-country-code",
     no_animation: props.noAnimation,
     stretch: width === 'stretch'
   }), React.createElement(StringComponent, {
     className: classnames('dnb-forms-field-phone-number__number', numberFieldClassName),
     type: "tel",
+    autoComplete: "tel-national",
     emptyValue: "",
     layout: "vertical",
     label: label !== null && label !== void 0 ? label : ' ',
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '00 00 00 00',
-    mask: numberMask !== null && numberMask !== void 0 ? numberMask : [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/],
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : isDefault ? defaultPlaceholder : undefined,
+    mask: numberMask !== null && numberMask !== void 0 ? numberMask : isDefault ? defaultMask : Array(12).fill(/\d/),
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChange: handleNumberChange,
-    value: phoneNumber,
+    value: numberRef.current,
     info: info,
     warning: warning,
     error: error,
     disabled: disabled,
-    width: "stretch",
+    width: omitCountryCodeField ? 'medium' : 'stretch',
     help: help,
     required: required,
+    pattern: pattern,
+    errorMessages: errorMessages,
     validateInitially: validateInitially,
     continuousValidation: continuousValidation,
     validateUnchanged: validateUnchanged
@@ -142,22 +211,20 @@ function PhoneNumber(props) {
 function makeObject(country, lang) {
   var _country$i18n$lang;
   return {
-    selectedKey: `+${country.cdc}`,
-    selected_value: `${country.iso} (+${country.cdc})`,
-    content: `+${country.cdc} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
+    selectedKey: formattCountryCode(country.cdc),
+    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,
+    search_content: Object.values(country.i18n).map(v => `${formattCountryCode(country.cdc)} ${v}`),
+    content: `${formattCountryCode(country.cdc)} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
   };
 }
-function getCountryData({
-  lang = 'en',
-  filter = null
-} = {}) {
-  return countries.filter(({
-    cdc
-  }) => !filter || `+${cdc}` === filter).sort(({
-    i18n: a
-  }, {
-    i18n: b
-  }) => a[lang] > b[lang] ? 1 : -1).map(country => makeObject(country, lang));
+function formattCountryCode(value) {
+  return `+${value}`;
+}
+function splitValue(value) {
+  return (typeof value === 'string' ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', '']).slice(1);
+}
+function joinValue(array) {
+  return array.filter(Boolean).join(' ');
 }
 PhoneNumber._supportsSpacingProps = true;
 export default PhoneNumber;

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","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","PhoneNumber","props","sharedContext","tr","translation","Forms","errorMessages","_objectSpread","required","phoneNumberErrorRequired","defaultProps","value","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","singleCountryCodeData","_sharedContext$locale","getCountryData","lang","locale","split","filter","handleCountryCodeChange","data","_data$selectedKey$tri","_data$selectedKey","selectedKey","trim","Boolean","join","handleNumberChange","onFocusHandler","dataList","updateData","length","_sharedContext$locale2","createElement","_extends","Horizontal","label_direction","on_focus","on_blur","on_change","independent_width","search_numbers","keep_value_and_selection","no_animation","noAnimation","stretch","type","layout","mask","onFocus","onBlur","onChange","makeObject","country","_country$i18n$lang","cdc","selected_value","iso","content","i18n","en","sort","a","b","map","_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 from '../../constants/countries'\nimport StringComponent from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    width?: 'large' | 'stretch'\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n  } & {\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const defaultProps: Partial<Props> = {\n    // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n    // back to +47 once the user empty the field so handleChange send out undefined.\n    value: '+47',\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    numberMask,\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useDataValue(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const singleCountryCodeData = useMemo(() => {\n    return getCountryData({\n      lang: sharedContext.locale?.split('-')[0],\n      filter: countryCode,\n    })\n  }, [])\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = data?.selectedKey?.trim() ?? emptyValue\n\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onCountryCodeChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onCountryCodeChange?.(countryCode)\n    },\n    [phoneNumber, emptyValue, handleChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (phoneNumber: string) => {\n      if (!countryCode && !phoneNumber) {\n        handleChange?.(emptyValue)\n        onNumberChange?.(emptyValue)\n        return\n      }\n\n      handleChange?.([countryCode, phoneNumber].filter(Boolean).join(' '))\n      onNumberChange?.(phoneNumber)\n    },\n    [countryCode, emptyValue, handleChange, onNumberChange]\n  )\n\n  const onFocusHandler = ({ dataList, updateData }) => {\n    // because there can be more than one country with same cdc\n    if (dataList.length < 10) {\n      updateData(\n        getCountryData({ lang: sharedContext.locale?.split('-')[0] })\n      )\n    }\n    handleFocus()\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={width !== 'stretch' ? width : undefined}\n      info={info}\n      warning={warning}\n      error={error}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal>\n        <Autocomplete\n          className={classnames(\n            'dnb-forms-field-phone-number__country-code',\n            countryCodeFieldClassName\n          )}\n          placeholder={countryCodePlaceholder ?? ' '}\n          label_direction=\"vertical\"\n          label={\n            countryCodeLabel ??\n            sharedContext?.translation.Forms.countryCodeLabel\n          }\n          data={singleCountryCodeData}\n          value={countryCode}\n          disabled={disabled}\n          on_focus={onFocusHandler}\n          on_blur={handleBlur}\n          on_change={handleCountryCodeChange}\n          independent_width\n          search_numbers\n          keep_value_and_selection\n          no_animation={props.noAnimation}\n          stretch={width === 'stretch'}\n        />\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label ?? ' '}\n          placeholder={placeholder ?? '00 00 00 00'}\n          mask={\n            numberMask ?? [\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n              ' ',\n              /\\d/,\n              /\\d/,\n            ]\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={phoneNumber}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width=\"stretch\"\n          help={help}\n          required={required}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\ntype CountryType = {\n  cdc: string\n  iso: string\n  i18n: {\n    en: string\n  }\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: `+${country.cdc}`,\n    selected_value: `${country.iso} (+${country.cdc})`,\n    content: `+${country.cdc} ${country.i18n[lang] ?? country.i18n.en}`,\n  }\n}\n\nfunction getCountryData({ lang = 'en', filter = null } = {}) {\n  return countries\n    .filter(({ cdc }) => !filter || `+${cdc}` === filter)\n    .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))\n    .map((country) => makeObject(country, lang))\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","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","sharedContext","tr","translation","Forms","lang","locale","split","errorMessages","_objectSpread","required","phoneNumberErrorRequired","pattern","defaultProps","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","ccFilter","emptyValue","info","warning","error","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","updateValue","onCountryCodeChange","onNumberChange","filterCountries","undefined","countryCodeRef","useRef","numberRef","dataRef","langRef","wasFilled","updateCurrentDataSet","current","filter","country","formattCountryCode","cdc","sort","makeObject","callOnChange","countryCode","phoneNumber","joinValue","splitValue","value","newValue","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","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","type","layout","mask","Array","fill","onFocus","onBlur","onChange","_country$i18n$lang","selected_value","iso","search_content","Object","values","i18n","map","v","content","en","match","slice","array","Boolean","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback, useEffect } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, { CountryType } from '../../constants/countries'\nimport StringComponent, { Props as InputProps } from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\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?: InputProps['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 useDataValue 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 errorMessages = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      pattern: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\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    disabled,\n    width = 'large',\n    help,\n    pattern,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useDataValue(preparedProps)\n\n  const countryCodeRef = React.useRef(null)\n  const numberRef = React.useRef(null)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\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      /**\n       * To ensure, we actually call onChange every time,\n       * even if the value is undefined\n       */\n      updateValue('invalidate')\n\n      handleChange(\n        phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue,\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, updateValue, 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)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      countryCodeRef.current = countryCode || defaultCountryCode\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [props.value, lang, updateCurrentDataSet])\n\n  /**\n   * On external value change, update the internal,\n   * only so onFocus and onBlur does have correct (eventually empty) value.\n   */\n  useEffect(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value)\n    const newValue = phoneNumber\n      ? joinValue([countryCode, phoneNumber])\n      : emptyValue\n    updateValue(newValue)\n  }, [props.value, emptyValue, updateValue])\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=\"baseline\">\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            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        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          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          pattern={pattern}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\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    search_content: Object.values(country.i18n).map(\n      (v) => `${formattCountryCode(country.cdc)} ${v}`\n    ),\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

package/es/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.css

@@ -1,14 +1,8 @@
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-phone-number__country-code {
-  width: 9rem;
+  width: calc(var(--forms-field-width--medium) - 2rem);
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 9rem;
+  width: calc(var(--forms-field-width--medium) - 2rem);
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;

package/es/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.min.css

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}
+.dnb-forms-field-phone-number__country-code,.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:calc(var(--forms-field-width--medium) - 2rem)}.dnb-forms-field-phone-number__number{flex:1}

package/es/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss

@@ -1,11 +1,9 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-phone-number {
   &__country-code {
-    width: 9rem;
+    width: calc(var(--forms-field-width--medium) - 2rem);
 
     .dnb-autocomplete__shell {
-      width: 9rem;
+      width: calc(var(--forms-field-width--medium) - 2rem);
     }
   }
 

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

@@ -1,9 +1,7 @@
 import { Props as FieldBlockProps } from '../../FieldBlock';
 import { Props as StringComponentProps } from '../String';
 import { FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & Omit<FieldBlockProps, 'children'> & Record<'postalCode' | 'city', StringComponentProps> & {
-    width?: 'small' | 'medium' | 'large';
-};
+export type Props = FieldHelpProps & Omit<FieldBlockProps, 'children'> & Record<'postalCode' | 'city', StringComponentProps>;
 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

@@ -3,7 +3,7 @@
 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", "width", "help"];
+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';
@@ -17,14 +17,16 @@ function PostalCodeAndCity(props) {
   const {
       postalCode = {},
       city = {},
-      width = 'large',
-      help
+      help,
+      width = 'large'
     } = props,
     fieldBlockProps = _objectWithoutProperties(props, _excluded);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
-  }, fieldBlockProps), React.createElement("div", {
-    className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== undefined ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
+  }, fieldBlockProps, {
+    width: width
+  }), React.createElement("div", {
+    className: 'dnb-forms-field-postal-code-and-city__fields'
   }, React.createElement(StringComponent, _extends({}, postalCode, {
     pattern: (_postalCode$pattern = postalCode.pattern) !== null && _postalCode$pattern !== void 0 ? _postalCode$pattern : '^[0-9]{4}$',
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringComponent","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","width","help","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","undefined","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","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 StringComponent, { Props as StringComponentProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps> & {\n    width?: 'small' | 'medium' | 'large'\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    width = 'large',\n    help,\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    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields',\n          width !== undefined &&\n            `dnb-forms-field-postal-code-and-city--width-${width}`\n        )}\n      >\n        <StringComponent\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\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:\n              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        />\n        <StringComponent\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          help={help}\n        />\n      </div>\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,eAAe,MAAyC,WAAW;AAS1E,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,KAAK,GAAG,OAAO;MACfC;IAEF,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,GAEnBjB,KAAA,CAAAoB,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CP,KAAK,KAAKQ,SAAS,mDAC8BR,KAAM;EACvD,GAEFf,KAAA,CAAAoB,aAAA,CAACf,eAAe,EAAAgB,QAAA,KACVR,UAAU;IACdW,OAAO,GAAAhB,mBAAA,GAAEK,UAAU,CAACW,OAAO,cAAAhB,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5Cc,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFG,KAAK,GAAAhB,iBAAA,GACHI,UAAU,CAACY,KAAK,cAAAhB,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNnB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDpB,UAAU,CAACgB,aAAa,CAC3B;IACFK,WAAW,GAAAxB,qBAAA,GAAEG,UAAU,CAACqB,WAAW,cAAAxB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CK,KAAK,EAAE,KAAM;IACboB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACFnC,KAAA,CAAAoB,aAAA,CAACf,eAAe,EAAAgB,QAAA,KACVP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFG,KAAK,GAAAd,WAAA,GAAEG,IAAI,CAACW,KAAK,cAAAd,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACS,SAAU;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEnB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDvB,IAAI,CAACe,aAAa,CACrB;IACFd,KAAK,EAAC,SAAS;IACfC,IAAI,EAAEA;EAAK,EACZ,CACE,CACK,CAAC;AAEjB;AAEAV,iBAAiB,CAACgC,qBAAqB,GAAG,IAAI;AAC9C,eAAehC,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringComponent","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","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 StringComponent, { Props as StringComponentProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps>\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    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields'\n        )}\n      >\n        <StringComponent\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\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:\n              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        />\n        <StringComponent\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          help={help}\n        />\n      </div>\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,eAAe,MAAyC,WAAW;AAO1E,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;EAAM,IAEbhB,KAAA,CAAAoB,aAAA;IACEE,SAAS,EACP;EACA,GAEFtB,KAAA,CAAAoB,aAAA,CAACf,eAAe,EAAAgB,QAAA,KACVR,UAAU;IACdU,OAAO,GAAAf,mBAAA,GAAEK,UAAU,CAACU,OAAO,cAAAf,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5Cc,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFE,KAAK,GAAAf,iBAAA,GACHI,UAAU,CAACW,KAAK,cAAAf,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNlB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDnB,UAAU,CAACe,aAAa,CAC3B;IACFK,WAAW,GAAAvB,qBAAA,GAAEG,UAAU,CAACoB,WAAW,cAAAvB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACbkB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACFlC,KAAA,CAAAoB,aAAA,CAACf,eAAe,EAAAgB,QAAA,KACVP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFE,KAAK,GAAAb,WAAA,GAAEG,IAAI,CAACU,KAAK,cAAAb,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACS,SAAU;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAElB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDtB,IAAI,CAACc,aAAa,CACrB;IACFZ,KAAK,EAAC,SAAS;IACfD,IAAI,EAAEA;EAAK,EACZ,CACE,CACK,CAAC;AAEjB;AAEAT,iBAAiB,CAAC+B,qBAAqB,GAAG,IAAI;AAC9C,eAAe/B,iBAAiB"}

package/es/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.css

@@ -1,9 +1,3 @@
-:root {
-  --forms-field-width--small: 5rem;
-  --forms-field-width--medium: 11rem;
-  --forms-field-width--large: 21rem;
-}
-
 .dnb-forms-field-postal-code-and-city__fields {
   display: flex;
   flex-flow: row;
@@ -11,15 +5,6 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
-.dnb-forms-field-postal-code-and-city--width-small {
-  width: var(--forms-field-width--small);
-}
-.dnb-forms-field-postal-code-and-city--width-medium {
-  width: var(--forms-field-width--medium);
-}
-.dnb-forms-field-postal-code-and-city--width-large {
-  width: var(--forms-field-width--large);
-}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }

package/es/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.min.css

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-postal-code-and-city--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-postal-code-and-city--width-large{width:var(--forms-field-width--large)}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}
+.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}

package/es/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.scss

@@ -1,5 +1,3 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-postal-code-and-city {
   &__fields {
     display: flex;
@@ -7,18 +5,6 @@
     column-gap: var(--spacing-small);
   }
 
-  &--width {
-    &-small {
-      width: var(--forms-field-width--small);
-    }
-    &-medium {
-      width: var(--forms-field-width--medium);
-    }
-    &-large {
-      width: var(--forms-field-width--large);
-    }
-  }
-
   &__postal-code {
     flex: 0 5rem;
   }

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

@@ -1,7 +1,39 @@
-import { Props as SelectionProps } from '../Selection';
-export type Props = SelectionProps;
+import { CountryType } from '../../constants/countries';
+import { FieldHelpProps, FieldProps } from '../../types';
+export type CountryFilterSet = 'Scandinavia' | 'Nordic' | 'Europe' | 'Prioritized';
+export type Props = FieldHelpProps & FieldProps<string, undefined | string> & {
+    countries?: CountryFilterSet;
+    width?: false | 'small' | 'medium' | 'large' | 'stretch';
+    /**
+     * For internal use only.
+     *
+     * @param country
+     * @returns boolean
+     */
+    filterCountries?: (country: CountryType) => boolean;
+    /**
+     * For internal testing purposes
+     */
+    noAnimation?: boolean;
+};
 declare function SelectCountry(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace SelectCountry {
     var _supportsSpacingProps: boolean;
 }
+type GetCountryData = {
+    lang?: string;
+    filter?: Props['filterCountries'];
+    sort?: Extract<CountryFilterSet, 'Prioritized'>;
+    makeObject?: (country: CountryType, lang: string) => {
+        selectedKey: string;
+        selected_value?: string;
+        content: string;
+    };
+};
+export declare function getCountryData({ lang, filter, sort, makeObject, }?: GetCountryData): {
+    selectedKey: string;
+    selected_value?: string;
+    content: string;
+}[];
+export declare function makeCountryFilterSet(ccFilter: CountryFilterSet): (country: CountryType) => boolean;
 export default SelectCountry;