@dnb/eufemia 10.6.0 → 10.7.0

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

@@ -1 +1 @@
-.dnb-section--divider{color:var(--color-black-80)}.dnb-section--divider:after{box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);color:var(--color-white)}.dnb-section--transparent:after{color:transparent}.dnb-section--mint-green-12{color:var(--color-black-80)}.dnb-section--mint-green-12:after{color:var(--color-mint-green-12)}.dnb-section--white{color:var(--color-black-80)}.dnb-section--white:after{color:var(--color-white)}.dnb-section--mint-green{color:var(--color-black-80)}.dnb-section--mint-green:after{color:var(--color-mint-green)}.dnb-section--lavender{color:var(--color-black-80)}.dnb-section--lavender:after{color:var(--color-lavender)}.dnb-section--sand-yellow{color:var(--color-black-80)}.dnb-section--sand-yellow:after{color:var(--color-sand-yellow)}.dnb-section--pistachio{color:var(--color-black-80)}.dnb-section--pistachio:after{color:var(--color-pistachio)}.dnb-section--black-3{color:var(--color-black-80)}.dnb-section--black-3:after{color:var(--color-black-3)}.dnb-section--emerald-green{color:var(--color-mint-green)}.dnb-section--emerald-green:after{color:var(--color-emerald-green)}.dnb-section--sea-green{color:var(--color-white)}.dnb-section--sea-green:after{color:var(--color-sea-green)}.dnb-section--fire-red{color:var(--color-white)}.dnb-section--fire-red:after{color:var(--color-fire-red)}.dnb-section--fire-red-8{color:var(--color-black-80)}.dnb-section--fire-red-8:after{color:var(--color-fire-red-8)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor.focus-visible,.dnb-section--fire-red .dnb-anchor.focus-visible,.dnb-section--sea-green .dnb-anchor.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}
+.dnb-section--divider{color:var(--color-black-80)}.dnb-section--divider:after{box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor,0 .0625rem 0 0 var(--color-mint-green-50),99vw .0625rem 0 0 var(--color-mint-green-50),0 -.0625rem 0 0 var(--color-mint-green-50),99vw -.0625rem 0 0 var(--color-mint-green-50),198vw .0625rem 0 0 var(--color-mint-green-50),198vw -.0625rem 0 0 var(--color-mint-green-50);color:var(--color-white)}.dnb-section--transparent:after{color:transparent}.dnb-section--default,.dnb-section--mint-green-12{color:var(--color-black-80)}.dnb-section--default:after,.dnb-section--mint-green-12:after{color:var(--color-mint-green-12)}.dnb-section--white{color:var(--color-black-80)}.dnb-section--white:after{color:var(--color-white)}.dnb-section--mint-green{color:var(--color-black-80)}.dnb-section--mint-green:after{color:var(--color-mint-green)}.dnb-section--lavender{color:var(--color-black-80)}.dnb-section--lavender:after{color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{color:var(--color-black-80)}.dnb-section--sand-yellow:after,.dnb-section--warning:after{color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{color:var(--color-black-80)}.dnb-section--info:after,.dnb-section--pistachio:after{color:var(--color-pistachio)}.dnb-section--black-3{color:var(--color-black-80)}.dnb-section--black-3:after{color:var(--color-black-3)}.dnb-section--emerald-green{color:var(--color-mint-green)}.dnb-section--emerald-green:after{color:var(--color-emerald-green)}.dnb-section--sea-green{color:var(--color-white)}.dnb-section--sea-green:after{color:var(--color-sea-green)}.dnb-section--fire-red{color:var(--color-white)}.dnb-section--fire-red:after{color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{color:var(--color-black-80)}.dnb-section--error:after,.dnb-section--fire-red-8:after{color:var(--color-fire-red-8)}.dnb-section--success{color:var(--color-white)}.dnb-section--success:after{color:var(--color-success-green)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor,.dnb-section--success .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover,.dnb-section--fire-red .dnb-anchor:hover,.dnb-section--sea-green .dnb-anchor:hover,.dnb-section--success .dnb-anchor:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--color-emerald-green)}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--success .dnb-anchor:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor.focus-visible,.dnb-section--fire-red .dnb-anchor.focus-visible,.dnb-section--sea-green .dnb-anchor.focus-visible,.dnb-section--success .dnb-anchor.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible,.dnb-section--success .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}

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

@@ -28,7 +28,7 @@
     }
   }
 
-  &--mint-green-12 {
+  &--mint-green-12, &--default {
     color: var(--color-black-80);
 
     &::after {
@@ -60,7 +60,7 @@
     }
   }
 
-  &--sand-yellow {
+  &--sand-yellow, &--warning {
     color: var(--color-black-80);
 
     &::after {
@@ -68,7 +68,7 @@
     }
   }
 
-  &--pistachio {
+  &--pistachio, &--info {
     color: var(--color-black-80);
 
     &::after {
@@ -108,7 +108,7 @@
     }
   }
 
-  &--fire-red-8 {
+  &--fire-red-8, &--error {
     color: var(--color-black-80);
 
     &::after {
@@ -116,10 +116,19 @@
     }
   }
 
+  &--success {
+    color: var(--color-white);
+
+    &::after {
+      color: var(--color-success-green);
+    }
+  }
+
   // Contrast styles
   &--fire-red .dnb-anchor,
   &--emerald-green .dnb-anchor,
-  &--sea-green .dnb-anchor {
+  &--sea-green .dnb-anchor,
+  &--success .dnb-anchor {
     @include useAnchorContrastStyle();
   }
 

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

@@ -5,6 +5,10 @@
 /*
  * Utilities
  */
+/*
+* Button mixins
+*
+*/
 /*
  * Utilities
  */
@@ -50,19 +54,64 @@ html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortab
   color: var(--sb-color-violet);
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
-  top: -0.1875rem;
-  bottom: -0.0625rem;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: -0.5rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+}
+html[data-whatinput=mouse] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
   left: -0.5rem;
-  right: -0.25rem;
+  bottom: 0;
+  right: -0.5rem;
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+}
+html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  top: -0.375rem;
+  bottom: -0.25rem;
+  left: -0.6875rem;
+  right: -0.4375rem;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
   cursor: not-allowed;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
-  top: -0.1875rem;
-  bottom: -0.0625rem;
-  left: -0.5rem;
-  right: -0.25rem;
+  top: -0.375rem;
+  bottom: -0.25rem;
+  left: -0.6875rem;
+  right: -0.4375rem;
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible {
+  color: var(--sb-color-blue-dark);
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible {
+  color: var(--sb-color-blue-dark);
+}
+.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after {
+  visibility: hidden;
 }
 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
   cursor: not-allowed;

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

@@ -1 +1 @@
-.dnb-table{text-align:left}.dnb-table thead{border-bottom:var(--border)}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.0625rem;left:-.5rem;right:-.25rem;top:-.1875rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.0625rem;left:-.5rem;right:-.25rem;top:-.1875rem}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--border-width:0.0625rem;--outline-width:0.0625rem;--border:var(--border-width) solid var(--sb-color-gray-light-2);--outline:var(--outline-width) solid var(--sb-color-gray-light-2);background-color:var(--sb-color-white)}
+.dnb-table{text-align:left}.dnb-table thead{border-bottom:var(--border)}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);padding:.5rem 1.5rem .25rem}.dnb-table .dnb-table__tr--even{background-color:var(--sb-color-gray-light-3)}.dnb-table tbody .dnb-table__th,.dnb-table tbody td,.dnb-table tbody th,.dnb-table__td{padding:1rem 1.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button{color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text:after{bottom:-.0625rem;color:var(--sb-color-violet);left:0;opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text:after{color:var(--sb-color-violet)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]){color:var(--sb-color-violet)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]){color:var(--sb-color-violet)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):before{bottom:-.25rem;left:-.6875rem;right:-.4375rem;top:-.375rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]).focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):focus-visible{color:var(--sb-color-blue-dark)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-table,.dnb-table__container{--border-width:0.0625rem;--outline-width:0.0625rem;--border:var(--border-width) solid var(--sb-color-gray-light-2);--outline:var(--outline-width) solid var(--sb-color-gray-light-2);background-color:var(--sb-color-white)}

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

@@ -4,14 +4,15 @@
 */
 
 @import '../../../../style/core/utilities.scss';
+@import '../../../button/style/themes/button-mixins.scss';
 @import '../table-mixins.scss';
 
 @mixin tableFocusRing() {
   &::before {
-    top: -0.1875rem;
-    bottom: -0.0625rem;
-    left: -0.5rem;
-    right: -0.25rem;
+    top: -0.375rem;
+    bottom: -0.25rem;
+    left: -0.6875rem;
+    right: -0.4375rem;
   }
 }
 
@@ -60,10 +61,25 @@
       }
       @include active() {
         color: var(--sb-color-violet);
+        @include buttonFocusRing(
+          'mouse',
+          inset
+        ); // also, make a mouse ring
+        @include buttonFocusRing(
+          'touch',
+          inset
+        ); // also, make a touch ring
         @include tableFocusRing();
       }
       @include focus() {
         @include tableFocusRing();
+        &:focus-visible {
+          color: var(--sb-color-blue-dark);
+        }
+
+        &:not(:active) .dnb-button__text::after {
+          visibility: hidden;
+        }
       }
     }
   }
@@ -92,4 +108,4 @@
   --outline: var(--outline-width) solid var(--sb-color-gray-light-2);
 
   background-color: var(--sb-color-white);
-}
+}

package/es/extensions/forms/DataContext/Provider.js

@@ -19,14 +19,14 @@ export default function Provider({
   children
 }) {
   const ajvSchemaValidator = useMemo(() => schema ? ajv.compile(schema) : undefined, [schema]);
-  const internalData = useRef(externalData);
+  const [internalData, setInternalData] = useState(externalData);
   const mountedFieldPathsRef = useRef([]);
   const errorsRef = useRef({});
   const [showAllErrors, setShowAllErrors] = useState(false);
   const pathsWithErrorRef = useRef([]);
   const hasErrors = useCallback(() => Boolean(mountedFieldPathsRef.current.find(mountedFieldPath => errorsRef.current[mountedFieldPath] !== undefined || pathsWithErrorRef.current.includes(mountedFieldPath))), []);
   useEffect(() => {
-    internalData.current = externalData;
+    setInternalData(externalData);
   }, [externalData]);
   const validateBySchema = useCallback(data => {
     if (!ajvSchemaValidator) {
@@ -47,15 +47,15 @@ export default function Provider({
   }, []);
   const handlePathChange = useCallback((path, value) => {
     onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
-    const newData = structuredClone(internalData.current);
+    const newData = structuredClone(internalData);
     if (path) {
       pointer.set(newData, path, value);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(newData);
     validateBySchemaAndUpdateState(newData);
-    internalData.current = newData;
+    setInternalData(newData);
     setShowAllErrors(false);
-  }, [onChange, onPathChange, validateBySchemaAndUpdateState]);
+  }, [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]);
   const handleMountField = useCallback(path => {
     mountedFieldPathsRef.current = addListPath(mountedFieldPathsRef.current, path);
   }, []);
@@ -64,7 +64,7 @@ export default function Provider({
   }, []);
   const handleSubmit = useCallback(() => {
     if (!hasErrors()) {
-      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData.current);
+      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(internalData);
       if (scrollTopOnSubmit) {
         var _window;
         window && ((_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
@@ -76,8 +76,8 @@ export default function Provider({
       setShowAllErrors(true);
       onSubmitRequest === null || onSubmitRequest === void 0 ? void 0 : onSubmitRequest();
     }
-    return internalData.current;
-  }, [scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest]);
+    return internalData;
+  }, [internalData, scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest]);
   useEffect(() => {
     if (externalData) {
       validateBySchemaAndUpdateState(externalData);
@@ -85,7 +85,7 @@ export default function Provider({
   }, []);
   return React.createElement(Context.Provider, {
     value: {
-      data: internalData.current,
+      data: internalData,
       handlePathChange,
       handleSubmit,
       errors: errorsRef.current,

package/es/extensions/forms/DataContext/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","names":["React","useEffect","useRef","useMemo","useCallback","useState","pointer","ajv","ajvErrorsToFormErrors","Context","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","Provider","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","compile","undefined","internalData","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","Boolean","current","find","mountedFieldPath","validateBySchema","errors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","structuredClone","set","handleMountField","handleUnMountField","handleSubmit","_window","window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../src/extensions/forms/DataContext/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useState,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport ajv, { ajvErrorsToFormErrors } from '../utils/ajv'\nimport { FormError } from '../types'\nimport Context from './Context'\n\nexport interface Props<Data extends JsonObject> {\n  data: Partial<Data>\n  /** JSON Schema for validating the data, like during input or after attempting submit */\n  schema?: JSONSchema7\n  /** Change handler for the whole data set */\n  onChange?: (data: Data) => void\n  /** Change handler for each value  */\n  onPathChange?: (path: string, value: any) => void\n  /** Submit called, data was valid (if validation available) */\n  onSubmit?: (data: Data) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\n  children: React.ReactNode\n}\n\ntype PathList = string[]\n\nfunction addListPath(paths: PathList, path: string): PathList {\n  return paths.includes(path) ? paths : paths.concat(path)\n}\n\nfunction removeListPath(paths: PathList, path: string): PathList {\n  return paths.filter((thisPath) => thisPath !== path)\n}\n\nexport default function Provider<Data extends JsonObject>({\n  data: externalData,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  children,\n}: Props<Data>) {\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const internalData = useRef<Partial<Data>>(externalData)\n  const mountedFieldPathsRef = useRef<string[]>([])\n\n  // Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError>>({})\n  const [showAllErrors, setShowAllErrors] = useState<boolean>(false)\n  // Errors reported by fields, based on their direct validation rules\n  const pathsWithErrorRef = useRef<string[]>([])\n\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current[mountedFieldPath] !== undefined ||\n            pathsWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  useEffect(() => {\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    internalData.current = externalData\n  }, [externalData])\n\n  const validateBySchema = useCallback(\n    (data: Partial<Data>): Record<string, Error> | undefined => {\n      if (!ajvSchemaValidator) {\n        // No schema-based validator. Assume data is valid.\n        return\n      }\n\n      if (!ajvSchemaValidator(data)) {\n        // Errors found\n        const errors = ajvErrorsToFormErrors(ajvSchemaValidator.errors)\n        return errors\n      } else {\n        return\n      }\n    },\n    [ajvSchemaValidator]\n  )\n\n  const validateBySchemaAndUpdateState = useCallback(\n    (data: Partial<Data>) => {\n      errorsRef.current = validateBySchema(data) ?? {}\n    },\n    [validateBySchema]\n  )\n\n  const setPathWithError = useCallback(\n    (path: string, hasError: boolean) => {\n      pathsWithErrorRef.current = hasError\n        ? addListPath(pathsWithErrorRef.current, path)\n        : removeListPath(pathsWithErrorRef.current, path)\n    },\n    []\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      onPathChange?.(path, value)\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(internalData.current) as Data\n      if (path) {\n        pointer.set(newData, path, value)\n      }\n      onChange?.(newData)\n\n      validateBySchemaAndUpdateState(newData)\n\n      internalData.current = newData\n\n      setShowAllErrors(false)\n    },\n    [onChange, onPathChange, validateBySchemaAndUpdateState]\n  )\n\n  // Mounted fields\n  const handleMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = addListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  const handleUnMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = removeListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  /**\n   * Request to submit the whole form\n   */\n  const handleSubmit = useCallback(() => {\n    if (!hasErrors()) {\n      onSubmit?.(internalData.current as Data)\n      if (scrollTopOnSubmit) {\n        window && window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      setShowAllErrors(true)\n      onSubmitRequest?.()\n    }\n    return internalData.current\n  }, [scrollTopOnSubmit, hasErrors, onSubmit, onSubmitRequest])\n\n  useEffect(() => {\n    // Mount procedure\n    if (externalData) {\n      // Validate the initial data to know if the user can submit, and to show errors if inputs are requested to with props\n      validateBySchemaAndUpdateState(externalData)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalData.current,\n        handlePathChange,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setPathWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,SAAS,EACTC,MAAM,EACNC,OAAO,EACPC,WAAW,EACXC,QAAQ,QACH,OAAO;AACd,OAAOC,OAAO,MAAsB,cAAc;AAElD,OAAOC,GAAG,IAAIC,qBAAqB,QAAQ,cAAc;AAEzD,OAAOC,OAAO,MAAM,WAAW;AAoB/B,SAASC,WAAWA,CAACC,KAAe,EAAEC,IAAY,EAAY;EAC5D,OAAOD,KAAK,CAACE,QAAQ,CAACD,IAAI,CAAC,GAAGD,KAAK,GAAGA,KAAK,CAACG,MAAM,CAACF,IAAI,CAAC;AAC1D;AAEA,SAASG,cAAcA,CAACJ,KAAe,EAAEC,IAAY,EAAY;EAC/D,OAAOD,KAAK,CAACK,MAAM,CAAEC,QAAQ,IAAKA,QAAQ,KAAKL,IAAI,CAAC;AACtD;AAEA,eAAe,SAASM,QAAQA,CAA0B;EACxDC,IAAI,EAAEC,YAAY;EAClBC,MAAM;EACNC,QAAQ;EACRC,YAAY;EACZC,QAAQ;EACRC,eAAe;EACfC,iBAAiB;EACjBC;AACW,CAAC,EAAE;EACd,MAAMC,kBAAkB,GAAGzB,OAAO,CAChC,MAAOkB,MAAM,GAAGd,GAAG,CAACsB,OAAO,CAACR,MAAM,CAAC,GAAGS,SAAU,EAChD,CAACT,MAAM,CACT,CAAC;EACD,MAAMU,YAAY,GAAG7B,MAAM,CAAgBkB,YAAY,CAAC;EACxD,MAAMY,oBAAoB,GAAG9B,MAAM,CAAW,EAAE,CAAC;EAGjD,MAAM+B,SAAS,GAAG/B,MAAM,CAA4B,CAAC,CAAC,CAAC;EACvD,MAAM,CAACgC,aAAa,EAAEC,gBAAgB,CAAC,GAAG9B,QAAQ,CAAU,KAAK,CAAC;EAElE,MAAM+B,iBAAiB,GAAGlC,MAAM,CAAW,EAAE,CAAC;EAE9C,MAAMmC,SAAS,GAAGjC,WAAW,CAC3B,MACEkC,OAAO,CACLN,oBAAoB,CAACO,OAAO,CAACC,IAAI,CAC9BC,gBAAgB,IACfR,SAAS,CAACM,OAAO,CAACE,gBAAgB,CAAC,KAAKX,SAAS,IACjDM,iBAAiB,CAACG,OAAO,CAAC1B,QAAQ,CAAC4B,gBAAgB,CACvD,CACF,CAAC,EACH,EACF,CAAC;EAEDxC,SAAS,CAAC,MAAM;IAEd8B,YAAY,CAACQ,OAAO,GAAGnB,YAAY;EACrC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMsB,gBAAgB,GAAGtC,WAAW,CACjCe,IAAmB,IAAwC;IAC1D,IAAI,CAACS,kBAAkB,EAAE;MAEvB;IACF;IAEA,IAAI,CAACA,kBAAkB,CAACT,IAAI,CAAC,EAAE;MAE7B,MAAMwB,MAAM,GAAGnC,qBAAqB,CAACoB,kBAAkB,CAACe,MAAM,CAAC;MAC/D,OAAOA,MAAM;IACf,CAAC,MAAM;MACL;IACF;EACF,CAAC,EACD,CAACf,kBAAkB,CACrB,CAAC;EAED,MAAMgB,8BAA8B,GAAGxC,WAAW,CAC/Ce,IAAmB,IAAK;IACvBc,SAAS,CAACM,OAAO,GAAGG,gBAAgB,CAACvB,IAAI,CAAC,IAAI,CAAC,CAAC;EAClD,CAAC,EACD,CAACuB,gBAAgB,CACnB,CAAC;EAED,MAAMG,gBAAgB,GAAGzC,WAAW,CAClC,CAACQ,IAAY,EAAEkC,QAAiB,KAAK;IACnCV,iBAAiB,CAACG,OAAO,GAAGO,QAAQ,GAChCpC,WAAW,CAAC0B,iBAAiB,CAACG,OAAO,EAAE3B,IAAI,CAAC,GAC5CG,cAAc,CAACqB,iBAAiB,CAACG,OAAO,EAAE3B,IAAI,CAAC;EACrD,CAAC,EACD,EACF,CAAC;EAED,MAAMmC,gBAAgB,GAAG3C,WAAW,CAClC,CAACQ,IAAI,EAAEoC,KAAK,KAAK;IACfzB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGX,IAAI,EAAEoC,KAAK,CAAC;IAE3B,MAAMC,OAAO,GAAGC,eAAe,CAACnB,YAAY,CAACQ,OAAO,CAAS;IAC7D,IAAI3B,IAAI,EAAE;MACRN,OAAO,CAAC6C,GAAG,CAACF,OAAO,EAAErC,IAAI,EAAEoC,KAAK,CAAC;IACnC;IACA1B,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG2B,OAAO,CAAC;IAEnBL,8BAA8B,CAACK,OAAO,CAAC;IAEvClB,YAAY,CAACQ,OAAO,GAAGU,OAAO;IAE9Bd,gBAAgB,CAAC,KAAK,CAAC;EACzB,CAAC,EACD,CAACb,QAAQ,EAAEC,YAAY,EAAEqB,8BAA8B,CACzD,CAAC;EAGD,MAAMQ,gBAAgB,GAAGhD,WAAW,CAAEQ,IAAY,IAAK;IACrDoB,oBAAoB,CAACO,OAAO,GAAG7B,WAAW,CACxCsB,oBAAoB,CAACO,OAAO,EAC5B3B,IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMyC,kBAAkB,GAAGjD,WAAW,CAAEQ,IAAY,IAAK;IACvDoB,oBAAoB,CAACO,OAAO,GAAGxB,cAAc,CAC3CiB,oBAAoB,CAACO,OAAO,EAC5B3B,IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAKN,MAAM0C,YAAY,GAAGlD,WAAW,CAAC,MAAM;IACrC,IAAI,CAACiC,SAAS,CAAC,CAAC,EAAE;MAChBb,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGO,YAAY,CAACQ,OAAe,CAAC;MACxC,IAAIb,iBAAiB,EAAE;QAAA,IAAA6B,OAAA;QACrBC,MAAM,MAAAD,OAAA,GAAIC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,QAAQ,CAAC;UAAEC,GAAG,EAAE,CAAC;UAAEC,QAAQ,EAAE;QAAS,CAAC,CAAC;MAC5D;IACF,CAAC,MAAM;MACLxB,gBAAgB,CAAC,IAAI,CAAC;MACtBV,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAG,CAAC;IACrB;IACA,OAAOM,YAAY,CAACQ,OAAO;EAC7B,CAAC,EAAE,CAACb,iBAAiB,EAAEW,SAAS,EAAEb,QAAQ,EAAEC,eAAe,CAAC,CAAC;EAE7DxB,SAAS,CAAC,MAAM;IAEd,IAAImB,YAAY,EAAE;MAEhBwB,8BAA8B,CAACxB,YAAY,CAAC;IAC9C;EAEF,CAAC,EAAE,EAAE,CAAC;EAEN,OACEpB,KAAA,CAAA4D,aAAA,CAACnD,OAAO,CAACS,QAAQ;IACf8B,KAAK,EAAE;MACL7B,IAAI,EAAEY,YAAY,CAACQ,OAAO;MAC1BQ,gBAAgB;MAChBO,YAAY;MACZX,MAAM,EAAEV,SAAS,CAACM,OAAO;MACzBL,aAAa;MACbC,gBAAgB;MAChB0B,iBAAiB,EAAE7B,oBAAoB,CAACO,OAAO;MAC/Ca,gBAAgB;MAChBC,kBAAkB;MAClBhB,SAAS;MACTQ;IACF;EAAE,GAEDlB,QACe,CAAC;AAEvB"}
+{"version":3,"file":"Provider.js","names":["React","useEffect","useRef","useMemo","useCallback","useState","pointer","ajv","ajvErrorsToFormErrors","Context","addListPath","paths","path","includes","concat","removeListPath","filter","thisPath","Provider","data","externalData","schema","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","children","ajvSchemaValidator","compile","undefined","internalData","setInternalData","mountedFieldPathsRef","errorsRef","showAllErrors","setShowAllErrors","pathsWithErrorRef","hasErrors","Boolean","current","find","mountedFieldPath","validateBySchema","errors","validateBySchemaAndUpdateState","setPathWithError","hasError","handlePathChange","value","newData","structuredClone","set","handleMountField","handleUnMountField","handleSubmit","_window","window","scrollTo","top","behavior","createElement","mountedFieldPaths"],"sources":["../../../../../src/extensions/forms/DataContext/Provider.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useCallback,\n  useState,\n} from 'react'\nimport pointer, { JsonObject } from 'json-pointer'\nimport { JSONSchema7 } from 'json-schema'\nimport ajv, { ajvErrorsToFormErrors } from '../utils/ajv'\nimport { FormError } from '../types'\nimport Context from './Context'\n\nexport interface Props<Data extends JsonObject> {\n  data: Partial<Data>\n  /** JSON Schema for validating the data, like during input or after attempting submit */\n  schema?: JSONSchema7\n  /** Change handler for the whole data set */\n  onChange?: (data: Data) => void\n  /** Change handler for each value  */\n  onPathChange?: (path: string, value: any) => void\n  /** Submit called, data was valid (if validation available) */\n  onSubmit?: (data: Data) => void\n  /** Submit was requested, but data was invalid */\n  onSubmitRequest?: () => void\n  scrollTopOnSubmit?: boolean\n  children: React.ReactNode\n}\n\ntype PathList = string[]\n\nfunction addListPath(paths: PathList, path: string): PathList {\n  return paths.includes(path) ? paths : paths.concat(path)\n}\n\nfunction removeListPath(paths: PathList, path: string): PathList {\n  return paths.filter((thisPath) => thisPath !== path)\n}\n\nexport default function Provider<Data extends JsonObject>({\n  data: externalData,\n  schema,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  children,\n}: Props<Data>) {\n  const ajvSchemaValidator = useMemo(\n    () => (schema ? ajv.compile(schema) : undefined),\n    [schema]\n  )\n  const [internalData, setInternalData] =\n    useState<Partial<Data>>(externalData)\n  const mountedFieldPathsRef = useRef<string[]>([])\n\n  // Errors from provider validation (the whole data set)\n  const errorsRef = useRef<Record<string, FormError>>({})\n  const [showAllErrors, setShowAllErrors] = useState<boolean>(false)\n  // Errors reported by fields, based on their direct validation rules\n  const pathsWithErrorRef = useRef<string[]>([])\n\n  const hasErrors = useCallback(\n    () =>\n      Boolean(\n        mountedFieldPathsRef.current.find(\n          (mountedFieldPath) =>\n            errorsRef.current[mountedFieldPath] !== undefined ||\n            pathsWithErrorRef.current.includes(mountedFieldPath)\n        )\n      ),\n    []\n  )\n\n  useEffect(() => {\n    // When receivint the initial data, or receiving updated data by props, update the internal data (controlled state)\n    setInternalData(externalData)\n  }, [externalData])\n\n  const validateBySchema = useCallback(\n    (data: Partial<Data>): Record<string, Error> | undefined => {\n      if (!ajvSchemaValidator) {\n        // No schema-based validator. Assume data is valid.\n        return\n      }\n\n      if (!ajvSchemaValidator(data)) {\n        // Errors found\n        const errors = ajvErrorsToFormErrors(ajvSchemaValidator.errors)\n        return errors\n      } else {\n        return\n      }\n    },\n    [ajvSchemaValidator]\n  )\n\n  const validateBySchemaAndUpdateState = useCallback(\n    (data: Partial<Data>) => {\n      errorsRef.current = validateBySchema(data) ?? {}\n    },\n    [validateBySchema]\n  )\n\n  const setPathWithError = useCallback(\n    (path: string, hasError: boolean) => {\n      pathsWithErrorRef.current = hasError\n        ? addListPath(pathsWithErrorRef.current, path)\n        : removeListPath(pathsWithErrorRef.current, path)\n    },\n    []\n  )\n\n  const handlePathChange = useCallback(\n    (path, value) => {\n      onPathChange?.(path, value)\n      // Update the data even if it contains errors. Submit/SubmitRequest will be called accordingly\n      const newData = structuredClone(internalData) as Data\n      if (path) {\n        pointer.set(newData, path, value)\n      }\n      onChange?.(newData)\n\n      validateBySchemaAndUpdateState(newData)\n\n      setInternalData(newData)\n\n      setShowAllErrors(false)\n    },\n    [internalData, onChange, onPathChange, validateBySchemaAndUpdateState]\n  )\n\n  // Mounted fields\n  const handleMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = addListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  const handleUnMountField = useCallback((path: string) => {\n    mountedFieldPathsRef.current = removeListPath(\n      mountedFieldPathsRef.current,\n      path\n    )\n  }, [])\n\n  /**\n   * Request to submit the whole form\n   */\n  const handleSubmit = useCallback(() => {\n    if (!hasErrors()) {\n      onSubmit?.(internalData as Data)\n      if (scrollTopOnSubmit) {\n        window && window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      setShowAllErrors(true)\n      onSubmitRequest?.()\n    }\n    return internalData\n  }, [\n    internalData,\n    scrollTopOnSubmit,\n    hasErrors,\n    onSubmit,\n    onSubmitRequest,\n  ])\n\n  useEffect(() => {\n    // Mount procedure\n    if (externalData) {\n      // Validate the initial data to know if the user can submit, and to show errors if inputs are requested to with props\n      validateBySchemaAndUpdateState(externalData)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return (\n    <Context.Provider\n      value={{\n        data: internalData,\n        handlePathChange,\n        handleSubmit,\n        errors: errorsRef.current,\n        showAllErrors,\n        setShowAllErrors,\n        mountedFieldPaths: mountedFieldPathsRef.current,\n        handleMountField,\n        handleUnMountField,\n        hasErrors,\n        setPathWithError,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n"],"mappings":"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"}

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

@@ -72,10 +72,11 @@ function NumberComponent(props) {
     labelSecondary: labelSecondary,
     info: info,
     warning: warning,
-    error: error
+    error: error,
+    contentsWidth: width !== false ? width : undefined
   }, forwardSpaceProps(props)), React.createElement(InputMasked, {
     id: id,
-    className: classnames('dnb-forms-field-number__input', inputClassName, width !== false && width !== 'stretch' && `dnb-forms-field-number__input--width-${width}`),
+    className: classnames('dnb-forms-field-number__input', inputClassName),
     placeholder: placeholder,
     value: value,
     as_number: true,
@@ -92,7 +93,7 @@ function NumberComponent(props) {
     on_blur: onBlur,
     on_change: onChange,
     disabled: disabled,
-    stretch: width === 'stretch'
+    stretch: width !== undefined
   }));
 }
 NumberComponent._supportsEufemiaSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","InputMasked","classnames","forwardSpaceProps","FieldBlock","useField","NumberComponent","props","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","undefined","fromInput","value","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","onFocus","onBlur","onChange","createElement","_extends","forId","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","right","on_focus","on_blur","on_change","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React from 'react'\nimport { InputMasked } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = ComponentProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const {\n    thousandSeparator,\n    decimalSymbol = ',',\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const preparedProps: Props = {\n    ...props,\n    schema: props.schema ?? {\n      type: 'number',\n      minimum: props.minimum,\n      maximum: props.maximum,\n      exclusiveMinimum: props.exclusiveMinimum,\n      exclusiveMaximum: props.exclusiveMaximum,\n      multipleOf: props.multipleOf,\n    },\n    toInput: (external: number | undefined) => {\n      if (external === undefined) {\n        return ''\n      }\n      return external\n    },\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      {...forwardSpaceProps(props)}\n    >\n      <InputMasked\n        id={id}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          width !== false &&\n            width !== 'stretch' &&\n            `dnb-forms-field-number__input--width-${width}`,\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        as_number\n        number_mask={{\n          decimalLimit,\n          decimalSymbol,\n          includeThousandsSeparator: thousandSeparator !== undefined,\n          thousandsSeparatorSymbol:\n            thousandSeparator === true ? ' ' : thousandSeparator,\n          prefix,\n          suffix,\n        }}\n        right={rightAligned}\n        on_focus={onFocus}\n        on_blur={onBlur}\n        on_change={onChange}\n        disabled={disabled}\n        stretch={width === 'stretch'}\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","InputMasked","classnames","forwardSpaceProps","FieldBlock","useField","NumberComponent","props","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","preparedProps","_objectSpread","schema","type","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","toInput","external","undefined","fromInput","value","numberValue","emptyValue","width","id","className","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","onFocus","onBlur","onChange","createElement","_extends","forId","contentsWidth","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","right","on_focus","on_blur","on_change","stretch","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/Number.tsx"],"sourcesContent":["import React from 'react'\nimport { InputMasked } from '../../../components'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport FieldBlock from '../FieldBlock'\nimport { useField } from './hooks'\nimport type { ComponentProps } from '../component-types'\nimport type { FieldProps } from '../field-types'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = ComponentProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const {\n    thousandSeparator,\n    decimalSymbol = ',',\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const preparedProps: Props = {\n    ...props,\n    schema: props.schema ?? {\n      type: 'number',\n      minimum: props.minimum,\n      maximum: props.maximum,\n      exclusiveMinimum: props.exclusiveMinimum,\n      exclusiveMaximum: props.exclusiveMaximum,\n      multipleOf: props.multipleOf,\n    },\n    toInput: (external: number | undefined) => {\n      if (external === undefined) {\n        return ''\n      }\n      return external\n    },\n    fromInput: ({\n      value,\n      numberValue,\n    }: {\n      value: string\n      numberValue: number\n    }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    className,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    onFocus,\n    onBlur,\n    onChange,\n  } = useField(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      contentsWidth={width !== false ? width : undefined}\n      {...forwardSpaceProps(props)}\n    >\n      <InputMasked\n        id={id}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        as_number\n        number_mask={{\n          decimalLimit,\n          decimalSymbol,\n          includeThousandsSeparator: thousandSeparator !== undefined,\n          thousandsSeparatorSymbol:\n            thousandSeparator === true ? ' ' : thousandSeparator,\n          prefix,\n          suffix,\n        }}\n        right={rightAligned}\n        on_focus={onFocus}\n        on_blur={onBlur}\n        on_change={onChange}\n        disabled={disabled}\n        stretch={width !== undefined}\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsEufemiaSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & FieldProps<string> & {
     countryCodeFieldClassName?: string;
     numberFieldClassName?: string;
-    width?: false | 'medium' | 'large';
+    width?: 'medium' | 'large';
 };
 declare function PhoneNumber(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace PhoneNumber {

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

@@ -58,7 +58,7 @@ function PhoneNumber(props) {
     onChange === null || onChange === void 0 ? void 0 : onChange([countryCode, value].filter(Boolean).join(' '));
   }, [countryCode, emptyValue, onChange]);
   return React.createElement(Div, _extends({
-    className: classnames('dnb-forms-field-phone-number', className, width !== false && `dnb-forms-field-phone-number--width-${width}`)
+    className: classnames('dnb-forms-field-phone-number', className, width !== undefined && `dnb-forms-field-phone-number--width-${width}`)
   }, forwardSpaceProps(preparedProps)), React.createElement(Autocomplete, {
     className: classnames('dnb-forms-field-phone-number__country-code', countryCodeFieldClassName),
     label_direction: "vertical",

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

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

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

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

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

@@ -20,7 +20,7 @@ function PostalCodeAndCity(props) {
   return React.createElement(FieldGroup, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldGroupProps), React.createElement("div", {
-    className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== false ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
+    className: 'dnb-forms-field-postal-code-and-city__fields' + (width !== undefined ? ` dnb-forms-field-postal-code-and-city--width-${width}` : "")
   }, React.createElement(StringComponent, _extends({}, postalCode, {
     pattern: postalCode.pattern ?? '^[0-9]{4}$',
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps> & {\n    width?: false | 'medium' | 'large'\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    width = 'large',\n    ...fieldGroupProps\n  } = props\n\n  return (\n    <FieldGroup\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldGroupProps}\n    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields',\n          width !== false &&\n            `dnb-forms-field-postal-code-and-city--width-${width}`\n        )}\n      >\n        <StringComponent\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__postal-code',\n            postalCode.className\n          )}\n          label={\n            postalCode.label ??\n            sharedContext?.translation.Forms.postalCodeLabel\n          }\n          errorMessages={{\n            required:\n              sharedContext?.translation.Forms.postalCodeErrorRequired,\n            pattern:\n              sharedContext?.translation.Forms.postalCodeErrorPattern,\n            ...postalCode.errorMessages,\n          }}\n          placeholder={postalCode.placeholder ?? '0000'}\n          width={false}\n          inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        />\n        <StringComponent\n          {...city}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__city',\n            city.className\n          )}\n          label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n          errorMessages={{\n            required: sharedContext?.translation.Forms.cityErrorRequired,\n            ...city.errorMessages,\n          }}\n          width=\"stretch\"\n        />\n      </div>\n    </FieldGroup>\n  )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EACvC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJM,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,KAAK,GAAG;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,KAAK,KAAK,mDACkCA,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;IACdS,OAAO,EAAET,UAAU,CAACS,OAAO,IAAI,YAAa;IAC5CD,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;IACFE,KAAK,EACHV,UAAU,CAACU,KAAK,KAChBX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNjB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLV,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDlB,UAAU,CAACc,aAAa,CAC3B;IACFK,WAAW,EAAEnB,UAAU,CAACmB,WAAW,IAAI,MAAO;IAC9CjB,KAAK,EAAE,KAAM;IACbkB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF7B,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;IACFE,KAAK,EAAET,IAAI,CAACS,KAAK,KAAIX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEjB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEY,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDrB,IAAI,CAACa,aAAa,CACrB;IACFZ,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,CAAC0B,4BAA4B,GAAG,IAAI;AACrD,eAAe1B,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldGroup","StringComponent","PostalCodeAndCity","props","sharedContext","postalCode","city","width","fieldGroupProps","_objectWithoutProperties","_excluded","createElement","_extends","className","undefined","pattern","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","cityLabel","cityErrorRequired","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Field/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldGroup, { Props as FieldGroupProps } from '../FieldGroup'\nimport StringComponent, { Props as StringComponentProps } from './String'\n\nexport type Props = Omit<FieldGroupProps, 'children'> &\n  Record<'postalCode' | 'city', StringComponentProps> & {\n    width?: 'medium' | 'large'\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    width = 'large',\n    ...fieldGroupProps\n  } = props\n\n  return (\n    <FieldGroup\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldGroupProps}\n    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields',\n          width !== undefined &&\n            `dnb-forms-field-postal-code-and-city--width-${width}`\n        )}\n      >\n        <StringComponent\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__postal-code',\n            postalCode.className\n          )}\n          label={\n            postalCode.label ??\n            sharedContext?.translation.Forms.postalCodeLabel\n          }\n          errorMessages={{\n            required:\n              sharedContext?.translation.Forms.postalCodeErrorRequired,\n            pattern:\n              sharedContext?.translation.Forms.postalCodeErrorPattern,\n            ...postalCode.errorMessages,\n          }}\n          placeholder={postalCode.placeholder ?? '0000'}\n          width={false}\n          inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        />\n        <StringComponent\n          {...city}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__city',\n            city.className\n          )}\n          label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n          errorMessages={{\n            required: sharedContext?.translation.Forms.cityErrorRequired,\n            ...city.errorMessages,\n          }}\n          width=\"stretch\"\n        />\n      </div>\n    </FieldGroup>\n  )\n}\n\nPostalCodeAndCity._supportsEufemiaSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,UAAU,MAAoC,eAAe;AACpE,OAAOC,eAAe,MAAyC,UAAU;AAOzE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EACvC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJM,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,KAAK,GAAG;IAEV,CAAC,GAAGJ,KAAK;IADJK,eAAe,GAAAC,wBAAA,CAChBN,KAAK,EAAAO,SAAA;EAET,OACEd,KAAA,CAAAe,aAAA,CAACX,UAAU,EAAAY,QAAA;IACTC,SAAS,EAAEf,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACU,SACR;EAAE,GACEL,eAAe,GAEnBZ,KAAA,CAAAe,aAAA;IACEE,SAAS,EACP,8CAA8C,IAC9CN,KAAK,KAAKO,SAAS,mDAC8BP,KAAM;EACvD,GAEFX,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVP,UAAU;IACdU,OAAO,EAAEV,UAAU,CAACU,OAAO,IAAI,YAAa;IAC5CF,SAAS,EAAEf,UAAU,CACnB,mDAAmD,EACnDO,UAAU,CAACQ,SACb,CAAE;IACFG,KAAK,EACHX,UAAU,CAACW,KAAK,KAChBZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACC,eAAe,CACjD;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNlB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DR,OAAO,EACLX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDnB,UAAU,CAACe,aAAa,CAC3B;IACFK,WAAW,EAAEpB,UAAU,CAACoB,WAAW,IAAI,MAAO;IAC9ClB,KAAK,EAAE,KAAM;IACbmB,cAAc,EAAC;EAAyD,EACzE,CAAC,EACF9B,KAAA,CAAAe,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVN,IAAI;IACRO,SAAS,EAAEf,UAAU,CACnB,4CAA4C,EAC5CQ,IAAI,CAACO,SACP,CAAE;IACFG,KAAK,EAAEV,IAAI,CAACU,KAAK,KAAIZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACS,SAAS,CAAC;IAChEP,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAElB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEa,WAAW,CAACC,KAAK,CAACU;IAAiB,GACzDtB,IAAI,CAACc,aAAa,CACrB;IACFb,KAAK,EAAC;EAAS,EAChB,CACE,CACK,CAAC;AAEjB;AAEAL,iBAAiB,CAAC2B,4BAA4B,GAAG,IAAI;AACrD,eAAe3B,iBAAiB"}

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

@@ -4,7 +4,7 @@ import type { FieldProps } from '../field-types';
 export type Props = ComponentProps & FieldProps<string | number> & {
     children?: React.ReactNode;
     variant?: 'dropdown' | 'radio' | 'checkbox';
-    width?: false | 'medium' | 'large' | 'stretch';
+    width?: 'medium' | 'large' | 'stretch';
 };
 declare function Selection(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Selection {

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

@@ -83,7 +83,7 @@ function Selection(props) {
           };
         });
         return React.createElement(Dropdown, _extends({
-          className: classnames('dnb-forms-field-selection', className, width !== false && width !== 'stretch' && `dnb-forms-field-selection--width-${width}`),
+          className: classnames('dnb-forms-field-selection', className, width !== 'stretch' && `dnb-forms-field-selection--width-${width}`),
           list_class: "dnb-forms-field-selection__list",
           portal_class: "dnb-forms-field-selection__portal",
           title: placeholder,