@dnb/eufemia 10.38.0 → 10.39.0

package/components/table/TableClickableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableClickableHead.js","names":["React","classnames","keycode","hasSelectedText","Button","IconPrimary","Th","Td","TableContext","TableClickableHead","allProps","children","className","disabled","onClick","onOpened","onClosed","trIsOpen","trIsHover","trHadClick","clickable","noAnimation","onMouseEnter","onMouseLeave","onKeyDown","ariaLabel","props","_objectWithoutProperties","_excluded","trParams","onKeydownHandler","createElement","_extends","tabIndex","undefined","event","nativeEvent","target","document","activeElement","tagName","preventDefault","onClickTr","allowInteractiveElement","arguments","length","TableClickableButtonTd","_React$useContext","icon","tableContextAllProps","useContext","iconSize","size","Boolean","on_click","TableIconSrTh","text","isTableHead","some","element","type"],"sources":["../../../../src/components/table/TableClickableHead.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport { hasSelectedText } from '../../shared/helpers'\nimport Button from '../button/Button'\nimport IconPrimary from '../icon/IconPrimary'\nimport Th from './TableTh'\nimport Td from './TableTd'\nimport { TableContext } from './TableContext'\nimport type { TableTrProps } from './TableTr'\n\nexport type TableClickableHeadProps = {\n  trIsOpen?: boolean\n  trIsHover?: boolean\n  trHadClick?: boolean\n  clickable: boolean\n  noAnimation?: boolean\n  ariaLabel: string\n} & TableTrProps &\n  React.TableHTMLAttributes<HTMLTableRowElement>\n\nexport function TableClickableHead(allProps: TableClickableHeadProps) {\n  const {\n    children,\n    className,\n    disabled,\n    onClick,\n    onOpened,\n    onClosed,\n\n    trIsOpen,\n    trIsHover,\n    trHadClick,\n    clickable,\n    noAnimation,\n    onMouseEnter,\n    onMouseLeave,\n    onKeyDown,\n    ariaLabel,\n    ...props\n  } = allProps\n\n  const trParams =\n    !disabled && clickable\n      ? {\n          onClick: onClick,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n          onKeyDown: onKeydownHandler,\n        }\n      : {}\n\n  return (\n    <tr\n      tabIndex={clickable && !disabled ? 0 : undefined}\n      className={classnames(\n        className,\n        clickable && 'dnb-table__tr--clickable',\n        trIsOpen && 'dnb-table__tr--expanded',\n        disabled && 'dnb-table__tr--disabled',\n        noAnimation && 'dnb-table__tr--no-animation',\n        trIsHover && trHadClick && 'dnb-table__tr--hover'\n      )}\n      {...trParams}\n      {...props}\n    >\n      {children}\n    </tr>\n  )\n\n  function onKeydownHandler(\n    event: React.KeyboardEvent<HTMLTableRowElement>\n  ) {\n    switch (keycode(event.nativeEvent)) {\n      case 'space':\n      case 'enter':\n        {\n          const target = event.target as HTMLElement\n          if (\n            document.activeElement !== target ||\n            target.tagName === 'TR'\n          ) {\n            onKeyDown(event)\n            event.preventDefault()\n          }\n        }\n        break\n    }\n  }\n}\n\nexport function onClickTr(\n  event: React.SyntheticEvent,\n  allowInteractiveElement = false,\n  onClick?: (event: React.SyntheticEvent) => void\n) {\n  const target = event.target as HTMLElement\n  if (\n    /**\n     * Do not toggle if user clicked an interactive element (input, button, etc.).\n     * Interactive to set activeElement on mouseDown, we we can check against it.\n     */\n    ((document.activeElement !== target &&\n      /**\n       * Safari on macOS needs this extra check:\n       *\n       * > For example, on macOS systems, elements that aren't text input elements are not typically focusable by default.\n       * https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement\n       */\n      target.tagName !== 'INPUT' &&\n      target.tagName !== 'LABEL') ||\n      allowInteractiveElement) &&\n    /**\n     * Let the user select text,\n     * without triggering the onclick.\n     */\n    !hasSelectedText()\n  ) {\n    onClick?.(event)\n  }\n}\n\nexport function TableClickableButtonTd(props: {\n  trIsOpen?: boolean\n  ariaLabel: string\n  icon: 'chevron_down' | 'chevron_right'\n  onClick: (\n    event: React.SyntheticEvent,\n    allowInteractiveElement: boolean\n  ) => void\n}) {\n  const { trIsOpen, ariaLabel, icon, onClick } = props\n\n  const tableContextAllProps = React.useContext(TableContext)?.allProps\n  const iconSize =\n    tableContextAllProps?.size === 'medium' ||\n    tableContextAllProps?.size === 'small'\n      ? 'basis'\n      : 'medium'\n\n  return (\n    <Td className=\"dnb-table__td__button-icon\">\n      <span className=\"dnb-table__button\">\n        <IconPrimary icon={icon} size={iconSize} />\n        <Button\n          className=\"dnb-sr-only\"\n          tabIndex={-1}\n          aria-label={ariaLabel}\n          aria-expanded={Boolean(trIsOpen)}\n          {...(trIsOpen != null\n            ? { 'aria-expanded': Boolean(trIsOpen) }\n            : {})}\n          on_click={(event) => onClick(event, true)}\n        />\n      </span>\n    </Td>\n  )\n}\n\nexport function TableIconSrTh(props: { text: string }) {\n  const { text } = props\n\n  return (\n    <Th aria-hidden className=\"dnb-table__th__button-icon\">\n      <div>{text}</div>\n    </Th>\n  )\n}\n\nexport const isTableHead = (children: React.ReactNode[]) =>\n  children.some((element: React.ReactElement) => element.type === Th)\n"],"mappings":"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"}

package/components/table/TableDocs.js

@@ -1,12 +1,12 @@
 export const TableProperties = {
-  accordion: {
-    doc: 'Set to true if you have one or more rows that contains an accordion content.',
-    type: 'boolean',
-    defaultValue: 'false',
+  mode: {
+    doc: 'Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.',
+    type: [`'accordion'`, `'navigation'`],
+    defaultValue: 'null',
     status: 'optional'
   },
   accordionChevronPlacement: {
-    doc: 'Defines where the chevron will be placed.',
+    doc: 'Defines where the chevron will be placed, should only be used together with mode="accordion".',
     type: [`'start'`, `'end'`],
     defaultValue: `'start'`,
     status: 'optional'
@@ -117,7 +117,7 @@ export const TrProperties = {
 };
 export const TrEventProperties = {
   onClick: {
-    doc: 'will emit when user clicks/expands the table row. Returns a native click.',
+    doc: 'Will emit when user clicks/expands or on keydown space/enter(in mode="accordion" and mode="navigation") in the table row. Returns a native click.',
     type: '(event) => void',
     defaultValue: 'undefined',
     status: 'optional'

package/components/table/TableDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableDocs.js","names":["TableProperties","accordion","doc","type","defaultValue","status","accordionChevronPlacement","border","outline","sticky","stickyOffset","size","fixed","children","className","skeleton","TableEventProperties","collapseAllHandleRef","TrProperties","variant","noWrap","expanded","disabled","noAnimation","TrEventProperties","onClick","onOpened","onClosed","ThProperties","sortable","active","reversed","TdProperties","noSpacing","spacing"],"sources":["../../../../src/components/table/TableDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TableProperties: PropertiesTableProps = {\n  accordion: {\n    doc: 'Set to true if you have one or more rows that contains an accordion content.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  accordionChevronPlacement: {\n    doc: 'Defines where the chevron will be placed.',\n    type: [`'start'`, `'end'`],\n    defaultValue: `'start'`,\n    status: 'optional',\n  },\n  border: {\n    doc: 'Use `true` to show borders between table data cells.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  outline: {\n    doc: 'Use `true` to show an outline border around the table',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  sticky: {\n    doc: \"Use `true` to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.\",\n    type: ['boolean', `'css-position'`],\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  stickyOffset: {\n    doc: 'Defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page.',\n    type: ['string', 'number'],\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Spacing size inside the table header and data.',\n    type: [`'large'`, `'medium'`, `'small'`],\n    defaultValue: `'large'`,\n    status: 'optional',\n  },\n  fixed: {\n    doc: 'If set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width.',\n    type: 'boolean',\n    defaultValue: 'null',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    status: 'required',\n  },\n  className: {\n    doc: 'Custom className on the component root',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const TableEventProperties: PropertiesTableProps = {\n  collapseAllHandleRef: {\n    doc: 'ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.',\n    type: 'React.MutableRefObject<() => void>',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const TrProperties: PropertiesTableProps = {\n  /**\n   * The variant of the tr\n   */\n  variant: {\n    doc: 'Override the automatic variant of the current row. The next row one will continue with the opposite.',\n    type: [`'even'`, `'odd'`],\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  noWrap: {\n    doc: 'if set to `true`, the inherited header text will not wrap to new lines.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  expanded: {\n    doc: 'use `true` to render the `<Tr>` initially as expanded.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'use `true` to disable the `<Tr>` to be accessible as an interactive element.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'use `true` to disable the expand/collapse animation.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    status: 'required',\n  },\n}\n\nexport const TrEventProperties: PropertiesTableProps = {\n  onClick: {\n    doc: 'will emit when user clicks/expands the table row. Returns a native click.',\n    type: '(event) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  onOpened: {\n    doc: 'Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.',\n    type: '({ target }) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  onClosed: {\n    doc: 'Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`.',\n    type: '({ target }) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const ThProperties: PropertiesTableProps = {\n  sortable: {\n    doc: 'Defines the table header as sortable if set to `true` (ascending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  active: {\n    doc: 'Defines the sortable column as the current active (ascending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  reversed: {\n    doc: 'Defines the sortable column as in reversed order (descending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  noWrap: {\n    doc: 'If set to `true`, the header text will not wrap to new lines.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const TdProperties: PropertiesTableProps = {\n  noSpacing: {\n    doc: 'If set to `true`, no padding will be added.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Set to `horizontal` for padding on left and right side.',\n    type: `'horizontal'`,\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"TableDocs.js","names":["TableProperties","mode","doc","type","defaultValue","status","accordionChevronPlacement","border","outline","sticky","stickyOffset","size","fixed","children","className","skeleton","TableEventProperties","collapseAllHandleRef","TrProperties","variant","noWrap","expanded","disabled","noAnimation","TrEventProperties","onClick","onOpened","onClosed","ThProperties","sortable","active","reversed","TdProperties","noSpacing","spacing"],"sources":["../../../../src/components/table/TableDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TableProperties: PropertiesTableProps = {\n  mode: {\n    doc: 'Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.',\n    type: [`'accordion'`, `'navigation'`],\n    defaultValue: 'null',\n    status: 'optional',\n  },\n  accordionChevronPlacement: {\n    doc: 'Defines where the chevron will be placed, should only be used together with mode=\"accordion\".',\n    type: [`'start'`, `'end'`],\n    defaultValue: `'start'`,\n    status: 'optional',\n  },\n  border: {\n    doc: 'Use `true` to show borders between table data cells.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  outline: {\n    doc: 'Use `true` to show an outline border around the table',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  sticky: {\n    doc: \"Use `true` to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.\",\n    type: ['boolean', `'css-position'`],\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  stickyOffset: {\n    doc: 'Defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page.',\n    type: ['string', 'number'],\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Spacing size inside the table header and data.',\n    type: [`'large'`, `'medium'`, `'small'`],\n    defaultValue: `'large'`,\n    status: 'optional',\n  },\n  fixed: {\n    doc: 'If set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width.',\n    type: 'boolean',\n    defaultValue: 'null',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    status: 'required',\n  },\n  className: {\n    doc: 'Custom className on the component root',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const TableEventProperties: PropertiesTableProps = {\n  collapseAllHandleRef: {\n    doc: 'ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.',\n    type: 'React.MutableRefObject<() => void>',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const TrProperties: PropertiesTableProps = {\n  /**\n   * The variant of the tr\n   */\n  variant: {\n    doc: 'Override the automatic variant of the current row. The next row one will continue with the opposite.',\n    type: [`'even'`, `'odd'`],\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  noWrap: {\n    doc: 'if set to `true`, the inherited header text will not wrap to new lines.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  expanded: {\n    doc: 'use `true` to render the `<Tr>` initially as expanded.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'use `true` to disable the `<Tr>` to be accessible as an interactive element.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'use `true` to disable the expand/collapse animation.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    status: 'required',\n  },\n}\n\nexport const TrEventProperties: PropertiesTableProps = {\n  onClick: {\n    doc: 'Will emit when user clicks/expands or on keydown space/enter(in mode=\"accordion\" and mode=\"navigation\") in the table row. Returns a native click.',\n    type: '(event) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  onOpened: {\n    doc: 'Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.',\n    type: '({ target }) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  onClosed: {\n    doc: 'Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`.',\n    type: '({ target }) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const ThProperties: PropertiesTableProps = {\n  sortable: {\n    doc: 'Defines the table header as sortable if set to `true` (ascending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  active: {\n    doc: 'Defines the sortable column as the current active (ascending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  reversed: {\n    doc: 'Defines the sortable column as in reversed order (descending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  noWrap: {\n    doc: 'If set to `true`, the header text will not wrap to new lines.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const TdProperties: PropertiesTableProps = {\n  noSpacing: {\n    doc: 'If set to `true`, no padding will be added.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Set to `horizontal` for padding on left and right side.',\n    type: `'horizontal'`,\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

package/components/table/TableTr.d.ts

@@ -6,43 +6,43 @@ export type TableTrProps = {
      */
     variant?: 'even' | 'odd';
     /**
-     * If set to true, the inherited header text will not wrap to new lines
+     * If set to true, the inherited header text will not wrap to new lines.
      * Default: false
      */
     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
+     * Set true to render the tr initially as expanded.
+     * Is part of the accordion feature and needs to be enabled with `mode="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
+     * 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 `mode="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
+     * Set to true to skip animation.
+     * Is part of the accordion feature and needs to be enabled with `mode="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
+     * Will emit when user clicks/expands or on keydown space/enter(in mode="accordion" and mode="navigation") in the table row.
+     * Is part of the mode feature and needs to be enabled with the `mode` 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
+     * Will emit when table row is expanded.
+     * Is part of the accordion feature and needs to be enabled with `mode="accordion"` prop in main Table.
      */
     onOpened?: ({ target }: {
         target: HTMLTableRowElement;
     }) => 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
+     * Is part of the accordion feature and needs to be enabled with `mode="accordion"` prop in main Table.
      */
     onClosed?: ({ target }: {
         target: HTMLTableRowElement;

package/components/table/TableTr.js

@@ -5,16 +5,17 @@ const _excluded = ["variant", "noWrap", "className"],
 import React from 'react';
 import classnames from 'classnames';
 import { TableAccordionHead } from './table-accordion/TableAccordionHead';
+import { TableNavigationHead } from './table-navigation/TableNavigationHead';
 import { TableAccordionContentRow } from './table-accordion/TableAccordionContent';
 import { TableContext } from './TableContext';
 export default function Tr(componentProps) {
-  var _tableContext$allProp;
+  var _tableContext$allProp, _tableContext$allProp2, _tableContext$allProp3;
   const {
       variant,
       noWrap,
       className: _className
     } = componentProps,
-    accordionProps = _objectWithoutProperties(componentProps, _excluded);
+    restProps = _objectWithoutProperties(componentProps, _excluded);
   const {
     currentVariant,
     isLast,
@@ -24,11 +25,17 @@ export default function Tr(componentProps) {
   });
   const className = classnames('dnb-table__tr', _className, currentVariant && `dnb-table__tr--${currentVariant}`, isLast && 'dnb-table__tr--last', noWrap && 'dnb-table--no-wrap');
   const tableContext = React.useContext(TableContext);
-  if (tableContext !== null && tableContext !== void 0 && (_tableContext$allProp = tableContext.allProps) !== null && _tableContext$allProp !== void 0 && _tableContext$allProp.accordion) {
+  const deprecatedAccordionProp = tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp = tableContext.allProps) === null || _tableContext$allProp === void 0 ? void 0 : _tableContext$allProp.accordion;
+  if (deprecatedAccordionProp || (tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp2 = tableContext.allProps) === null || _tableContext$allProp2 === void 0 ? void 0 : _tableContext$allProp2.mode) == 'accordion') {
     return React.createElement(TableAccordionHead, _extends({
       count: count,
       className: className
-    }, accordionProps));
+    }, restProps));
+  }
+  if ((tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp3 = tableContext.allProps) === null || _tableContext$allProp3 === void 0 ? void 0 : _tableContext$allProp3.mode) == 'navigation') {
+    return React.createElement(TableNavigationHead, _extends({
+      className: className
+    }, restProps));
   }
   const {
       expanded,
@@ -37,8 +44,8 @@ export default function Tr(componentProps) {
       onClick,
       onOpened,
       onClosed
-    } = accordionProps,
-    trProps = _objectWithoutProperties(accordionProps, _excluded2);
+    } = restProps,
+    trProps = _objectWithoutProperties(restProps, _excluded2);
   return React.createElement("tr", _extends({
     role: "row",
     className: className

package/components/table/TableTr.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTr.js","names":["React","classnames","TableAccordionHead","TableAccordionContentRow","TableContext","Tr","componentProps","_tableContext$allProp","variant","noWrap","className","_className","accordionProps","_objectWithoutProperties","_excluded","currentVariant","isLast","count","useHandleTrVariant","tableContext","useContext","allProps","accordion","createElement","_extends","expanded","disabled","noAnimation","onClick","onOpened","onClosed","trProps","_excluded2","role","_ref","countRef","trCountRef","current","increment","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","_ref2","children","useRef","setRerenderAlias","isMounted","forceRerender","AccordionContent"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { TableAccordionHead } from './table-accordion/TableAccordionHead'\nimport { TableAccordionContentRow } from './table-accordion/TableAccordionContent'\nimport { TableContext } from './TableContext'\n\nexport type TableTrProps = {\n  /**\n   * The variant of the tr\n   */\n  variant?: 'even' | 'odd'\n\n  /**\n   * If set to true, the inherited header text will not wrap to new lines\n   * Default: false\n   */\n  noWrap?: boolean\n\n  /**\n   * Set true to render the tr initially as expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  expanded?: boolean\n\n  /**\n   * Set true to disable the tr to be accessible as an interactive element\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Will emit when user clicks/expands the table row\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClick?: (event: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is expanded\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onOpened?: ({ target }: { target: HTMLTableRowElement }) => void\n\n  /**\n   * Will emit when table row is closed (after it was open)\n   * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table\n   */\n  onClosed?: ({ target }: { target: HTMLTableRowElement }) => void\n\n  /**\n   * The content of the component.\n   */\n  children: React.ReactNode\n}\n\nexport default function Tr(\n  componentProps: TableTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    variant,\n    noWrap,\n    className: _className,\n    ...accordionProps\n  } = componentProps\n\n  const { currentVariant, isLast, count } = useHandleTrVariant({\n    variant,\n  })\n\n  const className = classnames(\n    'dnb-table__tr',\n    currentVariant && `dnb-table__tr--${currentVariant}`,\n    isLast && 'dnb-table__tr--last',\n    noWrap && 'dnb-table--no-wrap',\n    _className\n  )\n\n  const tableContext = React.useContext(TableContext)\n  if (tableContext?.allProps?.accordion) {\n    return (\n      <TableAccordionHead\n        count={count}\n        className={className}\n        {...accordionProps}\n      />\n    )\n  }\n\n  const {\n    expanded, // eslint-disable-line @typescript-eslint/no-unused-vars\n    disabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n    noAnimation, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onClick, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onOpened, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onClosed, // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...trProps\n  } = accordionProps\n\n  return <tr role=\"row\" className={className} {...trProps} />\n}\n\nfunction useHandleTrVariant({ variant }) {\n  const tableContext = React.useContext(TableContext)\n\n  /**\n   * Handle odd/even\n   */\n  const countRef = tableContext?.trCountRef.current\n  const increment = () => {\n    if (typeof countRef === 'undefined') {\n      return 0\n    }\n    if (\n      !variant ||\n      (variant === 'even' && countRef.count % 2 === 1) ||\n      (variant === 'odd' && countRef.count % 2 === 0)\n    ) {\n      countRef.count++\n    }\n\n    return countRef.count\n  }\n\n  const [count, setCount] = React.useState(() => {\n    // SSR Support\n    if (typeof window === 'undefined') {\n      return increment()\n    }\n  })\n\n  // StrictMode support\n  React.useEffect(() => {\n    // SSR will not execute useEffect\n    setCount(increment())\n  }, [tableContext?.rerenderAlias]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  /**\n   * Find out the current odd/even when \"accordionContent\" is used.\n   * Because we have now an additional \"tr\" element.\n   * Then the CSS can't figure out the correct nth element (nth-of-type)\n   * and we need to set it manually (nth-child and nth-of-type do not respect classes, so we can't ignore this one).\n   */\n  let currentVariant = variant\n  if (!currentVariant) {\n    currentVariant = count % 2 ? 'odd' : 'even'\n  }\n  const isLast =\n    typeof countRef !== 'undefined' && countRef.count === count\n  return {\n    currentVariant,\n    isLast,\n    count,\n  }\n}\n\n/**\n * Handle odd/even on re-render and React.StrictMode\n */\nexport function useHandleOddEven({ children }) {\n  // Create this ref in order to \"auto\" set even/odd class in tr elements\n  const trCountRef = React.useRef({ count: 0 })\n\n  // When the alias changes, all tr's will rerender and get a new even/odd color\n  // This is useful, when one tr gets removed\n  const [rerenderAlias, setRerenderAlias] = React.useState({}) // eslint-disable-line no-unused-vars\n\n  const isMounted = React.useRef(false)\n  React.useEffect(() => {\n    if (isMounted.current) {\n      forceRerender()\n    }\n    isMounted.current = true\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { trCountRef, rerenderAlias, setRerenderAlias }\n\n  function forceRerender() {\n    trCountRef.current.count = 0\n    setRerenderAlias({})\n  }\n}\n\nTr.AccordionContent = TableAccordionContentRow\n"],"mappings":"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"}
+{"version":3,"file":"TableTr.js","names":["React","classnames","TableAccordionHead","TableNavigationHead","TableAccordionContentRow","TableContext","Tr","componentProps","_tableContext$allProp","_tableContext$allProp2","_tableContext$allProp3","variant","noWrap","className","_className","restProps","_objectWithoutProperties","_excluded","currentVariant","isLast","count","useHandleTrVariant","tableContext","useContext","deprecatedAccordionProp","allProps","accordion","mode","createElement","_extends","expanded","disabled","noAnimation","onClick","onOpened","onClosed","trProps","_excluded2","role","_ref","countRef","trCountRef","current","increment","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","_ref2","children","useRef","setRerenderAlias","isMounted","forceRerender","AccordionContent"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { TableAccordionHead } from './table-accordion/TableAccordionHead'\nimport { TableNavigationHead } from './table-navigation/TableNavigationHead'\nimport { TableAccordionContentRow } from './table-accordion/TableAccordionContent'\nimport { TableContext } from './TableContext'\n\nexport type TableTrProps = {\n  /**\n   * The variant of the tr\n   */\n  variant?: 'even' | 'odd'\n\n  /**\n   * If set to true, the inherited header text will not wrap to new lines.\n   * Default: false\n   */\n  noWrap?: boolean\n\n  /**\n   * Set true to render the tr initially as expanded.\n   * Is part of the accordion feature and needs to be enabled with `mode=\"accordion\"` prop in main Table.\n   * Default: false\n   */\n  expanded?: boolean\n\n  /**\n   * Set true to disable the tr to be accessible as an interactive element.\n   * Is part of the accordion feature and needs to be enabled with `mode=\"accordion\"`prop in main Table.\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * Set to true to skip animation.\n   * Is part of the accordion feature and needs to be enabled with `mode=\"accordion\"` prop in main Table.\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Will emit when user clicks/expands or on keydown space/enter(in mode=\"accordion\" and mode=\"navigation\") in the table row.\n   * Is part of the mode feature and needs to be enabled with the `mode` prop in main Table.\n   */\n  onClick?: (event: React.SyntheticEvent) => void\n\n  /**\n   * Will emit when table row is expanded.\n   * Is part of the accordion feature and needs to be enabled with `mode=\"accordion\"` prop in main Table.\n   */\n  onOpened?: ({ target }: { target: HTMLTableRowElement }) => void\n\n  /**\n   * Will emit when table row is closed (after it was open)\n   * Is part of the accordion feature and needs to be enabled with `mode=\"accordion\"` prop in main Table.\n   */\n  onClosed?: ({ target }: { target: HTMLTableRowElement }) => void\n\n  /**\n   * The content of the component.\n   */\n  children: React.ReactNode\n}\n\nexport default function Tr(\n  componentProps: TableTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    variant,\n    noWrap,\n    className: _className,\n    ...restProps\n  } = componentProps\n\n  const { currentVariant, isLast, count } = useHandleTrVariant({\n    variant,\n  })\n\n  const className = classnames(\n    'dnb-table__tr',\n    currentVariant && `dnb-table__tr--${currentVariant}`,\n    isLast && 'dnb-table__tr--last',\n    noWrap && 'dnb-table--no-wrap',\n    _className\n  )\n\n  const tableContext = React.useContext(TableContext)\n\n  // Deprecated – can be removed in v11\n  const deprecatedAccordionProp = tableContext?.allProps?.accordion\n\n  if (\n    deprecatedAccordionProp ||\n    tableContext?.allProps?.mode == 'accordion'\n  ) {\n    return (\n      <TableAccordionHead\n        count={count}\n        className={className}\n        {...restProps}\n      />\n    )\n  }\n  if (tableContext?.allProps?.mode == 'navigation') {\n    return <TableNavigationHead className={className} {...restProps} />\n  }\n\n  const {\n    expanded, // eslint-disable-line @typescript-eslint/no-unused-vars\n    disabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n    noAnimation, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onClick, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onOpened, // eslint-disable-line @typescript-eslint/no-unused-vars\n    onClosed, // eslint-disable-line @typescript-eslint/no-unused-vars\n    ...trProps\n  } = restProps\n\n  return <tr role=\"row\" className={className} {...trProps} />\n}\n\nfunction useHandleTrVariant({ variant }) {\n  const tableContext = React.useContext(TableContext)\n\n  /**\n   * Handle odd/even\n   */\n  const countRef = tableContext?.trCountRef.current\n  const increment = () => {\n    if (typeof countRef === 'undefined') {\n      return 0\n    }\n    if (\n      !variant ||\n      (variant === 'even' && countRef.count % 2 === 1) ||\n      (variant === 'odd' && countRef.count % 2 === 0)\n    ) {\n      countRef.count++\n    }\n\n    return countRef.count\n  }\n\n  const [count, setCount] = React.useState(() => {\n    // SSR Support\n    if (typeof window === 'undefined') {\n      return increment()\n    }\n  })\n\n  // StrictMode support\n  React.useEffect(() => {\n    // SSR will not execute useEffect\n    setCount(increment())\n  }, [tableContext?.rerenderAlias]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  /**\n   * Find out the current odd/even when \"accordionContent\" is used.\n   * Because we have now an additional \"tr\" element.\n   * Then the CSS can't figure out the correct nth element (nth-of-type)\n   * and we need to set it manually (nth-child and nth-of-type do not respect classes, so we can't ignore this one).\n   */\n  let currentVariant = variant\n  if (!currentVariant) {\n    currentVariant = count % 2 ? 'odd' : 'even'\n  }\n  const isLast =\n    typeof countRef !== 'undefined' && countRef.count === count\n  return {\n    currentVariant,\n    isLast,\n    count,\n  }\n}\n\n/**\n * Handle odd/even on re-render and React.StrictMode\n */\nexport function useHandleOddEven({ children }) {\n  // Create this ref in order to \"auto\" set even/odd class in tr elements\n  const trCountRef = React.useRef({ count: 0 })\n\n  // When the alias changes, all tr's will rerender and get a new even/odd color\n  // This is useful, when one tr gets removed\n  const [rerenderAlias, setRerenderAlias] = React.useState({}) // eslint-disable-line no-unused-vars\n\n  const isMounted = React.useRef(false)\n  React.useEffect(() => {\n    if (isMounted.current) {\n      forceRerender()\n    }\n    isMounted.current = true\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { trCountRef, rerenderAlias, setRerenderAlias }\n\n  function forceRerender() {\n    trCountRef.current.count = 0\n    setRerenderAlias({})\n  }\n}\n\nTr.AccordionContent = TableAccordionContentRow\n"],"mappings":"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"}

package/components/table/style/dnb-table.css

@@ -83,19 +83,19 @@
   border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
 }
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last {
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last {
   clip-path: none;
 }
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before,
 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th::before,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__th::after,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td::before,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last .dnb-table__td::after {
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::after {
   border-radius: 0;
 }
 .dnb-table.dnb-skeleton > * {
@@ -396,31 +396,31 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   border-top-right-radius: var(--table-outline-radius);
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last {
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last {
   clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::after {
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::after {
   border-bottom-left-radius: var(--table-outline-radius);
 }
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before,
 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::after {
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::after {
   border-bottom-right-radius: var(--table-outline-radius);
 }
 .dnb-table__td--no-spacing,
@@ -585,61 +585,61 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   --table-accordion-outline-width: var(--focus-ring-width);
   --table-accordion-outline-background--active: var(--color-pistachio);
 }
-.dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th {
+.dnb-table__th.dnb-table__th__button-icon.dnb-table__th {
   padding: 0;
 }
-.dnb-table__th.dnb-table__th__accordion-icon,
-.dnb-table__th.dnb-table__th__accordion-icon div {
+.dnb-table__th.dnb-table__th__button-icon,
+.dnb-table__th.dnb-table__th__button-icon div {
   width: 3.5rem;
   text-indent: -300vw;
 }
-.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon,
-.dnb-table__size--medium .dnb-table__th.dnb-table__th__accordion-icon div {
+.dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon,
+.dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon div {
   width: 3rem;
 }
-.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon,
-.dnb-table__size--small .dnb-table__th.dnb-table__th__accordion-icon div {
+.dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon,
+.dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon div {
   width: 2.5rem;
 }
-.dnb-table__td.dnb-table__td__accordion-icon {
+.dnb-table__td.dnb-table__td__button-icon {
   -webkit-user-select: none;
           user-select: none;
 }
-.dnb-table__td.dnb-table__td__accordion-icon.dnb-table__td {
+.dnb-table__td.dnb-table__td__button-icon.dnb-table__td {
   padding: 0;
 }
-.dnb-table__tr--has-accordion-content .dnb-table__toggle-button {
+.dnb-table__tr--clickable .dnb-table__button {
   display: flex;
   justify-content: center;
 }
-.dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
+.dnb-table__tr--clickable .dnb-table__button .dnb-icon {
   color: var(--table-accordion-icon-color);
   transition: transform 500ms var(--easing-default);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
+.dnb-table__tr--clickable.dnb-table__tr--no-animation .dnb-table__button .dnb-icon, html[data-visual-test] .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
   transition: none !important;
 }
-.dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion-content {
+.dnb-table__tr--clickable, .dnb-table__tr__accordion-content {
   position: relative;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion-content {
+.dnb-table__tr--clickable.dnb-table__tr--expanded, .dnb-table__tr__accordion-content {
   z-index: 3;
 }
-.dnb-table__tr--has-accordion-content:active, html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus, .dnb-table__tr--has-accordion-content:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
+.dnb-table__tr--clickable:active, html[data-whatinput=keyboard] .dnb-table__tr--clickable:focus, .dnb-table__tr--clickable:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
   z-index: 5;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon {
+.dnb-table__tr--clickable.dnb-table__tr--expanded .dnb-table__button .dnb-icon {
   transform: rotate(180deg);
 }
-.dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td::after {
+.dnb-table--border .dnb-table__tr--clickable.dnb-table__tr--expanded td::after {
   border-bottom: none;
   border-left: none;
   border-right: none;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) {
   outline: none;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td::before {
   content: "";
   position: absolute;
   z-index: 3;
@@ -647,63 +647,63 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   pointer-events: none;
   border: var(--table-accordion-outline-width) solid transparent;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
   border-left: none;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type)::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type)::before {
   border-right: none;
 }
-html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before {
+html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before {
   border-color: var(--table-accordion-outline-color);
 }
-html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon {
+html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__button-icon .dnb-icon {
   color: var(--table-accordion-icon-color--active);
 }
-.dnb-table--border tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td::before {
+.dnb-table--border tbody .dnb-table__tr--clickable:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td::before {
   bottom: calc(var(--table-border-width) * -1);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
+.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
   background-color: var(--color-white);
 }
-html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before {
+html[data-whatinput=keyboard] .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before {
   border-color: var(--focus-ring-color);
   border-width: var(--focus-ring-width);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
   left: 0;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type::before {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type::before {
   right: 0;
 }
-html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
+html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
   border-color: var(--table-accordion-outline-color);
   border-width: var(--table-accordion-border-width);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
   background-color: var(--table-accordion-outline-background--active);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__accordion-icon .dnb-icon {
+.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__button-icon .dnb-icon {
   color: var(--table-accordion-icon-color--active);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
+.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
   background-color: var(--table-accordion-header-background);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
+.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
   border: none;
   border-top: var(--table-accordion-border);
 }
-html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
+html:not([data-whatinput=keyboard]) .dnb-table__tr--clickable.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
   background-color: var(--table-accordion-header-background);
 }
-html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
+html:not([data-whatinput=keyboard]) .dnb-table__tr--clickable.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
   border: none;
   border-top: var(--table-accordion-border);
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon {
+.dnb-table__tr--clickable.dnb-table__tr--disabled .dnb-table__td__button-icon .dnb-icon {
   color: var(--table-accordion-icon-color--disabled);
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
@@ -735,7 +735,7 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
 .dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
   background-color: var(--color-white);
 }
-.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--has-accordion-content .dnb-table__td::after {
+.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td::after {
   content: "";
   position: absolute;
   top: 0;
@@ -746,7 +746,7 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
   pointer-events: none;
   border-top: var(--table-accordion-border);
 }
-.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--has-accordion-content .dnb-table__td:last-child::after {
+.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td:last-child::after {
   right: 0;
 }
 .dnb-table__tr__accordion-content--single td {
@@ -791,7 +791,7 @@ html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__t
     */
   vertical-align: top;
 }
-.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled) {
+.dnb-table__tr--clickable:not(.dnb-table__tr--disabled) {
   cursor: pointer;
 }
 .dnb-table__td-wrapper {