@dnb/eufemia 9.43.0 → 9.45.0

package/components/space/SpacingUtils.d.ts

@@ -2,14 +2,8 @@
  * Space helper
  *
  */
-import type { SpacingProps } from './types';
-declare type Props = SpacingProps | Record<string, unknown>;
-declare type StyleObjectProps = {
-    maxWidth?: string;
-    maxHeight?: string;
-    width?: string;
-    height?: string;
-};
+import type { StyleObjectProps, SpaceType, SpacingUnknownProps, SpacingProps } from './types';
+declare type SpaceNumber = number;
 export declare const spacingDefaultProps: {
     space: any;
     top: any;
@@ -27,17 +21,34 @@ export declare const spacePatterns: {
     'xx-large': number;
     'xx-large-x2': number;
 };
-export declare const translateSpace: (type: any) => any;
-export declare const splitTypes: (types: any) => any;
-export declare const sumTypes: (types: any) => any;
-export declare const createTypeModifiers: (types: any) => any;
-export declare const findType: (num: any, { returnObject }?: {
-    returnObject?: boolean;
-}) => string | [string, number];
-export declare const findNearestTypes: (num: any) => any[];
+/**
+ * Helper function to generate a calc(var(--spacing-large) + var(--spacing-small))
+ *
+ * @param types 'small', '16px', '1rem'
+ * @returns e.g. calc(var(--spacing-large) + var(--spacing-small))
+ */
+export declare const calc: (...types: Array<SpaceType>) => string;
+/**
+ * Creates a valid space CSS class out from given space types
+ *
+ * @param props
+ * @param Element to check if it should be handled as inline
+ * @returns "dnb-space__large dnb-space__small"
+ */
+export declare const createSpacingClasses: (props: SpacingProps
+/**
+ * To support typical not defined props form components
+ */
+ | SpacingUnknownProps, Element?: any) => any[];
+export declare const translateSpace: (type: SpaceType) => any;
+export declare const splitTypes: (types: SpaceType | Array<SpaceType>) => SpaceType[];
+export declare const sumTypes: (types: SpaceType | Array<SpaceType>) => any;
+export declare const createTypeModifiers: (types: SpaceType) => Array<SpaceType>;
+export declare const findType: (num: SpaceNumber) => SpaceType;
+export declare const findTypeAll: (num: SpaceNumber) => Array<SpaceType>;
+export declare const findNearestTypes: (num: SpaceNumber, multiply?: boolean) => any[];
 export declare const isValidSpaceProp: (propName: string) => boolean;
-export declare const removeSpaceProps: (props: Props) => Props;
-export declare const createSpacingClasses: (props: Props, Element?: any) => any[];
-export declare const createStyleObject: (props: Props & StyleObjectProps) => {};
+export declare const removeSpaceProps: (props: StyleObjectProps) => StyleObjectProps;
+export declare const createStyleObject: (props: StyleObjectProps) => {};
 export declare const isInline: (elementName: string) => boolean;
 export {};

package/components/space/SpacingUtils.js

@@ -2,32 +2,33 @@ import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.object.is-frozen.js";
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.object.entries.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.parse-float.js";
-import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.array.find.js";
-import "core-js/modules/es.object.entries.js";
 import "core-js/modules/es.array.reverse.js";
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.object.is-frozen.js";
-import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.index-of.js";
 import { warn } from '../../shared/component-helper';
 export var spacingDefaultProps = {
   space: null,
@@ -46,25 +47,95 @@ export var spacePatterns = {
   'xx-large': 3.5,
   'xx-large-x2': 7
 };
+export var calc = function calc() {
+  var result = [];
+
+  for (var _len = arguments.length, types = new Array(_len), _key = 0; _key < _len; _key++) {
+    types[_key] = arguments[_key];
+  }
+
+  types.forEach(function (rawTypes) {
+    createTypeModifiers(rawTypes).forEach(function (type) {
+      result.push("var(--spacing-".concat(type, ")"));
+    });
+  });
+  return result.length ? "calc(".concat(result.join(' + '), ")") : null;
+};
+export var createSpacingClasses = function createSpacingClasses(props) {
+  var Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
+
+  if (typeof p.space !== 'undefined') {
+    if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
+      p.top = p.right = p.bottom = p.left = p.space;
+    }
+
+    if (_typeof(p.space) === 'object') {
+      for (var i in p.space) {
+        if (!p[i] && isValidSpaceProp(i)) {
+          p[i] = p.space[i];
+        }
+      }
+    }
+
+    delete p.space;
+  }
+
+  return Object.entries(p).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        direction = _ref2[0],
+        cur = _ref2[1];
+
+    if (isValidSpaceProp(direction)) {
+      if (String(cur) === '0' || String(cur) === 'false') {
+        acc.push("dnb-space__".concat(direction, "--zero"));
+      } else if (cur) {
+        var typeModifiers = createTypeModifiers(cur);
+        var sum = sumTypes(typeModifiers);
+
+        if (sum > 10) {
+          warn("Spacing of more than 10rem is not supported! You used ".concat(sum, " / (").concat(typeModifiers.join(','), ")"));
+        } else {
+          var nearestTypes = findNearestTypes(sum, true);
+          acc = [].concat(_toConsumableArray(acc), _toConsumableArray(nearestTypes.map(function (type) {
+            return "dnb-space__".concat(direction, "--").concat(type);
+          })));
+        }
+      }
+    } else if (direction === 'no_collapse') {
+      acc.push('dnb-space--no-collapse');
+
+      if (Element && isInline(Element)) {
+        acc.push('dnb-space--inline');
+      }
+    }
+
+    return acc;
+  }, []);
+};
 export var translateSpace = function translateSpace(type) {
-  if (/-x2$/.test(type)) {
-    return spacePatterns[type.replace(/-x2$/, '')] * 2;
+  if (/-x2$/.test(String(type))) {
+    return spacePatterns[String(type).replace(/-x2$/, '')] * 2;
   }
 
-  return spacePatterns[type] || 0;
+  return spacePatterns[String(type)] || 0;
 };
 export var splitTypes = function splitTypes(types) {
   if (typeof types === 'string') {
-    types = types.split(/ /g);
+    return clean(types.split(/ /g));
   } else if (typeof types === 'boolean') {
     return ['small'];
   } else if (typeof types === 'number') {
     return [types];
   }
 
-  return types ? types.filter(function (r) {
-    return r && r.length > 0;
-  }) : null;
+  return clean(types) || null;
+
+  function clean(t) {
+    return t === null || t === void 0 ? void 0 : t.filter(function (r) {
+      return r && String(r).length > 0;
+    });
+  }
 };
 export var sumTypes = function sumTypes(types) {
   return splitTypes(types).map(function (type) {
@@ -80,18 +151,14 @@ export var sumTypes = function sumTypes(types) {
   }, 0);
 };
 export var createTypeModifiers = function createTypeModifiers(types) {
-  if (typeof types === 'number') {
-    types = String(types);
-  }
-
   return (splitTypes(types) || []).reduce(function (acc, type) {
     if (type) {
-      var firstLetter = type[0];
+      var firstLetter = String(type)[0];
 
       if (parseFloat(firstLetter) > -1) {
-        var num = parseFloat(type);
+        var num = parseFloat(String(type));
 
-        if (num >= 8 && /[0-9]px/.test(type)) {
+        if (num >= 8 && /[0-9]px/.test(String(type))) {
           num = num / 16;
         }
 
@@ -108,7 +175,7 @@ export var createTypeModifiers = function createTypeModifiers(types) {
         }
       }
 
-      if (!(parseFloat(type) > 0)) {
+      if (!(parseFloat(String(type)) > 0)) {
         acc.push(type);
       }
     }
@@ -117,52 +184,49 @@ export var createTypeModifiers = function createTypeModifiers(types) {
   }, []);
 };
 export var findType = function findType(num) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref$returnObject = _ref.returnObject,
-      returnObject = _ref$returnObject === void 0 ? false : _ref$returnObject;
-
-  var found = Object.entries(spacePatterns).find(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        k = _ref3[0],
-        v = _ref3[1];
-
-    return k && v === num;
-  }) || null;
-
-  if (returnObject) {
-    return found;
-  }
+  var found = findTypeAll(num);
 
   if (found) {
     return found[0];
   }
 
+  return null;
+};
+export var findTypeAll = function findTypeAll(num) {
+  var found = Object.entries(spacePatterns).find(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        k = _ref4[0],
+        v = _ref4[1];
+
+    return k && v === num;
+  }) || null;
   return found;
 };
 export var findNearestTypes = function findNearestTypes(num) {
+  var multiply = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var res = [];
-  var near = Object.entries(spacePatterns).reverse().find(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        k = _ref5[0],
-        v = _ref5[1];
+  var near = Object.entries(spacePatterns).reverse().filter(function (k) {
+    return multiply ? true : !k[0].includes('-x');
+  }).find(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 2),
+        k = _ref6[0],
+        v = _ref6[1];
 
     return k && num >= v;
   });
   var nearNum = near && near[1] || num;
-  var typeObject = findType(nearNum, {
-    returnObject: true
-  });
+  var types = findTypeAll(nearNum);
 
-  if (typeObject) {
-    var nearType = typeObject[0];
+  if (types) {
+    var nearType = types[0];
     res.push(nearType);
-    var leftOver = num - parseFloat(String(typeObject[1]));
-    var foundMoreTypes = findNearestTypes(leftOver);
+    var leftOver = num - parseFloat(String(types[1]));
+    var foundMoreTypes = findNearestTypes(leftOver, multiply);
     foundMoreTypes.forEach(function (type) {
       var index = res.indexOf(type);
 
       if (index !== -1) {
-        res[index] = "".concat(type, "-x2");
+        res[index] = multiply ? "".concat(type, "-x2") : type;
       }
     });
     res = [].concat(_toConsumableArray(res), _toConsumableArray(foundMoreTypes));
@@ -184,58 +248,6 @@ export var removeSpaceProps = function removeSpaceProps(props) {
 
   return p;
 };
-export var createSpacingClasses = function createSpacingClasses(props) {
-  var Element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
-
-  if (typeof p.space !== 'undefined') {
-    if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
-      p.top = p.right = p.bottom = p.left = p.space;
-    }
-
-    if (_typeof(p.space) === 'object') {
-      for (var i in p.space) {
-        if (!p[i] && isValidSpaceProp(i)) {
-          p[i] = p.space[i];
-        }
-      }
-    }
-
-    delete p.space;
-  }
-
-  return Object.entries(p).reduce(function (acc, _ref6) {
-    var _ref7 = _slicedToArray(_ref6, 2),
-        direction = _ref7[0],
-        cur = _ref7[1];
-
-    if (isValidSpaceProp(direction)) {
-      if (String(cur) === '0' || String(cur) === 'false') {
-        acc.push("dnb-space__".concat(direction, "--zero"));
-      } else if (cur) {
-        var typeModifiers = createTypeModifiers(cur);
-        var sum = sumTypes(typeModifiers);
-
-        if (sum > 10) {
-          warn("Spacing of more than 10rem is not supported! You used ".concat(sum, " / (").concat(typeModifiers.join(','), ")"));
-        } else {
-          var nearestTypes = findNearestTypes(sum);
-          acc = [].concat(_toConsumableArray(acc), _toConsumableArray(nearestTypes.map(function (type) {
-            return "dnb-space__".concat(direction, "--").concat(type);
-          })));
-        }
-      }
-    } else if (direction === 'no_collapse') {
-      acc.push('dnb-space--no-collapse');
-
-      if (Element && isInline(Element)) {
-        acc.push('dnb-space--inline');
-      }
-    }
-
-    return acc;
-  }, []);
-};
 export var createStyleObject = function createStyleObject(props) {
   var p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
 
@@ -262,10 +274,10 @@ export var createStyleObject = function createStyleObject(props) {
     maxHeight: p.maxHeight && "".concat(p.maxHeight, "rem"),
     width: p.width && "".concat(p.width, "rem"),
     height: p.height && "".concat(p.height, "rem")
-  }).reduce(function (acc, _ref8) {
-    var _ref9 = _slicedToArray(_ref8, 2),
-        key = _ref9[0],
-        val = _ref9[1];
+  }).reduce(function (acc, _ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+        key = _ref8[0],
+        val = _ref8[1];
 
     if (typeof val !== 'undefined') {
       acc[key] = val;

package/components/space/types.d.ts

@@ -3,26 +3,33 @@ export declare type SpacingElementProps = {
      * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
      *
      */
-    top?: SpaceTypes;
+    top?: SpaceType;
     /**
      * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
      *
      */
-    right?: SpaceTypes;
+    right?: SpaceType;
     /**
      * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
      *
      */
-    bottom?: SpaceTypes;
+    bottom?: SpaceType;
     /**
      * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
      *
      */
-    left?: SpaceTypes;
+    left?: SpaceType;
 };
-export declare type SpaceTypes = string | boolean | number;
+export declare type SpaceType = string | boolean | number;
 export declare type SpacingProps = SpacingElementProps & {
-    space?: SpaceTypes | SpacingElementProps;
+    space?: SpaceType | SpacingElementProps;
+};
+export declare type SpacingUnknownProps = Record<string, unknown>;
+export declare type StyleObjectProps = SpacingProps & {
+    maxWidth?: string;
+    maxHeight?: string;
+    width?: string;
+    height?: string;
 };
 /**
  * @deprecated Use SpacingElementProps instead

package/components/table/TableAccordion.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
-export declare function useTableAccordion({ children, className, props, expanded, disabled, noAnimation, }: {
+export declare function useTableAccordion({ children, className, props, expanded, disabled, noAnimation, onClick, onOpened, onClosed, }: {
     children: any;
     className: any;
     props: any;
     expanded: any;
     disabled: any;
     noAnimation: any;
+    onClick: any;
+    onOpened: any;
+    onClosed: any;
 }): JSX.Element;
 export declare function TableAccordionToggleButton(): JSX.Element;

package/components/table/TableAccordion.js

@@ -25,7 +25,10 @@ export function useTableAccordion(_ref) {
       props = _ref.props,
       expanded = _ref.expanded,
       disabled = _ref.disabled,
-      noAnimation = _ref.noAnimation;
+      noAnimation = _ref.noAnimation,
+      onClick = _ref.onClick,
+      onOpened = _ref.onOpened,
+      onClosed = _ref.onClosed;
   var tableContext = React.useContext(TableContext);
 
   var _React$useState = React.useState(function () {
@@ -114,7 +117,9 @@ export function useTableAccordion(_ref) {
       trIsOpen: trIsOpen,
       noAnimation: noAnimation,
       countTds: countTds,
-      hasAccordionContent: hasAccordionContent
+      hasAccordionContent: hasAccordionContent,
+      onOpened: onOpened,
+      onClosed: onClosed
     }
   }, React.createElement("tr", _extends({
     tabIndex: accordionContent && !disabled ? 0 : undefined,
@@ -152,6 +157,7 @@ export function useTableAccordion(_ref) {
     if (document.activeElement !== target && target.tagName !== 'INPUT' && !hasSelectedText()) {
       setOpen(!trIsOpen);
       setHadClick(true);
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
     }
   }
 }

package/components/table/TableAccordionContent.js

@@ -23,6 +23,7 @@ export default function TableAccordionContent(componentProps) {
   var allProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
   var trContext = React.useContext(TrContext);
   var innerRef = React.useRef(null);
+  var trRef = React.useRef(null);
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -33,7 +34,24 @@ export default function TableAccordionContent(componentProps) {
     open: Boolean(expanded || (trContext === null || trContext === void 0 ? void 0 : trContext.trIsOpen)),
     animate: Boolean(!noAnimation && !(trContext !== null && trContext !== void 0 && trContext.noAnimation)),
     onOpen: function onOpen(state) {
-      return setAriaLive(state ? true : null);
+      setAriaLive(state ? true : null);
+    },
+    onAnimationEnd: function onAnimationEnd(state) {
+      var _trContext$onOpened, _trContext$onClosed;
+
+      var event = {
+        target: trRef.current
+      };
+
+      switch (state) {
+        case 'opened':
+          (_trContext$onOpened = trContext.onOpened) === null || _trContext$onOpened === void 0 ? void 0 : _trContext$onOpened.call(trContext, event);
+          break;
+
+        case 'closed':
+          (_trContext$onClosed = trContext.onClosed) === null || _trContext$onClosed === void 0 ? void 0 : _trContext$onClosed.call(trContext, event);
+          break;
+      }
     }
   }),
       isInDOM = _useHeightAnimation.isInDOM,
@@ -45,7 +63,8 @@ export default function TableAccordionContent(componentProps) {
     "aria-hidden": !isInDOM,
     hidden: isInDOM ? undefined : true,
     role: isInDOM ? 'row' : undefined,
-    className: classnames('dnb-table__tr__accordion_content', className, isInDOM && "dnb-table__tr dnb-table__tr__accordion_content--expanded", isAnimating && 'dnb-table__tr__accordion_content--animating', isVisibleParallax && 'dnb-table__tr__accordion_content--parallax')
+    className: classnames('dnb-table__tr__accordion_content', className, isInDOM && "dnb-table__tr dnb-table__tr__accordion_content--expanded", isAnimating && 'dnb-table__tr__accordion_content--animating', isVisibleParallax && 'dnb-table__tr__accordion_content--parallax'),
+    ref: trRef
   }, props), React.createElement("td", {
     role: isInDOM ? 'cell' : undefined,
     colSpan: countTds,

package/components/table/TableTr.d.ts

@@ -12,19 +12,37 @@ export declare type TableTrProps = {
     noWrap?: boolean;
     /**
      * Set true to render the tr initially as expanded
+     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
      * Default: false
      */
     expanded?: boolean;
     /**
      * Set true to disable the tr to be accessible as an interactive element
+     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
      * Default: false
      */
     disabled?: boolean;
     /**
      * Set to true to skip animation
+     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
      * Default: false
      */
     noAnimation?: boolean;
+    /**
+     * Will emit when user clicks/expands the table row
+     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     */
+    onClick?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Will emit when table row is expanded
+     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     */
+    onOpened?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Will emit when table row is closed (after it was open)
+     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     */
+    onClosed?: (event?: React.SyntheticEvent) => void;
     /**
      * The content of the component.
      */

package/components/table/TableTr.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["variant", "noWrap", "expanded", "disabled", "noAnimation", "children", "className"];
+var _excluded = ["variant", "noWrap", "expanded", "disabled", "noAnimation", "onClick", "onOpened", "onClosed", "children", "className"];
 import React from 'react';
 import classnames from 'classnames';
 import { useTableAccordion } from './TableAccordion';
@@ -12,6 +12,9 @@ export default function Tr(componentProps) {
       expanded = componentProps.expanded,
       disabled = componentProps.disabled,
       noAnimation = componentProps.noAnimation,
+      onClick = componentProps.onClick,
+      onOpened = componentProps.onOpened,
+      onClosed = componentProps.onClosed,
       children = componentProps.children,
       _className = componentProps.className,
       props = _objectWithoutProperties(componentProps, _excluded);
@@ -28,7 +31,10 @@ export default function Tr(componentProps) {
     props: props,
     expanded: expanded,
     disabled: disabled,
-    noAnimation: noAnimation
+    noAnimation: noAnimation,
+    onClick: onClick,
+    onOpened: onOpened,
+    onClosed: onClosed
   });
 
   if (accordionTr) {

package/components/table/style/_table-header-buttons.scss

@@ -198,4 +198,8 @@
       margin-left: 0.5rem;
     }
   }
+
+  & > thead > &--no-wrap &__sort-button {
+    white-space: nowrap;
+  }
 }

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

@@ -12,18 +12,14 @@
     height: 0;
   }
 
-  // Target th because of Safari transparent issue
-  tr.sticky:not(.css-position) th {
-    position: relative;
-    z-index: 3; // over borders and TDs
+  tr.sticky {
+    position: sticky;
+    z-index: 4; // over borders and TDs
 
-    will-change: transform;
     transform: translate3d(0, var(--table-offset, 0), 0);
   }
 
   tr.sticky.css-position {
-    position: sticky;
-    z-index: 3; // over borders and TDs
     top: var(--table-top, 0); // is set by "stickyOffset" prop
   }
 

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

@@ -25,7 +25,8 @@
     tbody
     &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) {
     // use clip-path, because border-radius does not clip on tr's
-    clip-path: inset(0 round 0.5rem 0.5rem 0 0);
+    // use "-1rem" to add room for sticky shadow
+    clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
   }
   &--outline tbody &__tr:last-of-type,
   &--outline