@dnb/eufemia 9.26.1 → 9.27.0

package/cjs/components/table/TableStickyHeader.js

@@ -0,0 +1,159 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.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");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStickyHeader = exports.StickyHelper = void 0;
+
+require("core-js/modules/es.parse-float.js");
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _tr;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
+
+var useStickyHeader = function useStickyHeader(_ref) {
+  var sticky = _ref.sticky,
+      stickyOffset = _ref.stickyOffset,
+      sticky_offset = _ref.sticky_offset;
+
+  if (sticky_offset) {
+    stickyOffset = sticky_offset;
+  }
+
+  var elementRef = _react.default.useRef();
+
+  var intersectionObserver = _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
+    if (sticky) {
+      if (typeof IntersectionObserver === 'undefined') {
+        stickyWarning('IntersectionObserver not supported');
+        return;
+      }
+
+      if (!elementRef.current) {
+        stickyWarning('No ref element given');
+      }
+
+      var tableElem = elementRef.current;
+      var thHeight = 80;
+      var offsetTopPx = 0;
+
+      try {
+        var trElem = tableElem.querySelector('thead > tr:first-of-type, thead > .dnb-table__tr:first-of-type');
+        offsetTopPx = parseFloat(String(stickyOffset || '0'));
+
+        if (offsetTopPx > 0) {
+          if (String(stickyOffset).includes('em')) {
+            offsetTopPx = Math.round(offsetTopPx * 16);
+            trElem.style.setProperty('--table-top', String(stickyOffset));
+          } else {
+            trElem.style.setProperty('--table-top', "".concat(offsetTopPx / 16, "rem"));
+          }
+        }
+
+        var thElem = getThElement(tableElem);
+        thHeight = thElem && parseFloat(window.getComputedStyle(thElem).height) || thHeight;
+        intersectionObserver.current = new IntersectionObserver(function (entries) {
+          var _entries = _slicedToArray(entries, 1),
+              entry = _entries[0];
+
+          try {
+            if (entry.isIntersecting) {
+              trElem.classList.remove('show-shadow');
+            } else {
+              trElem.classList.add('show-shadow');
+            }
+          } catch (e) {
+            stickyWarning(e);
+          }
+        }, {
+          rootMargin: "-".concat(thHeight + offsetTopPx, "px 0px 0px 0px")
+        });
+        trElem.classList.add('sticky');
+        var tdElem = tableElem.querySelector('tbody > tr.dnb-table__sticky-helper > td:first-of-type') || getTdElement(tableElem);
+
+        if (tdElem) {
+          intersectionObserver.current.observe(tdElem);
+        }
+      } catch (e) {
+        stickyWarning(e);
+      }
+    }
+
+    return function () {
+      var _intersectionObserver;
+
+      (_intersectionObserver = intersectionObserver.current) === null || _intersectionObserver === void 0 ? void 0 : _intersectionObserver.disconnect();
+    };
+  }, [elementRef, sticky, stickyOffset]);
+
+  return {
+    elementRef: elementRef
+  };
+};
+
+exports.useStickyHeader = useStickyHeader;
+
+var StickyHelper = function StickyHelper() {
+  return _tr || (_tr = _react.default.createElement("tr", {
+    className: "dnb-table__sticky-helper"
+  }, _react.default.createElement("td", null)));
+};
+
+exports.StickyHelper = StickyHelper;
+
+var stickyWarning = function stickyWarning() {
+  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  (0, _componentHelper.warn)('Could not enable Sticky mode in table:', message);
+};
+
+var getTdElement = function getTdElement(element) {
+  return element.querySelector('tbody > tr:not(.dnb-table__sticky-helper):first-of-type > td:first-of-type, tbody > .dnb-table__tr:first-of-type > .dnb-table__td:first-of-type');
+};
+
+var getThElement = function getThElement(element) {
+  return element.querySelector('thead > tr:first-of-type > th:first-of-type, thead > .dnb-table__tr:first-of-type > .dnb-table__th:first-of-type');
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare type TableTdProps = {
+    /**
+     * The content of the component.
+     * Default: null
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Td: (componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export default Td;

package/cjs/components/table/TableTd.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["className", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Td = function Td(componentProps) {
+  var className = componentProps.className,
+      children = componentProps.children,
+      props = _objectWithoutProperties(componentProps, _excluded);
+
+  return _react.default.createElement("td", _extends({
+    role: "cell",
+    className: (0, _classnames.default)('dnb-table__td', className)
+  }, props));
+};
+
+var _default = Td;
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type TableThProps = {
+    /**
+     * The content of the table header given as Tr.
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Th: (componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export default Th;

package/cjs/components/table/TableTh.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["className", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Th = function Th(componentProps) {
+  var className = componentProps.className,
+      children = componentProps.children,
+      props = _objectWithoutProperties(componentProps, _excluded);
+
+  return _react.default.createElement("th", _extends({
+    role: "columnheader",
+    className: (0, _classnames.default)('dnb-table__th', className)
+  }, props), children);
+};
+
+var _default = Th;
+exports.default = _default;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableTdProps } from './TableTd';
+export declare type TableTrProps = {
+    /**
+     * The content of the component.
+     */
+    children: Array<React.ReactElement<TableTdProps>>;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Tr: (componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>) => JSX.Element;
+export default Tr;

package/cjs/components/table/TableTr.js

@@ -0,0 +1,41 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["className", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Tr = function Tr(componentProps) {
+  var className = componentProps.className,
+      children = componentProps.children,
+      props = _objectWithoutProperties(componentProps, _excluded);
+
+  return _react.default.createElement("tr", _extends({
+    className: (0, _classnames.default)('dnb-table__tr', className)
+  }, props), children);
+};
+
+var _default = Tr;
+exports.default = _default;

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

@@ -0,0 +1,3 @@
+export default Table;
+export * from "./Table";
+import Table from "./Table";

package/cjs/components/table/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.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.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _Table = _interopRequireWildcard(require("./Table"));
+
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Table[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+var _default = _Table.default;
+exports.default = _default;

package/cjs/components/table/style/_table.scss

@@ -0,0 +1,147 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: var(--spacing-small);
+
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  &--fixed {
+    table-layout: fixed;
+  }
+
+  &__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0;
+  }
+
+  &,
+  &--left {
+    text-align: left;
+  }
+  &--right {
+    text-align: right;
+  }
+  &--center {
+    text-align: center;
+  }
+
+  & > caption {
+    font-size: var(--font-size-small);
+
+    margin-top: var(--spacing-x-small);
+    caption-side: bottom;
+  }
+
+  /* stylelint-disable-next-line */
+
+  tr.sticky th {
+    position: sticky;
+    top: var(--table-top, 0); // is set by "stickyOffset" prop
+    z-index: 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+
+      // The @mixin defaultDropShadow() does not work in this case
+      // because we need only a bottom shadow (with clip-path)
+      box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+      clip-path: inset(6px 0 -48px 0);
+
+      transition: opacity 300ms ease-out;
+      [data-visual-test-wrapper] & {
+        transition: none;
+      }
+    }
+  }
+  tr.sticky.show-shadow th::before {
+    opacity: 1;
+  }
+
+  /* stylelint-disable */
+
+  &--small,
+  &--small > tr > th,
+  &--small > tr > td,
+  &--small > thead > tr > th,
+  &--small > tbody > tr > td {
+    font-size: var(--font-size-small);
+  }
+
+  & > tr#{&}--small > th,
+  & > tr#{&}--small > td,
+  & > thead > tr#{&}--small > th,
+  & > tbody > tr#{&}--small > td {
+    font-size: var(--font-size-small);
+  }
+
+  & > tr > th#{&}--small,
+  & > tr > td#{&}--small,
+  & > thead > tr > th#{&}--small,
+  & > tbody > tr > td#{&}--small,
+  &__th#{&}--small,
+  &__td#{&}--small {
+    font-size: var(--font-size-small);
+  }
+
+  &--x-small,
+  &--x-small > tr > th,
+  &--x-small > tr > td,
+  &--x-small > thead > tr > th,
+  &--x-small > tbody > tr > td {
+    font-size: var(--font-size-x-small);
+  }
+
+  & > tr#{&}--x-small > th,
+  & > tr#{&}--x-small > td,
+  & > thead > tr#{&}--x-small > th,
+  & > tbody > tr#{&}--x-small > td {
+    font-size: var(--font-size-x-small);
+  }
+
+  & > tr > th#{&}--x-small,
+  & > tr > td#{&}--x-small,
+  & > thead > tr > th#{&}--x-small,
+  & > tbody > tr > td#{&}--x-small,
+  &__th#{&}--x-small,
+  &__td#{&}--x-small {
+    font-size: var(--font-size-x-small);
+  }
+
+  /* stylelint-enable */
+
+  &.dnb-skeleton {
+    > * {
+      -webkit-text-fill-color: var(--skeleton-color);
+    }
+  }
+}
+
+// Reset Table spacing
+.dnb-spacing .dnb-table {
+  p,
+  ul,
+  ol,
+  dl,
+  pre {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}