@dnb/eufemia 10.16.0 → 10.18.0

package/cjs/extensions/forms/Field/Number/style/dnb-number.scss

@@ -0,0 +1,176 @@
+@import '../../../../../style/core/utilities.scss';
+@import '../../style/field-sizes.scss';
+
+.dnb-forms-field-number {
+  --number-control-button-border-color: black;
+  --number-control-button-border-color--hover: darkgrey;
+  --number-control-button-border-color--focus: darkgrey;
+  --number-control-button-border-width--focus: 0.125rem;
+  --number-control-button-background-color--hover: grey;
+  --number-control-button-color--hover: black;
+  --number-control-button-background-color--active: black;
+  --number-control-button-color--active: lightgrey;
+  --number-control-button--error: red;
+  --number-control-button--error-contrast: white;
+  --number-control-button-width--small: 2rem;
+  --number-control-button-width--medium: 2.5rem;
+  --number-control-button-width--large: 3rem;
+  --forms-field-block--number-control-buttons-width--small: calc(
+    var(--number-control-button-width--small) * 2
+  );
+  --forms-field-block--number-control-buttons-width--medium: calc(
+    var(--number-control-button-width--medium) * 2
+  );
+  --forms-field-block--number-control-buttons-width--large: calc(
+    var(--number-control-button-width--large) * 2
+  );
+
+  &__contents {
+    display: flex;
+    align-items: center;
+
+    &--has-controls {
+      border-radius: 0.25rem;
+      @include fakeBorder(
+        var(--number-control-button-border-color),
+        0.0625rem
+      );
+      @include hover() {
+        @include fakeBorder(
+          var(--number-control-button-border-color),
+          0.125rem
+        );
+      }
+
+      &:focus-within {
+        html[data-whatinput='keyboard'] & {
+          @include fakeBorder(
+            var(--number-control-button-border-color--focus),
+            var(--number-control-button-border-width--focus)
+          );
+        }
+      }
+
+      .dnb-input {
+        &__shell {
+          border-radius: 0;
+          box-shadow: none;
+          @include hover() {
+            box-shadow: none;
+          }
+        }
+        &:not([data-input-state='disabled']):not(:active) {
+          // Focus
+          &[data-input-state='focus'] {
+            .dnb-input__shell {
+              @include removeFocusRing();
+            }
+          }
+        }
+      }
+
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        @include hover() {
+          background-color: var(
+            --number-control-button-background-color--hover
+          );
+          color: var(--number-control-button-color--hover);
+        }
+        @include active() {
+          background-color: var(
+            --number-control-button-background-color--active
+          );
+          color: var(--number-control-button-color--active);
+        }
+      }
+    }
+
+    &--has-controls#{&}--has-error {
+      @include fakeBorder(var(--number-control-button--error), 0.125rem);
+      @include hover() {
+        @include fakeBorder(var(--number-control-button--error), 0.125rem);
+      }
+
+      .dnb-input__status--error {
+        &:not([data-input-state='disabled']):not(:hover):not(:active) {
+          .dnb-input__shell {
+            box-shadow: none;
+          }
+        }
+      }
+
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        color: var(--number-control-button--error);
+        @include hover() {
+          background-color: var(--number-control-button--error-contrast);
+          color: var(--number-control-button--error);
+        }
+        @include active() {
+          background-color: var(--number-control-button--error);
+          color: var(--number-control-button--error-contrast);
+        }
+        &[disabled] {
+          color: var(--number-control-button--error-contrast);
+        }
+      }
+    }
+
+    &--has-controls#{&}--is-disabled {
+      @include fakeBorder(var(--color-black-55), 0.0625rem);
+      @include hover() {
+        @include fakeBorder(var(--color-black-55), 0.0625rem);
+      }
+
+      .dnb-input {
+        &[data-input-state='disabled'] {
+          .dnb-input__shell {
+            box-shadow: none;
+          }
+        }
+      }
+
+      .dnb-input[data-input-state='disabled'] & {
+        @include fakeBorder(var(--color-black-55), 0.0625rem);
+      }
+
+      .dnb-button--control-before[disabled],
+      .dnb-button--control-after[disabled] {
+        background-color: var(--color-black-3);
+        color: var(--color-black-20);
+      }
+    }
+
+    &--has-controls.dnb-forms-field-block__contents--width-small {
+      width: calc(
+        var(--forms-field-width--small) +
+          var(--forms-field-block--number-control-buttons-width--small)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--small);
+      }
+    }
+    &--has-controls.dnb-forms-field-block__contents--width-medium {
+      width: calc(
+        var(--forms-field-width--medium) +
+          var(--forms-field-block--number-control-buttons-width--medium)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--medium);
+      }
+    }
+    &--has-controls.dnb-forms-field-block__contents--width-large {
+      width: calc(
+        var(--forms-field-width--large) +
+          var(--forms-field-block--number-control-buttons-width--large)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--large);
+      }
+    }
+  }
+}

package/cjs/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.css

@@ -0,0 +1,74 @@
+/*
+ * Utilities
+ */
+.dnb-forms-field-number {
+  --number-control-button-border-color: var(--sb-color-purple-alternative);
+  --number-control-button-border-color--hover: var(
+    --sb-color-purple-alternative
+  );
+  --number-control-button-border-color--focus: var(--focus-ring-color);
+  --number-control-button-border-width--focus: var(--focus-ring-width);
+  --number-control-button-background-color--hover: #e0d0ff;
+  --number-control-button-color--hover: var(--sb-color-purple-alternative);
+  --number-control-button-background-color--active: #1c1b4e;
+  --number-control-button-color--active: #e0d0ff;
+  --number-control-button--error: var(--sb-color-red);
+  --number-control-button--error-contrast: var(--sb-color-magenta-light-2);
+}
+.dnb-forms-field-number__contents--has-controls {
+  background-color: #1c1b4e;
+  border-radius: 3rem;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input {
+  position: relative;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input::before, .dnb-forms-field-number__contents--has-controls .dnb-input::after {
+  position: absolute;
+  top: 0.25rem;
+  bottom: 0.25rem;
+  border-left: 0.0625rem solid #e0d0ff;
+  content: "";
+  z-index: 1;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input::before {
+  left: -1px;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input::after {
+  right: -1px;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:not(:disabled):active ~ .dnb-input::before {
+  z-index: -1;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:not(:disabled):active {
+  z-index: 1;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input::before, .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input::after {
+  border-left: 0.0625rem solid var(--number-control-button--error-contrast);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled {
+  --border-color: var(--sb-color-gray-dark);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  background-color: var(--sb-color-gray-light);
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]) {
+  --border-color: var(--sb-color-gray-dark);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input__input {
+  color: var(--sb-color-gray-dark);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input::before, .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input::after {
+  border-left: 0.0625rem solid var(--sb-color-gray-dark);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled] {
+  color: var(--sb-color-gray-dark);
+  background-color: var(--sb-color-gray-light);
+}

package/cjs/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.min.css

@@ -0,0 +1,3 @@
+.dnb-forms-field-number{--number-control-button-border-color:var(--sb-color-purple-alternative);--number-control-button-border-color--hover:var(
+    --sb-color-purple-alternative
+  );--number-control-button-border-color--focus:var(--focus-ring-color);--number-control-button-border-width--focus:var(--focus-ring-width);--number-control-button-background-color--hover:#e0d0ff;--number-control-button-color--hover:var(--sb-color-purple-alternative);--number-control-button-background-color--active:#1c1b4e;--number-control-button-color--active:#e0d0ff;--number-control-button--error:var(--sb-color-red);--number-control-button--error-contrast:var(--sb-color-magenta-light-2)}.dnb-forms-field-number__contents--has-controls{background-color:#1c1b4e;border-radius:3rem}.dnb-forms-field-number__contents--has-controls .dnb-input{position:relative}.dnb-forms-field-number__contents--has-controls .dnb-input:after,.dnb-forms-field-number__contents--has-controls .dnb-input:before{border-left:.0625rem solid #e0d0ff;bottom:.25rem;content:"";position:absolute;top:.25rem;z-index:1}.dnb-forms-field-number__contents--has-controls .dnb-input:before{left:-1px}.dnb-forms-field-number__contents--has-controls .dnb-input:after{right:-1px}.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:not(:disabled):active~.dnb-input:before{z-index:-1}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:not(:disabled):active{z-index:1}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input:after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input:before{border-left:.0625rem solid var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--sb-color-gray-dark);--border-width:0.0625rem;background-color:var(--sb-color-gray-light);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--sb-color-gray-dark);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input__input{color:var(--sb-color-gray-dark)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input:after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input:before{border-left:.0625rem solid var(--sb-color-gray-dark)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--sb-color-gray-light);color:var(--sb-color-gray-dark)}

package/cjs/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss

@@ -0,0 +1,81 @@
+@import '../../../../../../style/core/utilities.scss';
+
+.dnb-forms-field-number {
+  --number-control-button-border-color: var(--sb-color-purple-alternative);
+  --number-control-button-border-color--hover: var(
+    --sb-color-purple-alternative
+  );
+  --number-control-button-border-color--focus: var(--focus-ring-color);
+  --number-control-button-border-width--focus: var(--focus-ring-width);
+  --number-control-button-background-color--hover: #e0d0ff;
+  --number-control-button-color--hover: var(--sb-color-purple-alternative);
+  --number-control-button-background-color--active: #1c1b4e;
+  --number-control-button-color--active: #e0d0ff;
+  --number-control-button--error: var(--sb-color-red);
+  --number-control-button--error-contrast: var(--sb-color-magenta-light-2);
+
+  &__contents {
+    &--has-controls {
+      background-color: #1c1b4e;
+      border-radius: 3rem;
+      .dnb-input {
+        position: relative;
+        &::before,
+        &::after {
+          position: absolute;
+          top: 0.25rem;
+          bottom: 0.25rem;
+          border-left: 0.0625rem solid #e0d0ff;
+          content: '';
+          z-index: 1;
+        }
+        &::before {
+          left: -1px;
+        }
+        &::after {
+          right: -1px;
+        }
+      }
+      .dnb-button--control-before:not(:disabled):active
+        ~ .dnb-input::before {
+        z-index: -1;
+      }
+      .dnb-button--control-after:not(:disabled):active {
+        z-index: 1;
+      }
+    }
+
+    &--has-controls#{&}--has-error {
+      .dnb-input {
+        &::before,
+        &::after {
+          border-left: 0.0625rem solid
+            var(--number-control-button--error-contrast);
+        }
+      }
+    }
+
+    &--has-controls#{&}--is-disabled {
+      @include fakeBorder(var(--sb-color-gray-dark), 0.0625rem);
+      @include hover() {
+        @include fakeBorder(var(--sb-color-gray-dark), 0.0625rem);
+      }
+      background-color: var(--sb-color-gray-light);
+      .dnb-input {
+        &__input {
+          color: var(--sb-color-gray-dark);
+        }
+        &::before,
+        &::after {
+          border-left: 0.0625rem solid var(--sb-color-gray-dark);
+        }
+      }
+
+      .dnb-button--control-before[disabled],
+      .dnb-button--control-after[disabled] {
+        color: var(--sb-color-gray-dark);
+        background-color: var(--sb-color-gray-light);
+      }
+    }
+  }
+}

package/cjs/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.css

@@ -0,0 +1,15 @@
+.dnb-forms-field-number {
+  --number-control-button-border-color: var(--color-sea-green);
+  --number-control-button-border-color--hover: var(--color-emerald-green);
+  --number-control-button-border-color--focus: var(--color-emerald-green);
+  --number-control-button-background-color--hover: var(
+    --color-mint-green-12
+  );
+  --number-control-button-color--hover: var(--color-emerald-green);
+  --number-control-button-background-color--active: var(
+    --color-mint-green-50
+  );
+  --number-control-button-color--active: var(--color-sea-green);
+  --number-control-button--error: var(--color-fire-red);
+  --number-control-button--error-contrast: var(--color-fire-red-8);
+}

package/cjs/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.min.css

@@ -0,0 +1,5 @@
+.dnb-forms-field-number{--number-control-button-border-color:var(--color-sea-green);--number-control-button-border-color--hover:var(--color-emerald-green);--number-control-button-border-color--focus:var(--color-emerald-green);--number-control-button-background-color--hover:var(
+    --color-mint-green-12
+  );--number-control-button-color--hover:var(--color-emerald-green);--number-control-button-background-color--active:var(
+    --color-mint-green-50
+  );--number-control-button-color--active:var(--color-sea-green);--number-control-button--error:var(--color-fire-red);--number-control-button--error-contrast:var(--color-fire-red-8)}

package/cjs/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss

@@ -0,0 +1,15 @@
+.dnb-forms-field-number {
+  --number-control-button-border-color: var(--color-sea-green);
+  --number-control-button-border-color--hover: var(--color-emerald-green);
+  --number-control-button-border-color--focus: var(--color-emerald-green);
+  --number-control-button-background-color--hover: var(
+    --color-mint-green-12
+  );
+  --number-control-button-color--hover: var(--color-emerald-green);
+  --number-control-button-background-color--active: var(
+    --color-mint-green-50
+  );
+  --number-control-button-color--active: var(--color-sea-green);
+  --number-control-button--error: var(--color-fire-red);
+  --number-control-button--error-contrast: var(--color-fire-red-8);
+}

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

@@ -12,7 +12,6 @@ var _countries = _interopRequireDefault(require("../../constants/countries"));
 var _String = _interopRequireDefault(require("../String"));
 var _hooks = require("../../hooks");
 var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
-var _types = require("../../types");
 var _utils = require("../../../../components/flex/utils");
 var _Context = _interopRequireDefault(require("../../../../shared/Context"));
 var _SelectCountry = require("../SelectCountry");
@@ -45,11 +44,9 @@ function PhoneNumber(props) {
   const validateRequired = (0, _react.useCallback)((value, _ref) => {
     let {
       required,
-      isChanged
+      isChanged,
+      error
     } = _ref;
-    const error = new _types.FormError('The value is required', {
-      validationRule: 'required'
-    });
     if (required) {
       const [countryCode, phoneNumber] = splitValue(value);
       if (countryCode !== prevCountryCodeRef.current) {
@@ -73,6 +70,7 @@ function PhoneNumber(props) {
     toEvent
   });
   const {
+    value,
     className,
     countryCodeFieldClassName,
     numberFieldClassName,
@@ -98,7 +96,6 @@ function PhoneNumber(props) {
     handleFocus,
     handleBlur,
     handleChange,
-    updateValue,
     onCountryCodeChange,
     onNumberChange,
     filterCountries = ccFilter !== 'Prioritized' ? (0, _SelectCountry.makeCountryFilterSet)(ccFilter) : undefined
@@ -130,16 +127,15 @@ function PhoneNumber(props) {
       countryCode = omitCountryCodeField ? emptyValue : countryCodeRef.current || emptyValue,
       phoneNumber = numberRef.current || emptyValue
     } = _ref2;
-    updateValue('invalidate');
     handleChange(joinValue([countryCode, phoneNumber]), omitCountryCodeField ? {
       phoneNumber
     } : {
       countryCode,
       phoneNumber
     });
-  }, [omitCountryCodeField, emptyValue, updateValue, handleChange]);
+  }, [omitCountryCodeField, emptyValue, handleChange]);
   (0, _react.useMemo)(() => {
-    const [countryCode, phoneNumber] = splitValue(props.value);
+    const [countryCode, phoneNumber] = splitValue(props.value || value);
     numberRef.current = phoneNumber;
     if (lang !== langRef.current || !wasFilled.current) {
       if (!countryCodeRef.current || countryCode) {
@@ -148,7 +144,7 @@ function PhoneNumber(props) {
       langRef.current = lang;
       updateCurrentDataSet();
     }
-  }, [props.value, lang, updateCurrentDataSet]);
+  }, [value, props.value, lang, updateCurrentDataSet]);
   const prevCountryCodeRef = _react.default.useRef(countryCodeRef.current);
   const handleCountryCodeChange = (0, _react.useCallback)(_ref3 => {
     var _data$selectedKey;
@@ -226,6 +222,7 @@ function PhoneNumber(props) {
     label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
     data: dataRef.current,
     value: countryCodeRef.current,
+    status: error ? 'error' : undefined,
     disabled: disabled,
     on_focus: onFocusHandler,
     on_blur: handleBlur,

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["_react","_interopRequireWildcard","require","_components","_classnames","_interopRequireDefault","_countries","_String","_hooks","_FieldBlock","_types","_utils","_Context","_SelectCountry","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","useContext","SharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","React","useRef","numberRef","dataRef","langRef","wasFilled","errorMessages","useMemo","required","phoneNumberErrorRequired","pattern","validateRequired","useCallback","_ref","isChanged","error","FormError","validationRule","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","defaultProps","preparedProps","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","countries","ccFilter","emptyValue","info","warning","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","updateValue","onCountryCodeChange","onNumberChange","filterCountries","makeCountryFilterSet","useDataValue","external","updateCurrentDataSet","getCountryData","country","formattCountryCode","cdc","sort","makeObject","callOnChange","_ref2","joinValue","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","onFocusHandler","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","createElement","classnames","pickSpacingProps","Flex","Horizontal","align","Autocomplete","mode","label_direction","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","type","layout","mask","Array","fill","onFocus","onBlur","onChange","inputMode","_country$i18n$lang","selected_value","iso","content","i18n","en","match","slice","array","Boolean","join","_supportsSpacingProps","_default","exports"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, { CountryType } from '../../constants/countries'\nimport StringComponent, { Props as InputProps } from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps, FormError } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    pattern?: InputProps['pattern']\n    width?: 'large' | 'stretch'\n    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n    countries?: CountryFilterSet\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\n// Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const countryCodeRef = React.useRef(null)\n  const numberRef = React.useRef(null)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      pattern: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged }) => {\n      const error = new FormError('The value is required', {\n        validationRule: 'required',\n      })\n\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    pattern,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useDataValue(preparedProps)\n\n  function fromExternal(external: string) {\n    const [, phoneNumber] = splitValue(external)\n    if (!phoneNumber && !props.omitCountryCodeField) {\n      return countryCodeRef.current\n    }\n    return external\n  }\n\n  function toEvent(value: string) {\n    const [, phoneNumber] = splitValue(value)\n    if (!phoneNumber) {\n      return emptyValue\n    }\n    return value\n  }\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === countryCodeRef.current\n        : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      /**\n       * To ensure, we actually call onChange every time the cc value changes,\n       * even if the value is undefined\n       */\n      updateValue('invalidate')\n\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, updateValue, handleChange]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update countryCode and phoneNumber when value changes.\n   */\n  useMemo(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      if (!countryCodeRef.current || countryCode) {\n        countryCodeRef.current = countryCode || defaultCountryCode\n      }\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [props.value, lang, updateCurrentDataSet])\n\n  const prevCountryCodeRef = React.useRef(countryCodeRef.current)\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formattCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={\n              countryCodeLabel ??\n              sharedContext?.translation.Forms.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            disabled={disabled}\n            on_focus={onFocusHandler}\n            on_blur={handleBlur}\n            on_change={handleCountryCodeChange}\n            on_type={onTypeHandler}\n            independent_width\n            search_numbers\n            keep_selection\n            autoComplete=\"tel-country-code\"\n            no_animation={props.noAnimation}\n            stretch={width === 'stretch'}\n          />\n        )}\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label}\n          placeholder={\n            placeholder ?? (isDefault ? defaultPlaceholder : undefined)\n          }\n          mask={\n            numberMask ?? (isDefault ? defaultMask : Array(12).fill(/\\d/))\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\n          required={required}\n          pattern={pattern}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formattCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}
+{"version":3,"file":"PhoneNumber.js","names":["_react","_interopRequireWildcard","require","_components","_classnames","_interopRequireDefault","_countries","_String","_hooks","_FieldBlock","_utils","_Context","_SelectCountry","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","defaultCountryCode","defaultPlaceholder","defaultMask","PhoneNumber","props","_sharedContext$locale","_countryCodeRef$curre","sharedContext","useContext","SharedContext","tr","translation","Forms","lang","locale","split","countryCodeRef","React","useRef","numberRef","dataRef","langRef","wasFilled","errorMessages","useMemo","required","phoneNumberErrorRequired","pattern","validateRequired","useCallback","_ref","isChanged","error","countryCode","phoneNumber","splitValue","prevCountryCodeRef","current","defaultProps","preparedProps","fromExternal","toEvent","className","countryCodeFieldClassName","numberFieldClassName","countryCodePlaceholder","placeholder","countryCodeLabel","label","phoneNumberLabel","numberMask","countries","ccFilter","emptyValue","info","warning","disabled","width","help","validateInitially","continuousValidation","validateUnchanged","omitCountryCodeField","handleFocus","handleBlur","handleChange","onCountryCodeChange","onNumberChange","filterCountries","makeCountryFilterSet","useDataValue","external","updateCurrentDataSet","getCountryData","country","formattCountryCode","cdc","sort","makeObject","callOnChange","_ref2","joinValue","handleCountryCodeChange","_ref3","_data$selectedKey","data","selectedKey","trim","handleNumberChange","onFocusHandler","_ref4","updateData","onTypeHandler","_ref5","_event$nativeEvent","revalidateInputValue","event","nativeEvent","cdcVal","test","find","_ref6","window","requestAnimationFrame","isDefault","includes","createElement","classnames","pickSpacingProps","Flex","Horizontal","align","Autocomplete","mode","label_direction","status","on_focus","on_blur","on_change","on_type","independent_width","search_numbers","keep_selection","autoComplete","no_animation","noAnimation","stretch","type","layout","mask","Array","fill","onFocus","onBlur","onChange","inputMode","_country$i18n$lang","selected_value","iso","content","i18n","en","match","slice","array","Boolean","join","_supportsSpacingProps","_default","exports"],"sources":["../../../../../../src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport { Autocomplete, Flex } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport classnames from 'classnames'\nimport countries, { CountryType } from '../../constants/countries'\nimport StringComponent, { Props as InputProps } from '../String'\nimport { useDataValue } from '../../hooks'\nimport FieldBlock from '../../FieldBlock'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  CountryFilterSet,\n  getCountryData,\n  makeCountryFilterSet,\n} from '../SelectCountry'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    countryCodeFieldClassName?: string\n    numberFieldClassName?: string\n    countryCodePlaceholder?: string\n    countryCodeLabel?: string\n    numberMask?: InputMaskedProps['mask']\n    pattern?: InputProps['pattern']\n    width?: 'large' | 'stretch'\n    omitCountryCodeField?: boolean\n    onCountryCodeChange?: (value: string | undefined) => void\n    onNumberChange?: (value: string | undefined) => void\n    countries?: CountryFilterSet\n\n    /**\n     * For internal use only.\n     *\n     * @param country\n     * @returns boolean\n     */\n    filterCountries?: (country: CountryType) => boolean\n\n    /**\n     * For internal testing purposes\n     */\n    noAnimation?: boolean\n  }\n\n// Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping\n// back to +47 once the user empty the field so handleChange send out undefined.\nconst defaultCountryCode = '+47'\nconst defaultPlaceholder = '00 00 00 00'\nconst defaultMask = [\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n  ' ',\n  /\\d/,\n  /\\d/,\n]\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n  const lang = sharedContext.locale?.split('-')[0]\n\n  const countryCodeRef = React.useRef(null)\n  const numberRef = React.useRef(null)\n  const dataRef = React.useRef(null)\n  const langRef = React.useRef(lang)\n  const wasFilled = React.useRef(false)\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.phoneNumberErrorRequired,\n      pattern: tr.phoneNumberErrorRequired,\n      ...props?.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, isChanged, error }) => {\n      if (required) {\n        const [countryCode, phoneNumber] = splitValue(value)\n\n        if (countryCode !== prevCountryCodeRef.current) {\n          if (countryCode) {\n            prevCountryCodeRef.current = countryCode\n          }\n          return undefined\n        }\n\n        if (isChanged && !phoneNumber) {\n          return error\n        }\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const defaultProps: Partial<Props> = {\n    errorMessages,\n  }\n  const preparedProps: Props = {\n    ...defaultProps,\n    ...props,\n    validateRequired,\n    fromExternal,\n    toEvent,\n  }\n\n  const {\n    value,\n    className,\n    countryCodeFieldClassName,\n    numberFieldClassName,\n    countryCodePlaceholder,\n    placeholder,\n    countryCodeLabel,\n    label = sharedContext?.translation.Forms.phoneNumberLabel,\n    numberMask,\n    countries: ccFilter = 'Prioritized',\n    emptyValue,\n    info,\n    warning,\n    error,\n    disabled,\n    width = 'large',\n    help,\n    pattern,\n    required,\n    validateInitially,\n    continuousValidation,\n    validateUnchanged,\n    omitCountryCodeField,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    onCountryCodeChange,\n    onNumberChange,\n    filterCountries = ccFilter !== 'Prioritized'\n      ? makeCountryFilterSet(ccFilter)\n      : undefined,\n  } = useDataValue(preparedProps)\n\n  function fromExternal(external: string) {\n    const [, phoneNumber] = splitValue(external)\n    if (!phoneNumber && !props.omitCountryCodeField) {\n      return countryCodeRef.current\n    }\n    return external\n  }\n\n  function toEvent(value: string) {\n    const [, phoneNumber] = splitValue(value)\n    if (!phoneNumber) {\n      return emptyValue\n    }\n    return value\n  }\n\n  const updateCurrentDataSet = useCallback(() => {\n    dataRef.current = getCountryData({\n      lang,\n      filter: !wasFilled.current\n        ? (country) =>\n            `${formattCountryCode(country.cdc)}` === countryCodeRef.current\n        : filterCountries,\n      sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      makeObject,\n    })\n  }, [lang, filterCountries, ccFilter])\n\n  const callOnChange = useCallback(\n    ({\n      countryCode = omitCountryCodeField\n        ? emptyValue\n        : countryCodeRef.current || emptyValue,\n      phoneNumber = numberRef.current || emptyValue,\n    }) => {\n      handleChange(\n        joinValue([countryCode, phoneNumber]),\n        omitCountryCodeField\n          ? { phoneNumber }\n          : { countryCode, phoneNumber }\n      )\n    },\n    [omitCountryCodeField, emptyValue, handleChange]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update countryCode and phoneNumber when value changes.\n   */\n  useMemo(() => {\n    const [countryCode, phoneNumber] = splitValue(props.value || value)\n    numberRef.current = phoneNumber\n\n    if (lang !== langRef.current || !wasFilled.current) {\n      if (!countryCodeRef.current || countryCode) {\n        countryCodeRef.current = countryCode || defaultCountryCode\n      }\n      langRef.current = lang\n\n      updateCurrentDataSet()\n    }\n  }, [value, props.value, lang, updateCurrentDataSet])\n\n  const prevCountryCodeRef = React.useRef(countryCodeRef.current)\n\n  const handleCountryCodeChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const countryCode = (countryCodeRef.current =\n        data?.selectedKey?.trim() || emptyValue)\n\n      callOnChange({ countryCode })\n      onCountryCodeChange?.(countryCode)\n    },\n    [emptyValue, callOnChange, onCountryCodeChange]\n  )\n\n  const handleNumberChange = useCallback(\n    (value: string) => {\n      const phoneNumber = (numberRef.current = value || emptyValue)\n\n      callOnChange({ phoneNumber })\n      onNumberChange?.(phoneNumber)\n    },\n    [emptyValue, callOnChange, onNumberChange]\n  )\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      if (!wasFilled.current) {\n        wasFilled.current = true\n        updateCurrentDataSet()\n        updateData(dataRef.current)\n      }\n      handleFocus()\n    },\n    [handleFocus, updateCurrentDataSet]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value, updateData, revalidateInputValue, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const cdcVal = /\\+\\d{1,3}\\s{1}\\d+/.test(value)\n          ? splitValue(value)[0]\n          : value\n        const country = countries.find(({ cdc }) => cdc === cdcVal)\n        if (country?.cdc) {\n          const countryCode = (countryCodeRef.current = formattCountryCode(\n            country.cdc\n          ))\n\n          updateCurrentDataSet()\n          updateData(dataRef.current)\n          callOnChange({ countryCode })\n\n          // To ensure correct input value,\n          // regardless if there is changed data before or not.\n          window.requestAnimationFrame(() => {\n            revalidateInputValue()\n          })\n        }\n      }\n    },\n    [callOnChange, updateCurrentDataSet]\n  )\n\n  const isDefault = countryCodeRef.current?.includes(defaultCountryCode)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-phone-number', className)}\n      width={omitCountryCodeField ? undefined : width}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Horizontal align=\"flex-end\">\n        {!omitCountryCodeField && (\n          <Autocomplete\n            className={classnames(\n              'dnb-forms-field-phone-number__country-code',\n              countryCodeFieldClassName\n            )}\n            mode=\"async\"\n            placeholder={countryCodePlaceholder}\n            label_direction=\"vertical\"\n            label={\n              countryCodeLabel ??\n              sharedContext?.translation.Forms.countryCodeLabel\n            }\n            data={dataRef.current}\n            value={countryCodeRef.current}\n            status={error ? 'error' : undefined}\n            disabled={disabled}\n            on_focus={onFocusHandler}\n            on_blur={handleBlur}\n            on_change={handleCountryCodeChange}\n            on_type={onTypeHandler}\n            independent_width\n            search_numbers\n            keep_selection\n            autoComplete=\"tel-country-code\"\n            no_animation={props.noAnimation}\n            stretch={width === 'stretch'}\n          />\n        )}\n\n        <StringComponent\n          className={classnames(\n            'dnb-forms-field-phone-number__number',\n            numberFieldClassName\n          )}\n          type=\"tel\"\n          autoComplete=\"tel-national\"\n          emptyValue=\"\"\n          layout=\"vertical\"\n          label={label}\n          placeholder={\n            placeholder ?? (isDefault ? defaultPlaceholder : undefined)\n          }\n          mask={\n            numberMask ?? (isDefault ? defaultMask : Array(12).fill(/\\d/))\n          }\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChange={handleNumberChange}\n          value={numberRef.current}\n          info={info}\n          warning={warning}\n          error={error}\n          disabled={disabled}\n          width={omitCountryCodeField ? 'medium' : 'stretch'}\n          help={help}\n          required={required}\n          pattern={pattern}\n          errorMessages={errorMessages}\n          validateInitially={validateInitially}\n          continuousValidation={continuousValidation}\n          validateUnchanged={validateUnchanged}\n          inputMode=\"tel\"\n        />\n      </Flex.Horizontal>\n    </FieldBlock>\n  )\n}\n\nfunction makeObject(country: CountryType, lang: string) {\n  return {\n    selectedKey: formattCountryCode(country.cdc),\n    selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,\n    content: `${formattCountryCode(country.cdc)} ${\n      country.i18n[lang] ?? country.i18n.en\n    }`,\n  }\n}\n\nfunction formattCountryCode(value: string) {\n  return `+${value}`\n}\n\nfunction splitValue(value: string) {\n  return (\n    typeof value === 'string'\n      ? value.match(/^(\\+[^ ]+)? ?(.*)$/)\n      : [undefined, '', '']\n  ).slice(1)\n}\n\nfunction joinValue(array: Array<string>) {\n  return array.filter(Boolean).join(' ')\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":"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"}

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

@@ -1,6 +1,12 @@
 import React from 'react';
 import { FieldProps, FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<string | number> & {
+import type { FormStatusText } from '../../../../components/FormStatus';
+interface IOption {
+    title: string | React.ReactNode;
+    value: number | string;
+    status: FormStatusText;
+}
+export type Props = FieldHelpProps & FieldProps<IOption['value']> & {
     children?: React.ReactNode;
     variant?: 'dropdown' | 'radio' | 'button';
     clear?: boolean;

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

@@ -38,8 +38,6 @@ function Selection(props) {
     variant = 'dropdown',
     clear,
     label,
-    labelDescription,
-    labelSecondary,
     layout = 'vertical',
     optionsLayout = 'vertical',
     placeholder,
@@ -90,9 +88,7 @@ function Selection(props) {
     warning,
     error,
     layout,
-    label,
-    labelDescription,
-    labelSecondary
+    label
   });
   const getStatus = (0, _react.useCallback)(error => {
     var _error$message;
@@ -166,7 +162,7 @@ function Selection(props) {
         } : undefined, ...(optionsData !== null && optionsData !== void 0 ? optionsData : [])].filter(Boolean);
         return _react.default.createElement(_FieldBlock.default, _extends({}, fieldBlockProps, {
           width: width
-        }), _react.default.createElement(_components.Dropdown, _extends({
+        }), _react.default.createElement(_components.Dropdown, {
           id: id,
           list_class: "dnb-forms-field-selection__list",
           portal_class: "dnb-forms-field-selection__portal",
@@ -180,10 +176,9 @@ function Selection(props) {
           }, help.contents) : undefined,
           on_change: handleDropdownChange,
           on_show: handleShow,
-          on_hide: handleHide
-        }, (0, _utils.pickSpacingProps)(props), {
+          on_hide: handleHide,
           stretch: true
-        })));
+        }));
       }
   }
 }