@dnb/eufemia 10.7.0 → 10.8.0

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

@@ -1,9 +1,14 @@
+import { InputMaskedProps } from '../../../components/InputMasked';
 import type { ComponentProps } from '../component-types';
 import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<string> & {
+export type Props = ComponentProps & FieldProps<string, undefined> & {
     countryCodeFieldClassName?: string;
     numberFieldClassName?: string;
-    width?: 'medium' | 'large';
+    countryCodeLabel?: string;
+    numberMask?: InputMaskedProps['mask'];
+    width?: 'large' | 'stretch';
+    onCountryCodeChange?: (value: string | undefined) => void;
+    onNumberChange?: (value: string | undefined) => void;
 };
 declare function PhoneNumber(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PhoneNumber {

package/extensions/forms/Field/PhoneNumber.js

@@ -2,18 +2,18 @@ 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, { useContext, useCallback, useMemo } from 'react';
+import React, { useContext, useCallback } from 'react';
 import { Div } from '../../../elements';
-import { Autocomplete, Input } from '../../../components';
 import classnames from 'classnames';
-import countries from '../constants/countries';
+import CountryCode from './CountryCode';
+import StringComponent from './String';
 import { forwardSpaceProps } from '../utils';
 import { useField } from './hooks';
 import SharedContext from '../../../shared/Context';
 function PhoneNumber(props) {
-  var _ref;
   const sharedContext = useContext(SharedContext);
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    value: '+47',
     errorMessages: _objectSpread({
       required: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberErrorRequired
     }, props === null || props === void 0 ? void 0 : props.errorMessages)
@@ -23,65 +23,66 @@ function PhoneNumber(props) {
     countryCodeFieldClassName,
     numberFieldClassName,
     placeholder,
+    countryCodeLabel,
     label = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberLabel,
     value,
+    numberMask,
     emptyValue,
+    info,
+    warning,
     error,
     disabled,
     width = 'large',
-    onFocus,
-    onBlur,
-    onChange
+    handleFocus,
+    handleBlur,
+    handleChange,
+    onCountryCodeChange,
+    onNumberChange
   } = useField(preparedProps);
-  const [, countryCode = '+47', phoneNumber = ''] = ((_ref = value ?? '') === null || _ref === void 0 ? void 0 : _ref.match(/^(\+[^ ]+)? ?(.*)$/)) ?? [];
-  const countriesDropdownData = useMemo(() => countries.map(country => ({
-    selected_key: `+${country.code}`,
-    selected_value: `${country.iso} (+${country.code})`,
-    content: `+${country.code} ${country.name}`
-  })), []);
-  const handleCountryCodeChange = useCallback(_ref2 => {
-    let {
-      data: changedData
-    } = _ref2;
-    if ((!changedData || !changedData.selected_key.trim()) && !phoneNumber.trim()) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
+  const [, countryCode, phoneNumber] = value !== undefined ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''];
+  const handleCountryCodeChange = useCallback(countryCode => {
+    if (!countryCode && !phoneNumber) {
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
+      onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(emptyValue);
       return;
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange(`${(changedData === null || changedData === void 0 ? void 0 : changedData.selected_key) || ''} ${phoneNumber}`);
-  }, [phoneNumber, emptyValue, onChange]);
-  const handleNumberChange = useCallback(_ref3 => {
-    let {
-      value
-    } = _ref3;
-    if (!value.trim() && !countryCode.trim()) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange([countryCode, phoneNumber].filter(Boolean).join(' '));
+    onCountryCodeChange === null || onCountryCodeChange === void 0 ? void 0 : onCountryCodeChange(countryCode);
+  }, [phoneNumber, emptyValue, handleChange, onCountryCodeChange]);
+  const handleNumberChange = useCallback(phoneNumber => {
+    if (!countryCode && !phoneNumber) {
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(emptyValue);
+      onNumberChange === null || onNumberChange === void 0 ? void 0 : onNumberChange(emptyValue);
       return;
     }
-    onChange === null || onChange === void 0 ? void 0 : onChange([countryCode, value].filter(Boolean).join(' '));
-  }, [countryCode, emptyValue, onChange]);
+    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]);
   return React.createElement(Div, _extends({
     className: classnames('dnb-forms-field-phone-number', className, width !== undefined && `dnb-forms-field-phone-number--width-${width}`)
-  }, forwardSpaceProps(preparedProps)), React.createElement(Autocomplete, {
+  }, forwardSpaceProps(preparedProps)), React.createElement(CountryCode, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
-    label_direction: "vertical",
-    label: sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
-    data: countriesDropdownData,
+    label: countryCodeLabel,
     value: countryCode ?? '+47',
     disabled: disabled,
-    on_change: handleCountryCodeChange,
-    independent_width: true
-  }), React.createElement(Input, {
+    onChange: handleCountryCodeChange
+  }), React.createElement(StringComponent, {
     className: classnames('dnb-forms-field-phone-number__number', numberFieldClassName),
-    label_direction: "vertical",
+    type: "tel",
+    emptyValue: "",
+    layout: "vertical",
     label: label ?? ' ',
     placeholder: placeholder ?? '00 00 00 00',
-    on_change: handleNumberChange,
-    on_focus: onFocus,
-    on_blur: onBlur,
+    mask: numberMask ?? [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/],
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleNumberChange,
     value: phoneNumber,
-    status: error === null || error === void 0 ? void 0 : error.message,
+    info: info,
+    warning: warning,
+    error: error,
     disabled: disabled,
-    type: "tel"
+    width: "stretch"
   }));
 }
 PhoneNumber._supportsEufemiaSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","useMemo","Div","Autocomplete","Input","classnames","countries","forwardSpaceProps","useField","SharedContext","PhoneNumber","props","_ref","sharedContext","preparedProps","_objectSpread","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","label","phoneNumberLabel","value","emptyValue","error","disabled","width","onFocus","onBlur","onChange","countryCode","phoneNumber","match","countriesDropdownData","map","country","selected_key","code","selected_value","iso","content","name","handleCountryCodeChange","_ref2","data","changedData","trim","handleNumberChange","_ref3","filter","Boolean","join","createElement","_extends","undefined","label_direction","countryCodeLabel","on_change","independent_width","on_focus","on_blur","status","message","type","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback, useMemo } from 'react'\nimport { Div } from '../../../elements'\nimport { Autocomplete, Input } from '../../../components'\nimport classnames from 'classnames'\nimport countries from '../constants/countries'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldProps<string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    // Styling\n    width?: 'medium' | 'large'\n  }\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: {\n      required: sharedContext?.translation.Forms.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    },\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    placeholder,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    value,\n    emptyValue,\n    error,\n    disabled,\n    width = 'large',\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  // Split the value into country code and phone number correctly, even if one of them is not\n  // filled in (avoiding number ending up in country code etc)\n  const [, countryCode = '+47', phoneNumber = ''] =\n    (value ?? '')?.match(/^(\\+[^ ]+)? ?(.*)$/) ?? []\n\n  const countriesDropdownData = useMemo(\n    () =>\n      countries.map((country) => ({\n        selected_key: `+${country.code}`,\n        selected_value: `${country.iso} (+${country.code})`,\n        content: `+${country.code} ${country.name}`,\n      })),\n    []\n  )\n\n  const handleCountryCodeChange = useCallback(\n    ({ data: changedData }: { data: { selected_key: string } }) => {\n      if (\n        (!changedData || !changedData.selected_key.trim()) &&\n        !phoneNumber.trim()\n      ) {\n        onChange?.(emptyValue)\n        return\n      }\n\n      onChange?.(`${changedData?.selected_key || ''} ${phoneNumber}`)\n    },\n    [phoneNumber, emptyValue, onChange]\n  )\n\n  const handleNumberChange = useCallback(\n    ({ value }: { value: string }) => {\n      if (!value.trim() && !countryCode.trim()) {\n        onChange?.(emptyValue)\n        return\n      }\n\n      onChange?.([countryCode, value].filter(Boolean).join(' '))\n    },\n    [countryCode, emptyValue, onChange]\n  )\n\n  return (\n    <Div\n      className={classnames(\n        'dnb-forms-field-phone-number',\n        width !== undefined &&\n          `dnb-forms-field-phone-number--width-${width}`,\n        className\n      )}\n      {...forwardSpaceProps(preparedProps)}\n    >\n      <Autocomplete\n        className={classnames(\n          'dnb-forms-field-phone-number__country-code',\n          countryCodeFieldClassName\n        )}\n        label_direction=\"vertical\"\n        label={sharedContext?.translation.Forms.countryCodeLabel}\n        data={countriesDropdownData}\n        value={countryCode ?? '+47'}\n        disabled={disabled}\n        on_change={handleCountryCodeChange}\n        independent_width\n      />\n      <Input\n        className={classnames(\n          'dnb-forms-field-phone-number__number',\n          numberFieldClassName\n        )}\n        label_direction=\"vertical\"\n        label={label ?? ' '}\n        placeholder={placeholder ?? '00 00 00 00'}\n        on_change={handleNumberChange}\n        on_focus={onFocus}\n        on_blur={onBlur}\n        value={phoneNumber}\n        status={error?.message}\n        disabled={disabled}\n        type=\"tel\"\n      />\n    </Div>\n  )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useContext","useCallback","Div","classnames","CountryCode","StringComponent","forwardSpaceProps","useField","SharedContext","PhoneNumber","props","sharedContext","preparedProps","_objectSpread","value","errorMessages","required","translation","Forms","phoneNumberErrorRequired","className","countryCodeFieldClassName","numberFieldClassName","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","emptyValue","info","warning","error","disabled","width","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","countryCode","phoneNumber","undefined","match","handleCountryCodeChange","filter","Boolean","join","handleNumberChange","createElement","_extends","onChange","type","layout","mask","onFocus","onBlur","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { InputMaskedProps } from '../../../components/InputMasked'\nimport classnames from 'classnames'\nimport CountryCode from './CountryCode'\nimport StringComponent from './String'\nimport { forwardSpaceProps } from '../utils'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\nimport SharedContext from '../../../shared/Context'\n\nexport type Props = ComponentProps &\n  FieldProps<string, undefined> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: 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 preparedProps: Props = {\n    ...props,\n    // Important for the default value to be defined here, and not after the useField 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\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\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    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n  } = useField(preparedProps)\n\n  const [, countryCode, phoneNumber] =\n    value !== undefined\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n\n  const handleCountryCodeChange = useCallback(\n    (countryCode: string) => {\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    <Div\n      className={classnames(\n        'dnb-forms-field-phone-number',\n        width !== undefined &&\n          `dnb-forms-field-phone-number--width-${width}`,\n        className\n      )}\n      {...forwardSpaceProps(preparedProps)}\n    >\n      <CountryCode\n        className={classnames(\n          'dnb-forms-field-phone-number__country-code',\n          countryCodeFieldClassName\n        )}\n        label={countryCodeLabel}\n        value={countryCode ?? '+47'}\n        disabled={disabled}\n        onChange={handleCountryCodeChange}\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      />\n    </Div>\n  )\n}\n\nPhoneNumber._supportsEufemiaSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { Props as FieldGroupProps } from '../FieldGroup';
 import { Props as StringComponentProps } from './String';
 export type Props = Omit<FieldGroupProps, 'children'> & Record<'postalCode' | 'city', StringComponentProps> & {
-    width?: 'medium' | 'large';
+    width?: 'small' | 'medium' | 'large';
 };
 declare function PostalCodeAndCity(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PostalCodeAndCity {

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","undefined","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps> & {\n    width?: 'medium' | 'large'\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    width = 'large',\n    ...fieldGroupProps\n  } = props\n\n  return (\n    <FieldGroup\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldGroupProps}\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        />\n      </div>\n    </FieldGroup>\n  )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,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;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,KAAKO,SAAS,mDAC8BP,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;IACdU,OAAO,EAAEV,UAAU,CAACU,OAAO,IAAI,YAAa;IAC5CF,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;IACFG,KAAK,EACHX,UAAU,CAACW,KAAK,KAChBZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;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,EAAEpB,UAAU,CAACoB,WAAW,IAAI,MAAO;IAC9ClB,KAAK,EAAE,KAAM;IACbmB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF9B,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;IACFG,KAAK,EAAEV,IAAI,CAACU,KAAK,KAAIZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAElB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDtB,IAAI,CAACc,aAAa,CACrB;IACFb,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,CAAC2B,4BAA4B,GAAG,IAAI;AACrD,eAAe3B,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","undefined","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, '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    ...fieldGroupProps\n  } = props\n\n  return (\n    <FieldGroup\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldGroupProps}\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        />\n      </div>\n    </FieldGroup>\n  )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,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;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,KAAKO,SAAS,mDAC8BP,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;IACdU,OAAO,EAAEV,UAAU,CAACU,OAAO,IAAI,YAAa;IAC5CF,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;IACFG,KAAK,EACHX,UAAU,CAACW,KAAK,KAChBZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;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,EAAEpB,UAAU,CAACoB,WAAW,IAAI,MAAO;IAC9ClB,KAAK,EAAE,KAAM;IACbmB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF9B,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;IACFG,KAAK,EAAEV,IAAI,CAACU,KAAK,KAAIZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAElB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDtB,IAAI,CAACc,aAAa,CACrB;IACFb,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,CAAC2B,4BAA4B,GAAG,IAAI;AACrD,eAAe3B,iBAAiB"}

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & FieldProps<string | number> & {
+import type { FieldProps, FieldHelpProps } from '../field-types';
+export type Props = ComponentProps & FieldHelpProps & FieldProps<string | number> & {
     children?: React.ReactNode;
-    variant?: 'dropdown' | 'radio' | 'checkbox';
-    width?: 'medium' | 'large' | 'stretch';
+    variant?: 'dropdown' | 'radio' | 'button';
+    clear?: boolean;
+    optionsLayout?: 'horizontal' | 'vertical';
+    width?: 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function Selection(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Selection {

package/extensions/forms/Field/Selection.js

@@ -1,27 +1,43 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _em;
-import React, { useCallback } from 'react';
-import { Div } from '../../../elements';
-import { Dropdown, Radio, Checkbox } from '../../../components';
+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 { Button, Dropdown, Radio, HelpButton } from '../../../components';
+import ButtonRow from '../Layout/ButtonRow';
+import FieldBlock from '../FieldBlock';
 import classnames from 'classnames';
 import { forwardSpaceProps } from '../utils';
+import { makeUniqueId } from '../../../shared/component-helper';
+import SharedContext from '../../../shared/Context';
 import Option from './Option';
 import { useField } from './hooks';
+import { FormError } from '../types';
 function Selection(props) {
+  const sharedContext = useContext(SharedContext);
+  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, []);
   const {
+    id,
     className,
-    variant,
+    variant = 'dropdown',
+    clear,
     label,
+    labelDescription,
+    labelSecondary,
     layout = 'vertical',
+    optionsLayout = 'vertical',
     placeholder,
     value,
+    info,
+    warning,
     error,
     disabled,
+    help,
     emptyValue,
     width = 'large',
-    onBlur,
-    onFocus,
-    onChange,
+    setHasFocus,
+    handleChange,
     children
   } = useField(props);
   const handleDropdownChange = useCallback(_ref => {
@@ -30,48 +46,74 @@ function Selection(props) {
         selected_key
       }
     } = _ref;
-    onChange === null || onChange === void 0 ? void 0 : onChange(!selected_key ? emptyValue : selected_key);
-  }, [onChange, emptyValue]);
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(!selected_key || selected_key === clearValue ? emptyValue : selected_key);
+  }, [handleChange, emptyValue, clearValue]);
   const handleRadioChange = useCallback(_ref2 => {
     let {
       value
     } = _ref2;
-    onChange === null || onChange === void 0 ? void 0 : onChange(value === undefined ? emptyValue : value);
-  }, [onChange, emptyValue]);
-  const handleHide = useCallback(_ref3 => {
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(value === undefined ? emptyValue : value);
+  }, [handleChange, emptyValue]);
+  const handleShow = useCallback(_ref3 => {
     let {
       data
     } = _ref3;
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-      onBlurValue: data === null || data === void 0 ? void 0 : data.selected_key
-    });
-  }, [onBlur]);
+    setHasFocus(true, data === null || data === void 0 ? void 0 : data.selected_key);
+  }, [setHasFocus]);
+  const handleHide = useCallback(_ref4 => {
+    let {
+      data
+    } = _ref4;
+    setHasFocus(false, data === null || data === void 0 ? void 0 : data.selected_key);
+  }, [setHasFocus]);
+  const cn = classnames('dnb-forms-field-selection', className);
+  const fieldBlockProps = _objectSpread(_objectSpread({
+    forId: id,
+    className: cn
+  }, forwardSpaceProps(props)), {}, {
+    info,
+    warning,
+    error,
+    layout,
+    label,
+    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]);
   switch (variant) {
-    case 'checkbox':
-      return React.createElement(Div, _extends({
-        className: classnames('dnb-forms-field-selection', className)
-      }, forwardSpaceProps(props)), React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map((child, i) => React.createElement(Checkbox, {
-        key: child.props.value ?? `option-${i}`,
-        label: child.props.title ?? child.props.children,
-        value: String(child.props.value ?? '')
-      })));
     case 'radio':
       return React.createElement(Radio.Group, _extends({
-        className: classnames('dnb-forms-field-selection', className),
+        className: cn,
         label: label,
-        layout_direction: "column",
-        on_change: handleRadioChange
-      }, forwardSpaceProps(props), {
-        vertical: true
-      }), React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Option).map((child, i) => React.createElement(Radio, {
-        key: child.props.value ?? `option-${i}`,
-        label: child.props.title ?? child.props.children,
-        value: String(child.props.value ?? '')
+        layout_direction: optionsLayout === 'horizontal' ? 'row' : 'column',
+        vertical: layout === 'vertical',
+        on_change: handleRadioChange,
+        value: String(value ?? '')
+      }, forwardSpaceProps(props)), options.map((option, i) => React.createElement(Radio, {
+        key: `option-${i}-${option.value}`,
+        label: option.title,
+        value: String(option.value ?? '')
       })));
-    default:
+    case 'button':
+      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ButtonRow, null, options.map((option, i) => React.createElement(Button, {
+        key: `option-${i}-${option.value}`,
+        id: id,
+        text: option.title,
+        on_click: option.handleSelect,
+        variant: option.value === value ? undefined : 'secondary',
+        status: error ? 'error' : undefined,
+        disabled: disabled
+      }))));
     case 'dropdown':
       {
-        const data = React.Children.map(children, child => {
+        const optionsData = React.Children.map(children, child => {
           if (React.isValidElement(child) && child.type === Option) {
             return child.props.text ? {
               selected_key: String(child.props.value ?? ''),
@@ -85,19 +127,26 @@ function Selection(props) {
             content: child
           };
         });
+        const data = [clear ? {
+          selected_key: clearValue,
+          content: React.createElement("em", null, sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectionClearSelected)
+        } : undefined, ...(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,
-          default_value: String(value ?? ''),
+          value: String(value ?? ''),
           label: label,
           label_direction: layout,
-          status: error === null || error === void 0 ? void 0 : error.message,
+          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())),
           disabled: disabled,
           data: data,
+          suffix: help ? React.createElement(HelpButton, {
+            title: help.title
+          }, help.contents) : undefined,
           on_change: handleDropdownChange,
-          on_show: onFocus,
+          on_show: handleShow,
           on_hide: handleHide
         }, forwardSpaceProps(props), {
           stretch: width === 'stretch'

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useCallback","Div","Dropdown","Radio","Checkbox","classnames","forwardSpaceProps","Option","useField","Selection","props","className","variant","label","layout","placeholder","value","error","disabled","emptyValue","width","onBlur","onFocus","onChange","children","handleDropdownChange","_ref","data","selected_key","handleRadioChange","_ref2","undefined","handleHide","_ref3","onBlurValue","createElement","_extends","Children","toArray","filter","child","isValidElement","type","map","i","key","title","String","Group","layout_direction","on_change","vertical","text","content","_em","list_class","portal_class","default_value","label_direction","status","message","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { Div } from '../../../elements'\nimport { Dropdown, Radio, Checkbox } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  FieldProps<string | number> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'checkbox'\n    // Styling\n    width?: 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const {\n    className,\n    variant,\n    label,\n    layout = 'vertical',\n    placeholder,\n    value,\n    error,\n    disabled,\n    emptyValue,\n    width = 'large',\n    onBlur,\n    onFocus,\n    onChange,\n    children,\n  } = useField(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selected_key } }) => {\n      onChange?.(!selected_key ? emptyValue : selected_key)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleRadioChange = useCallback(\n    ({ value }) => {\n      onChange?.(value === undefined ? emptyValue : value)\n    },\n    [onChange, emptyValue]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      // Provide a value because selecting an option will lead to onChange and onBlur called in parallel, so onBlur might receive the old value\n      onBlur?.({ onBlurValue: data?.selected_key })\n    },\n    [onBlur]\n  )\n\n  switch (variant) {\n    case 'checkbox':\n      return (\n        <Div\n          className={classnames('dnb-forms-field-selection', className)}\n          {...forwardSpaceProps(props)}\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Checkbox\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Div>\n      )\n    case 'radio':\n      return (\n        <Radio.Group\n          className={classnames('dnb-forms-field-selection', className)}\n          label={label}\n          layout_direction=\"column\"\n          on_change={handleRadioChange}\n          {...forwardSpaceProps(props)}\n          vertical\n        >\n          {React.Children.toArray(children)\n            .filter(\n              (child) =>\n                React.isValidElement(child) && child.type === Option\n            )\n            .map((child: React.ReactElement, i) => (\n              <Radio\n                key={child.props.value ?? `option-${i}`}\n                label={child.props.title ?? child.props.children}\n                value={String(child.props.value ?? '')}\n              />\n            ))}\n        </Radio.Group>\n      )\n    default:\n    case 'dropdown': {\n      const data = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Option) {\n          // Option components\n          return child.props.text\n            ? {\n                selected_key: String(child.props.value ?? ''),\n                content: [\n                  child.props.title ?? child.props.children ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selected_key: child.props.value,\n                content: child.props.title ?? child.props.children,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\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          default_value={String(value ?? '')}\n          label={label}\n          label_direction={layout}\n          status={error?.message}\n          disabled={disabled}\n          data={data}\n          on_change={handleDropdownChange}\n          on_show={onFocus}\n          on_hide={handleHide}\n          {...forwardSpaceProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","Button","Dropdown","Radio","HelpButton","ButtonRow","FieldBlock","classnames","forwardSpaceProps","makeUniqueId","SharedContext","Option","useField","FormError","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","selected_key","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","text","on_click","status","optionsData","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","label_direction","message","Error","toString","suffix","contents","on_show","on_hide","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Button, Dropdown, Radio, HelpButton } from '../../../components'\nimport ButtonRow from '../Layout/ButtonRow'\nimport FieldBlock from '../FieldBlock'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport SharedContext from '../../../shared/Context'\nimport Option from './Option'\nimport { useField } from './hooks'\nimport { FormError } from '../types'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps, FieldHelpProps } from '../field-types'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  handleSelect: () => void\n}\n\nexport type Props = ComponentProps &\n  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  } = useField(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selected_key } }) => {\n      handleChange?.(\n        !selected_key || selected_key === clearValue\n          ? emptyValue\n          : selected_key\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 useFields handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selected_key)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selected_key)\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    ...forwardSpaceProps(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          {...forwardSpaceProps(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            {options.map((option, i) => (\n              <Button\n                key={`option-${i}-${option.value}`}\n                id={id}\n                text={option.title}\n                on_click={option.handleSelect}\n                variant={option.value === value ? undefined : 'secondary'}\n                status={error ? 'error' : undefined}\n                disabled={disabled}\n              />\n            ))}\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                selected_key: String(child.props.value ?? ''),\n                content: [\n                  child.props.title ?? child.props.children ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selected_key: child.props.value,\n                content: child.props.title ?? child.props.children,\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              selected_key: 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          {...forwardSpaceProps(props)}\n          stretch={width === 'stretch'}\n        />\n      )\n    }\n  }\n}\n\nSelection._supportsEufemiaSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { InputProps } from '../../../components/input/Input';
 import { InputMaskedProps } from '../../../components/InputMasked';
 import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
+import type { FieldProps, FieldHelpProps } from '../field-types';
 interface ErrorMessages {
     required?: string;
     schema?: string;
@@ -9,7 +9,7 @@ interface ErrorMessages {
     maxLength?: string;
     pattern?: string;
 }
-export type Props = ComponentProps & FieldProps<string, undefined, ErrorMessages> & {
+export type Props = ComponentProps & FieldHelpProps & FieldProps<string, undefined | string, ErrorMessages> & {
     inputClassName?: string;
     type?: InputProps['type'];
     multiline?: boolean;
@@ -23,7 +23,7 @@ export type Props = ComponentProps & FieldProps<string, undefined, ErrorMessages
     minLength?: number;
     maxLength?: number;
     pattern?: string;
-    width?: false | 'medium' | 'large' | 'stretch';
+    width?: false | 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function StringComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace StringComponent {

package/extensions/forms/Field/String.js

@@ -4,7 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { Input, Textarea } from '../../../components';
+import { HelpButton, Input, Textarea } from '../../../components';
 import InputMasked from '../../../components/InputMasked';
 import { forwardSpaceProps } from '../utils';
 import SharedContext from '../../../shared/Context';
@@ -34,6 +34,9 @@ function StringComponent(props) {
       if (value === '') {
         return props.emptyValue;
       }
+      if (value.charAt(0) === '0' && cleanedValue === '') {
+        return '0';
+      }
       return cleanedValue ?? value;
     },
     width: props.width ?? 'large'
@@ -53,6 +56,7 @@ function StringComponent(props) {
     warning,
     error,
     disabled,
+    help,
     multiline,
     leftIcon,
     rightIcon,
@@ -62,9 +66,9 @@ function StringComponent(props) {
     characterCounter,
     mask,
     width,
-    onFocus,
-    onBlur,
-    onChange
+    handleFocus,
+    handleBlur,
+    handleChange
   } = useField(preparedProps);
   const characterCounterElement = characterCounter ? props.maxLength ? `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}/${props.maxLength}` : `${(value === null || value === void 0 ? void 0 : value.length) ?? '0'}` : undefined;
   const cn = classnames('dnb-forms-field-string__input', inputClassName);
@@ -84,9 +88,13 @@ function StringComponent(props) {
     className: cn,
     placeholder: placeholder,
     value: value,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title,
+      left: "x-small"
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     autoresize: autoresize,
     autoresize_max_rows: autoresizeMaxRows,
     disabled: disabled,
@@ -98,9 +106,12 @@ function StringComponent(props) {
     value: (value === null || value === void 0 ? void 0 : value.toString()) ?? '',
     icon: leftIcon ?? rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
     stretch: width !== undefined
   }) : React.createElement(Input, {
@@ -112,9 +123,12 @@ function StringComponent(props) {
     icon: leftIcon ?? rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
     clear: clear,
-    on_focus: onFocus,
-    on_blur: onBlur,
-    on_change: onChange,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.contents) : undefined,
+    on_focus: handleFocus,
+    on_blur: handleBlur,
+    on_change: handleChange,
     disabled: disabled,
     stretch: width !== undefined
   }));