@dnb/eufemia 9.46.2 → 9.47.1

package/components/upload/UploadFileInput.js

@@ -1,6 +1,5 @@
 var _UploadStatus;
 
-import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.string.iterator.js";
@@ -10,7 +9,7 @@ import { folder as FolderIcon } from '../../icons';
 import { makeUniqueId } from '../../shared/component-helper';
 import { UploadContext } from './UploadContext';
 import UploadStatus from './UploadStatus';
-import { extendWithAbbreviation } from './UploadVerify';
+import { getAcceptedFileTypes } from './UploadVerify';
 
 var UploadFileInput = function UploadFileInput() {
   var fileInput = useRef(null);
@@ -28,15 +27,10 @@ var UploadFileInput = function UploadFileInput() {
   };
 
   var sharedId = id || makeUniqueId();
-  var accept = extendWithAbbreviation(acceptedFileTypes).map(function (type) {
-    return ".".concat(type);
-  }).join(',');
-  return React.createElement("div", {
-    "data-testid": "upload-file-input"
-  }, React.createElement(Button, {
+  var accept = getAcceptedFileTypes(acceptedFileTypes);
+  return React.createElement("div", null, React.createElement(Button, {
     top: "medium",
     id: "".concat(sharedId, "-input"),
-    "data-testid": "upload-file-input-button",
     className: "dnb-upload__file-input-button",
     icon: FolderIcon,
     icon_position: "left",
@@ -45,7 +39,6 @@ var UploadFileInput = function UploadFileInput() {
     onClick: openFileDialog
   }, buttonText), _UploadStatus || (_UploadStatus = React.createElement(UploadStatus, null)), React.createElement("input", {
     "aria-labelledby": "".concat(sharedId, "-input"),
-    "data-testid": "upload-file-input-input",
     ref: fileInput,
     accept: accept,
     className: "dnb-upload__file-input",

package/components/upload/UploadFileList.js

@@ -25,7 +25,6 @@ function UploadFileList() {
   }
 
   return React.createElement("ul", {
-    "data-testid": "upload-file-list",
     className: "dnb-upload__file-list",
     "aria-label": fileListAriaLabel
   }, files.map(function (uploadFile, index) {

package/components/upload/UploadFileListCell.js

@@ -2,15 +2,15 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 var _ProgressIndicator, _Icon;
 
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/web.url.js";
 import "core-js/modules/web.url-search-params.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.function.name.js";
 import React, { useRef } from 'react';
 import classnames from 'classnames';
 import Button from '../button/Button';
@@ -21,6 +21,7 @@ import P from '../../elements/P';
 import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
 import { getPreviousSibling, warn } from '../../shared/component-helper';
 import useUpload from './useUpload';
+import { getFileTypeFromExtension } from './UploadVerify';
 var images = {
   pdf: pdf,
   xls: xls,
@@ -32,7 +33,7 @@ var images = {
 };
 
 var UploadFileListCell = function UploadFileListCell(_ref) {
-  var _div, _a, _FormStatus;
+  var _div, _P, _FormStatus;
 
   var id = _ref.id,
       uploadFile = _ref.uploadFile,
@@ -42,10 +43,9 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   var file = uploadFile.file,
       errorMessage = uploadFile.errorMessage,
       isLoading = uploadFile.isLoading;
-  var name = file.name,
-      type = file.type;
-  var fileType = type.split('/')[1] || '';
   var hasWarning = errorMessage != null;
+  var fileType = getFileTypeFromExtension(file);
+  var humanFileType = fileType.toUpperCase();
   var imageUrl = URL.createObjectURL(file);
   var cellRef = useRef();
   var exists = useExistsHighlight(id, file);
@@ -66,7 +66,6 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   };
 
   return React.createElement("li", {
-    "data-testid": "upload-file-list-cell",
     className: classnames('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', exists && 'dnb-upload__file-cell--highlight'),
     ref: cellRef
   }, React.createElement("div", {
@@ -74,7 +73,6 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   }, React.createElement("div", {
     className: "dnb-upload__file-cell__content__left"
   }, getIcon(), getTitle()), React.createElement("div", null, React.createElement(Button, {
-    "data-testid": "upload-delete-button",
     icon: TrashIcon,
     variant: "tertiary",
     onClick: onDeleteHandler,
@@ -83,9 +81,7 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
 
   function getIcon() {
     if (isLoading) {
-      return _ProgressIndicator || (_ProgressIndicator = React.createElement(ProgressIndicator, {
-        "data-testid": "upload-progress-indicator"
-      }));
+      return _ProgressIndicator || (_ProgressIndicator = React.createElement(ProgressIndicator, null));
     }
 
     if (hasWarning) return _Icon || (_Icon = React.createElement(Icon, {
@@ -93,7 +89,12 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
     }));
     var iconFileType = fileType;
 
-    if (!Object.prototype.hasOwnProperty.call(images, fileType)) {
+    if (!iconFileType) {
+      var mimeParts = file.type.split('/');
+      iconFileType = images[mimeParts[0]] || images[mimeParts[1]];
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(images, iconFileType)) {
       iconFileType = 'file';
     }
 
@@ -107,23 +108,20 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
       className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading"
     }, loadingText)) : React.createElement("div", {
       className: "dnb-upload__file-cell__text-container"
-    }, _a || (_a = React.createElement("a", {
-      "data-testid": "upload-file-anchor",
+    }, React.createElement("a", {
       target: "_blank",
       href: imageUrl,
       className: "dnb-anchor dnb-upload__file-cell__title",
       rel: "noopener noreferrer"
-    }, name)), React.createElement(P, {
-      "data-testid": "upload-subtitle",
+    }, file.name), _P || (_P = React.createElement(P, {
       className: "dnb-upload__file-cell__subtitle",
       size: "x-small",
       top: "xx-small"
-    }, fileType.toUpperCase()));
+    }, humanFileType)));
   }
 
   function getWarning() {
     return hasWarning ? _FormStatus || (_FormStatus = React.createElement(FormStatus, {
-      "data-testid": "upload-warning",
       top: "small",
       text: errorMessage,
       stretch: true

package/components/upload/UploadInfo.js

@@ -25,10 +25,8 @@ var UploadInfo = function UploadInfo() {
       fileMaxSize = context.fileMaxSize;
   var prettyfiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
   return React.createElement(React.Fragment, null, React.createElement(Lead, {
-    "data-testid": "upload-title",
     space: "0"
   }, title), React.createElement(P, {
-    "data-testid": "upload-text",
     top: "xx-small",
     className: "dnb-upload__text"
   }, text), React.createElement(Dl, {
@@ -36,13 +34,7 @@ var UploadInfo = function UploadInfo() {
     bottom: 0,
     direction: "horizontal",
     className: "dnb-upload__condition-list"
-  }, React.createElement(Dl.Item, null, React.createElement(Dt, {
-    "data-testid": "upload-accepted-formats"
-  }, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), React.createElement(Dl.Item, null, React.createElement(Dt, {
-    "data-testid": "upload-file-size"
-  }, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), filesAmountLimit < defaultProps.filesAmountLimit && React.createElement(Dl.Item, null, React.createElement(Dt, {
-    "data-testid": "upload-file-amount-limit"
-  }, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))));
+  }, prettyfiedAcceptedFileFormats && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileTypeDescription), React.createElement(Dd, null, prettyfiedAcceptedFileFormats)), React.createElement(Dl.Item, null, React.createElement(Dt, null, fileSizeDescription), React.createElement(Dd, null, String(fileSizeContent).replace('%size', format(fileMaxSize).toString()))), filesAmountLimit < defaultProps.filesAmountLimit && React.createElement(Dl.Item, null, React.createElement(Dt, null, fileAmountDescription), React.createElement(Dd, null, filesAmountLimit))));
 };
 
 export default UploadInfo;

package/components/upload/UploadVerify.d.ts

@@ -1,5 +1,8 @@
 import { UploadFile, UploadContextProps, UploadAcceptedFileTypes } from './types';
 export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];
+export declare function getFileTypeFromExtension(file: File): string;
+export declare function getAcceptedFileTypes(acceptedFileTypes: UploadAcceptedFileTypes): string;
+export declare function hasPreferredMimeType(acceptedFileTypes: UploadAcceptedFileTypes, file: File): boolean;
 export declare function extendWithAbbreviation(acceptedFileTypes: UploadAcceptedFileTypes, abbreviations?: {
     jpg: string;
 }): string[];

package/components/upload/UploadVerify.js

@@ -7,6 +7,9 @@ import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.string.split.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.entries.js";
 import { format } from '../number-format/NumberUtils';
@@ -26,8 +29,9 @@ export function verifyFiles(files, context) {
       return false;
     }
 
+    var fileType = hasPreferredMimeType(acceptedFileTypes, file) ? file.type : getFileTypeFromExtension(file) || file.type;
     var foundType = extendWithAbbreviation(acceptedFileTypes).some(function (type) {
-      return file.type.includes(type);
+      return fileType.includes(type);
     });
     return !foundType ? errorUnsupportedFile : null;
   };
@@ -44,6 +48,19 @@ export function verifyFiles(files, context) {
   });
   return cleanedFiles;
 }
+export function getFileTypeFromExtension(file) {
+  return file.name.includes('.') && file.name.replace(/.*\.([^.]+)$/, '$1') || null;
+}
+export function getAcceptedFileTypes(acceptedFileTypes) {
+  return extendWithAbbreviation(acceptedFileTypes).map(function (type) {
+    return type.includes('/') ? type : ".".concat(type);
+  }).join(',');
+}
+export function hasPreferredMimeType(acceptedFileTypes, file) {
+  return file.type.split('/')[1] && (!(acceptedFileTypes !== null && acceptedFileTypes !== void 0 && acceptedFileTypes.length) || (acceptedFileTypes === null || acceptedFileTypes === void 0 ? void 0 : acceptedFileTypes.some(function (type) {
+    return type.toLowerCase() === file.type.toLowerCase();
+  })));
+}
 export function extendWithAbbreviation(acceptedFileTypes) {
   var abbreviations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     jpg: 'jpeg'

package/es/components/input-masked/InputMasked.js

@@ -15,6 +15,17 @@ import Input, { inputPropTypes } from '../input/Input';
 import Context from '../../shared/Context';
 const InputMasked = React.forwardRef((props, ref) => {
   const context = React.useContext(Context);
+
+  if (props !== null && props !== void 0 && props.mask) {
+    const alias = context === null || context === void 0 ? void 0 : context.InputMasked;
+
+    for (const key in alias) {
+      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {
+        delete alias[key];
+      }
+    }
+  }
+
   const contextAndProps = React.useCallback(extendPropsWithContext(props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked), [props, InputMasked.defaultProps, context === null || context === void 0 ? void 0 : context.InputMasked]);
   return React.createElement(InputMaskedContext.Provider, {
     value: {
@@ -55,7 +66,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   on_submit_blur: PropTypes.func
 }, inputPropTypes) : void 0;
 InputMasked.defaultProps = _objectSpread(_objectSpread({}, Input.defaultProps), {}, {
-  mask: [],
+  mask: null,
   number_mask: null,
   currency_mask: null,
   mask_options: null,

package/es/components/input-masked/InputMaskedHooks.js

@@ -182,7 +182,7 @@ export const useInputElement = () => {
       inputRef: ref,
       inputElement: inputElementRef.current,
       pipe: pipe,
-      mask: mask,
+      mask: mask || [],
       showMask: showMask,
       guide: showGuide,
       keepCharPositions: keepCharPositions,

package/es/components/input-masked/InputMaskedUtils.js

@@ -63,8 +63,8 @@ export const correctNumberValue = ({
   value = value.replace('.', decimalSymbol);
 
   if (localValue !== null) {
-    const localNumberValue = localValue.replace(/[^\d,.]/g, '');
-    const numberValue = value.replace(/[^\d,.]/g, '');
+    const localNumberValue = localValue.replace(/[^\d,.-]/g, '');
+    const numberValue = value.replace(/[^\d,.-]/g, '');
     const endsWithDecimal = localNumberValue.endsWith(decimalSymbol);
     const endsWithZeroAndDecimal = localNumberValue.endsWith(`${decimalSymbol}0`);
 
@@ -78,7 +78,7 @@ export const correctNumberValue = ({
       value = localValue;
     }
 
-    if (/^-|-0$/.test(localValue)) {
+    if (/^(-|-0)$/.test(localValue.replace(/[^\d-0]/g, ''))) {
       value = localValue;
     } else if (localNumberValue === '' && numberValue === '0') {
       value = '';

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 {