@dnb/eufemia 9.46.2 → 9.47.0

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+
+var _TableContainer$Head, _TableContainer$Foot;
+
 const _excluded = ["children", "className"],
       _excluded2 = ["children", "className"],
       _excluded3 = ["children", "className"],
@@ -10,6 +13,8 @@ import TableScrollView from './TableScrollView';
 import { createSpacingClasses } from '../space/SpacingUtils';
 import { validateDOMAttributes } from '../../shared/component-helper';
 export default function TableContainer(props) {
+  var _content$, _content$2;
+
   const {
     children,
     className
@@ -19,9 +24,24 @@ export default function TableContainer(props) {
   const spacingClasses = createSpacingClasses(props);
   validateDOMAttributes(props, rest);
   const ScrollView = TableScrollView;
+  const isArray = Array.isArray(children);
+  const 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.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.createElement(TableContainer.Foot, {
+      key: "foot"
+    })));
+  }
+
   return React.createElement("section", _extends({
     className: classnames('dnb-table__container', className, spacingClasses)
-  }, rest), React.createElement(ScrollView, null, children));
+  }, rest), React.createElement(ScrollView, null, content));
 }
 export function TableContainerBody(props) {
   const {

package/es/components/table/TableTh.js

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

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