@dnb/eufemia 9.38.0-beta.1 → 9.39.0

package/components/table/style/themes/dnb-table-theme-ui.scss

@@ -6,84 +6,104 @@
 @import '../../../../style/themes/imports.scss';
 
 .dnb-table {
-  // Header part
-  & > 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;
-  }
-  /* stylelint-disable-next-line */
+  // head
   & > tr > th,
   & > thead > tr > th,
   &__th {
-    padding: var(--spacing-x-large) var(--spacing-small)
-      var(--spacing-x-small);
+    // spacing
+    padding: 2rem 1rem 1rem;
 
+    // typography
     font-weight: var(--font-weight-medium);
-    color: var(--color-black);
-
+    color: var(--theme-color-black-80, currentColor);
+    font-size: var(--font-size-basis);
+    line-height: var(--line-height-basis);
     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);
   }
 
-  // Body part
-  /* stylelint-disable-next-line */
+  // body data
   & > tr > td,
   & > tbody > tr > td,
   &__td,
   & > tr > th[scope='row'] {
-    padding: var(--spacing-small);
-    padding-top: calc(var(--spacing-small) * 1.25);
-    padding-bottom: calc(var(--spacing-small) * 1.188); /* 19/16 */
+    // spacing
+    padding: 1rem;
 
+    // typography
     color: var(--theme-color-black-80, currentColor);
+    font-size: var(--font-size-basis);
+    line-height: var(--line-height-basis);
+    vertical-align: baseline;
   }
 
-  // Needs a double & & for specificity
-  & > tbody > tr,
-  & &__tr,
-  & &__tr--even {
-    background-color: var(--color-lavender);
+  &__th {
+    .dnb-table__size--medium & {
+      // spacing
+      padding: 1.375rem 1rem 0.875rem;
+
+      // typography
+      font-size: var(--font-size-small);
+      line-height: var(--line-height-small);
+    }
+
+    .dnb-table__size--small & {
+      // spacing
+      padding: 1.25rem 1rem 0.5rem;
+
+      // typography
+      font-size: var(--font-size-small);
+      line-height: var(--line-height-small);
+    }
   }
 
-  // Needs a double & & for specificity
-  & > tbody > tr:not(#{&}__tr--even):nth-of-type(2n),
-  & &__tr:not(#{&}__tr--even):nth-of-type(2n),
-  & &__tr--odd {
-    background-color: var(--color-white);
+  &__td {
+    .dnb-table__size--medium & {
+      // spacing
+      padding: 0.875rem 1rem;
+
+      // typography
+      &,
+      .dnb-p {
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-small);
+      }
+    }
+
+    .dnb-table__size--small & {
+      // spacing
+      padding: 0.625rem 1rem;
+
+      // typography
+      &,
+      .dnb-p {
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-small);
+      }
+    }
   }
 
-  // Border
-  & > thead > tr > th::after,
-  & > tbody > tr:last-of-type > td::after,
-  & > thead > &__tr > &__th::after,
-  & > tbody > &__tr:last-of-type > &__td::after {
+  // NB: In case we still would need a border on the table head row
+  // &:not(#{&}--border):not(#{&}--outline) > thead > tr > th::after,
+  // &:not(#{&}--border):not(#{&}--outline) > thead > &__tr > &__th::after,
+
+  // border
+  &:not(#{&}--border):not(#{&}--outline)
+    > tbody
+    > tr:last-of-type
+    > td::after,
+  &:not(#{&}--border):not(#{&}--outline)
+    > tbody
+    > &__tr:last-of-type
+    > &__td::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -1px;
+    bottom: -0.0625rem;
 
-    height: 1px;
+    height: 0.0625rem;
     background-color: var(--color-black-8);
   }
 }

package/es/components/lib.d.ts

@@ -51,10 +51,9 @@ export function getComponents(): {
     StepIndicator: typeof StepIndicator;
     Switch: typeof Switch;
     Table: {
-        (componentProps: import("./table/Table").TableProps & import("react").TableHTMLAttributes<HTMLTableElement> & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
-        }): JSX.Element;
+        (componentProps: import("./table/Table").TableAllProps): JSX.Element;
         StickyHelper: () => JSX.Element;
+        ScrollView: typeof import("./table/TableScrollView").default;
     };
     Tabs: typeof Tabs;
     Tag: {

package/es/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';
-export declare type TableSizes = 'large' | 'medium';
+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' | 'small';
 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/es/components/table/Table.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed"];
+const _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; }
 
@@ -14,9 +14,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 const defaultProps = {
   size: 'large',
   variant: 'generic'
@@ -36,7 +38,9 @@ const Table = componentProps => {
     variant,
     sticky,
     stickyOffset,
-    fixed
+    fixed,
+    border,
+    outline
   } = allProps,
         props = _objectWithoutProperties(allProps, _excluded);
 
@@ -60,7 +64,7 @@ const 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--${variant}`, size && `dnb-table__size--${size}`, sticky && `dnb-table--sticky`, fixed && `dnb-table--fixed`),
+    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && `dnb-table--sticky`, fixed && `dnb-table--fixed`, border && `dnb-table--border`, outline && `dnb-table--outline`),
     ref: elementRef
   }, props), children)));
 
@@ -71,4 +75,5 @@ const Table = componentProps => {
 };
 
 export default Table;
-Table.StickyHelper = StickyHelper;
+Table.StickyHelper = StickyHelper;
+Table.ScrollView = ScrollView;

package/es/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/es/components/table/TableContainer.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _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) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  const 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) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded2);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__body', className)
+  }, rest), children);
+}
+export function TableContainerHead(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded3);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__head', className)
+  }, rest), children);
+}
+export function TableContainerFoot(props) {
+  const {
+    children,
+    className
+  } = props,
+        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/es/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/es/components/table/TableScrollView.js

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

package/es/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/es/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/es/components/table/TableTd.js

@@ -1,17 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children"];
+const _excluded = ["className", "children", "noSpacing", "spacing"];
 import React from 'react';
 import classnames from 'classnames';
 export default function Td(componentProps) {
   const {
     className,
-    children
+    children,
+    noSpacing,
+    spacing
   } = componentProps,
         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-${spacing}`)
   }, props), children);
 }

package/es/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/es/components/table/TableTh.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"];
+const _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"],
+      _excluded2 = ["className"];
 import React from 'react';
 import classnames from 'classnames';
 import TableSortButton from './TableSortButton';
@@ -21,5 +22,18 @@ 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) {
+  let {
+    className = null
+  } = _ref,
+      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/es/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/es/components/table/TableTr.js

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

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

@@ -0,0 +1,19 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  & > tr > th,
+  & > tr > td,
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  &__th,
+  &__td {
+    position: relative;
+
+    border-spacing: 0;
+
+    word-break: keep-all;
+  }
+}

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

@@ -15,7 +15,7 @@
   // sortable
   & > thead > tr > th#{&}--sortable,
   & &__th#{&}--sortable {
-    color: var(--color-emerald-green);
+    color: var(--color-sea-green);
 
     .dnb-table__sort-button.dnb-button {
       > .dnb-icon {
@@ -63,7 +63,7 @@
       // underline
       &:not(:focus) .dnb-button__text::after {
         opacity: 1;
-        color: var(--color-emerald-green);
+        color: var(--color-sea-green);
       }
 
       @include hover() {
@@ -102,7 +102,7 @@
           right: -0.5rem;
         }
 
-        color: var(--color-emerald-green);
+        color: var(--color-sea-green);
       }
 
       // webkit fix
@@ -171,11 +171,6 @@
       }
     }
   }
-  & > thead > tr > th#{&}--no-wrap,
-  & > tbody > tr > th#{&}--no-wrap,
-  & &__th#{&}--no-wrap {
-    white-space: nowrap;
-  }
 
   & &__th,
   & > thead > tr > th {