@dnb/eufemia 9.37.0 → 9.38.0

package/cjs/components/table/TableSortButton.js

@@ -0,0 +1,43 @@
+"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 = TableSortButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../button/Button"));
+
+var _excluded = ["className"];
+
+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; }
+
+function TableSortButton(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return _react.default.createElement(_Button.default, _extends({
+    className: (0, _classnames.default)('dnb-table__sort-button', className),
+    variant: "tertiary",
+    icon: "arrow-down",
+    wrap: true
+  }, props));
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface StickyTableHeaderProps {
+export declare type StickyTableHeaderProps = {
     /**
      * Makes the Table header sticky
      * Default: false
@@ -14,7 +14,7 @@ export interface StickyTableHeaderProps {
      * @deprecated Please use `stickyOffset`
      */
     sticky_offset?: string | number;
-}
+};
 export declare const useStickyHeader: ({ sticky, stickyOffset, sticky_offset, }: StickyTableHeaderProps) => {
     elementRef: React.MutableRefObject<HTMLTableElement>;
 };

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

@@ -1,15 +1,19 @@
 import React from 'react';
 export declare type TableTdProps = {
     /**
-     * The content of the component.
-     * Default: null
+     * if set to `true`, no padding will be added
+     * Default: false
      */
-    children?: React.ReactNode;
+    noSpacing?: boolean;
     /**
-     * Custom className on the component root
+     * Set to `horizontal` for padding on left and right side
+     * Default: false
+     */
+    spacing?: 'horizontal';
+    /**
+     * The content of the component.
      * Default: null
      */
-    className?: string;
+    children?: React.ReactNode;
 };
-declare const Td: (componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
-export default Td;
+export default function Td(componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>): JSX.Element;

package/cjs/components/table/TableTd.js

@@ -11,13 +11,13 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = Td;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["className", "children"];
+var _excluded = ["className", "children", "noSpacing", "spacing"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,16 +27,15 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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) {
+function Td(componentProps) {
   var className = componentProps.className,
       children = componentProps.children,
+      noSpacing = componentProps.noSpacing,
+      spacing = componentProps.spacing,
       props = _objectWithoutProperties(componentProps, _excluded);
 
   return _react.default.createElement("td", _extends({
     role: "cell",
-    className: (0, _classnames.default)('dnb-table__td', className)
+    className: (0, _classnames.default)('dnb-table__td', className, noSpacing && 'dnb-table__td--no-spacing', spacing && "dnb-table__td--spacing-".concat(spacing))
   }, props), children);
-};
-
-var _default = Td;
-exports.default = _default;
+}

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

@@ -1,14 +1,37 @@
 import React from 'react';
+import TableSortButton from './TableSortButton';
+import TableHelpButton from './TableHelpButton';
+export declare type TableThChildren = React.ReactNode | ReturnType<typeof TableSortButton> | ReturnType<typeof TableHelpButton>;
 export declare type TableThProps = {
     /**
-     * The content of the table header given as Tr.
+     * Defines the table header as sortable
+     * Default: false
+     */
+    sortable?: boolean;
+    /**
+     * Defines the sortable column as the current active
+     * Default: false
+     */
+    active?: boolean;
+    /**
+     * Defines the sortable column as in reversed order
+     * Default: false
+     */
+    reversed?: boolean;
+    /**
+     * If set to true, the header text will not wrap to new lines
+     * Default: false
      */
-    children: React.ReactNode;
+    noWrap?: boolean;
     /**
-     * Custom className on the component root
-     * Default: null
+     * The content of the table header given as Tr.
      */
-    className?: string;
+    children: TableThChildren | Array<TableThChildren>;
 };
-declare const Th: (componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+declare function Th(componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element;
+declare namespace Th {
+    var SortButton: typeof TableSortButton;
+    var HelpButton: typeof TableHelpButton;
+    var Horizontal: ({ className, ...rest }: React.ThHTMLAttributes<HTMLDivElement>) => JSX.Element;
+}
 export default Th;

package/cjs/components/table/TableTh.js

@@ -11,13 +11,18 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = Th;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["className", "children"];
+var _TableSortButton = _interopRequireDefault(require("./TableSortButton"));
+
+var _TableHelpButton = _interopRequireDefault(require("./TableHelpButton"));
+
+var _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"],
+    _excluded2 = ["className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,16 +32,31 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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) {
+function Th(componentProps) {
   var className = componentProps.className,
       children = componentProps.children,
+      sortable = componentProps.sortable,
+      active = componentProps.active,
+      reversed = componentProps.reversed,
+      noWrap = componentProps.noWrap,
       props = _objectWithoutProperties(componentProps, _excluded);
 
   return _react.default.createElement("th", _extends({
     role: "columnheader",
-    className: (0, _classnames.default)('dnb-table__th', className)
+    className: (0, _classnames.default)('dnb-table__th', className, sortable && 'dnb-table--sortable', active && 'dnb-table--active', reversed && 'dnb-table--reversed', noWrap && 'dnb-table--no-wrap')
   }, props), children);
-};
+}
+
+function Horizontal(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      rest = _objectWithoutProperties(_ref, _excluded2);
+
+  return _react.default.createElement("div", _extends({}, rest, {
+    className: (0, _classnames.default)('dnb-table__th__horizontal', className)
+  }));
+}
 
-var _default = Th;
-exports.default = _default;
+Th.SortButton = _TableSortButton.default;
+Th.HelpButton = _TableHelpButton.default;
+Th.Horizontal = Horizontal;

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

@@ -2,14 +2,17 @@ import React from 'react';
 import { TableTdProps } from './TableTd';
 export declare type TableTrProps = {
     /**
-     * The content of the component.
+     * The variant of the tr
      */
-    children: React.ReactElement<TableTdProps> | Array<React.ReactElement<TableTdProps>>;
+    variant?: 'even' | 'odd';
+    /**
+     * If set to true, the inherited header text will not wrap to new lines
+     * Default: false
+     */
+    noWrap?: boolean;
     /**
-     * Custom className on the component root
-     * Default: null
+     * The content of the component.
      */
-    className?: string;
+    children: React.ReactElement<TableTdProps> | Array<React.ReactElement<TableTdProps>>;
 };
-declare const Tr: (componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>) => JSX.Element;
-export default Tr;
+export default function Tr(componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): JSX.Element;

package/cjs/components/table/TableTr.js

@@ -11,13 +11,15 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = Tr;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["className", "children"];
+var _TableContext = _interopRequireDefault(require("./TableContext"));
+
+var _excluded = ["variant", "noWrap", "children", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,15 +29,72 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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,
+function Tr(componentProps) {
+  var variant = componentProps.variant,
+      noWrap = componentProps.noWrap,
       children = componentProps.children,
+      _className = componentProps.className,
       props = _objectWithoutProperties(componentProps, _excluded);
 
+  var _useHandleTrVariant = useHandleTrVariant({
+    variant: variant
+  }),
+      currentVariant = _useHandleTrVariant.currentVariant;
+
+  var className = (0, _classnames.default)('dnb-table__tr', _className, currentVariant && "dnb-table__tr--".concat(currentVariant), noWrap && 'dnb-table--no-wrap');
   return _react.default.createElement("tr", _extends({
-    className: (0, _classnames.default)('dnb-table__tr', className)
+    role: "row",
+    className: className
   }, props), children);
-};
+}
+
+function useHandleTrVariant(_ref) {
+  var variant = _ref.variant;
+
+  var tableContext = _react.default.useContext(_TableContext.default);
+
+  var countRef = tableContext === null || tableContext === void 0 ? void 0 : tableContext.trCountRef.current;
+
+  var increment = function increment() {
+    if (typeof countRef === 'undefined') {
+      return 0;
+    }
+
+    if (!variant || variant === 'even' && countRef.count % 2 === 1 || variant === 'odd' && countRef.count % 2 === 0) {
+      countRef.count++;
+    }
+
+    return countRef.count;
+  };
+
+  var decrement = function decrement() {
+    if (typeof countRef === 'undefined') {
+      return null;
+    }
+
+    if (!variant || variant === 'even' && countRef.count % 2 === 1 || variant === 'odd' && countRef.count % 2 === 0) {
+      countRef.count--;
+      tableContext === null || tableContext === void 0 ? void 0 : tableContext.forceRerender();
+    }
+  };
+
+  var count = _react.default.useMemo(increment, [tableContext === null || tableContext === void 0 ? void 0 : tableContext.rerenderAlias]);
+
+  _react.default.useEffect(function () {
+    return decrement;
+  }, [tableContext === null || tableContext === void 0 ? void 0 : tableContext.trCountRef]);
+
+  _react.default.useEffect(function () {
+    tableContext === null || tableContext === void 0 ? void 0 : tableContext.forceRerender();
+  }, [variant]);
+
+  var currentVariant = variant;
+
+  if (!currentVariant) {
+    currentVariant = count % 2 ? 'odd' : 'even';
+  }
 
-var _default = Tr;
-exports.default = _default;
+  return {
+    currentVariant: currentVariant
+  };
+}

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

@@ -0,0 +1,21 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  & > tr > th,
+  & > tr > td,
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  &__th,
+  &__td {
+    position: relative;
+
+    font-size: var(--font-size-basis);
+    line-height: var(--line-height-basis);
+    border-spacing: 0;
+
+    word-break: keep-all;
+  }
+}

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

@@ -0,0 +1,61 @@
+/*
+* Table component
+*
+*/
+
+@mixin tableBorder {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+
+  pointer-events: none;
+}
+
+.dnb-table__container {
+  position: relative;
+
+  --border: 0.0625rem solid var(--color-black-8);
+  background-color: var(--color-white);
+
+  &::after {
+    @include tableBorder();
+
+    border: var(--border);
+  }
+
+  &,
+  &::after {
+    border-radius: 0.5rem;
+  }
+
+  &,
+  &__body,
+  &__head,
+  &__foot {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__body {
+    .dnb-table {
+      &:not([class*='space__bottom']) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__head {
+    padding: 2rem 1rem 0;
+
+    .dnb-spacing & .dnb-h--large:not([class*='space__top']) {
+      margin: 0;
+    }
+  }
+  &__foot {
+    padding: 0.5rem 1rem 2rem;
+  }
+}

package/cjs/components/table/style/{themes/table-basis.scss → _table-header-buttons.scss}

@@ -1,4 +1,4 @@
-@import '../../../button/style/themes/button-mixins.scss';
+@import '../../button/style/themes/button-mixins.scss';
 
 @mixin tableFocusRing() {
   &::before {
@@ -11,14 +11,13 @@
   }
 }
 
-@mixin basisTableSortable {
+@mixin buttonsInTable {
   // sortable
   & > thead > tr > th#{&}--sortable,
   & &__th#{&}--sortable {
     color: var(--color-emerald-green);
 
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       > .dnb-icon {
         opacity: 0;
         transition: opacity 200ms ease-out, transform 500ms ease-out;
@@ -111,11 +110,31 @@
         visibility: hidden;
       }
     }
+
+    &[align='right'] {
+      padding-right: 0.5rem;
+
+      .dnb-table__sort-button.dnb-button {
+        flex-direction: row-reverse;
+
+        &--tertiary.dnb-button--icon-position-right {
+          padding-right: 0.5rem;
+
+          .dnb-button__text {
+            padding-right: 0;
+            &::after {
+              right: 0;
+            }
+          }
+        }
+      }
+    }
   }
+
+  // active
   & > thead > tr > th#{&}--active,
   & &__th#{&}--active {
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       // hide underline
       &:not(:hover) .dnb-button__text::after {
         opacity: 0;
@@ -145,17 +164,18 @@
   }
   & > thead > tr > th#{&}--reversed,
   & &__th#{&}--reversed {
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       .dnb-icon {
         transform: rotate(180deg);
         transform-origin: 50% 50%;
       }
     }
   }
-  & > thead > tr > th#{&}--no-wrap,
-  & > tbody > tr > th#{&}--no-wrap,
-  & &__th#{&}--no-wrap {
-    white-space: nowrap;
+
+  & &__th,
+  & > thead > tr > th {
+    .dnb-table__help-button {
+      margin-left: 0.5rem;
+    }
   }
 }

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

@@ -0,0 +1,42 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  &__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0;
+  }
+
+  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;
+  }
+}