@dnb/eufemia 9.41.0 → 9.42.0

package/es/components/table/useHandleSortState.js

@@ -0,0 +1,111 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+export function useHandleSortState(config, defaults = {
+  direction: 'asc',
+  modes: ['asc', 'desc', 'off']
+}) {
+  const initialState = React.useMemo(() => {
+    return Object.entries(config).reduce((acc, [name, opts]) => {
+      acc[name] = _objectSpread(_objectSpread({}, defaults), opts);
+
+      if (!acc[name].active && !acc[name].lastDirection) {
+        acc[name].lastDirection = acc[name].direction;
+      }
+
+      return acc;
+    }, {});
+  }, [config, defaults]);
+  const [internalState, setState] = React.useState(initialState);
+  const sortHandler = React.useMemo(() => {
+    const list = Object.entries(internalState);
+    return list.reduce((acc, [name, opts]) => {
+      acc[name] = () => {
+        const state = _objectSpread({}, internalState[name]);
+
+        if (!state.active && state.lastDirection) {
+          state.direction = state.lastDirection;
+          state.active = true;
+          state.lastDirection = null;
+        } else {
+          state.direction = getNextMode({
+            state,
+            opts,
+            defaults
+          });
+          state.active = state.direction !== 'off';
+        }
+
+        setState(_objectSpread(_objectSpread({}, list.reduce((acc, [name, opts]) => {
+          acc[name] = opts;
+          acc[name].active = false;
+
+          if (opts.direction !== 'off') {
+            acc[name].lastDirection = opts.direction;
+          }
+
+          return acc;
+        }, {})), {}, {
+          [name]: state
+        }));
+      };
+
+      return acc;
+    }, {});
+  }, [internalState]);
+  let activeSortName = null;
+  const sortState = Object.entries(internalState).reduce((acc, [name, {
+    active,
+    direction
+  }]) => {
+    const reversed = direction === 'off' ? undefined : direction === 'desc';
+    acc[name] = {
+      active,
+      direction,
+      reversed
+    };
+
+    if (active) {
+      activeSortName = name;
+    }
+
+    return acc;
+  }, {});
+  return {
+    sortState,
+    sortHandler,
+    activeSortName
+  };
+
+  function getNextMode({
+    state,
+    opts,
+    defaults
+  }) {
+    const modes = defaults.modes.filter(mode => {
+      return opts.modes.includes(mode);
+    });
+
+    for (let i = 0, l = modes.length; i < l; i++) {
+      const mode = modes[i];
+
+      if (mode === state.direction) {
+        let c = i + 1;
+
+        if (c >= l) {
+          c = 0;
+        }
+
+        state.direction = modes[c];
+        break;
+      }
+    }
+
+    return state.direction;
+  }
+}
+export default useHandleSortState;

package/es/fragments/scroll-view/style/_scroll-view.scss

@@ -7,6 +7,9 @@
   overflow-x: auto;
   @include scrollY(auto);
 
+  // Ensure the user still can scroll a ancestor scrollarea (body)
+  overscroll-behavior: auto;
+
   // interactive prop
   &[tabindex='0'] {
     &:focus {

package/es/shared/Eufemia.js

@@ -2,7 +2,7 @@ export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '9.41.0';
+        return '9.42.0';
       }
 
     }

package/es/style/dnb-ui-components.css

@@ -563,7 +563,9 @@
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
   scrollbar-color: #14555a transparent;
-  scrollbar-color: var(--color-emerald-green) transparent; }
+  scrollbar-color: var(--color-emerald-green) transparent;
+  -ms-scroll-chaining: chained;
+      overscroll-behavior: auto; }
   html:not([data-visual-test]) .dnb-scroll-view {
     scroll-behavior: smooth; }
   html[data-visual-test] .dnb-scroll-view {
@@ -7361,12 +7363,33 @@ span.dnb-space--no-collapse > span {
       html:not([data-whatintent='touch'])
       .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
         right: -0.5rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      :not(.dnb-table--active) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test]
       html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      :not(.dnb-table--active)
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test]
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      :not(.dnb-table--active)
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test]
+      html:not([data-whatintent='touch'])
       .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      :not(.dnb-table--active)
       html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon {
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon {
         opacity: 1; }
+      html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test])
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test])
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
+        opacity: 1;
+        color: inherit; }
+      html:not([data-visual-test]) .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-visual-test])
+      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, html:not([data-visual-test])
+      .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-visual-test])
+      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: visible; }
       .dnb-table > thead > tr > 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],
       .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
@@ -7500,6 +7523,18 @@ span.dnb-space--no-collapse > span {
     color: #007272;
     color: var(--color-sea-green);
     opacity: 1; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled],
+  html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled] {
+    cursor: not-allowed; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus: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:focus:not([disabled]) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after,
+  html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
+    opacity: 0; }
   .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after,
   .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
     visibility: visible; }
@@ -7787,12 +7822,18 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
             flex-direction: column; }
   .dnb-table__container__body .dnb-table:not([class*='space__bottom']) {
     margin-bottom: 0; }
+  .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
+    padding-top: 1.5rem; }
   .dnb-table__container__head {
     padding: 2rem 1rem 0; }
+    .dnb-table__container__head--empty {
+      padding: 0.5rem 0 0; }
     .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*='space__top']) {
       margin: 0; }
   .dnb-table__container__foot {
-    padding: 0.5rem 1rem 2rem; }
+    padding: 1rem 1rem 1.5rem; }
+    .dnb-table__container__foot--empty {
+      padding: 0 0 1rem; }
   .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
     overflow: visible; }
 
@@ -7858,12 +7899,15 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     var(--color-black-20); }
   .dnb-table__th.dnb-table__th__accordion-icon {
     padding: 0; }
+    .dnb-table__th.dnb-table__th__accordion-icon,
     .dnb-table__th.dnb-table__th__accordion-icon div {
       width: 3.5rem;
       text-indent: -300vw; }
-      .dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon div {
+      .dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--medium
+      .dnb-table__th.dnb-table__th__accordion-icon div {
         width: 3rem; }
-      .dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon div {
+      .dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon, .dnb-table__size--small
+      .dnb-table__th.dnb-table__th__accordion-icon div {
         width: 2.5rem; }
   .dnb-table__td.dnb-table__td__accordion-icon {
     padding: 0;
@@ -7974,6 +8018,8 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
           * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
           */
       display: block; } }
+  .dnb-table__tr__accordion_content td {
+    width: 100%; }
   .dnb-table__tr__accordion_content td::before {
     content: '';
     position: absolute;