@dnb/eufemia 10.15.1 → 10.16.0

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

@@ -4,13 +4,14 @@ 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, useEffect } from 'react';
+import React, { useMemo, useContext, useCallback } from 'react';
 import { Autocomplete, Flex } from '../../../../components';
 import classnames from 'classnames';
 import countries from '../../constants/countries';
 import StringComponent from '../String';
 import { useDataValue } from '../../hooks';
 import FieldBlock from '../../FieldBlock';
+import { FormError } from '../../types';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 import { getCountryData, makeCountryFilterSet } from '../SelectCountry';
@@ -18,18 +19,49 @@ 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;
+  var _sharedContext$locale, _countryCodeRef$curre;
   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 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 errorMessages = useMemo(() => _objectSpread({
     required: tr.phoneNumberErrorRequired,
     pattern: tr.phoneNumberErrorRequired
   }, props === null || props === void 0 ? void 0 : props.errorMessages), [tr, props.errorMessages]);
+  const validateRequired = useCallback((value, _ref) => {
+    let {
+      required,
+      isChanged
+    } = _ref;
+    const error = new FormError('The value is required', {
+      validationRule: 'required'
+    });
+    if (required) {
+      const [countryCode, phoneNumber] = splitValue(value);
+      if (countryCode !== prevCountryCodeRef.current) {
+        if (countryCode) {
+          prevCountryCodeRef.current = countryCode;
+        }
+        return undefined;
+      }
+      if (isChanged && !phoneNumber) {
+        return error;
+      }
+    }
+    return undefined;
+  }, []);
   const defaultProps = {
     errorMessages
   };
-  const preparedProps = _objectSpread(_objectSpread({}, defaultProps), props);
+  const preparedProps = _objectSpread(_objectSpread(_objectSpread({}, defaultProps), props), {}, {
+    validateRequired,
+    fromExternal,
+    toEvent
+  });
   const {
     className,
     countryCodeFieldClassName,
@@ -61,11 +93,20 @@ function PhoneNumber(props) {
     onNumberChange,
     filterCountries = ccFilter !== 'Prioritized' ? makeCountryFilterSet(ccFilter) : undefined
   } = useDataValue(preparedProps);
-  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);
+  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;
+  }
   const updateCurrentDataSet = useCallback(() => {
     dataRef.current = getCountryData({
       lang,
@@ -74,13 +115,13 @@ function PhoneNumber(props) {
       makeObject
     });
   }, [lang, filterCountries, ccFilter]);
-  const callOnChange = useCallback(_ref => {
+  const callOnChange = useCallback(_ref2 => {
     let {
       countryCode = omitCountryCodeField ? emptyValue : countryCodeRef.current || emptyValue,
       phoneNumber = numberRef.current || emptyValue
-    } = _ref;
+    } = _ref2;
     updateValue('invalidate');
-    handleChange(phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue, omitCountryCodeField ? {
+    handleChange(joinValue([countryCode, phoneNumber]), omitCountryCodeField ? {
       phoneNumber
     } : {
       countryCode,
@@ -91,21 +132,19 @@ function PhoneNumber(props) {
     const [countryCode, phoneNumber] = splitValue(props.value);
     numberRef.current = phoneNumber;
     if (lang !== langRef.current || !wasFilled.current) {
-      countryCodeRef.current = countryCode || defaultCountryCode;
+      if (!countryCodeRef.current || countryCode) {
+        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(_ref2 => {
+  const prevCountryCodeRef = React.useRef(countryCodeRef.current);
+  const handleCountryCodeChange = useCallback(_ref3 => {
     var _data$selectedKey;
     let {
       data
-    } = _ref2;
+    } = _ref3;
     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
@@ -119,10 +158,10 @@ function PhoneNumber(props) {
     });
     onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(phoneNumber);
   }, [emptyValue, callOnChange, onNumberChange]);
-  const onFocusHandler = useCallback(_ref3 => {
+  const onFocusHandler = useCallback(_ref4 => {
     let {
       updateData
-    } = _ref3;
+    } = _ref4;
     if (!wasFilled.current) {
       wasFilled.current = true;
       updateCurrentDataSet();
@@ -130,20 +169,20 @@ function PhoneNumber(props) {
     }
     handleFocus();
   }, [handleFocus, updateCurrentDataSet]);
-  const onTypeHandler = useCallback(_ref4 => {
+  const onTypeHandler = useCallback(_ref5 => {
     var _event$nativeEvent;
     let {
       value,
       updateData,
       revalidateInputValue,
       event
-    } = _ref4;
+    } = _ref5;
     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(_ref5 => {
+      const country = countries.find(_ref6 => {
         let {
           cdc
-        } = _ref5;
+        } = _ref6;
         return cdc === cdcVal;
       });
       if (country !== null && country !== void 0 && country.cdc) {
@@ -159,7 +198,7 @@ function PhoneNumber(props) {
       }
     }
   }, [callOnChange, updateCurrentDataSet]);
-  const isDefault = countryCodeRef.current.includes(defaultCountryCode);
+  const isDefault = (_countryCodeRef$curre = countryCodeRef.current) === null || _countryCodeRef$curre === void 0 ? void 0 : _countryCodeRef$curre.includes(defaultCountryCode);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-phone-number', className),
     width: omitCountryCodeField ? undefined : width,
@@ -168,11 +207,11 @@ function PhoneNumber(props) {
     error: error,
     disabled: disabled
   }, pickSpacingProps(props)), React.createElement(Flex.Horizontal, {
-    align: "baseline"
+    align: "flex-end"
   }, !omitCountryCodeField && React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     mode: "async",
-    placeholder: countryCodePlaceholder !== null && countryCodePlaceholder !== void 0 ? countryCodePlaceholder : ' ',
+    placeholder: countryCodePlaceholder,
     label_direction: "vertical",
     label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
     data: dataRef.current,
@@ -194,7 +233,7 @@ function PhoneNumber(props) {
     autoComplete: "tel-national",
     emptyValue: "",
     layout: "vertical",
-    label: label !== null && label !== void 0 ? label : ' ',
+    label: label,
     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,
@@ -212,7 +251,8 @@ function PhoneNumber(props) {
     errorMessages: errorMessages,
     validateInitially: validateInitially,
     continuousValidation: continuousValidation,
-    validateUnchanged: validateUnchanged
+    validateUnchanged: validateUnchanged,
+    inputMode: "tel"
   })));
 }
 function makeObject(country, lang) {
@@ -220,7 +260,6 @@ function makeObject(country, lang) {
   return {
     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}`
   };
 }

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

@@ -1 +1 @@
-{"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","_ref","countryCode","phoneNumber","joinValue","splitValue","value","newValue","handleCountryCodeChange","_ref2","_data$selectedKey","data","selectedKey","trim","handleNumberChange","onFocusHandler","_ref3","updateData","onTypeHandler","_ref4","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref5","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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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useMemo","useContext","useCallback","Autocomplete","Flex","classnames","countries","StringComponent","useDataValue","FieldBlock","FormError","pickSpacingProps","SharedContext","getCountryData","makeCountryFilterSet","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","useRef","numberRef","dataRef","langRef","wasFilled","errorMessages","_objectSpread","required","phoneNumberErrorRequired","pattern","validateRequired","value","_ref","isChanged","error","validationRule","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","undefined","defaultProps","preparedProps","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","ccFilter","emptyValue","info","warning","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","updateValue","onCountryCodeChange","onNumberChange","filterCountries","external","updateCurrentDataSet","filter","country","formattCountryCode","cdc","sort","makeObject","callOnChange","_ref2","joinValue","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","onFocusHandler","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","createElement","_extends","Horizontal","align","mode","label_direction","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","inputMode","_country$i18n$lang","selected_value","iso","content","i18n","en","match","slice","array","Boolean","join","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, { CountryType } from '../../constants/countries'\nimport StringComponent, { Props as InputProps } from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps, FormError } 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 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 errorMessages = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      pattern: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged }) => {\n      const error = new FormError('The value is required', {\n        validationRule: 'required',\n      })\n\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 defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n    validateRequired,\n    fromExternal,\n    toEvent,\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  function fromExternal(external: string) {\n    const [, phoneNumber] = splitValue(external)\n    if (!phoneNumber && !props.omitCountryCodeField) {\n      return countryCodeRef.current\n    }\n    return external\n  }\n\n  function toEvent(value: string) {\n    const [, phoneNumber] = splitValue(value)\n    if (!phoneNumber) {\n      return emptyValue\n    }\n    return value\n  }\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === countryCodeRef.current\n        : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      /**\n       * To ensure, we actually call onChange every time the cc value changes,\n       * even if the value is undefined\n       */\n      updateValue('invalidate')\n\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\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      if (!countryCodeRef.current || countryCode) {\n        countryCodeRef.current = countryCode || defaultCountryCode\n      }\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [props.value, lang, updateCurrentDataSet])\n\n  const prevCountryCodeRef = React.useRef(countryCodeRef.current)\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formattCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={\n              countryCodeLabel ??\n              sharedContext?.translation.Forms.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            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          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formattCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

@@ -6,4 +6,7 @@
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;
+}
+.dnb-forms-field-phone-number .dnb-form-label {
+  max-width: 14ch;
 }

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

@@ -1 +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}
+.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}.dnb-forms-field-phone-number .dnb-form-label{max-width:14ch}

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

@@ -10,4 +10,8 @@
   &__number {
     flex: 1;
   }
+
+  .dnb-form-label {
+    max-width: 14ch;
+  }
 }

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

@@ -29,6 +29,7 @@ function PostalCodeAndCity(props) {
     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}$',
+    mask: [/\d/, /\d/, /\d/, /\d/],
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),
     label: (_postalCode$label = postalCode.label) !== null && _postalCode$label !== void 0 ? _postalCode$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeLabel,
     errorMessages: _objectSpread({
@@ -37,7 +38,8 @@ function PostalCodeAndCity(props) {
     }, postalCode.errorMessages),
     placeholder: (_postalCode$placehold = postalCode.placeholder) !== null && _postalCode$placehold !== void 0 ? _postalCode$placehold : '0000',
     width: false,
-    inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input"
+    inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input",
+    inputMode: "numeric"
   })), React.createElement(StringComponent, _extends({}, city, {
     className: classnames('dnb-forms-field-postal-code-and-city__city', city.className),
     label: (_city$label = city.label) !== null && _city$label !== void 0 ? _city$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityLabel,

package/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","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"}
+{"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","mask","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","inputMode","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          mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__postal-code',\n            postalCode.className\n          )}\n          label={\n            postalCode.label ??\n            sharedContext?.translation.Forms.postalCodeLabel\n          }\n          errorMessages={{\n            required:\n              sharedContext?.translation.Forms.postalCodeErrorRequired,\n            pattern:\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          inputMode=\"numeric\"\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;IAC5CgB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BF,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;MAC1DT,OAAO,EACLX,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;IAC9CM,KAAK,EAAE,KAAM;IACbmB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC;EAAS,EACpB,CAAC,EACFpC,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,CAACU,SAAU;IAChER,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEnB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACW;IAAiB,GACzDxB,IAAI,CAACe,aAAa,CACrB;IACFb,KAAK,EAAC,SAAS;IACfD,IAAI,EAAEA;EAAK,EACZ,CACE,CACK,CAAC;AAEjB;AAEAT,iBAAiB,CAACiC,qBAAqB,GAAG,IAAI;AAC9C,eAAejC,iBAAiB"}

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

@@ -1,14 +1,15 @@
 "use client";
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _em;
+const _excluded = ["value", "error", "title", "children"],
+  _excluded2 = ["value", "title", "status"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useMemo, useContext, useCallback } from 'react';
 import { ToggleButton, Dropdown, Radio, HelpButton } from '../../../../components';
-import ButtonRow from '../../Form/ButtonRow';
-import FieldBlock from '../../FieldBlock';
 import classnames from 'classnames';
 import { makeUniqueId } from '../../../../shared/component-helper';
 import SharedContext from '../../../../shared/Context';
@@ -16,7 +17,7 @@ import Option from '../Option';
 import { useDataValue } from '../../hooks';
 import { FormError } from '../../types';
 import { pickSpacingProps } from '../../../../components/flex/utils';
-import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
+import FieldBlock from '../../FieldBlock';
 function Selection(props) {
   const sharedContext = useContext(SharedContext);
   const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, []);
@@ -51,7 +52,7 @@ function Selection(props) {
     } = _ref;
     handleChange === null || handleChange === void 0 ? void 0 : handleChange(!selectedKey || selectedKey === clearValue ? emptyValue : selectedKey);
   }, [handleChange, emptyValue, clearValue]);
-  const handleRadioChange = useCallback(_ref2 => {
+  const onChangeHandler = useCallback(_ref2 => {
     let {
       value
     } = _ref2;
@@ -69,7 +70,7 @@ function Selection(props) {
     } = _ref4;
     setHasFocus(false, data === null || data === void 0 ? void 0 : data.selectedKey);
   }, [setHasFocus]);
-  const cn = classnames('dnb-forms-field-selection', className);
+  const cn = classnames(`dnb-forms-field-selection dnb-forms-field-selection__variant--${variant} dnb-forms-field-selection__options-layout--${optionsLayout}`, className);
   const fieldBlockProps = _objectSpread(_objectSpread({
     forId: id,
     className: cn
@@ -82,50 +83,57 @@ function Selection(props) {
     labelDescription,
     labelSecondary
   });
+  const getStatus = useCallback(error => {
+    var _error$message;
+    return (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()) || info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString());
+  }, [info, warning]);
   const options = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map(option => {
-    var _option$props$title;
-    return {
-      title: (_option$props$title = option.props.title) !== null && _option$props$title !== void 0 ? _option$props$title : option.props.children,
-      value: option.props.value,
-      handleSelect: () => {
-        const selected = option.props.value;
-        handleChange === null || handleChange === void 0 ? void 0 : handleChange(selected === value ? emptyValue : selected);
-      }
-    };
-  }), [children, value, emptyValue, handleChange]);
+    const _option$props = option.props,
+      {
+        value: v,
+        error,
+        title,
+        children
+      } = _option$props,
+      rest = _objectWithoutProperties(_option$props, _excluded);
+    const status = getStatus(error);
+    return _objectSpread({
+      title: title !== null && title !== void 0 ? title : children,
+      value: v,
+      status
+    }, rest);
+  }), [children, getStatus]);
+  const status = getStatus(error);
   switch (variant) {
     case 'radio':
-      return React.createElement(Radio.Group, _extends({
-        className: cn,
-        label: label,
-        layout_direction: optionsLayout === 'horizontal' ? 'row' : 'column',
-        vertical: layout === 'vertical',
-        on_change: handleRadioChange,
-        value: String(value !== null && value !== void 0 ? value : '')
-      }, pickSpacingProps(props)), options.map((option, i) => {
-        var _option$value;
-        return React.createElement(Radio, {
-          key: `option-${i}-${option.value}`,
-          label: option.title,
-          value: String((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : '')
-        });
-      }));
     case 'button':
-      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ButtonRow, null, React.createElement(ToggleButtonGroupContext.Provider, {
-        value: {
-          status: error ? 'error' : undefined,
-          disabled
-        }
-      }, options.map((option, i) => React.createElement(ToggleButton, {
-        id: options.length > 0 ? id : undefined,
-        key: `option-${i}-${option.value}`,
-        text: option.title,
-        on_change: option.handleSelect,
-        checked: option.value === value
-      })))));
+      {
+        const Component = variant === 'radio' ? Radio : ToggleButton;
+        return React.createElement(FieldBlock, fieldBlockProps, React.createElement(Component.Group, {
+          className: cn,
+          layout_direction: optionsLayout === 'horizontal' ? 'row' : 'column',
+          disabled: disabled,
+          on_change: onChangeHandler,
+          value: String(value !== null && value !== void 0 ? value : '')
+        }, options.map((option, i) => {
+          const {
+              value,
+              title,
+              status
+            } = option,
+            rest = _objectWithoutProperties(option, _excluded2);
+          return React.createElement(Component, _extends({
+            id: options.length === 1 ? id : undefined,
+            key: `option-${i}-${value}`,
+            label: variant === 'radio' ? title : undefined,
+            text: variant === 'button' ? title : undefined,
+            value: String(value !== null && value !== void 0 ? value : ''),
+            status: status
+          }, rest));
+        })));
+      }
     case 'dropdown':
       {
-        var _error$message;
         const optionsData = React.Children.map(children, child => {
           if (React.isValidElement(child) && child.type === Option) {
             var _child$props$value, _ref5, _child$props$children, _child$props$children2;
@@ -145,15 +153,15 @@ function Selection(props) {
           selectedKey: clearValue,
           content: React.createElement("em", null, sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectionClearSelected)
         } : undefined, ...(optionsData !== null && optionsData !== void 0 ? optionsData : [])].filter(Boolean);
-        return React.createElement(Dropdown, _extends({
-          className: classnames('dnb-forms-field-selection', className, width !== 'stretch' && `dnb-forms-field-selection--width-${width}`),
+        return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
+          width: width
+        }), React.createElement(Dropdown, _extends({
+          id: id,
           list_class: "dnb-forms-field-selection__list",
           portal_class: "dnb-forms-field-selection__portal",
           title: placeholder,
           value: String(value !== null && value !== void 0 ? value : ''),
-          label: label,
-          label_direction: layout,
-          status: (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()) || info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString()),
+          status: status && 'error',
           disabled: disabled,
           data: data,
           suffix: help ? React.createElement(HelpButton, {
@@ -163,8 +171,8 @@ function Selection(props) {
           on_show: handleShow,
           on_hide: handleHide
         }, pickSpacingProps(props), {
-          stretch: width === 'stretch'
-        }));
+          stretch: true
+        })));
       }
   }
 }