@dnb/eufemia 9.46.2 → 9.47.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.47.0](https://github.com/dnbexperience/eufemia/compare/v9.46.2...v9.47.0) (2023-02-05)
+
+
+### Bug Fixes
+
+* **TableContainer:** enhance handling of empty head and foot area ([#1970](https://github.com/dnbexperience/eufemia/issues/1970)) ([762c667](https://github.com/dnbexperience/eufemia/commit/762c667f48c3039d23dd9c66901fe0776bd77f57))
+* **TableContainer:** ensure bottom border on all tables ([#1969](https://github.com/dnbexperience/eufemia/issues/1969)) ([4583ba8](https://github.com/dnbexperience/eufemia/commit/4583ba83f1ff8144851770219333a74d535efbce))
+
+
+### Features
+
+* **Table:** add support for row scope only header ([#1971](https://github.com/dnbexperience/eufemia/issues/1971)) ([aff2e40](https://github.com/dnbexperience/eufemia/commit/aff2e403b991c8ec53d4eccfbed9a92234c47e13))
+
 ## [9.46.2](https://github.com/dnbexperience/eufemia/compare/v9.46.1...v9.46.2) (2023-01-29)
 
 

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

@@ -9,7 +9,7 @@ export declare type TableContainerProps = {
         React.ReactElement<TableContainerHeadProps>,
         React.ReactElement<TableContainerBodyProps>,
         React.ReactElement<TableContainerFootProps>
-    ];
+    ] | React.ReactElement<TableContainerBodyProps>;
 };
 export declare type TableContainerAllProps = TableContainerProps & React.TableHTMLAttributes<HTMLTableRowElement> & SpacingProps;
 declare function TableContainer(props: TableContainerAllProps): JSX.Element;
@@ -30,13 +30,13 @@ export declare type TableContainerHeadProps = {
     /**
      * The content of the component.
      */
-    children: React.ReactNode;
+    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;
+    children?: React.ReactNode;
 };
 export declare function TableContainerFoot(props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/cjs/components/table/TableContainer.js

@@ -26,6 +26,8 @@ var _SpacingUtils = require("../space/SpacingUtils");
 
 var _componentHelper = require("../../shared/component-helper");
 
+var _TableContainer$Head, _TableContainer$Foot;
+
 var _excluded = ["children", "className"],
     _excluded2 = ["children", "className"],
     _excluded3 = ["children", "className"],
@@ -40,6 +42,8 @@ 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; }
 
 function TableContainer(props) {
+  var _content$, _content$2;
+
   var children = props.children,
       className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
@@ -47,9 +51,24 @@ function TableContainer(props) {
   var spacingClasses = (0, _SpacingUtils.createSpacingClasses)(props);
   (0, _componentHelper.validateDOMAttributes)(props, rest);
   var ScrollView = _TableScrollView.default;
+  var isArray = Array.isArray(children);
+  var content = isArray ? children : [children];
+
+  if (((_content$ = content[0]) === null || _content$ === void 0 ? void 0 : _content$.type) !== TableContainer.Head) {
+    content.unshift(_TableContainer$Head || (_TableContainer$Head = _react.default.createElement(TableContainer.Head, {
+      key: "head"
+    })));
+  }
+
+  if (((_content$2 = content[2]) === null || _content$2 === void 0 ? void 0 : _content$2.type) !== TableContainer.Foot) {
+    content.push(_TableContainer$Foot || (_TableContainer$Foot = _react.default.createElement(TableContainer.Foot, {
+      key: "foot"
+    })));
+  }
+
   return _react.default.createElement("section", _extends({
     className: (0, _classnames.default)('dnb-table__container', className, spacingClasses)
-  }, rest), _react.default.createElement(ScrollView, null, children));
+  }, rest), _react.default.createElement(ScrollView, null, content));
 }
 
 function TableContainerBody(props) {

package/cjs/components/table/TableTh.js

@@ -41,8 +41,8 @@ function Th(componentProps) {
       noWrap = componentProps.noWrap,
       props = _objectWithoutProperties(componentProps, _excluded);
 
-  var role = props.scope === 'row' ? 'rowheader' : 'columnheader';
-  var scope = props.scope === 'row' ? 'row' : 'col';
+  var role = props.scope === 'row' || props.scope === 'rowgroup' ? 'rowheader' : 'columnheader';
+  var scope = props.scope === 'row' ? 'row' : props.scope || 'col';
   var ariaSort = sortable ? reversed ? 'descending' : 'ascending' : undefined;
   return _react.default.createElement("th", _extends({
     role: role,

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

@@ -72,13 +72,17 @@
     position: relative;
     z-index: 2;
   }
-  &__tr--has-accordion-content:hover,
-  &__tr--has-accordion-content:active,
-  &__tr--has-accordion-content:focus,
   &__tr--has-accordion-content#{&}__tr--expanded,
   &__tr__accordion_content {
-    // ensure borders are visible in certain states
-    z-index: 3;
+    z-index: 3; // ensure borders are visible in certain states
+  }
+
+  &__tr--has-accordion-content {
+    &:hover,
+    &:active,
+    html[data-whatinput='keyboard'] &:focus {
+      z-index: 5; // over table outline border
+    }
   }
 
   &__tr--has-accordion-content#{&}__tr--expanded
@@ -129,6 +133,13 @@
     }
   }
 
+  &--outline
+    tbody
+    &__tr--has-accordion-content:not(#{&}__tr--expanded):not(:nth-last-child(2))
+    &__td::before {
+    bottom: -0.0625rem;
+  }
+
   &__tr--has-accordion-content#{&}__tr--expanded:not(&__tr--disabled):hover
     &__td {
     background-color: var(--color-white);
@@ -193,14 +204,16 @@
     @include IS_SAFARI_DESKTOP {
       &[hidden] {
         /**
-          * By reverting the display from "none" to "block",
-          * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
-          */
+        * By reverting the display from "none" to "block",
+        * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
+        */
         display: block;
       }
     }
 
     td {
+      padding: 0 !important; // medium and small size sets padding – but we never want a padding on this td
+
       width: calc(100% - 3.5rem);
 
       .dnb-table__size--medium & {
@@ -279,9 +292,40 @@
     vertical-align: top;
   }
 
+  &--outline
+    tbody
+    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    &__td:first-of-type {
+    &,
+    &::before,
+    &::after {
+      border-radius: 0 0 0 0.5rem;
+    }
+  }
+  &--outline tbody &__tr:last-of-type &__td:last-of-type,
+  &--outline
+    tbody
+    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    &__td:last-of-type {
+    &,
+    &::before,
+    &::after {
+      border-radius: 0 0 0.5rem 0;
+    }
+  }
+  &--outline tbody &__tr#{&}__tr__accordion_content:last-of-type &__td {
+    &,
+    &::before,
+    &::after {
+      border-radius: 0 0 0.5rem 0.5rem;
+    }
+  }
+
+  // stylelint-disable-next-line
   &__tr--has-accordion-content:not(&__tr--disabled) {
     cursor: pointer;
   }
+
   // prevent selection while animating – useful when user double-clicks
   // TODO: Our SASS version does not support :has – so we may use this in future
   // &__tr--has-accordion-content:has(& + &__tr__accordion_content--animating) {

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

@@ -34,6 +34,22 @@
       &__size--large .dnb-table__th {
         padding-top: 1.5rem;
       }
+
+      position: relative; // because of bottom border
+      &::after {
+        @include tableBorder();
+        border-bottom: var(--border);
+      }
+
+      /* stylelint-disable */
+      & tbody:first-child,
+      & > :not(thead) + tbody {
+        .dnb-table__tr:first-of-type .dnb-table__th::after,
+        .dnb-table__tr:first-of-type .dnb-table__td::after {
+          border-top: none;
+        }
+      }
+      /* stylelint-enable */
     }
   }
 
@@ -41,7 +57,8 @@
     padding: 2rem 1rem 0;
 
     &--empty {
-      padding: 0.5rem 0 0;
+      padding: 0;
+      min-height: 1.5rem;
     }
 
     .dnb-spacing & .dnb-h--large:not([class*='space__top']) {
@@ -53,7 +70,8 @@
     padding-bottom: 1.25rem; // because of 8px scrollbar
 
     &--empty {
-      padding-bottom: 1.5rem;
+      padding: 0;
+      min-height: 1rem;
     }
   }
 

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

@@ -16,80 +16,18 @@
       border-bottom: none;
     }
   }
-  &:not(#{&}--outline) tbody &__tr:last-of-type &__td::after,
-  &:not(#{&}--outline) tbody &__tr &__td[rowspan]::after {
-    bottom: -0.0625rem;
-    border-bottom: var(--border);
-  }
 
   // table outline
-  &--outline tbody &__td {
-    &: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);
-    }
-
-    /* stylelint-disable */
+  &--outline {
+    position: relative;
     &,
-    &::before,
     &::after {
-      transition: border-radius 400ms var(--easing-default);
+      border-radius: 0.5rem;
     }
-    /* stylelint-enable */
-  }
-  &--outline tbody &__tr:last-of-type &__td {
     &::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,
-  &--outline
-    tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
-    &__td:first-of-type {
-    &,
-    &::before,
-    &::after {
-      border-radius: 0 0 0 0.5rem;
-    }
-  }
-  &--outline tbody &__tr:last-of-type &__td:last-of-type,
-  &--outline
-    tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
-    &__td:last-of-type {
-    &,
-    &::before,
-    &::after {
-      border-radius: 0 0 0.5rem 0;
-    }
-  }
-  &--outline tbody &__tr#{&}__tr__accordion_content:last-of-type &__td {
-    &,
-    &::before,
-    &::after {
-      border-radius: 0 0 0.5rem 0.5rem;
+      z-index: 3;
+      border: var(--outline);
     }
   }
 
@@ -112,6 +50,36 @@
     }
   }
 
+  // no thead, should have th in body
+  /* stylelint-disable */
+  &--outline tbody:first-child &__tr:first-of-type &__th,
+  &--outline > :not(thead) + tbody &__tr:first-of-type &__th {
+    &::after {
+      border-top: var(--outline);
+    }
+    &:first-of-type,
+    &:first-of-type::after {
+      border-radius: 0.5rem 0 0 0;
+    }
+  }
+  &--outline > tbody:first-child &__tr:first-of-type &__td,
+  &--outline > :not(thead) + tbody &__tr:first-of-type &__td {
+    &::after {
+      border-top: var(--outline);
+    }
+    &:last-of-type,
+    &:last-of-type::after {
+      border-radius: 0 0.5rem 0 0;
+    }
+  }
+  &:not(&--outline)#{&}--border > tbody:first-child &__td:last-of-type,
+  &:not(&--outline)#{&}--border > :not(thead) + tbody &__td:last-of-type {
+    &::after {
+      border-right: var(--border);
+    }
+  }
+  /* stylelint-enable */
+
   // spacing
   &__td--no-spacing,
   td#{&}__td--no-spacing {

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

@@ -12,46 +12,53 @@
   }
 
   // table border
-  &--outline thead &__th {
+  &--border tbody &__th {
     &::after {
       @include tableBorder();
 
-      border-top: var(--outline);
-    }
-
-    &:first-of-type::after {
-      border-left: var(--outline);
-    }
-    &:last-of-type::after {
-      border-right: 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;
+      border-top: var(--border);
     }
   }
-  &--outline tbody &__th:first-of-type::after {
-    @include tableBorder();
+  // &--outline thead &__th {
+  //   &::after {
+  //     @include tableBorder();
 
-    border-left: var(--outline);
-  }
-  &--outline tbody &__tr:last-of-type &__th {
-    &::after {
-      @include tableBorder();
+  //     border-top: var(--outline);
+  //   }
 
-      border-bottom: var(--outline);
-    }
+  //   &:first-of-type::after {
+  //     border-left: var(--outline);
+  //   }
+  //   &:last-of-type::after {
+  //     border-right: 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 &__th:first-of-type::after {
+  //   @include tableBorder();
 
-    &:first-of-type::after {
-      border-radius: 0 0 0 0.5rem;
-    }
-  }
+  //   border-left: var(--outline);
+  // }
+  // &--outline tbody &__tr:last-of-type &__th {
+  //   &::after {
+  //     @include tableBorder();
+
+  //     border-bottom: var(--outline);
+  //   }
+
+  //   &:first-of-type::after {
+  //     border-radius: 0 0 0 0.5rem;
+  //   }
+  // }
 }

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

@@ -3,18 +3,7 @@
 *
 */
 
-@mixin tableBorder {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-
-  pointer-events: none;
-}
-
+@import './dnb-table-mixins.scss';
 @import './_table-header-buttons.scss';
 
 .dnb-table {
@@ -39,9 +28,19 @@
 
   & > caption {
     caption-side: bottom;
-    margin-top: 0.5rem;
+    padding: 0.5rem 0 0.5rem 1rem;
 
     font-size: var(--font-size-basis);
+    background-color: var(--color-white);
+    text-align: left;
+  }
+  &--border > caption:not(.dnb-sr-only) {
+    position: relative;
+    &::after {
+      @include tableBorder();
+      top: -0.0625rem; // so we are behind the border-bottom (end of table)
+      border-top: var(--border);
+    }
   }
 
   &.dnb-skeleton {

package/cjs/components/table/style/dnb-table-mixins.scss

@@ -0,0 +1,11 @@
+@mixin tableBorder {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+
+  pointer-events: none;
+}