@dnb/eufemia 9.38.0-beta.1 → 9.38.0

package/components/table/Table.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-import { SkeletonShow } from '../skeleton/Skeleton';
-import { SpacingProps } from '../../shared/types';
-import { StickyHelper, StickyTableHeaderProps } from './TableStickyHeader';
+import ScrollView from './TableScrollView';
+import { StickyHelper } from './TableStickyHeader';
+import type { StickyTableHeaderProps } from './TableStickyHeader';
+import type { SkeletonShow } from '../skeleton/Skeleton';
+import type { SpacingProps } from '../../shared/types';
 export declare type TableSizes = 'large' | 'medium';
 export declare type TableVariants = 'generic';
 export { StickyHelper };
-export interface TableProps extends StickyTableHeaderProps {
+export { ScrollView };
+export declare type TableProps = {
     /**
      * The content of the component.
      */
@@ -28,18 +31,30 @@ export interface TableProps extends StickyTableHeaderProps {
      * Default: generic.
      */
     variant?: TableVariants;
+    /**
+     * Use `true` to show borders between table data cell
+     * Default: false
+     */
+    border?: boolean;
+    /**
+     * Use `true` to show a outline border around the table
+     * Default: false
+     */
+    outline?: boolean;
     /**
      * Defines if the table should behave with a fixed table layout, using: "table-layout: fixed;"
      * Default: null.
      */
     fixed?: boolean;
-}
+} & StickyTableHeaderProps;
+export declare type TableAllProps = TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps;
 export declare const defaultProps: {
     size: string;
     variant: string;
 };
 declare const Table: {
-    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps): JSX.Element;
+    (componentProps: TableAllProps): JSX.Element;
     StickyHelper: () => JSX.Element;
+    ScrollView: typeof ScrollView;
 };
 export default Table;

package/components/table/Table.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed"];
+var _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline"];
 
 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; }
 
@@ -23,9 +23,11 @@ import Provider from '../../shared/Provider';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
+import ScrollView from './TableScrollView';
 import TableContext from './TableContext';
 import { useStickyHeader, StickyHelper } from './TableStickyHeader';
 export { StickyHelper };
+export { ScrollView };
 export var defaultProps = {
   size: 'large',
   variant: 'generic'
@@ -45,6 +47,8 @@ var Table = function Table(componentProps) {
       sticky = allProps.sticky,
       stickyOffset = allProps.stickyOffset,
       fixed = allProps.fixed,
+      border = allProps.border,
+      outline = allProps.outline,
       props = _objectWithoutProperties(allProps, _excluded);
 
   var skeletonClasses = createSkeletonClass('font', skeleton, context);
@@ -73,7 +77,7 @@ var Table = function Table(componentProps) {
       allProps: _objectSpread(_objectSpread({}, context.getTranslation(componentProps).Table), allProps)
     }
   }, React.createElement("table", _extends({
-    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && "dnb-table__variant--".concat(variant), size && "dnb-table__size--".concat(size), sticky && "dnb-table--sticky", fixed && "dnb-table--fixed"),
+    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && "dnb-table__variant--".concat(variant), size && "dnb-table__size--".concat(size), sticky && "dnb-table--sticky", fixed && "dnb-table--fixed", border && "dnb-table--border", outline && "dnb-table--outline"),
     ref: elementRef
   }, props), children)));
 
@@ -84,4 +88,5 @@ var Table = function Table(componentProps) {
 };
 
 export default Table;
-Table.StickyHelper = StickyHelper;
+Table.StickyHelper = StickyHelper;
+Table.ScrollView = ScrollView;

package/components/table/TableContainer.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { TableProps } from './Table';
+import type { SpacingProps } from '../space/types';
+export declare type TableContainerProps = {
+    /**
+     * The content of the component.
+     */
+    children: [
+        React.ReactElement<TableContainerHeadProps>,
+        React.ReactElement<TableContainerBodyProps>,
+        React.ReactElement<TableContainerFootProps>
+    ];
+};
+export declare type TableContainerAllProps = TableContainerProps & React.TableHTMLAttributes<HTMLTableRowElement> & SpacingProps;
+declare function TableContainer(props: TableContainerAllProps): JSX.Element;
+declare namespace TableContainer {
+    var Body: typeof TableContainerBody;
+    var Head: typeof TableContainerHead;
+    var Foot: typeof TableContainerFoot;
+}
+export default TableContainer;
+export declare type TableContainerBodyProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<TableProps> | Array<React.ReactElement<TableProps>>;
+};
+export declare function TableContainerBody(props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare type TableContainerHeadProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare function TableContainerHead(props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare type TableContainerFootProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare function TableContainerFoot(props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/components/table/TableContainer.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className"],
+    _excluded2 = ["children", "className"],
+    _excluded3 = ["children", "className"],
+    _excluded4 = ["children", "className"];
+import React from 'react';
+import classnames from 'classnames';
+import ScrollView from '../../fragments/scroll-view/ScrollView';
+import { createSpacingClasses } from '../space/SpacingUtils';
+import { validateDOMAttributes } from '../../shared/component-helper';
+export default function TableContainer(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var spacingClasses = createSpacingClasses(props);
+  validateDOMAttributes(props, rest);
+  return React.createElement("section", _extends({
+    className: classnames('dnb-table__container', className, spacingClasses)
+  }, rest), React.createElement(ScrollView, null, children));
+}
+export function TableContainerBody(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded2);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__body', className)
+  }, rest), children);
+}
+export function TableContainerHead(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded3);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__head', className)
+  }, rest), children);
+}
+export function TableContainerFoot(props) {
+  var children = props.children,
+      className = props.className,
+      rest = _objectWithoutProperties(props, _excluded4);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__foot', className)
+  }, rest), children);
+}
+TableContainer.Body = TableContainerBody;
+TableContainer.Head = TableContainerHead;
+TableContainer.Foot = TableContainerFoot;

package/components/table/TableScrollView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SpacingProps } from '../../shared/types';
+export declare type TableScrollViewProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<HTMLTableElement>;
+};
+export declare type TableScrollViewAllProps = TableScrollViewProps & Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> & SpacingProps;
+export default function TableScrollView(props: TableScrollViewAllProps): JSX.Element;

package/components/table/TableScrollView.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+import ScrollView from '../../fragments/scroll-view/ScrollView';
+export default function TableScrollView(props) {
+  var className = props.className,
+      children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return React.createElement(ScrollView, _extends({
+    className: classnames('dnb-table__scroll-view', className)
+  }, rest), children);
+}

package/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/components/table/TableTd.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 export declare type TableTdProps = {
+    /**
+     * if set to `true`, no padding will be added
+     * Default: false
+     */
+    noSpacing?: boolean;
+    /**
+     * Set to `horizontal` for padding on left and right side
+     * Default: false
+     */
+    spacing?: 'horizontal';
     /**
      * The content of the component.
      * Default: null

package/components/table/TableTd.js

@@ -1,15 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["className", "children", "noSpacing", "spacing"];
 import React from 'react';
 import classnames from 'classnames';
 export default function Td(componentProps) {
   var className = componentProps.className,
       children = componentProps.children,
+      noSpacing = componentProps.noSpacing,
+      spacing = componentProps.spacing,
       props = _objectWithoutProperties(componentProps, _excluded);
 
   return React.createElement("td", _extends({
     role: "cell",
-    className: classnames('dnb-table__td', className)
+    className: classnames('dnb-table__td', className, noSpacing && 'dnb-table__td--no-spacing', spacing && "dnb-table__td--spacing-".concat(spacing))
   }, props), children);
 }

package/components/table/TableTh.d.ts

@@ -32,5 +32,6 @@ declare function Th(componentProps: TableThProps & React.ThHTMLAttributes<HTMLTa
 declare namespace Th {
     var SortButton: typeof TableSortButton;
     var HelpButton: typeof TableHelpButton;
+    var Horizontal: ({ className, ...rest }: React.ThHTMLAttributes<HTMLDivElement>) => JSX.Element;
 }
 export default Th;

package/components/table/TableTh.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"];
+var _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"],
+    _excluded2 = ["className"];
 import React from 'react';
 import classnames from 'classnames';
 import TableSortButton from './TableSortButton';
@@ -19,5 +20,17 @@ export default function Th(componentProps) {
     className: classnames('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.createElement("div", _extends({}, rest, {
+    className: classnames('dnb-table__th__horizontal', className)
+  }));
+}
+
 Th.SortButton = TableSortButton;
-Th.HelpButton = TableHelpButton;
+Th.HelpButton = TableHelpButton;
+Th.Horizontal = Horizontal;

package/components/table/TableTr.d.ts

@@ -5,6 +5,11 @@ export declare type TableTrProps = {
      * The variant of the tr
      */
     variant?: 'even' | 'odd';
+    /**
+     * If set to true, the inherited header text will not wrap to new lines
+     * Default: false
+     */
+    noWrap?: boolean;
     /**
      * The content of the component.
      */

package/components/table/TableTr.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["variant", "children", "className"];
+var _excluded = ["variant", "noWrap", "children", "className"];
 import React from 'react';
 import classnames from 'classnames';
 import TableContext from './TableContext';
 export default function Tr(componentProps) {
   var variant = componentProps.variant,
+      noWrap = componentProps.noWrap,
       children = componentProps.children,
       _className = componentProps.className,
       props = _objectWithoutProperties(componentProps, _excluded);
@@ -15,7 +16,7 @@ export default function Tr(componentProps) {
   }),
       currentVariant = _useHandleTrVariant.currentVariant;
 
-  var className = classnames('dnb-table__tr', _className, currentVariant && "dnb-table__tr--".concat(currentVariant));
+  var className = classnames('dnb-table__tr', _className, currentVariant && "dnb-table__tr--".concat(currentVariant), noWrap && 'dnb-table--no-wrap');
   return React.createElement("tr", _extends({
     role: "row",
     className: className

package/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/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/components/table/style/_table-header-buttons.scss

@@ -171,11 +171,6 @@
       }
     }
   }
-  & > thead > tr > th#{&}--no-wrap,
-  & > tbody > tr > th#{&}--no-wrap,
-  & &__th#{&}--no-wrap {
-    white-space: nowrap;
-  }
 
   & &__th,
   & > thead > tr > th {

package/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;
+  }
+}

package/components/table/style/_table-td.scss

@@ -0,0 +1,132 @@
+/*
+* Table component
+*
+*/
+
+@import './_table-header-buttons.scss';
+
+@mixin tableBorder {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+
+  pointer-events: none;
+}
+
+.dnb-table {
+  & > tr > td,
+  & > tbody > tr > td,
+  &__td,
+  & > tr > th[scope='row'] {
+    padding: var(--spacing-small);
+    padding-top: calc(var(--spacing-small) * 1.25); // 20px
+    padding-bottom: calc(var(--spacing-small) * 1.25); // 20px
+
+    color: var(--theme-color-black-80, currentColor);
+
+    vertical-align: baseline;
+  }
+
+  // table border
+  --border: 0.0625rem solid var(--color-black-8);
+  &--border tbody &__td {
+    z-index: 2; // ensure border is behind content
+
+    &::after {
+      @include tableBorder();
+
+      border: var(--border);
+      border-right: none;
+      border-bottom: none;
+    }
+
+    &:first-of-type::after {
+      border-left: none;
+    }
+  }
+  &:not(#{&}--outline) tbody &__tr:last-of-type &__td::after {
+    border-bottom: var(--border);
+  }
+
+  // table outline
+  --outline: 0.0625rem solid var(--color-black-8);
+  &--outline thead &__th {
+    z-index: 2; // ensure border is behind content
+
+    &::after {
+      @include tableBorder();
+
+      border-top: var(--outline);
+    }
+
+    &:first-of-type::after {
+      border-left: var(--outline);
+    }
+    &:last-of-type::after {
+      border-right: var(--outline);
+    }
+  }
+  &--outline tbody &__td {
+    z-index: 2; // ensure border is behind content
+
+    &:first-of-type::after,
+    &:last-of-type::after {
+      @include tableBorder();
+    }
+
+    &:first-of-type::after {
+      border-left: var(--outline);
+    }
+    &:last-of-type::after {
+      border-right: var(--outline);
+    }
+  }
+  &--outline tbody &__tr:last-of-type &__td {
+    z-index: 2; // ensure border is behind content
+
+    &::after {
+      @include tableBorder();
+
+      border-bottom: var(--outline);
+    }
+  }
+  &--outline thead &__th:first-of-type {
+    &,
+    &::after {
+      border-radius: 0.5rem 0 0 0;
+    }
+  }
+  &--outline thead &__th:last-of-type {
+    &,
+    &::after {
+      border-radius: 0 0.5rem 0 0;
+    }
+  }
+  &--outline tbody &__tr:last-of-type &__td:first-of-type {
+    &,
+    &::after {
+      border-radius: 0 0 0 0.5rem;
+    }
+  }
+  &--outline tbody &__tr:last-of-type &__td:last-of-type {
+    &,
+    &::after {
+      border-radius: 0 0 0.5rem 0;
+    }
+  }
+
+  // spacing
+  &__td--no-spacing,
+  td#{&}__td--no-spacing {
+    padding: 0;
+  }
+  &__td--spacing-horizontal,
+  td#{&}__td--spacing-horizontal {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

package/components/table/style/_table-th.scss

@@ -0,0 +1,36 @@
+/*
+* Table component
+*
+*/
+
+@import './_table-header-buttons.scss';
+
+.dnb-table {
+  & > tr > th,
+  & > thead > tr > th,
+  &__th {
+    padding: var(--spacing-x-large) var(--spacing-small)
+      var(--spacing-x-small);
+
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+
+    vertical-align: bottom;
+
+    &:not([align]) {
+      text-align: inherit;
+    }
+
+    @include IS_FF {
+      // to get the perfect height of pixles, to this:
+      padding-bottom: calc(var(--spacing-x-small) - 0.5px);
+    }
+
+    background-color: var(--color-white);
+  }
+
+  &__th__horizontal {
+    display: flex;
+    align-items: flex-end; // bottom align help-button or other additional elements
+  }
+}