@dnb/eufemia 9.41.0 → 9.42.0

package/cjs/components/table/useHandleSortState.js

@@ -0,0 +1,196 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useHandleSortState = useHandleSortState;
+
+require("core-js/modules/es.array.reduce.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.entries.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function useHandleSortState(config) {
+  var defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    direction: 'asc',
+    modes: ['asc', 'desc', 'off']
+  };
+
+  var initialState = _react.default.useMemo(function () {
+    return Object.entries(config).reduce(function (acc, _ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          name = _ref2[0],
+          opts = _ref2[1];
+
+      acc[name] = _objectSpread(_objectSpread({}, defaults), opts);
+
+      if (!acc[name].active && !acc[name].lastDirection) {
+        acc[name].lastDirection = acc[name].direction;
+      }
+
+      return acc;
+    }, {});
+  }, [config, defaults]);
+
+  var _React$useState = _react.default.useState(initialState),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      internalState = _React$useState2[0],
+      setState = _React$useState2[1];
+
+  var sortHandler = _react.default.useMemo(function () {
+    var list = Object.entries(internalState);
+    return list.reduce(function (acc, _ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          name = _ref4[0],
+          opts = _ref4[1];
+
+      acc[name] = function () {
+        var state = _objectSpread({}, internalState[name]);
+
+        if (!state.active && state.lastDirection) {
+          state.direction = state.lastDirection;
+          state.active = true;
+          state.lastDirection = null;
+        } else {
+          state.direction = getNextMode({
+            state: state,
+            opts: opts,
+            defaults: defaults
+          });
+          state.active = state.direction !== 'off';
+        }
+
+        setState(_objectSpread(_objectSpread({}, list.reduce(function (acc, _ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+              name = _ref6[0],
+              opts = _ref6[1];
+
+          acc[name] = opts;
+          acc[name].active = false;
+
+          if (opts.direction !== 'off') {
+            acc[name].lastDirection = opts.direction;
+          }
+
+          return acc;
+        }, {})), {}, _defineProperty({}, name, state)));
+      };
+
+      return acc;
+    }, {});
+  }, [internalState]);
+
+  var activeSortName = null;
+  var sortState = Object.entries(internalState).reduce(function (acc, _ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        name = _ref8[0],
+        _ref8$ = _ref8[1],
+        active = _ref8$.active,
+        direction = _ref8$.direction;
+
+    var reversed = direction === 'off' ? undefined : direction === 'desc';
+    acc[name] = {
+      active: active,
+      direction: direction,
+      reversed: reversed
+    };
+
+    if (active) {
+      activeSortName = name;
+    }
+
+    return acc;
+  }, {});
+  return {
+    sortState: sortState,
+    sortHandler: sortHandler,
+    activeSortName: activeSortName
+  };
+
+  function getNextMode(_ref9) {
+    var state = _ref9.state,
+        opts = _ref9.opts,
+        defaults = _ref9.defaults;
+    var modes = defaults.modes.filter(function (mode) {
+      return opts.modes.includes(mode);
+    });
+
+    for (var i = 0, l = modes.length; i < l; i++) {
+      var mode = modes[i];
+
+      if (mode === state.direction) {
+        var c = i + 1;
+
+        if (c >= l) {
+          c = 0;
+        }
+
+        state.direction = modes[c];
+        break;
+      }
+    }
+
+    return state.direction;
+  }
+}
+
+var _default = useHandleSortState;
+exports.default = _default;

package/cjs/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/cjs/shared/Eufemia.js

@@ -21,7 +21,7 @@ function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.41.0';
+          return '9.42.0';
         }
       }]);
 

package/cjs/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;