@dnb/eufemia 10.21.0 → 10.22.0

package/cjs/components/table/style/table-accordion.scss

@@ -5,22 +5,33 @@
 
 @mixin tableAccordionActiveColor {
   .dnb-table__td__accordion-icon .dnb-icon {
-    color: var(--color-emerald-green);
+    color: var(--table-accordion-icon-color--active);
   }
 }
 @mixin tableAccordionDisabledColor {
   .dnb-table__td__accordion-icon .dnb-icon {
-    color: var(--color-sea-green-30);
+    color: var(--table-accordion-icon-color--disabled);
   }
 }
 
 .dnb-table {
   --table-accordion-background: var(--color-white);
+  --table-accordion-header-background: var(--color-white);
   --table-accordion-border-width: 0.0625rem;
   --table-accordion-border-color: var(--color-black-20);
   --table-accordion-border: var(--table-accordion-border-width) solid
     var(--table-accordion-border-color);
 
+  // Icon
+  --table-accordion-icon-color: var(--color-sea-green);
+  --table-accordion-icon-color--active: var(--color-emerald-green);
+  --table-accordion-icon-color--disabled: var(--color-sea-green-30);
+
+  // Outline
+  --table-accordion-outline-color: var(--color-emerald-green);
+  --table-accordion-outline-width: var(--focus-ring-width);
+  --table-accordion-outline-background--active: var(--color-pistachio);
+
   &__th#{&}__th__accordion-icon {
     &.dnb-table__th {
       padding: 0;
@@ -54,7 +65,7 @@
     justify-content: center;
 
     .dnb-icon {
-      color: var(--color-sea-green);
+      color: var(--table-accordion-icon-color);
       transition: transform 500ms var(--easing-default);
     }
   }
@@ -114,7 +125,7 @@
 
       // Here we use border to support Safari v16 on macOS
       // but also to only have a border on specific sides
-      border: var(--focus-ring-width) solid transparent;
+      border: var(--table-accordion-outline-width) solid transparent;
     }
     td:not(:first-of-type)::before {
       border-left: none;
@@ -125,20 +136,18 @@
 
     @include hover() {
       td::before {
-        border-color: var(--color-emerald-green);
+        border-color: var(--table-accordion-outline-color);
       }
 
       @include tableAccordionActiveColor();
     }
   }
 
-  &--outline
+  &--border
     tbody
-    &__tr--has-accordion-content:not(#{&}__tr--expanded):not(
-      :nth-last-child(2)
-    )
+    &__tr--has-accordion-content:not(#{&}__tr--expanded):not(&__tr--last)
     &__td::before {
-    bottom: calc(var(--table-outline-width) * -1);
+    bottom: calc(var(--table-border-width) * -1);
   }
 
   &__tr--has-accordion-content#{&}__tr--expanded:not(&__tr--disabled):hover
@@ -151,9 +160,8 @@
     ):not(:hover):focus {
     td::before {
       @include whatInput(keyboard) {
-        top: 0;
-        bottom: 0;
-        border-color: var(--color-emerald-green);
+        border-color: var(--focus-ring-color);
+        border-width: var(--focus-ring-width);
       }
     }
     td:first-of-type::before {
@@ -167,7 +175,7 @@
   &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):active {
     html:not([data-whatintent='touch']) &:hover td::before,
     td::before {
-      border-color: var(--color-emerald-green);
+      border-color: var(--table-accordion-outline-color);
       border-width: var(
         --table-accordion-border-width
       ); // TODO: we should have something like activeRingWidth
@@ -175,7 +183,7 @@
   }
 
   &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):active &__td {
-    background-color: var(--color-pistachio);
+    background-color: var(--table-accordion-outline-background--active);
 
     @include tableAccordionActiveColor();
   }
@@ -184,7 +192,7 @@
       &__tr--disabled
     )#{&}__tr--hover:not(:active):hover
     &__td {
-    background-color: var(--table-accordion-background);
+    background-color: var(--table-accordion-header-background);
 
     &::before {
       border: none;
@@ -196,7 +204,7 @@
       &__tr--disabled
     ):not(:active):not(:hover) {
     @include whatInputNot('keyboard') {
-      background-color: var(--table-accordion-background);
+      background-color: var(--table-accordion-header-background);
 
       td::before {
         border: none;
@@ -220,6 +228,43 @@
       }
     }
 
+    &__inner {
+      overflow: hidden;
+      will-change: height;
+      transition: height 400ms var(--easing-default);
+
+      &__spacing {
+        padding: 1rem;
+
+        transform: translateY(-10px);
+        transition: transform 500ms var(--easing-default);
+      }
+
+      position: relative;
+    }
+    &--parallax &__inner {
+      &__spacing {
+        transform: translateY(0);
+        html[data-visual-test] & {
+          transition: none;
+        }
+      }
+    }
+
+    &--expanded {
+      > td.dnb-table__td {
+        background-color: var(--color-white);
+      }
+
+      + .dnb-table__tr--has-accordion-content .dnb-table__td {
+        @include tableBorder() {
+          border-top: var(--table-accordion-border);
+        }
+      }
+    }
+  }
+
+  &__tr__accordion-content--single {
     td {
       padding: 0 !important; // medium and small size sets padding – but we never want a padding on this td
 
@@ -256,29 +301,6 @@
       border-top: none;
     }
 
-    &__inner {
-      overflow: hidden;
-      will-change: height;
-      transition: height 400ms var(--easing-default);
-
-      &__spacing {
-        padding: 1rem;
-
-        transform: translateY(-10px);
-        transition: transform 500ms var(--easing-default);
-      }
-
-      position: relative;
-    }
-    &--parallax &__inner {
-      &__spacing {
-        transform: translateY(0);
-        html[data-visual-test] & {
-          transition: none;
-        }
-      }
-    }
-
     > td.dnb-table__td {
       padding: 0;
 
@@ -287,10 +309,6 @@
         margin: 0;
       }
     }
-
-    &--expanded > td.dnb-table__td {
-      background-color: var(--color-white);
-    }
   }
 
   &__tr__accordion-content#{&}__tr &__td {

package/cjs/components/table/style/table-td.scss

@@ -75,7 +75,7 @@
     .dnb-table__tr:last-child,
     .dnb-table__tr--has-accordion-content:not(
         .dnb-table__tr--expanded
-      ):nth-last-child(2) {
+      ).dnb-table__tr--last {
       clip-path: inset(
         0 round 0 0 var(--table-outline-radius) var(--table-outline-radius)
       );

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

@@ -135,6 +135,16 @@ html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active
 .dnb-table__container {
   --table-border-color: var(--sb-color-gray-light-2);
   --table-outline-color: var(--sb-color-gray-light-2);
+  --table-accordion-border-color: var(--sb-color-gray-light-2);
+  --table-accordion-header-background: var(--sb-color-gray-light-2);
+  --table-accordion-icon-color: var(--sb-color-text);
+  --table-accordion-icon-color--active: var(--sb-color-violet);
+  --table-accordion-icon-color--disabled: var(--sb-color-gray-dark-2);
+  --table-accordion-outline-color: var(--sb-color-violet);
+  --table-accordion-outline-width: var(--table-accordion-border-width);
+  --table-accordion-outline-background--active: var(
+    --sb-color-gray-light-2
+  );
   background-color: var(--sb-color-white);
 }
 html[data-visual-test] .dnb-table,

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

@@ -1 +1,3 @@
-.dnb-table{text-align:left}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);font-weight:var(--font-weight-medium);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 thead+tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__td:last-child:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:last-child:after{right:0}.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]):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{--table-border-color:var(--sb-color-gray-light-2);--table-outline-color:var(--sb-color-gray-light-2);background-color:var(--sb-color-white)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--table-border-color:blue;--table-outline-color:red;--table-accordion-border-color:green}
+.dnb-table{text-align:left}.dnb-table thead th,.dnb-table__th{background-color:var(--sb-color-white);font-weight:var(--font-weight-medium);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 thead+tbody .dnb-table__tr:first-child .dnb-table__td:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:after{border-top:var(--table-border);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:-.0625rem;top:0;z-index:1}.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__td:last-child:after,.dnb-table thead+tbody .dnb-table__tr:first-child .dnb-table__th:last-child:after{right:0}.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]):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{--table-border-color:var(--sb-color-gray-light-2);--table-outline-color:var(--sb-color-gray-light-2);--table-accordion-border-color:var(--sb-color-gray-light-2);--table-accordion-header-background:var(--sb-color-gray-light-2);--table-accordion-icon-color:var(--sb-color-text);--table-accordion-icon-color--active:var(--sb-color-violet);--table-accordion-icon-color--disabled:var(--sb-color-gray-dark-2);--table-accordion-outline-color:var(--sb-color-violet);--table-accordion-outline-width:var(--table-accordion-border-width);--table-accordion-outline-background--active:var(
+    --sb-color-gray-light-2
+  );background-color:var(--sb-color-white)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--table-border-color:blue;--table-outline-color:red;--table-accordion-border-color:green}

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

@@ -106,6 +106,20 @@
 .dnb-table__container {
   --table-border-color: var(--sb-color-gray-light-2);
   --table-outline-color: var(--sb-color-gray-light-2);
+  --table-accordion-border-color: var(--sb-color-gray-light-2);
+  --table-accordion-header-background: var(--sb-color-gray-light-2);
+
+  // Icon
+  --table-accordion-icon-color: var(--sb-color-text);
+  --table-accordion-icon-color--active: var(--sb-color-violet);
+  --table-accordion-icon-color--disabled: var(--sb-color-gray-dark-2);
+
+  // Outline
+  --table-accordion-outline-color: var(--sb-color-violet);
+  --table-accordion-outline-width: var(--table-accordion-border-width);
+  --table-accordion-outline-background--active: var(
+    --sb-color-gray-light-2
+  );
 
   background-color: var(--sb-color-white);
 

package/cjs/components/table/useTableAnimationHandler.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TableAccordionTrProps } from './TableAccordionTr';
+export type useTableAnimationHandlerProps = {
+    /**
+     * Ref to <div> inside the <tr> element being exapanded/collapsed
+     */
+    innerRef: React.MutableRefObject<HTMLDivElement>;
+    /**
+     * Ref to the <tr> element being clicked
+     */
+    trRef: React.MutableRefObject<HTMLTableRowElement>;
+};
+export declare function useTableAnimationHandler({ innerRef, trRef, expanded, noAnimation, }: useTableAnimationHandlerProps & TableAccordionTrProps): {
+    ariaLive: any;
+    isInDOM: boolean;
+    isAnimating: boolean;
+    isVisibleParallax: boolean;
+    firstPaintStyle: React.CSSProperties;
+};
+export default useTableAnimationHandler;

package/cjs/components/table/useTableAnimationHandler.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useTableAnimationHandler = useTableAnimationHandler;
+var _react = _interopRequireWildcard(require("react"));
+var _componentHelper = require("../../shared/component-helper");
+var _useHeightAnimation = require("../height-animation/useHeightAnimation");
+var _TableContext = require("./TableContext");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function useTableAnimationHandler(_ref) {
+  let {
+    innerRef,
+    trRef,
+    expanded,
+    noAnimation
+  } = _ref;
+  const tableAccordionContext = _react.default.useContext(_TableContext.TableAccordionContext);
+  const [ariaLive, setAriaLive] = _react.default.useState(null);
+  const open = Boolean(expanded || (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.trIsOpen));
+  const scrollViewHandler = (0, _react.useCallback)(clip => {
+    const scollView = (0, _componentHelper.getClosestScrollViewElement)(trRef.current);
+    if (scollView instanceof HTMLElement) {
+      scollView.style.overflow = clip ? 'clip' : '';
+    }
+  }, [trRef]);
+  const onOpen = (0, _react.useCallback)(state => {
+    setAriaLive(state ? true : null);
+  }, []);
+  const onAnimationStart = (0, _react.useCallback)(() => {
+    scrollViewHandler(true);
+  }, [scrollViewHandler]);
+  const onAnimationEnd = (0, _react.useCallback)(state => {
+    var _tableAccordionContex, _tableAccordionContex2;
+    const event = {
+      target: trRef.current
+    };
+    switch (state) {
+      case 'opened':
+        (_tableAccordionContex = tableAccordionContext.onOpened) === null || _tableAccordionContex === void 0 ? void 0 : _tableAccordionContex.call(tableAccordionContext, event);
+        break;
+      case 'closed':
+        (_tableAccordionContex2 = tableAccordionContext.onClosed) === null || _tableAccordionContex2 === void 0 ? void 0 : _tableAccordionContex2.call(tableAccordionContext, event);
+        break;
+    }
+    scrollViewHandler(false);
+  }, [scrollViewHandler, tableAccordionContext, trRef]);
+  const {
+    isInDOM,
+    isAnimating,
+    isVisibleParallax,
+    firstPaintStyle
+  } = (0, _useHeightAnimation.useHeightAnimation)(innerRef, {
+    open,
+    animate: Boolean(!noAnimation && !(tableAccordionContext !== null && tableAccordionContext !== void 0 && tableAccordionContext.noAnimation)),
+    onOpen,
+    onAnimationStart,
+    onAnimationEnd
+  });
+  return {
+    ariaLive,
+    isInDOM,
+    isAnimating,
+    isVisibleParallax,
+    firstPaintStyle
+  };
+}
+var _default = useTableAnimationHandler;
+exports.default = _default;
+//# sourceMappingURL=useTableAnimationHandler.js.map

package/cjs/components/table/useTableAnimationHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableAnimationHandler.js","names":["_react","_interopRequireWildcard","require","_componentHelper","_useHeightAnimation","_TableContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","useTableAnimationHandler","_ref","innerRef","trRef","expanded","noAnimation","tableAccordionContext","React","useContext","TableAccordionContext","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","useCallback","clip","scollView","getClosestScrollViewElement","current","HTMLElement","style","overflow","onOpen","state","onAnimationStart","onAnimationEnd","_tableAccordionContex","_tableAccordionContex2","event","target","onOpened","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","useHeightAnimation","animate","_default","exports"],"sources":["../../../../src/components/table/useTableAnimationHandler.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { getClosestScrollViewElement } from '../../shared/component-helper'\nimport { useHeightAnimation } from '../height-animation/useHeightAnimation'\nimport { TableAccordionTrProps } from './TableAccordionTr'\nimport { TableAccordionContext } from './TableContext'\n\nexport type useTableAnimationHandlerProps = {\n  /**\n   * Ref to <div> inside the <tr> element being exapanded/collapsed\n   */\n  innerRef: React.MutableRefObject<HTMLDivElement>\n  /**\n   * Ref to the <tr> element being clicked\n   */\n  trRef: React.MutableRefObject<HTMLTableRowElement>\n}\n\nexport function useTableAnimationHandler({\n  innerRef,\n  trRef,\n  expanded,\n  noAnimation,\n}: useTableAnimationHandlerProps & TableAccordionTrProps) {\n  const tableAccordionContext = React.useContext(TableAccordionContext)\n  const [ariaLive, setAriaLive] = React.useState(null)\n  const open = Boolean(expanded || tableAccordionContext?.trIsOpen)\n\n  const scrollViewHandler = useCallback(\n    (clip: boolean) => {\n      const scollView = getClosestScrollViewElement(\n        trRef.current\n      ) as HTMLElement\n      if (scollView instanceof HTMLElement) {\n        scollView.style.overflow = clip ? 'clip' : ''\n      }\n    },\n    [trRef]\n  )\n\n  const onOpen = useCallback((state) => {\n    setAriaLive(state ? true : null)\n  }, [])\n\n  const onAnimationStart = useCallback(() => {\n    scrollViewHandler(true)\n  }, [scrollViewHandler])\n\n  const onAnimationEnd = useCallback(\n    (state) => {\n      const event = { target: trRef.current }\n      switch (state) {\n        case 'opened':\n          tableAccordionContext.onOpened?.(event)\n          break\n\n        case 'closed':\n          tableAccordionContext.onClosed?.(event)\n          break\n      }\n\n      scrollViewHandler(false)\n    },\n    [scrollViewHandler, tableAccordionContext, trRef]\n  )\n\n  const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n    useHeightAnimation(innerRef, {\n      open,\n      animate: Boolean(\n        !noAnimation && !tableAccordionContext?.noAnimation\n      ),\n      onOpen,\n      onAnimationStart,\n      onAnimationEnd,\n    })\n\n  return {\n    ariaLive,\n    isInDOM,\n    isAnimating,\n    isVisibleParallax,\n    firstPaintStyle,\n  }\n}\n\nexport default useTableAnimationHandler\n"],"mappings":"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"}

package/cjs/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss

@@ -2,6 +2,7 @@
 
 .dnb-blockquote {
   --blockquote-padding-top: 1.5rem;
+  --blockquote-padding-bottom: 2rem;
   --blockquote-quote-padding: 5.5rem;
   --blockquote-cite-style: normal;
 

package/cjs/extensions/forms/DataContext/Context.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Ajv } from '../utils/ajv';
-import { AllJSONSchemaVersions, CustomErrorMessagesWithPaths } from '../types';
-export type Path = string;
-export type Identifier = string;
+import { AllJSONSchemaVersions, CustomErrorMessagesWithPaths, Path } from '../types';
 type HandleSubmitProps = {
     formElement?: HTMLFormElement;
 };

package/cjs/extensions/forms/DataContext/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["_react","_interopRequireDefault","require","_ajv","obj","__esModule","default","defaultContextState","hasContext","data","undefined","schema","handlePathChange","updateDataValue","validateData","handleSubmit","scrollToTop","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldError","setValueWithError","setProps","ajvInstance","makeAjvInstance","contextErrorMessages","_isInsideFormElement","exports","Context","React","createContext","_default"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils/ajv'\nimport {\n  AllJSONSchemaVersions,\n  CustomErrorMessagesWithPaths,\n} from '../types'\n\nexport type Path = string\nexport type Identifier = string\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport interface ContextState {\n  hasContext: boolean\n  /** The dataset for the form / form steps */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (path: Path, value: any) => void\n  updateDataValue: (\n    path: Path,\n    value: any,\n    props: { disabled: boolean }\n  ) => void\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: Path) => void\n  handleUnMountField: (path: Path) => void\n  setValueWithError: (path: Path, hasError: boolean) => void\n  setProps: (path: Path, props: any) => void\n  hasErrors: () => boolean\n  hasFieldError: (path: Path) => boolean\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  _isInsideFormElement?: boolean\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  handlePathChange: () => null,\n  updateDataValue: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  hasFieldError: () => false,\n  setValueWithError: () => null,\n  setProps: () => null,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  _isInsideFormElement: false,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAmD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AA+C5C,MAAMG,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,iBAAiB,EAAEA,CAAA,KAAM,IAAI;EAC7BC,QAAQ,EAAEA,CAAA,KAAM,IAAI;EACpBC,WAAW,EAAE,IAAAC,oBAAe,EAAC,CAAC;EAC9BC,oBAAoB,EAAElB,SAAS;EAC/BmB,oBAAoB,EAAE;AACxB,CAAC;AAAAC,OAAA,CAAAvB,mBAAA,GAAAA,mBAAA;AAED,MAAMwB,OAAO,GAAGC,cAAK,CAACC,aAAa,CAAe1B,mBAAmB,CAAC;AAAA,IAAA2B,QAAA,GAEvDH,OAAO;AAAAD,OAAA,CAAAxB,OAAA,GAAA4B,QAAA"}
+{"version":3,"file":"Context.js","names":["_react","_interopRequireDefault","require","_ajv","obj","__esModule","default","defaultContextState","hasContext","data","undefined","schema","handlePathChange","updateDataValue","validateData","handleSubmit","scrollToTop","showAllErrors","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldError","setValueWithError","setProps","ajvInstance","makeAjvInstance","contextErrorMessages","_isInsideFormElement","exports","Context","React","createContext","_default"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils/ajv'\nimport {\n  AllJSONSchemaVersions,\n  CustomErrorMessagesWithPaths,\n  Path,\n} from '../types'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport interface ContextState {\n  hasContext: boolean\n  /** The dataset for the form / form steps */\n  data: any\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (path: Path, value: any) => void\n  updateDataValue: (\n    path: Path,\n    value: any,\n    props: { disabled: boolean }\n  ) => void\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: Path) => void\n  handleUnMountField: (path: Path) => void\n  setValueWithError: (path: Path, hasError: boolean) => void\n  setProps: (path: Path, props: any) => void\n  hasErrors: () => boolean\n  hasFieldError: (path: Path) => boolean\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  _isInsideFormElement?: boolean\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  handlePathChange: () => null,\n  updateDataValue: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  hasFieldError: () => false,\n  setValueWithError: () => null,\n  setProps: () => null,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  _isInsideFormElement: false,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAAmD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AA6C5C,MAAMG,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,iBAAiB,EAAEA,CAAA,KAAM,IAAI;EAC7BC,QAAQ,EAAEA,CAAA,KAAM,IAAI;EACpBC,WAAW,EAAE,IAAAC,oBAAe,EAAC,CAAC;EAC9BC,oBAAoB,EAAElB,SAAS;EAC/BmB,oBAAoB,EAAE;AACxB,CAAC;AAAAC,OAAA,CAAAvB,mBAAA,GAAAA,mBAAA;AAED,MAAMwB,OAAO,GAAGC,cAAK,CAACC,aAAa,CAAe1B,mBAAmB,CAAC;AAAA,IAAA2B,QAAA,GAEvDH,OAAO;AAAAD,OAAA,CAAAxB,OAAA,GAAA4B,QAAA"}

package/cjs/extensions/forms/DataContext/Provider/Provider.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { JsonObject } from 'json-pointer';
 import { Ajv } from '../../utils/ajv';
-import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, FieldProps } from '../../types';
-import { Path } from '../Context';
+import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, FieldProps, Path } from '../../types';
 export type UpdateDataValue = (path: Path, data: unknown) => void;
 export type FilterDataHandler<Data> = (data: Data, filter: FilterData) => Partial<Data>;
 export type FilterData = (path: Path, value: any, props: FieldProps) => boolean | undefined;

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

@@ -133,10 +133,6 @@ function Provider(_ref) {
     shared: sharedData.data,
     hasUsedInitialData: false
   });
-  const countRef = (0, _react.useRef)(0);
-  if (countRef.current++ > 100) {
-    throw new Error('countRef.current: ' + countRef.current);
-  }
   internalDataRef.current = (0, _react.useMemo)(() => {
     if (id && initialData && !sharedData.data) {
       sharedData.update(initialData);
@@ -156,7 +152,7 @@ function Provider(_ref) {
       return data;
     }
     return internalDataRef.current;
-  }, [id, data, initialData, sharedData]);
+  }, [data, id, initialData, sharedData]);
   useLayoutEffect(() => {
     if (id && initialData && !sharedData.data) {
       extendSharedData === null || extendSharedData === void 0 ? void 0 : extendSharedData(initialData);