@dnb/eufemia 9.26.0 → 9.28.0

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { SkeletonShow } from '../skeleton/Skeleton';
+import { ISpacingProps } from '../../shared/interfaces';
+import { StickyHelper, StickyTableHeaderProps } from './TableStickyHeader';
+export declare type TableSizes = 'medium' | 'large';
+export declare type TableVariants = 'basis' | 'not-defined-yet';
+export { StickyHelper };
+export interface TableProps extends StickyTableHeaderProps {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className on the component root
+     */
+    className?: string;
+    /**
+     * Skeleton should be applied when loading content
+     */
+    skeleton?: SkeletonShow;
+    /**
+     * The size of the component.
+     * Default: large.
+     */
+    size?: TableSizes;
+    /**
+     * The variant of the component.
+     * Default: basis.
+     */
+    variant?: TableVariants;
+}
+export declare const defaultProps: {
+    size: string;
+    variant: string;
+};
+declare const Table: {
+    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & ISpacingProps): JSX.Element;
+    StickyHelper: () => JSX.Element;
+};
+export default Table;

package/cjs/components/table/Table.js

@@ -0,0 +1,91 @@
+"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
+});
+Object.defineProperty(exports, "StickyHelper", {
+  enumerable: true,
+  get: function get() {
+    return _TableStickyHeader.StickyHelper;
+  }
+});
+exports.defaultProps = exports.default = void 0;
+
+require("core-js/modules/es.array.concat.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Context = _interopRequireDefault(require("../../shared/Context"));
+
+var _Provider = _interopRequireDefault(require("../../shared/Provider"));
+
+var _SpacingHelper = require("../space/SpacingHelper");
+
+var _SkeletonHelper = require("../skeleton/SkeletonHelper");
+
+var _hooks = require("../../shared/hooks");
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _TableStickyHeader = require("./TableStickyHeader");
+
+var _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset"];
+
+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 defaultProps = {
+  size: 'large',
+  variant: 'basis'
+};
+exports.defaultProps = defaultProps;
+
+var Table = function Table(componentProps) {
+  var context = _react.default.useContext(_Context.default);
+
+  var allProps = (0, _hooks.usePropsWithContext)(componentProps, defaultProps, context === null || context === void 0 ? void 0 : context.Table, {
+    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+  });
+
+  var className = allProps.className,
+      children = allProps.children,
+      size = allProps.size,
+      skeleton = allProps.skeleton,
+      variant = allProps.variant,
+      sticky = allProps.sticky,
+      stickyOffset = allProps.stickyOffset,
+      props = _objectWithoutProperties(allProps, _excluded);
+
+  var skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
+  var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
+
+  var _useStickyHeader = (0, _TableStickyHeader.useStickyHeader)(allProps),
+      elementRef = _useStickyHeader.elementRef;
+
+  (0, _componentHelper.validateDOMAttributes)(allProps, props);
+  return _react.default.createElement(_Provider.default, {
+    skeleton: Boolean(skeleton)
+  }, _react.default.createElement("table", _extends({
+    className: (0, _classnames.default)("dnb-table dnb-table__variant--".concat(variant || 'basis', " dnb-table__size--").concat(size || 'large'), spacingClasses, skeletonClasses, className, sticky && "dnb-table--sticky"),
+    ref: elementRef
+  }, props), children));
+};
+
+var _default = Table;
+exports.default = _default;
+Table.StickyHelper = _TableStickyHeader.StickyHelper;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface StickyTableHeaderProps {
+    /**
+     * Makes the Table header sticky
+     * Default: false
+     */
+    sticky?: boolean;
+    /**
+     * The offset from top in rem or em unit
+     * Default: false
+     */
+    stickyOffset?: string | number;
+    /**
+     * @deprecated Please use `stickyOffset`
+     */
+    sticky_offset?: string | number;
+}
+export declare const useStickyHeader: ({ sticky, stickyOffset, sticky_offset, }: StickyTableHeaderProps) => {
+    elementRef: React.MutableRefObject<HTMLTableElement>;
+};
+export declare const StickyHelper: () => JSX.Element;

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;