@dnb/eufemia 10.12.0 → 10.13.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"OrganizationNumber.js","names":["React","useContext","StringComponent","SharedContext","OrganizationNumber","props","sharedContext","validate","omitMask","stringComponentProps","_objectSpread","className","pattern","undefined","label","translation","Forms","organizationNumberLabel","errorMessages","required","organizationNumberErrorRequired","organizationNumberErrorPattern","mask","width","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const { validate = true, omitMask } = props\n\n  const stringComponentProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.organizationNumberLabel,\n    errorMessages: {\n      required:\n        sharedContext?.translation.Forms.organizationNumberErrorRequired,\n      pattern:\n        sharedContext?.translation.Forms.organizationNumberErrorPattern,\n      ...props.errorMessages,\n    },\n    mask: omitMask\n      ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n      : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n    width: props.width ?? 'medium',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EACxC,MAAMC,aAAa,GAAGL,UAAU,CAACE,aAAa,CAAC;EAC/C,MAAM;IAAEI,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAE3C,MAAMI,oBAA2B,GAAAC,aAAA,CAAAA,aAAA,KAC5BL,KAAK;IACRM,SAAS,EAAE,qCAAqC;IAChDC,OAAO,EAAEP,KAAK,CAACO,OAAO,KAAKL,QAAQ,GAAG,YAAY,GAAGM,SAAS,CAAC;IAC/DC,KAAK,EACHT,KAAK,CAACS,KAAK,KACXR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACC,uBAAuB;IAC1DC,aAAa,EAAAR,aAAA;MACXS,QAAQ,EACNb,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACI,+BAA+B;MAClER,OAAO,EACLN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACK;IAA8B,GAC9DhB,KAAK,CAACa,aAAa,CACvB;IACDI,IAAI,EAAEd,QAAQ,GACV,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;IACpEe,KAAK,EAAElB,KAAK,CAACkB,KAAK,IAAI;EAAQ,EAC/B;EAED,OAAOvB,KAAA,CAAAwB,aAAA,CAACtB,eAAe,EAAKO,oBAAuB,CAAC;AACtD;AAEAL,kBAAkB,CAACqB,qBAAqB,GAAG,IAAI;AAC/C,eAAerB,kBAAkB"}
+{"version":3,"file":"OrganizationNumber.js","names":["React","useContext","StringComponent","SharedContext","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","validate","omitMask","stringComponentProps","_objectSpread","className","pattern","undefined","label","translation","Forms","organizationNumberLabel","errorMessages","required","organizationNumberErrorRequired","organizationNumberErrorPattern","mask","width","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const { validate = true, omitMask } = props\n\n  const stringComponentProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.organizationNumberLabel,\n    errorMessages: {\n      required:\n        sharedContext?.translation.Forms.organizationNumberErrorRequired,\n      pattern:\n        sharedContext?.translation.Forms.organizationNumberErrorPattern,\n      ...props.errorMessages,\n    },\n    mask: omitMask\n      ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n      : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n    width: props.width ?? 'medium',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,aAAa,GAAGR,UAAU,CAACE,aAAa,CAAC;EAC/C,MAAM;IAAEO,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGN,KAAK;EAE3C,MAAMO,oBAA2B,GAAAC,aAAA,CAAAA,aAAA,KAC5BR,KAAK;IACRS,SAAS,EAAE,qCAAqC;IAChDC,OAAO,GAAAT,cAAA,GAAED,KAAK,CAACU,OAAO,cAAAT,cAAA,cAAAA,cAAA,GAAKI,QAAQ,GAAG,YAAY,GAAGM,SAAU;IAC/DC,KAAK,GAAAV,YAAA,GACHF,KAAK,CAACY,KAAK,cAAAV,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACC,uBAAuB;IAC1DC,aAAa,EAAAR,aAAA;MACXS,QAAQ,EACNb,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACI,+BAA+B;MAClER,OAAO,EACLN,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACK;IAA8B,GAC9DnB,KAAK,CAACgB,aAAa,CACvB;IACDI,IAAI,EAAEd,QAAQ,GACV,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;IACpEe,KAAK,GAAAlB,YAAA,GAAEH,KAAK,CAACqB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GAAI;EAAQ,EAC/B;EAED,OAAOR,KAAA,CAAA2B,aAAA,CAACzB,eAAe,EAAKU,oBAAuB,CAAC;AACtD;AAEAR,kBAAkB,CAACwB,qBAAqB,GAAG,IAAI;AAC/C,eAAexB,kBAAkB"}

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

@@ -9,6 +9,11 @@ export type Props = FieldHelpProps & FieldProps<string, undefined> & {
     width?: 'large' | 'stretch';
     onCountryCodeChange?: (value: string | undefined) => void;
     onNumberChange?: (value: string | undefined) => void;
+} & {
+    /**
+     * For internal testing purposes
+     */
+    noAnimation?: boolean;
 };
 declare function PhoneNumber(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PhoneNumber {

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

@@ -1,3 +1,5 @@
+"use client";
+
 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; }
@@ -12,7 +14,6 @@ import FieldBlock from '../../FieldBlock';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 function PhoneNumber(props) {
-  var _sharedContext$locale;
   const sharedContext = useContext(SharedContext);
   const defaultProps = {
     value: '+47',
@@ -46,18 +47,38 @@ function PhoneNumber(props) {
     onNumberChange
   } = useDataValue(preparedProps);
   const [, countryCode, phoneNumber] = value !== undefined ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''];
-  const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
-  const countryCodeData = useMemo(() => countries.map(country => ({
-    selectedKey: `+${country.cdc}`,
-    selected_value: `${country.iso} (+${country.cdc})`,
-    content: `+${country.cdc} ${country.i18n[lang] ?? country.i18n.en}`
-  })), [sharedContext.locale]);
-  const handleCountryCodeChange = useCallback(_ref => {
-    var _data$selectedKey;
+  const getCountryData = function () {
+    var _sharedContext$locale;
+    let {
+      filter = null
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
+    return countries.filter(_ref => {
+      let {
+        cdc
+      } = _ref;
+      return !filter || `+${cdc}` === filter;
+    }).sort((_ref2, _ref3) => {
+      let {
+        i18n: a
+      } = _ref2;
+      let {
+        i18n: b
+      } = _ref3;
+      return a[lang] > b[lang] ? 1 : -1;
+    }).map(country => makeObject(country, lang));
+  };
+  const singleCountryCodeData = useMemo(() => {
+    return getCountryData({
+      filter: countryCode
+    });
+  }, []);
+  const handleCountryCodeChange = useCallback(_ref4 => {
+    var _data$selectedKey$tri, _data$selectedKey;
     let {
       data
-    } = _ref;
-    const countryCode = (data === null || data === void 0 ? void 0 : (_data$selectedKey = data.selectedKey) === null || _data$selectedKey === void 0 ? void 0 : _data$selectedKey.trim()) ?? emptyValue;
+    } = _ref4;
+    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);
@@ -75,6 +96,16 @@ function PhoneNumber(props) {
     handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
     onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(phoneNumber);
   }, [countryCode, emptyValue, handleChange, onNumberChange]);
+  const onFocusHandler = _ref5 => {
+    let {
+      dataList,
+      updateData
+    } = _ref5;
+    if (dataList.length < 10) {
+      updateData(getCountryData());
+    }
+    handleFocus();
+  };
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-phone-number', className),
     width: width !== 'stretch' ? width : undefined,
@@ -83,26 +114,28 @@ function PhoneNumber(props) {
     error: error
   }, pickSpacingProps(props)), React.createElement(Flex.Horizontal, null, React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
-    placeholder: countryCodePlaceholder ?? ' ',
+    placeholder: countryCodePlaceholder !== null && countryCodePlaceholder !== void 0 ? countryCodePlaceholder : ' ',
     label_direction: layout,
-    label: countryCodeLabel ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel),
-    data: countryCodeData,
+    label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
+    mode: "async",
+    data: singleCountryCodeData,
     value: countryCode,
     disabled: disabled,
-    on_focus: handleFocus,
+    on_focus: onFocusHandler,
     on_blur: handleBlur,
     on_change: handleCountryCodeChange,
     independent_width: true,
     search_numbers: true,
+    no_animation: props.noAnimation,
     stretch: width === 'stretch'
   }), React.createElement(StringComponent, {
     className: classnames('dnb-forms-field-phone-number__number', numberFieldClassName),
     type: "tel",
     emptyValue: "",
     layout: "vertical",
-    label: label ?? ' ',
-    placeholder: placeholder ?? '00 00 00 00',
-    mask: numberMask ?? [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/],
+    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/],
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChange: handleNumberChange,
@@ -115,6 +148,14 @@ function PhoneNumber(props) {
     help: help
   })));
 }
+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}`
+  };
+}
 PhoneNumber._supportsSpacingProps = true;
 export default PhoneNumber;
 //# sourceMappingURL=PhoneNumber.js.map

package/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$locale","sharedContext","defaultProps","value","errorMessages","_objectSpread","required","translation","Forms","phoneNumberErrorRequired","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","layout","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","lang","locale","split","countryCodeData","map","country","selectedKey","cdc","selected_value","iso","content","i18n","en","handleCountryCodeChange","_ref","_data$selectedKey","data","trim","filter","Boolean","join","handleNumberChange","createElement","_extends","Horizontal","label_direction","on_focus","on_blur","on_change","independent_width","search_numbers","stretch","type","mask","onFocus","onBlur","onChange","_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\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\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      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    layout = 'vertical',\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    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 lang = sharedContext.locale?.split('-')[0]\n  const countryCodeData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selectedKey: `+${country.cdc}`,\n        selected_value: `${country.iso} (+${country.cdc})`,\n        content: `+${country.cdc} ${\n          country.i18n[lang] ?? country.i18n.en\n        }`,\n      })),\n    [sharedContext.locale]\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  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={layout}\n          label={\n            countryCodeLabel ??\n            sharedContext?.translation.Forms.countryCodeLabel\n          }\n          data={countryCodeData}\n          value={countryCode}\n          disabled={disabled}\n          on_focus={handleFocus}\n          on_blur={handleBlur}\n          on_change={handleCountryCodeChange}\n          independent_width\n          search_numbers\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        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\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","pickSpacingProps","SharedContext","PhoneNumber","props","sharedContext","defaultProps","value","errorMessages","_objectSpread","required","translation","Forms","phoneNumberErrorRequired","preparedProps","className","countryCodeFieldClassName","numberFieldClassName","layout","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","help","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","getCountryData","_sharedContext$locale","filter","arguments","length","lang","locale","split","_ref","cdc","sort","_ref2","_ref3","i18n","a","b","map","country","makeObject","singleCountryCodeData","handleCountryCodeChange","_ref4","_data$selectedKey$tri","_data$selectedKey","data","selectedKey","trim","Boolean","join","handleNumberChange","onFocusHandler","_ref5","dataList","updateData","createElement","_extends","Horizontal","label_direction","mode","on_focus","on_blur","on_change","independent_width","search_numbers","no_animation","noAnimation","stretch","type","mask","onFocus","onBlur","onChange","_country$i18n$lang","selected_value","iso","content","en","_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 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      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    layout = 'vertical',\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    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 getCountryData = ({ filter = null } = {}) => {\n    const lang = sharedContext.locale?.split('-')[0]\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\n  const singleCountryCodeData = useMemo(() => {\n    return getCountryData({ filter: countryCode })\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(getCountryData())\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={layout}\n          label={\n            countryCodeLabel ??\n            sharedContext?.translation.Forms.countryCodeLabel\n          }\n          mode=\"async\"\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          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        />\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\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -10,6 +12,7 @@ import SharedContext from '../../../../shared/Context';
 import FieldBlock from '../../FieldBlock';
 import StringComponent from '../String';
 function PostalCodeAndCity(props) {
+  var _postalCode$pattern, _postalCode$label, _postalCode$placehold, _city$label;
   const sharedContext = useContext(SharedContext);
   const {
       postalCode = {},
@@ -23,19 +26,19 @@ function PostalCodeAndCity(props) {
   }, fieldBlockProps), React.createElement("div", {
     className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== undefined ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
   }, React.createElement(StringComponent, _extends({}, postalCode, {
-    pattern: postalCode.pattern ?? '^[0-9]{4}$',
+    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),
-    label: postalCode.label ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeLabel),
+    label: (_postalCode$label = postalCode.label) !== null && _postalCode$label !== void 0 ? _postalCode$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeLabel,
     errorMessages: _objectSpread({
       required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeErrorRequired,
       pattern: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.postalCodeErrorPattern
     }, postalCode.errorMessages),
-    placeholder: postalCode.placeholder ?? '0000',
+    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"
   })), React.createElement(StringComponent, _extends({}, city, {
     className: classnames('dnb-forms-field-postal-code-and-city__city', city.className),
-    label: city.label ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityLabel),
+    label: (_city$label = city.label) !== null && _city$label !== void 0 ? _city$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityLabel,
     errorMessages: _objectSpread({
       required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.cityErrorRequired
     }, city.errorMessages),

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringComponent","PostalCodeAndCity","props","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;EACvC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJM,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,KAAK,GAAG,OAAO;MACfC;IAEF,CAAC,GAAGL,KAAK;IADJM,eAAe,GAAAC,wBAAA,CAChBP,KAAK,EAAAQ,SAAA;EAET,OACEf,KAAA,CAAAgB,aAAA,CAACZ,UAAU,EAAAa,QAAA;IACTC,SAAS,EAAEhB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACW,SACR;EAAE,GACEL,eAAe,GAEnBb,KAAA,CAAAgB,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CP,KAAK,KAAKQ,SAAS,mDAC8BR,KAAM;EACvD,GAEFX,KAAA,CAAAgB,aAAA,CAACX,eAAe,EAAAY,QAAA,KACVR,UAAU;IACdW,OAAO,EAAEX,UAAU,CAACW,OAAO,IAAI,YAAa;IAC5CF,SAAS,EAAEhB,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACS,SACb,CAAE;IACFG,KAAK,EACHZ,UAAU,CAACY,KAAK,KAChBb,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;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,EAAErB,UAAU,CAACqB,WAAW,IAAI,MAAO;IAC9CnB,KAAK,EAAE,KAAM;IACboB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF/B,KAAA,CAAAgB,aAAA,CAACX,eAAe,EAAAY,QAAA,KACVP,IAAI;IACRQ,SAAS,EAAEhB,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACQ,SACP,CAAE;IACFG,KAAK,EAAEX,IAAI,CAACW,KAAK,KAAIb,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;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;AAEAN,iBAAiB,CAAC4B,qBAAqB,GAAG,IAAI;AAC9C,eAAe5B,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","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"}

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

@@ -1,3 +1,5 @@
+"use client";
+
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -7,21 +9,24 @@ import Option from '../Option';
 import countries from '../../constants/countries';
 import SharedContext from '../../../../shared/Context';
 function SelectCountry(props) {
-  var _sharedContext$locale;
+  var _props$placeholder, _props$label, _sharedContext$locale;
   const sharedContext = useContext(SharedContext);
   const selectComponentProps = _objectSpread(_objectSpread({}, props), {}, {
-    placeholder: props.placeholder ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryPlaceholder),
-    label: props.label ?? (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryLabel),
+    placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryPlaceholder,
+    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryLabel,
     errorMessages: _objectSpread({
       required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectCountryErrorRequired
     }, props.errorMessages)
   });
   const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
-  const countryOptions = useMemo(() => countries.map(country => React.createElement(Option, {
-    key: country.iso,
-    value: country.iso,
-    title: country.i18n[lang] ?? country.i18n.en
-  })), [sharedContext.locale]);
+  const countryOptions = useMemo(() => countries.map(country => {
+    var _country$i18n$lang;
+    return React.createElement(Option, {
+      key: country.iso,
+      value: country.iso,
+      title: (_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en
+    });
+  }), [sharedContext.locale]);
   return React.createElement(Selection, selectComponentProps, countryOptions);
 }
 SelectCountry._supportsSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectCountry.js","names":["React","useContext","useMemo","Selection","Option","countries","SharedContext","SelectCountry","props","_sharedContext$locale","sharedContext","selectComponentProps","_objectSpread","placeholder","translation","Forms","selectCountryPlaceholder","label","selectCountryLabel","errorMessages","required","selectCountryErrorRequired","lang","locale","split","countryOptions","map","country","createElement","key","iso","value","title","i18n","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport Selection, { Props as SelectionProps } from '../Selection'\nimport Option from '../Option'\nimport countries from '../../constants/countries'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const selectComponentProps: Props = {\n    ...props,\n    placeholder:\n      props.placeholder ??\n      sharedContext?.translation.Forms.selectCountryPlaceholder,\n    label:\n      props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n    errorMessages: {\n      required:\n        sharedContext?.translation.Forms.selectCountryErrorRequired,\n      ...props.errorMessages,\n    },\n  }\n\n  const lang = sharedContext.locale?.split('-')[0]\n  const countryOptions = useMemo(\n    () =>\n      countries.map((country) => (\n        <Option\n          key={country.iso}\n          value={country.iso}\n          title={country.i18n[lang] ?? country.i18n.en}\n        />\n      )),\n    [sharedContext.locale]\n  )\n\n  return <Selection {...selectComponentProps}>{countryOptions}</Selection>\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAmC,cAAc;AACjE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA;EACnC,MAAMC,aAAa,GAAGT,UAAU,CAACK,aAAa,CAAC;EAE/C,MAAMK,oBAA2B,GAAAC,aAAA,CAAAA,aAAA,KAC5BJ,KAAK;IACRK,WAAW,EACTL,KAAK,CAACK,WAAW,KACjBH,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC,wBAAwB;IAC3DC,KAAK,EACHT,KAAK,CAACS,KAAK,KAAIP,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACG,kBAAkB;IACpEC,aAAa,EAAAP,aAAA;MACXQ,QAAQ,EACNV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACM;IAA0B,GAC1Db,KAAK,CAACW,aAAa;EACvB,EACF;EAED,MAAMG,IAAI,IAAAb,qBAAA,GAAGC,aAAa,CAACa,MAAM,cAAAd,qBAAA,uBAApBA,qBAAA,CAAsBe,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAChD,MAAMC,cAAc,GAAGvB,OAAO,CAC5B,MACEG,SAAS,CAACqB,GAAG,CAAEC,OAAO,IACpB3B,KAAA,CAAA4B,aAAA,CAACxB,MAAM;IACLyB,GAAG,EAAEF,OAAO,CAACG,GAAI;IACjBC,KAAK,EAAEJ,OAAO,CAACG,GAAI;IACnBE,KAAK,EAAEL,OAAO,CAACM,IAAI,CAACX,IAAI,CAAC,IAAIK,OAAO,CAACM,IAAI,CAACC;EAAG,CAC9C,CACF,CAAC,EACJ,CAACxB,aAAa,CAACa,MAAM,CACvB,CAAC;EAED,OAAOvB,KAAA,CAAA4B,aAAA,CAACzB,SAAS,EAAKQ,oBAAoB,EAAGc,cAA0B,CAAC;AAC1E;AAEAlB,aAAa,CAAC4B,qBAAqB,GAAG,IAAI;AAC1C,eAAe5B,aAAa"}
+{"version":3,"file":"SelectCountry.js","names":["React","useContext","useMemo","Selection","Option","countries","SharedContext","SelectCountry","props","_props$placeholder","_props$label","_sharedContext$locale","sharedContext","selectComponentProps","_objectSpread","placeholder","translation","Forms","selectCountryPlaceholder","label","selectCountryLabel","errorMessages","required","selectCountryErrorRequired","lang","locale","split","countryOptions","map","country","_country$i18n$lang","createElement","key","iso","value","title","i18n","en","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport Selection, { Props as SelectionProps } from '../Selection'\nimport Option from '../Option'\nimport countries from '../../constants/countries'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = SelectionProps\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const selectComponentProps: Props = {\n    ...props,\n    placeholder:\n      props.placeholder ??\n      sharedContext?.translation.Forms.selectCountryPlaceholder,\n    label:\n      props.label ?? sharedContext?.translation.Forms.selectCountryLabel,\n    errorMessages: {\n      required:\n        sharedContext?.translation.Forms.selectCountryErrorRequired,\n      ...props.errorMessages,\n    },\n  }\n\n  const lang = sharedContext.locale?.split('-')[0]\n  const countryOptions = useMemo(\n    () =>\n      countries.map((country) => (\n        <Option\n          key={country.iso}\n          value={country.iso}\n          title={country.i18n[lang] ?? country.i18n.en}\n        />\n      )),\n    [sharedContext.locale]\n  )\n\n  return <Selection {...selectComponentProps}>{countryOptions}</Selection>\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAmC,cAAc;AACjE,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,kBAAA,EAAAC,YAAA,EAAAC,qBAAA;EACnC,MAAMC,aAAa,GAAGX,UAAU,CAACK,aAAa,CAAC;EAE/C,MAAMO,oBAA2B,GAAAC,aAAA,CAAAA,aAAA,KAC5BN,KAAK;IACRO,WAAW,GAAAN,kBAAA,GACTD,KAAK,CAACO,WAAW,cAAAN,kBAAA,cAAAA,kBAAA,GACjBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC,wBAAwB;IAC3DC,KAAK,GAAAT,YAAA,GACHF,KAAK,CAACW,KAAK,cAAAT,YAAA,cAAAA,YAAA,GAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACG,kBAAkB;IACpEC,aAAa,EAAAP,aAAA;MACXQ,QAAQ,EACNV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACM;IAA0B,GAC1Df,KAAK,CAACa,aAAa;EACvB,EACF;EAED,MAAMG,IAAI,IAAAb,qBAAA,GAAGC,aAAa,CAACa,MAAM,cAAAd,qBAAA,uBAApBA,qBAAA,CAAsBe,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAChD,MAAMC,cAAc,GAAGzB,OAAO,CAC5B,MACEG,SAAS,CAACuB,GAAG,CAAEC,OAAO;IAAA,IAAAC,kBAAA;IAAA,OACpB9B,KAAA,CAAA+B,aAAA,CAAC3B,MAAM;MACL4B,GAAG,EAAEH,OAAO,CAACI,GAAI;MACjBC,KAAK,EAAEL,OAAO,CAACI,GAAI;MACnBE,KAAK,GAAAL,kBAAA,GAAED,OAAO,CAACO,IAAI,CAACZ,IAAI,CAAC,cAAAM,kBAAA,cAAAA,kBAAA,GAAID,OAAO,CAACO,IAAI,CAACC;IAAG,CAC9C,CAAC;EAAA,CACH,CAAC,EACJ,CAACzB,aAAa,CAACa,MAAM,CACvB,CAAC;EAED,OAAOzB,KAAA,CAAA+B,aAAA,CAAC5B,SAAS,EAAKU,oBAAoB,EAAGc,cAA0B,CAAC;AAC1E;AAEApB,aAAa,CAAC+B,qBAAqB,GAAG,IAAI;AAC1C,eAAe/B,aAAa"}

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

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _em;
@@ -80,14 +82,17 @@ function Selection(props) {
     labelDescription,
     labelSecondary
   });
-  const options = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map(option => ({
-    title: 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 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]);
   switch (variant) {
     case 'radio':
       return React.createElement(Radio.Group, _extends({
@@ -96,12 +101,15 @@ function Selection(props) {
         layout_direction: optionsLayout === 'horizontal' ? 'row' : 'column',
         vertical: layout === 'vertical',
         on_change: handleRadioChange,
-        value: String(value ?? '')
-      }, pickSpacingProps(props)), options.map((option, i) => React.createElement(Radio, {
-        key: `option-${i}-${option.value}`,
-        label: option.title,
-        value: String(option.value ?? '')
-      })));
+        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: {
@@ -116,14 +124,16 @@ function Selection(props) {
       })))));
     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;
             return child.props.text ? {
-              selectedKey: String(child.props.value ?? ''),
-              content: [child.props.children ?? child.props.title ?? (_em || (_em = React.createElement("em", null, "Untitled"))), child.props.text]
+              selectedKey: String((_child$props$value = child.props.value) !== null && _child$props$value !== void 0 ? _child$props$value : ''),
+              content: [(_ref5 = (_child$props$children = child.props.children) !== null && _child$props$children !== void 0 ? _child$props$children : child.props.title) !== null && _ref5 !== void 0 ? _ref5 : _em || (_em = React.createElement("em", null, "Untitled")), child.props.text]
             } : {
               selectedKey: child.props.value,
-              content: child.props.children ?? child.props.title
+              content: (_child$props$children2 = child.props.children) !== null && _child$props$children2 !== void 0 ? _child$props$children2 : child.props.title
             };
           }
           return {
@@ -133,16 +143,16 @@ function Selection(props) {
         const data = [clear ? {
           selectedKey: clearValue,
           content: React.createElement("em", null, sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectionClearSelected)
-        } : undefined, ...(optionsData ?? [])].filter(Boolean);
+        } : 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}`),
           list_class: "dnb-forms-field-selection__list",
           portal_class: "dnb-forms-field-selection__portal",
           title: placeholder,
-          value: String(value ?? ''),
+          value: String(value !== null && value !== void 0 ? value : ''),
           label: label,
           label_direction: layout,
-          status: (error === null || error === void 0 ? 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: (_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()),
           disabled: disabled,
           data: data,
           suffix: help ? React.createElement(HelpButton, {

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","ButtonRow","FieldBlock","classnames","makeUniqueId","SharedContext","Option","useDataValue","FormError","pickSpacingProps","ToggleButtonGroupContext","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","labelSecondary","layout","optionsLayout","placeholder","value","info","warning","error","disabled","help","emptyValue","width","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","handleRadioChange","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","options","Children","toArray","filter","child","isValidElement","type","map","option","title","handleSelect","selected","createElement","Group","_extends","layout_direction","vertical","on_change","String","i","key","Provider","status","text","checked","optionsData","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","label_direction","message","Error","toString","suffix","contents","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport Option from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames('dnb-forms-field-selection', className)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            handleChange?.(selected === value ? emptyValue : selected)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'radio':\n      return (\n        <Radio.Group\n          className={cn}\n          label={label}\n          layout_direction={\n            optionsLayout === 'horizontal' ? 'row' : 'column'\n          }\n          vertical={layout === 'vertical'}\n          on_change={handleRadioChange}\n          value={String(value ?? '')}\n          {...pickSpacingProps(props)}\n        >\n          {options.map((option, i) => (\n            <Radio\n              key={`option-${i}-${option.value}`}\n              label={option.title}\n              value={String(option.value ?? '')}\n            />\n          ))}\n        </Radio.Group>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            <ToggleButtonGroupContext.Provider\n              value={{\n                status: error ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              {options.map((option, i) => (\n                <ToggleButton\n                  key={`option-${i}-${option.value}`}\n                  text={option.title}\n                  on_change={option.handleSelect}\n                  checked={option.value === value}\n                />\n              ))}\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={\n            error?.message ??\n            ((warning instanceof Error && warning.message) ||\n              (warning instanceof FormError && warning.message) ||\n              warning?.toString() ||\n              (info instanceof Error && info.message) ||\n              (info instanceof FormError && info.message) ||\n              info?.toString())\n          }\n          disabled={disabled}\n          data={data}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_change={handleDropdownChange}\n          on_show={handleShow}\n          on_hide={handleHide}\n          {...pickSpacingProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","ButtonRow","FieldBlock","classnames","makeUniqueId","SharedContext","Option","useDataValue","FormError","pickSpacingProps","ToggleButtonGroupContext","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","labelSecondary","layout","optionsLayout","placeholder","value","info","warning","error","disabled","help","emptyValue","width","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","handleRadioChange","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props$title","title","handleSelect","selected","createElement","Group","_extends","layout_direction","vertical","on_change","String","i","_option$value","key","Provider","status","text","checked","_error$message","optionsData","_child$props$value","_ref5","_child$props$children","_child$props$children2","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","label_direction","message","Error","toString","suffix","contents","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport Option from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    labelSecondary,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames('dnb-forms-field-selection', className)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n  }\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) => React.isValidElement(child) && child.type === Option\n        )\n        .map((option: React.ReactElement) => ({\n          title: option.props.title ?? option.props.children,\n          value: option.props.value,\n          handleSelect: () => {\n            const selected = option.props.value\n\n            handleChange?.(selected === value ? emptyValue : selected)\n          },\n        })),\n    [children, value, emptyValue, handleChange]\n  )\n\n  switch (variant) {\n    case 'radio':\n      return (\n        <Radio.Group\n          className={cn}\n          label={label}\n          layout_direction={\n            optionsLayout === 'horizontal' ? 'row' : 'column'\n          }\n          vertical={layout === 'vertical'}\n          on_change={handleRadioChange}\n          value={String(value ?? '')}\n          {...pickSpacingProps(props)}\n        >\n          {options.map((option, i) => (\n            <Radio\n              key={`option-${i}-${option.value}`}\n              label={option.title}\n              value={String(option.value ?? '')}\n            />\n          ))}\n        </Radio.Group>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ButtonRow>\n            <ToggleButtonGroupContext.Provider\n              value={{\n                status: error ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              {options.map((option, i) => (\n                <ToggleButton\n                  key={`option-${i}-${option.value}`}\n                  text={option.title}\n                  on_change={option.handleSelect}\n                  checked={option.value === value}\n                />\n              ))}\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <Dropdown\n          className={classnames(\n            'dnb-forms-field-selection',\n            width !== 'stretch' &&\n              `dnb-forms-field-selection--width-${width}`,\n            className\n          )}\n          list_class=\"dnb-forms-field-selection__list\"\n          portal_class=\"dnb-forms-field-selection__portal\"\n          title={placeholder}\n          value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={\n            error?.message ??\n            ((warning instanceof Error && warning.message) ||\n              (warning instanceof FormError && warning.message) ||\n              warning?.toString() ||\n              (info instanceof Error && info.message) ||\n              (info instanceof FormError && info.message) ||\n              info?.toString())\n          }\n          disabled={disabled}\n          data={data}\n          suffix={\n            help ? (\n              <HelpButton title={help.title}>{help.contents}</HelpButton>\n            ) : undefined\n          }\n          on_change={handleDropdownChange}\n          on_show={handleShow}\n          on_hide={handleHide}\n          {...pickSpacingProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}