npm - @dnb/eufemia - Versions diffs - 10.16.0 → 10.18.0 - Mend

@dnb/eufemia 10.16.0 → 10.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (591) hide show

package/extensions/forms/Field/Number/style/dnb-number.min.css ADDED Viewed

@@ -0,0 +1 @@

+ :root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--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)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;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--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;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--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;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(--color-black-55);--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[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--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-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(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--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-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--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-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--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-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}

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

@@ -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/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.css ADDED Viewed

@@ -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/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.min.css ADDED Viewed

@@ -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/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss ADDED Viewed

@@ -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/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.css ADDED Viewed

@@ -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/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.min.css ADDED Viewed

@@ -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/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss ADDED Viewed

@@ -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/extensions/forms/Field/PhoneNumber/PhoneNumber.js CHANGED Viewed

@@ -11,7 +11,6 @@ import countries from '../../constants/countries';
 import StringComponent from '../String';
 import { useDataValue } from '../../hooks';
 import FieldBlock from '../../FieldBlock';
-import { FormError } from '../../types';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import SharedContext from '../../../../shared/Context';
 import { getCountryData, makeCountryFilterSet } from '../SelectCountry';
@@ -35,11 +34,9 @@ function PhoneNumber(props) {
   const validateRequired = useCallback((value, _ref) => {
     let {
       required,
-      isChanged
+      isChanged,
+      error
     } = _ref;
-    const error = new FormError('The value is required', {
-      validationRule: 'required'
-    });
     if (required) {
       const [countryCode, phoneNumber] = splitValue(value);
       if (countryCode !== prevCountryCodeRef.current) {
@@ -63,6 +60,7 @@ function PhoneNumber(props) {
     toEvent
   });
   const {
+    value,
     className,
     countryCodeFieldClassName,
     numberFieldClassName,
@@ -88,7 +86,6 @@ function PhoneNumber(props) {
     handleFocus,
     handleBlur,
     handleChange,
-    updateValue,
     onCountryCodeChange,
     onNumberChange,
     filterCountries = ccFilter !== 'Prioritized' ? makeCountryFilterSet(ccFilter) : undefined
@@ -120,16 +117,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]);
   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) {
@@ -138,7 +134,7 @@ function PhoneNumber(props) {
       langRef.current = lang;
       updateCurrentDataSet();
     }
-  }, [props.value, lang, updateCurrentDataSet]);
+  }, [value, props.value, lang, updateCurrentDataSet]);
   const prevCountryCodeRef = React.useRef(countryCodeRef.current);
   const handleCountryCodeChange = useCallback(_ref3 => {
     var _data$selectedKey;
@@ -216,6 +212,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/extensions/forms/Field/PhoneNumber/PhoneNumber.js.map CHANGED Viewed

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

@@ -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/extensions/forms/Field/Selection/Selection.js CHANGED Viewed

@@ -27,8 +27,6 @@ function Selection(props) {
     variant = 'dropdown',
     clear,
     label,
-    labelDescription,
-    labelSecondary,
     layout = 'vertical',
     optionsLayout = 'vertical',
     placeholder,
@@ -79,9 +77,7 @@ function Selection(props) {
     warning,
     error,
     layout,
-    label,
-    labelDescription,
-    labelSecondary
+    label
   });
   const getStatus = useCallback(error => {
     var _error$message;
@@ -155,7 +151,7 @@ function Selection(props) {
         } : undefined, ...(optionsData !== null && optionsData !== void 0 ? optionsData : [])].filter(Boolean);
         return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
           width: width
-        }), React.createElement(Dropdown, _extends({
+        }), React.createElement(Dropdown, {
           id: id,
           list_class: "dnb-forms-field-selection__list",
           portal_class: "dnb-forms-field-selection__portal",
@@ -169,10 +165,9 @@ function Selection(props) {
           }, help.contents) : undefined,
           on_change: handleDropdownChange,
           on_show: handleShow,
-          on_hide: handleHide
-        }, pickSpacingProps(props), {
+          on_hide: handleHide,
           stretch: true
-        })));
+        }));
       }
   }
 }