@dnb/eufemia 10.10.0 → 10.11.0

package/es/components/input/style/dnb-input.scss

@@ -18,8 +18,7 @@
   --input-height--small: 1.5rem;
   --input-height--medium: 2.5rem;
   --input-height--large: 3rem;
-  --input-border-width: 0.0625rem;
-  --input-border-radius: 0.25rem;
+  --input-background-color: var(--color-white);
 
   display: inline-flex;
   align-items: center;
@@ -119,6 +118,14 @@
     display: none;
   }
 
+  // change the autocomplete appearance once filled out
+  &__input:autofill {
+    // set the border and the background
+    box-shadow:
+      0 0 0 var(--input-border-width) var(--input-border-color),
+      0 0 0 10em var(--input-background-color) inset;
+  }
+
   // change file type appearance on type="file"
   ::-webkit-file-upload-button {
     cursor: pointer;

package/es/components/input/style/themes/dnb-input-theme-sbanken.css

@@ -20,7 +20,7 @@
   --input-border-color--focus: var(--focus-ring-color);
 }
 .dnb-input__shell {
-  background-color: var(--color-white);
+  background-color: var(--input-background-color);
   transition: border-radius 0.25s ease-out;
   border: none;
   color: var(--input-color);

package/es/components/input/style/themes/dnb-input-theme-sbanken.min.css

@@ -1 +1 @@
-.dnb-input{--input-height:2.5rem;--input-button-border-color:var(--input-border-color);--input-button-border-width:var(--input-border-width);--input-border-radius:0.5rem;--input-border-width:0.0625rem;--input-color:var(--input-color--default);--input-color--default:var(--sb-color-text);--input-color--active:var(--sb-color-text);--input-border-color:var(--sb-color-gray-dark-2);--input-border-color--hover:var(--sb-color-violet);--input-border-color--active:var(--sb-color-violet);--input-border-color--focus:var(--focus-ring-color)}.dnb-input__shell{--border-color:var(--input-border-color);--border-width:var(--input-border-width);background-color:var(--color-white);border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--input-color);transition:border-radius .25s ease-out}.dnb-input__submit-button__button{--button-secondary-color:var(--sb-color-violet);--button-secondary-color--active:var(--sb-color-violet)}.dnb-input__placeholder{color:var(--sb-color-gray-dark-3)}.dnb-input[data-input-state=disabled]{--input-border-color:var(--sb-color-gray)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentcolor;background-color:var(--sb-color-gray-light)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder{color:var(--sb-color-gray-dark-2)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-color:var(--input-color--active);--input-border-radius:1.5rem;--input-border-color:var(--input-border-color--active)}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-button-border-color:var(--input-border-color--focus);--input-button-border-width:var(--focus-ring-width)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{outline:none}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{--border-color:var(--input-border-color--focus);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-input:not([data-input-state=disabled]) .dnb-form-label:hover+.dnb-input__inner .dnb-input__shell,.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover{--input-border-color:var(--input-border-color--hover);--input-border-width:0.125rem}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error{--input-border-color:var(--sb-color-red);--input-color--default:var(--sb-color-red);--input-color--active:var(--sb-color-text);--input-border-color--hover:var(--sb-color-red);--input-border-color--active:var(--sb-color-red);--input-border-color--focus:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button{--button-secondary-background--hover:var(--sb-color-red);--button-secondary-color--hover:var(--sb-color-white);--button-secondary-color--active:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible){background-color:transparent;box-shadow:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible){background-color:transparent;box-shadow:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}
+.dnb-input{--input-height:2.5rem;--input-button-border-color:var(--input-border-color);--input-button-border-width:var(--input-border-width);--input-border-radius:0.5rem;--input-border-width:0.0625rem;--input-color:var(--input-color--default);--input-color--default:var(--sb-color-text);--input-color--active:var(--sb-color-text);--input-border-color:var(--sb-color-gray-dark-2);--input-border-color--hover:var(--sb-color-violet);--input-border-color--active:var(--sb-color-violet);--input-border-color--focus:var(--focus-ring-color)}.dnb-input__shell{--border-color:var(--input-border-color);--border-width:var(--input-border-width);background-color:var(--input-background-color);border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--input-color);transition:border-radius .25s ease-out}.dnb-input__submit-button__button{--button-secondary-color:var(--sb-color-violet);--button-secondary-color--active:var(--sb-color-violet)}.dnb-input__placeholder{color:var(--sb-color-gray-dark-3)}.dnb-input[data-input-state=disabled]{--input-border-color:var(--sb-color-gray)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentcolor;background-color:var(--sb-color-gray-light)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-input__placeholder{color:var(--sb-color-gray-dark-2)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-color:var(--input-color--active);--input-border-radius:1.5rem;--input-border-color:var(--input-border-color--active)}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus]{--input-button-border-color:var(--input-border-color--focus);--input-button-border-width:var(--focus-ring-width)}.dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{outline:none}html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-input-state=focus] .dnb-input__shell{--border-color:var(--input-border-color--focus);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-input:not([data-input-state=disabled]) .dnb-form-label:hover+.dnb-input__inner .dnb-input__shell,.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover{--input-border-color:var(--input-border-color--hover);--input-border-width:0.125rem}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error{--input-border-color:var(--sb-color-red);--input-color--default:var(--sb-color-red);--input-color--active:var(--sb-color-text);--input-border-color--hover:var(--sb-color-red);--input-border-color--active:var(--sb-color-red);--input-border-color--focus:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]).dnb-input__status--error .dnb-input__submit-button__button{--button-secondary-background--hover:var(--sb-color-red);--button-secondary-color--hover:var(--sb-color-white);--button-secondary-color--active:var(--sb-color-red)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible){background-color:transparent;box-shadow:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible){background-color:transparent;box-shadow:none}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(.focus-visible):hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):active,.dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button:not(:focus-visible):hover{border:var(--input-button-border-width) solid var(--input-button-border-color);border-left:none;padding-left:var(--input-button-border-width)}

package/es/components/input/style/themes/dnb-input-theme-sbanken.scss

@@ -24,7 +24,7 @@
   --input-border-color--focus: var(--focus-ring-color);
 
   &__shell {
-    background-color: var(--color-white);
+    background-color: var(--input-background-color);
     transition: border-radius 0.25s ease-out;
     border: none;
     color: var(--input-color);

package/es/components/input/style/themes/dnb-input-theme-ui.css

@@ -6,6 +6,13 @@
  * Utilities
  */
 .dnb-input {
+  --input-border-color: var(--color-sea-green);
+  --input-border-color--hover: var(--color-sea-green);
+  --input-border-color--focus: var(--color-emerald-green);
+  --input-border-color--disabled: var(--color-black-55);
+  --input-border-radius: 0.25rem;
+  --input-border-width: 0.0625rem;
+  --input-border-width--focus: 0.125rem;
   color: var(--color-black);
 }
 .dnb-input__inner {
@@ -13,9 +20,9 @@
 }
 .dnb-input__shell {
   color: inherit;
-  background-color: var(--color-white);
+  background-color: var(--input-background-color);
   border: none;
-  --border-color: var(--color-sea-green);
+  --border-color: var(--input-border-color);
   --border-width: var(--input-border-width);
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
@@ -25,7 +32,7 @@
 }
 .dnb-input[data-input-state=disabled] .dnb-input__shell {
   -webkit-text-fill-color: currentcolor;
-  --border-color: var(--color-black-55);
+  --border-color: var(--input-border-color--disabled);
   --border-width: var(--input-border-width);
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
@@ -36,14 +43,14 @@
   color: var(--color-black-55);
 }
 .dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover, .dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell {
-  --border-color: var(--color-sea-green);
-  --border-width: 0.125rem;
+  --border-color: var(--input-border-color--hover);
+  --border-width: var(--input-border-width--focus);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-input[data-input-state=focus]:not([data-input-state=disabled]) .dnb-input__shell {
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
+  --border-color: var(--input-border-color--focus);
+  --border-width: var(--input-border-width--focus);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -58,7 +65,7 @@
 }
 .dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell, .dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover, .dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell {
   --border-color: var(--color-fire-red);
-  --border-width: 0.125rem;
+  --border-width: var(--input-border-width--focus);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }

package/es/components/input/style/themes/dnb-input-theme-ui.min.css

@@ -1 +1 @@
-.dnb-input{color:var(--color-black)}.dnb-input__inner{color:inherit}.dnb-input__shell{--border-color:var(--color-sea-green);--border-width:var(--input-border-width);background-color:var(--color-white);border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:inherit}.dnb-input__icon{color:var(--color-sea-green)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentcolor;--border-color:var(--color-black-55);--border-width:var(--input-border-width);background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon{color:var(--color-black-55)}.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-input[data-input-state=focus]:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-input__status--error.dnb-input:not([data-input-state=focus]) .dnb-input__shell{color:var(--color-fire-red)}.dnb-input__status--error.dnb-input:not([data-input-state=focus]):not(:hover) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell,.dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover:after{background-color:var(--color-fire-red)}html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus:active,html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover:active{color:var(--color-white)}.dnb-input__status--error .dnb-input__icon{color:var(--color-fire-red)}.dnb-input__input::selection{background-color:var(--color-mint-green);color:var(--color-black);text-shadow:none}.dnb-input__placeholder{color:var(--color-black-55)}.dnb-input[data-input-state=focus] .dnb-input__placeholder{display:none}.dnb-input--keep-placeholder[data-input-state=focus] .dnb-input__placeholder{color:var(--color-black-20);display:block}
+.dnb-input{--input-border-color:var(--color-sea-green);--input-border-color--hover:var(--color-sea-green);--input-border-color--focus:var(--color-emerald-green);--input-border-color--disabled:var(--color-black-55);--input-border-radius:0.25rem;--input-border-width:0.0625rem;--input-border-width--focus:0.125rem;color:var(--color-black)}.dnb-input__inner{color:inherit}.dnb-input__shell{--border-color:var(--input-border-color);--border-width:var(--input-border-width);background-color:var(--input-background-color);border:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:inherit}.dnb-input__icon{color:var(--color-sea-green)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentcolor;--border-color:var(--input-border-color--disabled);--border-width:var(--input-border-width);background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon{color:var(--color-black-55)}.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell{--border-color:var(--input-border-color--hover);--border-width:var(--input-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-input[data-input-state=focus]:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--input-border-color--focus);--border-width:var(--input-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-input__status--error.dnb-input:not([data-input-state=focus]) .dnb-input__shell{color:var(--color-fire-red)}.dnb-input__status--error.dnb-input:not([data-input-state=focus]):not(:hover) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell,.dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:var(--input-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover:after{background-color:var(--color-fire-red)}html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus:active,html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover:active{color:var(--color-white)}.dnb-input__status--error .dnb-input__icon{color:var(--color-fire-red)}.dnb-input__input::selection{background-color:var(--color-mint-green);color:var(--color-black);text-shadow:none}.dnb-input__placeholder{color:var(--color-black-55)}.dnb-input[data-input-state=focus] .dnb-input__placeholder{display:none}.dnb-input--keep-placeholder[data-input-state=focus] .dnb-input__placeholder{color:var(--color-black-20);display:block}

package/es/components/input/style/themes/dnb-input-theme-ui.scss

@@ -6,6 +6,15 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-input {
+  // Border
+  --input-border-color: var(--color-sea-green);
+  --input-border-color--hover: var(--color-sea-green);
+  --input-border-color--focus: var(--color-emerald-green);
+  --input-border-color--disabled: var(--color-black-55);
+  --input-border-radius: 0.25rem;
+  --input-border-width: 0.0625rem;
+  --input-border-width--focus: 0.125rem;
+
   color: var(--color-black);
 
   &__inner {
@@ -14,11 +23,11 @@
 
   &__shell {
     color: inherit;
-    background-color: var(--color-white);
+    background-color: var(--input-background-color);
     border: none;
 
     @include fakeBorder(
-      var(--color-sea-green),
+      var(--input-border-color),
       var(--input-border-width),
       inset
     );
@@ -37,7 +46,7 @@
     -webkit-text-fill-color: currentcolor;
 
     @include fakeBorder(
-      var(--color-black-55),
+      var(--input-border-color--disabled),
       var(--input-border-width),
       inset
     );
@@ -46,11 +55,17 @@
 
   &:not([data-input-state='disabled']) &__shell:hover,
   &:not([data-input-state='disabled']):hover &__shell {
-    @include fakeBorder(var(--color-sea-green), 0.125rem);
+    @include fakeBorder(
+      var(--input-border-color--hover),
+      var(--input-border-width--focus)
+    );
   }
 
   &[data-input-state='focus']:not([data-input-state='disabled']) &__shell {
-    @include fakeBorder(var(--color-emerald-green), 0.125rem);
+    @include fakeBorder(
+      var(--input-border-color--focus),
+      var(--input-border-width--focus)
+    );
   }
 
   // with status_state = "error"
@@ -64,7 +79,10 @@
   &__status--error#{&}[data-input-state='focus'] &__shell,
   &__status--error#{&}:not([data-input-state='disabled']) &__shell:hover,
   &__status--error#{&}:not([data-input-state='disabled']):hover &__shell {
-    @include fakeBorder(var(--color-fire-red), 0.125rem);
+    @include fakeBorder(
+      var(--color-fire-red),
+      var(--input-border-width--focus)
+    );
   }
 
   &__status--error &__submit-button {

package/es/components/input-masked/InputMaskedHooks.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import classnames from 'classnames';
 import { cleanNumber, getCurrencySymbol } from '../number-format/NumberUtils';
-import { isTrue, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { isTrue, dispatchCustomElementEvent, extendPropsWithContext } from '../../shared/component-helper';
 import { safeSetSelection } from './text-mask/createTextMaskInputElement';
 import TextMask from './TextMask';
 import createNumberMask from './addons/createNumberMask';
@@ -320,16 +320,16 @@ const useNumberMaskParams = () => {
     const thousandsSeparatorSymbol = handleThousandsSeparator(locale);
     const decimalSymbol = handleDecimalSeparator(locale);
     if (isTrue(as_number) || isTrue(as_percent)) {
-      number_mask = _objectSpread({
+      number_mask = extendPropsWithContext(number_mask, null, {
         decimalSymbol,
         thousandsSeparatorSymbol
-      }, number_mask);
+      });
     } else if (as_currency) {
-      currency_mask = _objectSpread({
+      currency_mask = extendPropsWithContext(currency_mask, null, {
         decimalSymbol,
         thousandsSeparatorSymbol,
         currency: getCurrencySymbol(locale, typeof as_currency === 'string' ? as_currency : null)
-      }, currency_mask);
+      });
     }
   }
   let maskParams = null;

package/es/components/input-masked/InputMaskedHooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputMaskedHooks.js","names":["React","classnames","cleanNumber","getCurrencySymbol","isTrue","dispatchCustomElementEvent","safeSetSelection","TextMask","createNumberMask","keycode","InputMaskedContext","isRequestingLocaleSupport","isRequestingNumberMask","correctNumberValue","handlePercentMask","handleCurrencyMask","handleNumberMask","correctCaretPosition","getInputModeFromMask","handleThousandsSeparator","handleDecimalSeparator","fromJSON","invisibleSpace","useFilteredProps","props","useContext","mask","number_mask","currency_mask","number_format","mask_options","as_currency","as_number","as_percent","locale","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","attributes","_objectWithoutProperties","_excluded","htmlAttributes","Object","freeze","useLocale","context","useLocalValue","maskParams","useNumberMaskParams","localValue","setLocalValue","useState","useEffect","value","useNumberMask","useMask","numberMask","useMaskParams","placeholder","showMask","placeholderChar","showGuide","keepCharPositions","useInputElement","inner_ref","isFn","refHook","useRef","ref","useLayoutEffect","current","inputElementRef","createElement","InputElement","params","innerRef","inputMode","_extends","inputRef","inputElement","guide","className","useEventMapping","callEvent","useCallEvent","onBeforeInput","event","onFocus","onBlur","onMouseUp","onKeyDown","onSubmit","onChange","on_focus","undefined","on_blur","on_key_down","on_submit","on_change","isNumberMask","decimalSeparators","isUnidentified","name","target","selStart","selectionStart","keyCode","which","data","disallowLeadingZeroes","replace","test","testValue","slice","length","preventDefault","decimalSymbol","hasDecimalSymbol","includes","allowedDecimals","decimalLimit","allowDecimal","charAtSelection","index","indexOf","thousandsSeparatorSymbol","num","prefix","suffix","decimalSeparator","thousandsSeparator","numberValue","Number","cleanedValue","String","charAt","result","selectall","_currency_mask","_objectSpread","currency"],"sources":["../../../../src/components/input-masked/InputMaskedHooks.js"],"sourcesContent":["/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  cleanNumber,\n  getCurrencySymbol,\n} from '../number-format/NumberUtils'\nimport {\n  isTrue,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { safeSetSelection } from './text-mask/createTextMaskInputElement'\n\nimport TextMask from './TextMask'\nimport createNumberMask from './addons/createNumberMask'\nimport keycode from 'keycode'\nimport InputMaskedContext from './InputMaskedContext'\n\nimport {\n  isRequestingLocaleSupport,\n  isRequestingNumberMask,\n  correctNumberValue,\n  handlePercentMask,\n  handleCurrencyMask,\n  handleNumberMask,\n  correctCaretPosition,\n  getInputModeFromMask,\n  handleThousandsSeparator,\n  handleDecimalSeparator,\n  fromJSON,\n  invisibleSpace,\n} from './InputMaskedUtils'\n\n/**\n * Takes all component properties and filters out all internal used properties\n *\n * @returns object {props, htmlAttributes}\n */\nexport const useFilteredProps = () => {\n  const { props } = React.useContext(InputMaskedContext)\n\n  const {\n    mask, // eslint-disable-line\n    number_mask, // eslint-disable-line\n    currency_mask, // eslint-disable-line\n    number_format, // eslint-disable-line\n    mask_options, // eslint-disable-line\n    as_currency, // eslint-disable-line\n    as_number, // eslint-disable-line\n    as_percent, // eslint-disable-line\n    locale, // eslint-disable-line\n    show_mask, // eslint-disable-line\n    show_guide, // eslint-disable-line\n    pipe, // eslint-disable-line\n    keep_char_positions, // eslint-disable-line\n    placeholder_char, // eslint-disable-line\n\n    // Get get rest of possible attributes\n    ...attributes\n  } = props\n\n  return { props, htmlAttributes: Object.freeze(attributes) }\n}\n\n/**\n * Returns locale from either component or context\n *\n * @returns string\n */\nexport const useLocale = () => {\n  const { props, context } = React.useContext(InputMaskedContext)\n\n  let { locale } = props\n  if (!locale && context?.locale) {\n    locale = context.locale\n  }\n\n  return locale\n}\n\n/**\n * Handle internal value state\n *\n * It handles both the value state given as a prop form outside,\n * along with the current written and internal value.\n *\n * @returns object with internal value state and state setter\n */\nexport const useLocalValue = () => {\n  const { props, context } = React.useContext(InputMaskedContext)\n  const maskParams = useNumberMaskParams() || {}\n  const locale = useLocale()\n\n  const [localValue, setLocalValue] = React.useState(() =>\n    correctNumberValue({\n      locale,\n      props,\n      maskParams,\n    })\n  )\n\n  /**\n   * Use an effect here, just;\n   * because when a property gets changed from outside\n   */\n  React.useEffect(() => {\n    const value = correctNumberValue({\n      localValue,\n      locale,\n      props,\n      maskParams,\n    })\n\n    setLocalValue(value)\n\n    // Do not set \"localValue\" and \"maskParams\" here\n  }, [props, context, locale]) // eslint-disable-line\n\n  return { localValue, setLocalValue }\n}\n\n/**\n * Create createNumberMask if number mask parameters exists\n *\n * @returns mask function\n */\nexport const useNumberMask = () => {\n  const maskParams = useNumberMaskParams()\n  const { props } = React.useContext(InputMaskedContext)\n\n  if (!maskParams || !isRequestingNumberMask(props)) {\n    return null\n  }\n\n  const mask = createNumberMask(maskParams)\n\n  mask.maskParams = maskParams\n\n  return mask\n}\n\n/**\n * Returns either internal mask or given property mask\n *\n * @returns mask function\n */\nexport const useMask = () => {\n  const { props } = React.useContext(InputMaskedContext)\n\n  const numberMask = useNumberMask()\n  if (numberMask) {\n    return numberMask\n  }\n\n  return props.mask\n}\n\n/**\n * Returns the final mask params\n *\n * @returns mask params\n */\nexport const useMaskParams = () => {\n  const { props } = React.useContext(InputMaskedContext)\n\n  const {\n    keep_char_positions,\n    show_guide,\n    show_mask,\n    placeholder_char,\n    placeholder,\n  } = props\n\n  const mask = useMask()\n  const maskParams = useNumberMaskParams() || {}\n\n  maskParams.showMask = !placeholder && isTrue(show_mask)\n\n  // Revalidated placeholder char to a zero width space\n  maskParams.placeholderChar = placeholder_char\n  if (typeof mask?.placeholderChar !== 'undefined') {\n    maskParams.placeholderChar = mask.placeholderChar\n  }\n  if (maskParams.placeholderChar === null) {\n    maskParams.placeholderChar = invisibleSpace\n  }\n\n  if (typeof mask?.showMask !== 'undefined') {\n    maskParams.showMask = mask.showMask\n  }\n\n  maskParams.showGuide = isTrue(show_guide)\n  maskParams.keepCharPositions = isTrue(keep_char_positions)\n\n  return maskParams\n}\n\n/**\n * Handle the TextMask dependency\n *\n * @returns React Element\n */\nexport const useInputElement = () => {\n  const { props } = React.useContext(InputMaskedContext)\n  const { pipe, inner_ref } = props\n\n  const mask = useMask()\n  const { showMask, showGuide, placeholderChar, keepCharPositions } =\n    useMaskParams()\n\n  const isFn = typeof inner_ref === 'function'\n  const refHook = React.useRef()\n  const ref = (!isFn && inner_ref) || refHook\n\n  React.useLayoutEffect(() => {\n    if (isFn) {\n      inner_ref?.(ref.current)\n    }\n  }, [ref.current])\n\n  // Create the actual input element\n  const inputElementRef = React.useRef(<input ref={ref} />)\n\n  const InputElement = (params, innerRef) => {\n    // Set ref for Eufemia input\n    innerRef.current = ref.current\n\n    // Set \"inputMode\"\n    if (!params.inputMode) {\n      params.inputMode = getInputModeFromMask(mask)\n    }\n\n    return (\n      <TextMask\n        inputRef={ref}\n        inputElement={inputElementRef.current}\n        pipe={pipe}\n        mask={mask || []}\n        showMask={showMask}\n        guide={showGuide}\n        keepCharPositions={keepCharPositions}\n        placeholderChar={placeholderChar}\n        {...params}\n        className={classnames(\n          params.className,\n          showMask &&\n            showGuide &&\n            placeholderChar &&\n            placeholderChar !== invisibleSpace &&\n            'dnb-input-masked--guide' // will use --font-family-monospace\n        )}\n      />\n    )\n  }\n  return InputElement\n}\n\n/**\n * Will map some events we need to map during typing\n *\n * @param {object} param0\n * @property {function} setLocalValue setState handler\n * @returns object of events to handle\n */\nexport const useEventMapping = ({ setLocalValue }) => {\n  const callEvent = useCallEvent({ setLocalValue })\n\n  return {\n    onBeforeInput: (event) => callEvent({ event }, 'on_before_input'),\n    onFocus: (params) => callEvent(params, 'on_focus'),\n    onBlur: (params) => callEvent(params, 'on_blur'),\n    onMouseUp: (event) => callEvent({ event }, 'on_mouse_up'),\n    onKeyDown: (params) => callEvent(params, 'on_key_down'),\n    onSubmit: (params) => callEvent(params, 'on_submit'),\n    onChange: (params) => callEvent(params, 'on_change'),\n\n    on_focus: undefined,\n    on_blur: undefined,\n    on_key_down: undefined,\n    on_submit: undefined,\n    on_change: undefined,\n  }\n}\n\n/**\n * Will map some events we need to map during typing\n *\n * @param {object} param0\n * @property {function} setLocalValue setState handler\n * @returns event handler function\n */\nconst useCallEvent = ({ setLocalValue }) => {\n  const { props } = React.useContext(InputMaskedContext)\n  const maskParams = useMaskParams()\n  const isNumberMask = useNumberMask()\n\n  // Source: https://en.wikipedia.org/wiki/Decimal_separator\n  const decimalSeparators = /[,.'·]/\n  let isUnidentified = false\n\n  const callEvent = ({ event, value }, name) => {\n    value = value || event.target.value\n    const selStart = event.target.selectionStart\n    let keyCode = keycode(event)\n\n    // Android issue: https://bugs.chromium.org/p/chromium/issues/detail?id=118639\n    if (\n      name === 'on_key_down' &&\n      (event.which === 229 || keyCode === undefined)\n    ) {\n      isUnidentified = true\n    }\n\n    // Android issue: https://bugs.chromium.org/p/chromium/issues/detail?id=118639\n    // so we use this solution instead\n    if (\n      isUnidentified &&\n      name === 'on_before_input' &&\n      typeof event?.data !== 'undefined'\n    ) {\n      name = 'on_key_down'\n      keyCode = event.data\n      isUnidentified = false\n    }\n\n    // Prevent entering a leading zero\n    if (\n      name === 'on_key_down' &&\n      !isUnidentified &&\n      maskParams?.disallowLeadingZeroes &&\n      (keyCode === '0' ||\n        keyCode === 'numpad 0' ||\n        (value.replace(/[^\\d]/g, '') === '' &&\n          decimalSeparators.test(keyCode)))\n    ) {\n      const testValue = (\n        value.slice(0, selStart) +\n        '0' +\n        value.slice(selStart + 1, value.length)\n      ).replace(/[^\\d]/g, '')\n\n      if (/^0/.test(testValue)) {\n        event.preventDefault()\n      }\n    }\n\n    if (\n      name === 'on_key_down' &&\n      isNumberMask &&\n      !isUnidentified &&\n      maskParams?.decimalSymbol\n    ) {\n      const hasDecimalSymbol = value.includes(maskParams.decimalSymbol)\n      const allowedDecimals =\n        maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false\n\n      if (!allowedDecimals && decimalSeparators.test(keyCode)) {\n        event.preventDefault()\n      }\n\n      const charAtSelection = value.slice(selStart, selStart + 1)\n\n      if (allowedDecimals) {\n        // if we have already a decimal ...\n        if (hasDecimalSymbol && decimalSeparators.test(keyCode)) {\n          // ... we set the cursor on after the decimalSeparators\n          if (decimalSeparators.test(charAtSelection)) {\n            const index = value.indexOf(maskParams.decimalSymbol)\n            if (index > -1) {\n              safeSetSelection(event.target, index + 1)\n            }\n          }\n\n          // ... we do not allow to type another\n          event.preventDefault()\n        }\n\n        // replace other decimal\n        else if (\n          !hasDecimalSymbol &&\n          keyCode !== maskParams.decimalSymbol &&\n          decimalSeparators.test(keyCode)\n        ) {\n          value = value.slice(0, selStart)\n          setLocalValue(value + maskParams.decimalSymbol)\n          event.target.value = value + maskParams.decimalSymbol\n          event.preventDefault()\n        }\n      }\n\n      // move cursor to right if key is delete and char at selection is thousand separator\n      if (\n        keyCode === 'delete' &&\n        charAtSelection === (maskParams.thousandsSeparatorSymbol || ' ')\n      ) {\n        safeSetSelection(event.target, selStart + 1)\n        event.preventDefault()\n      }\n    }\n\n    let num = cleanNumber(value, {\n      prefix: maskParams.prefix,\n      suffix: maskParams.suffix,\n      decimalSeparator: maskParams.decimalSymbol || ',',\n      thousandsSeparator: maskParams.thousandsSeparatorSymbol || ' ',\n    })\n\n    // We don't want to return NaN, so we set it to 0\n    if (num === '-') {\n      num = -0\n    }\n\n    const numberValue = Number(num)\n\n    // Return '' (empty string) when the user has entered something invalid\n    const cleanedValue =\n      numberValue === 0 && String(num).charAt(0) !== '0' ? '' : num\n\n    if (name === 'on_change' && numberValue === 0) {\n      correctCaretPosition(event.target, maskParams, props)\n    }\n\n    const result = dispatchCustomElementEvent(props, name, {\n      event,\n      value,\n      numberValue,\n      cleanedValue,\n    })\n\n    if (name === 'on_change') {\n      setLocalValue(value)\n    }\n\n    if (\n      (name === 'on_focus' || name === 'on_mouse_up') &&\n      !props.selectall\n    ) {\n      // Also correct here, because of additional click inside the field\n      correctCaretPosition(event.target, maskParams, props)\n    }\n\n    return result\n  }\n\n  return callEvent\n}\n\n/**\n * Returns number mask parameters if requested by the component properties\n *\n * @returns object of number mask parameter\n */\nconst useNumberMaskParams = () => {\n  const { props } = React.useContext(InputMaskedContext)\n  const locale = useLocale()\n\n  if (!isRequestingNumberMask(props)) {\n    return { ...fromJSON(props.mask_options) }\n  }\n\n  let { number_mask, currency_mask, mask_options } = props\n\n  const { as_number, as_percent, as_currency } = props\n\n  mask_options = fromJSON(mask_options)\n  number_mask = isTrue(number_mask) ? {} : fromJSON(number_mask)\n  currency_mask = isTrue(currency_mask)\n    ? {}\n    : fromJSON(currency_mask, {\n        currency: currency_mask,\n      })\n  if (!currency_mask?.currency) {\n    delete currency_mask.currency\n  }\n\n  if (isRequestingLocaleSupport(props)) {\n    const thousandsSeparatorSymbol = handleThousandsSeparator(locale)\n    const decimalSymbol = handleDecimalSeparator(locale)\n\n    if (isTrue(as_number) || isTrue(as_percent)) {\n      number_mask = {\n        decimalSymbol,\n        thousandsSeparatorSymbol,\n        ...number_mask,\n      }\n    } else if (as_currency) {\n      currency_mask = {\n        decimalSymbol,\n        thousandsSeparatorSymbol,\n        currency: getCurrencySymbol(\n          locale,\n          typeof as_currency === 'string' ? as_currency : null\n        ),\n        ...currency_mask,\n      }\n    }\n  }\n\n  let maskParams = null\n\n  if (number_mask) {\n    maskParams = handleNumberMask({\n      mask_options,\n      number_mask,\n    })\n\n    if (isTrue(as_percent)) {\n      maskParams = handlePercentMask({ props, locale, maskParams })\n    }\n  } else if (currency_mask) {\n    maskParams = handleCurrencyMask({\n      mask_options,\n      currency_mask,\n    })\n  }\n\n  return maskParams\n}\n"],"mappings":"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"}
+{"version":3,"file":"InputMaskedHooks.js","names":["React","classnames","cleanNumber","getCurrencySymbol","isTrue","dispatchCustomElementEvent","extendPropsWithContext","safeSetSelection","TextMask","createNumberMask","keycode","InputMaskedContext","isRequestingLocaleSupport","isRequestingNumberMask","correctNumberValue","handlePercentMask","handleCurrencyMask","handleNumberMask","correctCaretPosition","getInputModeFromMask","handleThousandsSeparator","handleDecimalSeparator","fromJSON","invisibleSpace","useFilteredProps","props","useContext","mask","number_mask","currency_mask","number_format","mask_options","as_currency","as_number","as_percent","locale","show_mask","show_guide","pipe","keep_char_positions","placeholder_char","attributes","_objectWithoutProperties","_excluded","htmlAttributes","Object","freeze","useLocale","context","useLocalValue","maskParams","useNumberMaskParams","localValue","setLocalValue","useState","useEffect","value","useNumberMask","useMask","numberMask","useMaskParams","placeholder","showMask","placeholderChar","showGuide","keepCharPositions","useInputElement","inner_ref","isFn","refHook","useRef","ref","useLayoutEffect","current","inputElementRef","createElement","InputElement","params","innerRef","inputMode","_extends","inputRef","inputElement","guide","className","useEventMapping","callEvent","useCallEvent","onBeforeInput","event","onFocus","onBlur","onMouseUp","onKeyDown","onSubmit","onChange","on_focus","undefined","on_blur","on_key_down","on_submit","on_change","isNumberMask","decimalSeparators","isUnidentified","name","target","selStart","selectionStart","keyCode","which","data","disallowLeadingZeroes","replace","test","testValue","slice","length","preventDefault","decimalSymbol","hasDecimalSymbol","includes","allowedDecimals","decimalLimit","allowDecimal","charAtSelection","index","indexOf","thousandsSeparatorSymbol","num","prefix","suffix","decimalSeparator","thousandsSeparator","numberValue","Number","cleanedValue","String","charAt","result","selectall","_currency_mask","_objectSpread","currency"],"sources":["../../../../src/components/input-masked/InputMaskedHooks.js"],"sourcesContent":["/**\n * Web InputMasked Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  cleanNumber,\n  getCurrencySymbol,\n} from '../number-format/NumberUtils'\nimport {\n  isTrue,\n  dispatchCustomElementEvent,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { safeSetSelection } from './text-mask/createTextMaskInputElement'\n\nimport TextMask from './TextMask'\nimport createNumberMask from './addons/createNumberMask'\nimport keycode from 'keycode'\nimport InputMaskedContext from './InputMaskedContext'\n\nimport {\n  isRequestingLocaleSupport,\n  isRequestingNumberMask,\n  correctNumberValue,\n  handlePercentMask,\n  handleCurrencyMask,\n  handleNumberMask,\n  correctCaretPosition,\n  getInputModeFromMask,\n  handleThousandsSeparator,\n  handleDecimalSeparator,\n  fromJSON,\n  invisibleSpace,\n} from './InputMaskedUtils'\n\n/**\n * Takes all component properties and filters out all internal used properties\n *\n * @returns object {props, htmlAttributes}\n */\nexport const useFilteredProps = () => {\n  const { props } = React.useContext(InputMaskedContext)\n\n  const {\n    mask, // eslint-disable-line\n    number_mask, // eslint-disable-line\n    currency_mask, // eslint-disable-line\n    number_format, // eslint-disable-line\n    mask_options, // eslint-disable-line\n    as_currency, // eslint-disable-line\n    as_number, // eslint-disable-line\n    as_percent, // eslint-disable-line\n    locale, // eslint-disable-line\n    show_mask, // eslint-disable-line\n    show_guide, // eslint-disable-line\n    pipe, // eslint-disable-line\n    keep_char_positions, // eslint-disable-line\n    placeholder_char, // eslint-disable-line\n\n    // Get get rest of possible attributes\n    ...attributes\n  } = props\n\n  return { props, htmlAttributes: Object.freeze(attributes) }\n}\n\n/**\n * Returns locale from either component or context\n *\n * @returns string\n */\nexport const useLocale = () => {\n  const { props, context } = React.useContext(InputMaskedContext)\n\n  let { locale } = props\n  if (!locale && context?.locale) {\n    locale = context.locale\n  }\n\n  return locale\n}\n\n/**\n * Handle internal value state\n *\n * It handles both the value state given as a prop form outside,\n * along with the current written and internal value.\n *\n * @returns object with internal value state and state setter\n */\nexport const useLocalValue = () => {\n  const { props, context } = React.useContext(InputMaskedContext)\n  const maskParams = useNumberMaskParams() || {}\n  const locale = useLocale()\n\n  const [localValue, setLocalValue] = React.useState(() =>\n    correctNumberValue({\n      locale,\n      props,\n      maskParams,\n    })\n  )\n\n  /**\n   * Use an effect here, just;\n   * because when a property gets changed from outside\n   */\n  React.useEffect(() => {\n    const value = correctNumberValue({\n      localValue,\n      locale,\n      props,\n      maskParams,\n    })\n\n    setLocalValue(value)\n\n    // Do not set \"localValue\" and \"maskParams\" here\n  }, [props, context, locale]) // eslint-disable-line\n\n  return { localValue, setLocalValue }\n}\n\n/**\n * Create createNumberMask if number mask parameters exists\n *\n * @returns mask function\n */\nexport const useNumberMask = () => {\n  const maskParams = useNumberMaskParams()\n  const { props } = React.useContext(InputMaskedContext)\n\n  if (!maskParams || !isRequestingNumberMask(props)) {\n    return null\n  }\n\n  const mask = createNumberMask(maskParams)\n\n  mask.maskParams = maskParams\n\n  return mask\n}\n\n/**\n * Returns either internal mask or given property mask\n *\n * @returns mask function\n */\nexport const useMask = () => {\n  const { props } = React.useContext(InputMaskedContext)\n\n  const numberMask = useNumberMask()\n  if (numberMask) {\n    return numberMask\n  }\n\n  return props.mask\n}\n\n/**\n * Returns the final mask params\n *\n * @returns mask params\n */\nexport const useMaskParams = () => {\n  const { props } = React.useContext(InputMaskedContext)\n\n  const {\n    keep_char_positions,\n    show_guide,\n    show_mask,\n    placeholder_char,\n    placeholder,\n  } = props\n\n  const mask = useMask()\n  const maskParams = useNumberMaskParams() || {}\n\n  maskParams.showMask = !placeholder && isTrue(show_mask)\n\n  // Revalidated placeholder char to a zero width space\n  maskParams.placeholderChar = placeholder_char\n  if (typeof mask?.placeholderChar !== 'undefined') {\n    maskParams.placeholderChar = mask.placeholderChar\n  }\n  if (maskParams.placeholderChar === null) {\n    maskParams.placeholderChar = invisibleSpace\n  }\n\n  if (typeof mask?.showMask !== 'undefined') {\n    maskParams.showMask = mask.showMask\n  }\n\n  maskParams.showGuide = isTrue(show_guide)\n  maskParams.keepCharPositions = isTrue(keep_char_positions)\n\n  return maskParams\n}\n\n/**\n * Handle the TextMask dependency\n *\n * @returns React Element\n */\nexport const useInputElement = () => {\n  const { props } = React.useContext(InputMaskedContext)\n  const { pipe, inner_ref } = props\n\n  const mask = useMask()\n  const { showMask, showGuide, placeholderChar, keepCharPositions } =\n    useMaskParams()\n\n  const isFn = typeof inner_ref === 'function'\n  const refHook = React.useRef()\n  const ref = (!isFn && inner_ref) || refHook\n\n  React.useLayoutEffect(() => {\n    if (isFn) {\n      inner_ref?.(ref.current)\n    }\n  }, [ref.current])\n\n  // Create the actual input element\n  const inputElementRef = React.useRef(<input ref={ref} />)\n\n  const InputElement = (params, innerRef) => {\n    // Set ref for Eufemia input\n    innerRef.current = ref.current\n\n    // Set \"inputMode\"\n    if (!params.inputMode) {\n      params.inputMode = getInputModeFromMask(mask)\n    }\n\n    return (\n      <TextMask\n        inputRef={ref}\n        inputElement={inputElementRef.current}\n        pipe={pipe}\n        mask={mask || []}\n        showMask={showMask}\n        guide={showGuide}\n        keepCharPositions={keepCharPositions}\n        placeholderChar={placeholderChar}\n        {...params}\n        className={classnames(\n          params.className,\n          showMask &&\n            showGuide &&\n            placeholderChar &&\n            placeholderChar !== invisibleSpace &&\n            'dnb-input-masked--guide' // will use --font-family-monospace\n        )}\n      />\n    )\n  }\n  return InputElement\n}\n\n/**\n * Will map some events we need to map during typing\n *\n * @param {object} param0\n * @property {function} setLocalValue setState handler\n * @returns object of events to handle\n */\nexport const useEventMapping = ({ setLocalValue }) => {\n  const callEvent = useCallEvent({ setLocalValue })\n\n  return {\n    onBeforeInput: (event) => callEvent({ event }, 'on_before_input'),\n    onFocus: (params) => callEvent(params, 'on_focus'),\n    onBlur: (params) => callEvent(params, 'on_blur'),\n    onMouseUp: (event) => callEvent({ event }, 'on_mouse_up'),\n    onKeyDown: (params) => callEvent(params, 'on_key_down'),\n    onSubmit: (params) => callEvent(params, 'on_submit'),\n    onChange: (params) => callEvent(params, 'on_change'),\n\n    on_focus: undefined,\n    on_blur: undefined,\n    on_key_down: undefined,\n    on_submit: undefined,\n    on_change: undefined,\n  }\n}\n\n/**\n * Will map some events we need to map during typing\n *\n * @param {object} param0\n * @property {function} setLocalValue setState handler\n * @returns event handler function\n */\nconst useCallEvent = ({ setLocalValue }) => {\n  const { props } = React.useContext(InputMaskedContext)\n  const maskParams = useMaskParams()\n  const isNumberMask = useNumberMask()\n\n  // Source: https://en.wikipedia.org/wiki/Decimal_separator\n  const decimalSeparators = /[,.'·]/\n  let isUnidentified = false\n\n  const callEvent = ({ event, value }, name) => {\n    value = value || event.target.value\n    const selStart = event.target.selectionStart\n    let keyCode = keycode(event)\n\n    // Android issue: https://bugs.chromium.org/p/chromium/issues/detail?id=118639\n    if (\n      name === 'on_key_down' &&\n      (event.which === 229 || keyCode === undefined)\n    ) {\n      isUnidentified = true\n    }\n\n    // Android issue: https://bugs.chromium.org/p/chromium/issues/detail?id=118639\n    // so we use this solution instead\n    if (\n      isUnidentified &&\n      name === 'on_before_input' &&\n      typeof event?.data !== 'undefined'\n    ) {\n      name = 'on_key_down'\n      keyCode = event.data\n      isUnidentified = false\n    }\n\n    // Prevent entering a leading zero\n    if (\n      name === 'on_key_down' &&\n      !isUnidentified &&\n      maskParams?.disallowLeadingZeroes &&\n      (keyCode === '0' ||\n        keyCode === 'numpad 0' ||\n        (value.replace(/[^\\d]/g, '') === '' &&\n          decimalSeparators.test(keyCode)))\n    ) {\n      const testValue = (\n        value.slice(0, selStart) +\n        '0' +\n        value.slice(selStart + 1, value.length)\n      ).replace(/[^\\d]/g, '')\n\n      if (/^0/.test(testValue)) {\n        event.preventDefault()\n      }\n    }\n\n    if (\n      name === 'on_key_down' &&\n      isNumberMask &&\n      !isUnidentified &&\n      maskParams?.decimalSymbol\n    ) {\n      const hasDecimalSymbol = value.includes(maskParams.decimalSymbol)\n      const allowedDecimals =\n        maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false\n\n      if (!allowedDecimals && decimalSeparators.test(keyCode)) {\n        event.preventDefault()\n      }\n\n      const charAtSelection = value.slice(selStart, selStart + 1)\n\n      if (allowedDecimals) {\n        // if we have already a decimal ...\n        if (hasDecimalSymbol && decimalSeparators.test(keyCode)) {\n          // ... we set the cursor on after the decimalSeparators\n          if (decimalSeparators.test(charAtSelection)) {\n            const index = value.indexOf(maskParams.decimalSymbol)\n            if (index > -1) {\n              safeSetSelection(event.target, index + 1)\n            }\n          }\n\n          // ... we do not allow to type another\n          event.preventDefault()\n        }\n\n        // replace other decimal\n        else if (\n          !hasDecimalSymbol &&\n          keyCode !== maskParams.decimalSymbol &&\n          decimalSeparators.test(keyCode)\n        ) {\n          value = value.slice(0, selStart)\n          setLocalValue(value + maskParams.decimalSymbol)\n          event.target.value = value + maskParams.decimalSymbol\n          event.preventDefault()\n        }\n      }\n\n      // move cursor to right if key is delete and char at selection is thousand separator\n      if (\n        keyCode === 'delete' &&\n        charAtSelection === (maskParams.thousandsSeparatorSymbol || ' ')\n      ) {\n        safeSetSelection(event.target, selStart + 1)\n        event.preventDefault()\n      }\n    }\n\n    let num = cleanNumber(value, {\n      prefix: maskParams.prefix,\n      suffix: maskParams.suffix,\n      decimalSeparator: maskParams.decimalSymbol || ',',\n      thousandsSeparator: maskParams.thousandsSeparatorSymbol || ' ',\n    })\n\n    // We don't want to return NaN, so we set it to 0\n    if (num === '-') {\n      num = -0\n    }\n\n    const numberValue = Number(num)\n\n    // Return '' (empty string) when the user has entered something invalid\n    const cleanedValue =\n      numberValue === 0 && String(num).charAt(0) !== '0' ? '' : num\n\n    if (name === 'on_change' && numberValue === 0) {\n      correctCaretPosition(event.target, maskParams, props)\n    }\n\n    const result = dispatchCustomElementEvent(props, name, {\n      event,\n      value,\n      numberValue,\n      cleanedValue,\n    })\n\n    if (name === 'on_change') {\n      setLocalValue(value)\n    }\n\n    if (\n      (name === 'on_focus' || name === 'on_mouse_up') &&\n      !props.selectall\n    ) {\n      // Also correct here, because of additional click inside the field\n      correctCaretPosition(event.target, maskParams, props)\n    }\n\n    return result\n  }\n\n  return callEvent\n}\n\n/**\n * Returns number mask parameters if requested by the component properties\n *\n * @returns object of number mask parameter\n */\nconst useNumberMaskParams = () => {\n  const { props } = React.useContext(InputMaskedContext)\n  const locale = useLocale()\n\n  if (!isRequestingNumberMask(props)) {\n    return { ...fromJSON(props.mask_options) }\n  }\n\n  let { number_mask, currency_mask, mask_options } = props\n\n  const { as_number, as_percent, as_currency } = props\n\n  mask_options = fromJSON(mask_options)\n  number_mask = isTrue(number_mask) ? {} : fromJSON(number_mask)\n  currency_mask = isTrue(currency_mask)\n    ? {}\n    : fromJSON(currency_mask, {\n        currency: currency_mask,\n      })\n  if (!currency_mask?.currency) {\n    delete currency_mask.currency\n  }\n\n  if (isRequestingLocaleSupport(props)) {\n    const thousandsSeparatorSymbol = handleThousandsSeparator(locale)\n    const decimalSymbol = handleDecimalSeparator(locale)\n\n    if (isTrue(as_number) || isTrue(as_percent)) {\n      number_mask = extendPropsWithContext(number_mask, null, {\n        decimalSymbol,\n        thousandsSeparatorSymbol,\n      })\n    } else if (as_currency) {\n      currency_mask = extendPropsWithContext(currency_mask, null, {\n        decimalSymbol,\n        thousandsSeparatorSymbol,\n        currency: getCurrencySymbol(\n          locale,\n          typeof as_currency === 'string' ? as_currency : null\n        ),\n      })\n    }\n  }\n\n  let maskParams = null\n\n  if (number_mask) {\n    maskParams = handleNumberMask({\n      mask_options,\n      number_mask,\n    })\n\n    if (isTrue(as_percent)) {\n      maskParams = handlePercentMask({ props, locale, maskParams })\n    }\n  } else if (currency_mask) {\n    maskParams = handleCurrencyMask({\n      mask_options,\n      currency_mask,\n    })\n  }\n\n  return maskParams\n}\n"],"mappings":"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"}

package/es/components/lib.d.ts

@@ -63,16 +63,19 @@ export { Accordion, Anchor, Autocomplete, Avatar, Badge, Breadcrumb, Button, Car
 export declare const getComponents: () => {
     Accordion: typeof Accordion;
     Anchor: import("react").ForwardRefExoticComponent<import("./anchor/Anchor").AnchorProps & Omit<import("react").HTMLProps<HTMLAnchorElement>, "ref"> & import("./space/types").SpacingElementProps & {
-        space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
+        space?: import("./space/types").SpaceTypeAll;
+        innerSpace?: import("./space/types").SpaceTypeAll | import("./space/types").SpaceTypeMedia;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
     Autocomplete: typeof Autocomplete;
     Avatar: {
         (localProps: import("./avatar/Avatar").AvatarProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceTypeAll;
+            innerSpace?: import("./space/types").SpaceTypeAll | import("./space/types").SpaceTypeMedia;
         }): import("react/jsx-runtime").JSX.Element;
         Group: {
             (localProps: import("./avatar/AvatarGroup").AvatarGroupProps & import("./space/types").SpacingElementProps & {
-                space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
+                space?: import("./space/types").SpaceTypeAll;
+                innerSpace?: import("./space/types").SpaceTypeAll | import("./space/types").SpaceTypeMedia;
             }): import("react/jsx-runtime").JSX.Element;
             _supportsSpacingProps: boolean;
         };
@@ -81,7 +84,8 @@ export declare const getComponents: () => {
     Badge: typeof Badge;
     Breadcrumb: {
         (localProps: import("./breadcrumb/Breadcrumb").BreadcrumbProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceTypeAll;
+            innerSpace?: import("./space/types").SpaceTypeAll | import("./space/types").SpaceTypeMedia;
         }): import("react/jsx-runtime").JSX.Element;
         Item: {
             (localProps: import("./breadcrumb/BreadcrumbItem").BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
@@ -140,11 +144,13 @@ export declare const getComponents: () => {
     Tabs: typeof Tabs;
     Tag: {
         (localProps: import("./tag/Tag").TagProps & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
+            space?: import("./space/types").SpaceTypeAll;
+            innerSpace?: import("./space/types").SpaceTypeAll | import("./space/types").SpaceTypeMedia;
         }): import("react/jsx-runtime").JSX.Element;
         Group: {
             (localProps: import("./tag/TagGroup").TagGroupProps & import("./space/types").SpacingElementProps & {
-                space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
+                space?: import("./space/types").SpaceTypeAll;
+                innerSpace?: import("./space/types").SpaceTypeAll | import("./space/types").SpaceTypeMedia;
             }): import("react/jsx-runtime").JSX.Element;
             _supportsSpacingProps: boolean;
         };

package/es/components/modal/parts/ModalInner.d.ts

@@ -5,12 +5,7 @@
 import React from 'react';
 import ModalContext from '../ModalContext';
 import { SectionProps } from '../../Section';
-export interface ModalInnerProps extends SectionProps {
-    /**
-     * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).
-     */
-    className?: string;
-}
+export type ModalInnerProps = SectionProps;
 export default class ModalInner extends React.PureComponent<ModalInnerProps & React.HTMLProps<HTMLElement>> {
     static contextType: React.Context<{
         preventClick: any;

package/es/components/modal/parts/ModalInner.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["className", "style_type", "ref"];
+const _excluded = ["className", "backgroundColor", "ref"];
 import React from 'react';
 import Section from '../../section/Section';
 import ModalContext from '../ModalContext';
@@ -13,22 +13,22 @@ export default class ModalInner extends React.PureComponent {
   }
   componentDidMount() {
     const {
-      style_type = 'black-3'
+      backgroundColor = 'black-3'
     } = this.props;
-    if (style_type) {
-      this.context.setBackgroundColor(style_type);
+    if (backgroundColor) {
+      this.context.setBackgroundColor(backgroundColor);
     }
   }
   render() {
     const _this$props = this.props,
       {
         className = null,
-        style_type = 'black-3',
+        backgroundColor = 'black-3',
         ref
       } = _this$props,
       props = _objectWithoutProperties(_this$props, _excluded);
     return React.createElement(Section, _extends({
-      style_type: style_type,
+      backgroundColor: backgroundColor,
       className: classnames(className)
     }, props));
   }

package/es/components/modal/parts/ModalInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalInner.js","names":["React","Section","ModalContext","classnames","ModalInner","PureComponent","constructor","args","_defineProperty","componentDidMount","style_type","props","context","setBackgroundColor","render","_this$props","className","ref","_objectWithoutProperties","_excluded","createElement","_extends"],"sources":["../../../../../src/components/modal/parts/ModalInner.tsx"],"sourcesContent":["/**\n * Web Modal Component\n *\n */\n\nimport React from 'react'\nimport Section from '../../section/Section'\nimport ModalContext from '../ModalContext'\nimport classnames from 'classnames'\nimport { SectionProps } from '../../Section'\n\nexport interface ModalInnerProps extends SectionProps {\n  /**\n   * Give the inner content wrapper a class name (maps to `dnb-modal__content__inner`).\n   */\n  className?: string\n}\n\nexport default class ModalInner extends React.PureComponent<\n  ModalInnerProps & React.HTMLProps<HTMLElement>\n> {\n  static contextType = ModalContext\n\n  context!: React.ContextType<typeof ModalContext>\n\n  componentDidMount() {\n    const { style_type = 'black-3' } = this.props\n    if (style_type) {\n      this.context.setBackgroundColor(style_type)\n    }\n  }\n\n  render() {\n    const {\n      className = null,\n      style_type = 'black-3',\n      ref, // eslint-disable-line\n      ...props\n    } = this.props\n\n    return (\n      <Section\n        style_type={style_type}\n        className={classnames(className)}\n        {...props}\n      />\n    )\n  }\n}\n"],"mappings":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,uBAAuB;AAC3C,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,UAAU,MAAM,YAAY;AAUnC,eAAe,MAAMC,UAAU,SAASJ,KAAK,CAACK,aAAa,CAEzD;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;EAAA;EAKAC,iBAAiBA,CAAA,EAAG;IAClB,MAAM;MAAEC,UAAU,GAAG;IAAU,CAAC,GAAG,IAAI,CAACC,KAAK;IAC7C,IAAID,UAAU,EAAE;MACd,IAAI,CAACE,OAAO,CAACC,kBAAkB,CAACH,UAAU,CAAC;IAC7C;EACF;EAEAI,MAAMA,CAAA,EAAG;IACP,MAAAC,WAAA,GAKI,IAAI,CAACJ,KAAK;MALR;QACJK,SAAS,GAAG,IAAI;QAChBN,UAAU,GAAG,SAAS;QACtBO;MAEF,CAAC,GAAAF,WAAA;MADIJ,KAAK,GAAAO,wBAAA,CAAAH,WAAA,EAAAI,SAAA;IAGV,OACEnB,KAAA,CAAAoB,aAAA,CAACnB,OAAO,EAAAoB,QAAA;MACNX,UAAU,EAAEA,UAAW;MACvBM,SAAS,EAAEb,UAAU,CAACa,SAAS;IAAE,GAC7BL,KAAK,CACV,CAAC;EAEN;AACF;AAACH,eAAA,CA9BoBJ,UAAU,iBAGRF,YAAY"}
+{"version":3,"file":"ModalInner.js","names":["React","Section","ModalContext","classnames","ModalInner","PureComponent","constructor","args","_defineProperty","componentDidMount","backgroundColor","props","context","setBackgroundColor","render","_this$props","className","ref","_objectWithoutProperties","_excluded","createElement","_extends"],"sources":["../../../../../src/components/modal/parts/ModalInner.tsx"],"sourcesContent":["/**\n * Web Modal Component\n *\n */\n\nimport React from 'react'\nimport Section from '../../section/Section'\nimport ModalContext from '../ModalContext'\nimport classnames from 'classnames'\nimport { SectionProps } from '../../Section'\n\nexport type ModalInnerProps = SectionProps\n\nexport default class ModalInner extends React.PureComponent<\n  ModalInnerProps & React.HTMLProps<HTMLElement>\n> {\n  static contextType = ModalContext\n\n  context!: React.ContextType<typeof ModalContext>\n\n  componentDidMount() {\n    const { backgroundColor = 'black-3' } = this.props\n    if (backgroundColor) {\n      this.context.setBackgroundColor(backgroundColor)\n    }\n  }\n\n  render() {\n    const {\n      className = null,\n      backgroundColor = 'black-3',\n      ref, // eslint-disable-line\n      ...props\n    } = this.props\n\n    return (\n      <Section\n        backgroundColor={backgroundColor}\n        className={classnames(className)}\n        {...props}\n      />\n    )\n  }\n}\n"],"mappings":";;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,uBAAuB;AAC3C,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,UAAU,MAAM,YAAY;AAKnC,eAAe,MAAMC,UAAU,SAASJ,KAAK,CAACK,aAAa,CAEzD;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;EAAA;EAKAC,iBAAiBA,CAAA,EAAG;IAClB,MAAM;MAAEC,eAAe,GAAG;IAAU,CAAC,GAAG,IAAI,CAACC,KAAK;IAClD,IAAID,eAAe,EAAE;MACnB,IAAI,CAACE,OAAO,CAACC,kBAAkB,CAACH,eAAe,CAAC;IAClD;EACF;EAEAI,MAAMA,CAAA,EAAG;IACP,MAAAC,WAAA,GAKI,IAAI,CAACJ,KAAK;MALR;QACJK,SAAS,GAAG,IAAI;QAChBN,eAAe,GAAG,SAAS;QAC3BO;MAEF,CAAC,GAAAF,WAAA;MADIJ,KAAK,GAAAO,wBAAA,CAAAH,WAAA,EAAAI,SAAA;IAGV,OACEnB,KAAA,CAAAoB,aAAA,CAACnB,OAAO,EAAAoB,QAAA;MACNX,eAAe,EAAEA,eAAgB;MACjCM,SAAS,EAAEb,UAAU,CAACa,SAAS;IAAE,GAC7BL,KAAK,CACV,CAAC;EAEN;AACF;AAACH,eAAA,CA9BoBJ,UAAU,iBAGRF,YAAY"}

package/es/components/number-format/NumberUtils.js

@@ -6,6 +6,7 @@ import Context from '../../shared/Context';
 import { LOCALE, CURRENCY, CURRENCY_DISPLAY } from '../../shared/defaults';
 import { warn, isTrue, slugify, escapeRegexChars } from '../../shared/component-helper';
 import { getOffsetTop, getOffsetLeft, getSelectedElement, copyToClipboard, IS_MAC, IS_WIN } from '../../shared/helpers';
+import locales from '../../shared/locales';
 const NUMBER_CHARS = '\\-0-9,.';
 export const format = (value, {
   locale = null,
@@ -201,6 +202,9 @@ export const format = (value, {
       const thousandsSeparator = getThousandsSeparator(locale);
       cleanedValue = String(display).replace(new RegExp(`${thousandsSeparator}(?=\\d{3})`, 'g'), '');
     }
+    if (value === 'invalid') {
+      aria = locales[locale].NumberFormat.not_available || 'N/A';
+    }
     return {
       value,
       cleanedValue,
@@ -265,9 +269,12 @@ const prepareMinus = (display, locale) => {
   if (!(locale && /(no|nb|nn)$/i.test(locale))) {
     return display;
   }
-  const reg = '^(-|−|‐|‒|–|—|―)';
   const first = display[0];
   const second = display[1];
+  if (first === '-' && second === '-') {
+    return display;
+  }
+  const reg = '^(-|−|‐|‒|–|—|―)';
   if (new RegExp(reg).test(first)) {
     if (parseFloat(second) > 0) {
       display = display.replace(new RegExp(reg + '(.*)'), '-$2');
@@ -294,21 +301,24 @@ export const formatNumber = (number, locale, options = {}, formatter = null) =>
       formatter = getGroupFormatter(locale, null, formatter);
     }
     if (formatter) {
-      return formatToParts({
+      return replaceNaNWithDash(formatToParts({
         number,
         locale,
         options
       }).map(formatter).reduce((acc, {
         value
-      }) => acc + value, '');
+      }) => acc + value, ''));
     } else if (typeof Number !== 'undefined' && typeof Number.toLocaleString === 'function') {
-      return parseFloat(number).toLocaleString(locale, options);
+      return replaceNaNWithDash(parseFloat(number).toLocaleString(locale, options));
     }
   } catch (e) {
     warn(`Number could not be formatted: ${JSON.stringify([number, locale, options])}`, e);
   }
-  return number;
+  return replaceNaNWithDash(number);
 };
+function replaceNaNWithDash(number) {
+  return String(number).replace(/NaN/, '–');
+}
 export const formatPhone = (number, locale = null) => {
   let display = number;
   let aria = null;