@dnb/eufemia 10.15.1 → 10.17.0

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/extensions/forms/Field/OrganizationNumber/OrganizationNumber.js

@@ -25,7 +25,8 @@ function OrganizationNumber(props) {
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.organizationNumberLabel,
     errorMessages,
     mask,
-    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
+    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium',
+    inputMode: 'numeric'
   });
   return React.createElement(StringComponent, stringComponentProps);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"OrganizationNumber.js","names":["React","useContext","useMemo","StringComponent","SharedContext","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","validate","omitMask","errorMessages","_objectSpread","required","organizationNumberErrorRequired","pattern","organizationNumberErrorPattern","mask","stringComponentProps","className","undefined","label","organizationNumberLabel","width","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.organizationNumberErrorRequired,\n      pattern: tr.organizationNumberErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n        : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n    [omitMask]\n  )\n\n  const stringComponentProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.organizationNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGT,KAAK;EAE3C,MAAMU,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEP,EAAE,CAACQ,+BAA+B;IAC5CC,OAAO,EAAET,EAAE,CAACU;EAA8B,GACvCf,KAAK,CAACU,aAAa,CACtB,EACF,CAACL,EAAE,EAAEL,KAAK,CAACU,aAAa,CAC1B,CAAC;EACD,MAAMM,IAAI,GAAGpB,OAAO,CAClB,MACEa,QAAQ,GACJ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EACtE,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,oBAA2B,GAAAN,aAAA,CAAAA,aAAA,KAC5BX,KAAK;IACRkB,SAAS,EAAE,qCAAqC;IAChDJ,OAAO,GAAAb,cAAA,GAAED,KAAK,CAACc,OAAO,cAAAb,cAAA,cAAAA,cAAA,GAAKO,QAAQ,GAAG,YAAY,GAAGW,SAAU;IAC/DC,KAAK,GAAAlB,YAAA,GACHF,KAAK,CAACoB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACc,uBAAuB;IAC1DX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAnB,YAAA,GAAEH,KAAK,CAACsB,KAAK,cAAAnB,YAAA,cAAAA,YAAA,GAAI;EAAQ,EAC/B;EAED,OAAOT,KAAA,CAAA6B,aAAA,CAAC1B,eAAe,EAAKoB,oBAAuB,CAAC;AACtD;AAEAlB,kBAAkB,CAACyB,qBAAqB,GAAG,IAAI;AAC/C,eAAezB,kBAAkB"}
+{"version":3,"file":"OrganizationNumber.js","names":["React","useContext","useMemo","StringComponent","SharedContext","OrganizationNumber","props","_props$pattern","_props$label","_props$width","sharedContext","tr","translation","Forms","validate","omitMask","errorMessages","_objectSpread","required","organizationNumberErrorRequired","pattern","organizationNumberErrorPattern","mask","stringComponentProps","className","undefined","label","organizationNumberLabel","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps & {\n  validate?: boolean\n  omitMask?: boolean\n}\n\nfunction OrganizationNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.organizationNumberErrorRequired,\n      pattern: tr.organizationNumberErrorPattern,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [/\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/, /\\d/]\n        : [/\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/, ' ', /\\d/, /\\d/, /\\d/],\n    [omitMask]\n  )\n\n  const stringComponentProps: Props = {\n    ...props,\n    className: 'dnb-forms-field-organization-number',\n    pattern: props.pattern ?? (validate ? '^[0-9]{9}$' : undefined),\n    label:\n      props.label ??\n      sharedContext?.translation.Forms.organizationNumberLabel,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n  }\n\n  return <StringComponent {...stringComponentProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAOtD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EACxC,MAAMC,aAAa,GAAGT,UAAU,CAACG,aAAa,CAAC;EAC/C,MAAMO,EAAE,GAAGD,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK;EAE3C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGT,KAAK;EAE3C,MAAMU,aAAa,GAAGd,OAAO,CAC3B,MAAAe,aAAA;IACEC,QAAQ,EAAEP,EAAE,CAACQ,+BAA+B;IAC5CC,OAAO,EAAET,EAAE,CAACU;EAA8B,GACvCf,KAAK,CAACU,aAAa,CACtB,EACF,CAACL,EAAE,EAAEL,KAAK,CAACU,aAAa,CAC1B,CAAC;EACD,MAAMM,IAAI,GAAGpB,OAAO,CAClB,MACEa,QAAQ,GACJ,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,GACtD,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EACtE,CAACA,QAAQ,CACX,CAAC;EAED,MAAMQ,oBAA2B,GAAAN,aAAA,CAAAA,aAAA,KAC5BX,KAAK;IACRkB,SAAS,EAAE,qCAAqC;IAChDJ,OAAO,GAAAb,cAAA,GAAED,KAAK,CAACc,OAAO,cAAAb,cAAA,cAAAA,cAAA,GAAKO,QAAQ,GAAG,YAAY,GAAGW,SAAU;IAC/DC,KAAK,GAAAlB,YAAA,GACHF,KAAK,CAACoB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GACXE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEE,WAAW,CAACC,KAAK,CAACc,uBAAuB;IAC1DX,aAAa;IACbM,IAAI;IACJM,KAAK,GAAAnB,YAAA,GAAEH,KAAK,CAACsB,KAAK,cAAAnB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BoB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO7B,KAAA,CAAA8B,aAAA,CAAC3B,eAAe,EAAKoB,oBAAuB,CAAC;AACtD;AAEAlB,kBAAkB,CAAC0B,qBAAqB,GAAG,IAAI;AAC/C,eAAe1B,kBAAkB"}

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

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useMemo, useContext, useCallback, useEffect } from 'react';
+import React, { useMemo, useContext, useCallback } from 'react';
 import { Autocomplete, Flex } from '../../../../components';
 import classnames from 'classnames';
 import countries from '../../constants/countries';
@@ -18,18 +18,46 @@ const defaultCountryCode = '+47';
 const defaultPlaceholder = '00 00 00 00';
 const defaultMask = [/\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/, ' ', /\d/, /\d/];
 function PhoneNumber(props) {
-  var _sharedContext$locale;
+  var _sharedContext$locale, _countryCodeRef$curre;
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const lang = (_sharedContext$locale = sharedContext.locale) === null || _sharedContext$locale === void 0 ? void 0 : _sharedContext$locale.split('-')[0];
+  const countryCodeRef = React.useRef(null);
+  const numberRef = React.useRef(null);
+  const dataRef = React.useRef(null);
+  const langRef = React.useRef(lang);
+  const wasFilled = React.useRef(false);
   const errorMessages = useMemo(() => _objectSpread({
     required: tr.phoneNumberErrorRequired,
     pattern: tr.phoneNumberErrorRequired
   }, props === null || props === void 0 ? void 0 : props.errorMessages), [tr, props.errorMessages]);
+  const validateRequired = useCallback((value, {
+    required,
+    isChanged,
+    error
+  }) => {
+    if (required) {
+      const [countryCode, phoneNumber] = splitValue(value);
+      if (countryCode !== prevCountryCodeRef.current) {
+        if (countryCode) {
+          prevCountryCodeRef.current = countryCode;
+        }
+        return undefined;
+      }
+      if (isChanged && !phoneNumber) {
+        return error;
+      }
+    }
+    return undefined;
+  }, []);
   const defaultProps = {
     errorMessages
   };
-  const preparedProps = _objectSpread(_objectSpread({}, defaultProps), props);
+  const preparedProps = _objectSpread(_objectSpread(_objectSpread({}, defaultProps), props), {}, {
+    validateRequired,
+    fromExternal,
+    toEvent
+  });
   const {
     className,
     countryCodeFieldClassName,
@@ -61,11 +89,20 @@ function PhoneNumber(props) {
     onNumberChange,
     filterCountries = ccFilter !== 'Prioritized' ? makeCountryFilterSet(ccFilter) : undefined
   } = useDataValue(preparedProps);
-  const countryCodeRef = React.useRef(null);
-  const numberRef = React.useRef(null);
-  const dataRef = React.useRef(null);
-  const langRef = React.useRef(lang);
-  const wasFilled = React.useRef(false);
+  function fromExternal(external) {
+    const [, phoneNumber] = splitValue(external);
+    if (!phoneNumber && !props.omitCountryCodeField) {
+      return countryCodeRef.current;
+    }
+    return external;
+  }
+  function toEvent(value) {
+    const [, phoneNumber] = splitValue(value);
+    if (!phoneNumber) {
+      return emptyValue;
+    }
+    return value;
+  }
   const updateCurrentDataSet = useCallback(() => {
     dataRef.current = getCountryData({
       lang,
@@ -79,7 +116,7 @@ function PhoneNumber(props) {
     phoneNumber = numberRef.current || emptyValue
   }) => {
     updateValue('invalidate');
-    handleChange(phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue, omitCountryCodeField ? {
+    handleChange(joinValue([countryCode, phoneNumber]), omitCountryCodeField ? {
       phoneNumber
     } : {
       countryCode,
@@ -90,16 +127,14 @@ function PhoneNumber(props) {
     const [countryCode, phoneNumber] = splitValue(props.value);
     numberRef.current = phoneNumber;
     if (lang !== langRef.current || !wasFilled.current) {
-      countryCodeRef.current = countryCode || defaultCountryCode;
+      if (!countryCodeRef.current || countryCode) {
+        countryCodeRef.current = countryCode || defaultCountryCode;
+      }
       langRef.current = lang;
       updateCurrentDataSet();
     }
   }, [props.value, lang, updateCurrentDataSet]);
-  useEffect(() => {
-    const [countryCode, phoneNumber] = splitValue(props.value);
-    const newValue = phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue;
-    updateValue(newValue);
-  }, [props.value, emptyValue, updateValue]);
+  const prevCountryCodeRef = React.useRef(countryCodeRef.current);
   const handleCountryCodeChange = useCallback(({
     data
   }) => {
@@ -152,7 +187,7 @@ function PhoneNumber(props) {
       }
     }
   }, [callOnChange, updateCurrentDataSet]);
-  const isDefault = countryCodeRef.current.includes(defaultCountryCode);
+  const isDefault = (_countryCodeRef$curre = countryCodeRef.current) === null || _countryCodeRef$curre === void 0 ? void 0 : _countryCodeRef$curre.includes(defaultCountryCode);
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-phone-number', className),
     width: omitCountryCodeField ? undefined : width,
@@ -161,15 +196,16 @@ function PhoneNumber(props) {
     error: error,
     disabled: disabled
   }, pickSpacingProps(props)), React.createElement(Flex.Horizontal, {
-    align: "baseline"
+    align: "flex-end"
   }, !omitCountryCodeField && React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     mode: "async",
-    placeholder: countryCodePlaceholder !== null && countryCodePlaceholder !== void 0 ? countryCodePlaceholder : ' ',
+    placeholder: countryCodePlaceholder,
     label_direction: "vertical",
     label: countryCodeLabel !== null && countryCodeLabel !== void 0 ? countryCodeLabel : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.countryCodeLabel,
     data: dataRef.current,
     value: countryCodeRef.current,
+    status: error ? 'error' : undefined,
     disabled: disabled,
     on_focus: onFocusHandler,
     on_blur: handleBlur,
@@ -187,7 +223,7 @@ function PhoneNumber(props) {
     autoComplete: "tel-national",
     emptyValue: "",
     layout: "vertical",
-    label: label !== null && label !== void 0 ? label : ' ',
+    label: label,
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : isDefault ? defaultPlaceholder : undefined,
     mask: numberMask !== null && numberMask !== void 0 ? numberMask : isDefault ? defaultMask : Array(12).fill(/\d/),
     onFocus: handleFocus,
@@ -205,7 +241,8 @@ function PhoneNumber(props) {
     errorMessages: errorMessages,
     validateInitially: validateInitially,
     continuousValidation: continuousValidation,
-    validateUnchanged: validateUnchanged
+    validateUnchanged: validateUnchanged,
+    inputMode: "tel"
   })));
 }
 function makeObject(country, lang) {
@@ -213,7 +250,6 @@ function makeObject(country, lang) {
   return {
     selectedKey: formattCountryCode(country.cdc),
     selected_value: `${country.iso} (${formattCountryCode(country.cdc)})`,
-    search_content: Object.values(country.i18n).map(v => `${formattCountryCode(country.cdc)} ${v}`),
     content: `${formattCountryCode(country.cdc)} ${(_country$i18n$lang = country.i18n[lang]) !== null && _country$i18n$lang !== void 0 ? _country$i18n$lang : country.i18n.en}`
   };
 }