@dnb/eufemia 10.21.0 → 10.23.0

package/es/components/table/TableAccordionTr.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type TableAccordionTrProps = {
+    /**
+     * Set to true to expanded the content on initial render
+     */
+    expanded?: boolean;
+    /**
+     * Set to true to skip animation
+     * Default: false
+     */
+    noAnimation?: boolean;
+};
+export default function TableAccordionTr(componentProps: TableAccordionTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;

package/es/components/table/TableAccordionTr.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["expanded", "noAnimation", "className", "children", "style"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import classnames from 'classnames';
+import useTableAnimationHandler from './useTableAnimationHandler';
+import { TableContext } from './TableContext';
+import Td from './TableTd';
+export default function TableAccordionTr(componentProps) {
+  var _React$useContext;
+  const {
+      expanded = null,
+      noAnimation = null,
+      className,
+      children,
+      style
+    } = componentProps,
+    props = _objectWithoutProperties(componentProps, _excluded);
+  const allProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
+  const innerRef = React.useRef(null);
+  const trRef = React.useRef(null);
+  const {
+    ariaLive,
+    isInDOM,
+    isAnimating,
+    isVisibleParallax,
+    firstPaintStyle
+  } = useTableAnimationHandler({
+    innerRef,
+    trRef,
+    expanded,
+    noAnimation
+  });
+  const expandColumn = React.createElement(Td, null, React.createElement("span", {
+    className: "dnb-sr-only"
+  }, React.createElement("span", {
+    "aria-live": "assertive"
+  }, isInDOM && ariaLive ? allProps === null || allProps === void 0 ? void 0 : allProps.accordionMoreContentSR : null)));
+  return React.createElement("tr", _extends({
+    "aria-hidden": !isInDOM,
+    hidden: isInDOM ? undefined : true,
+    role: isInDOM ? 'row' : undefined,
+    style: _objectSpread(_objectSpread({}, firstPaintStyle), style),
+    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), allProps.accordionChevronPlacement !== 'end' && expandColumn, isInDOM && children, allProps.accordionChevronPlacement === 'end' && expandColumn);
+}
+//# sourceMappingURL=TableAccordionTr.js.map

package/es/components/table/TableAccordionTr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableAccordionTr.js","names":["React","classnames","useTableAnimationHandler","TableContext","Td","TableAccordionTr","componentProps","_React$useContext","expanded","noAnimation","className","children","style","props","_objectWithoutProperties","_excluded","allProps","useContext","innerRef","useRef","trRef","ariaLive","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","expandColumn","createElement","accordionMoreContentSR","_extends","hidden","undefined","role","_objectSpread","ref","accordionChevronPlacement"],"sources":["../../../../src/components/table/TableAccordionTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport useTableAnimationHandler from './useTableAnimationHandler'\nimport { TableContext } from './TableContext'\nimport Td from './TableTd'\n\nexport type TableAccordionTrProps = {\n  /**\n   * Set to true to expanded the content on initial render\n   */\n  expanded?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport default function TableAccordionTr(\n  componentProps: TableAccordionTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    expanded = null,\n    noAnimation = null,\n    className,\n    children,\n    style,\n    ...props\n  } = componentProps\n\n  const allProps = React.useContext(TableContext)?.allProps\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const trRef = React.useRef<HTMLTableRowElement>(null)\n\n  const {\n    ariaLive,\n    isInDOM,\n    isAnimating,\n    isVisibleParallax,\n    firstPaintStyle,\n  } = useTableAnimationHandler({\n    innerRef,\n    trRef,\n    expanded,\n    noAnimation,\n  })\n\n  const expandColumn = (\n    <Td>\n      <span className=\"dnb-sr-only\">\n        <span aria-live=\"assertive\">\n          {isInDOM && ariaLive ? allProps?.accordionMoreContentSR : null}\n        </span>\n      </span>\n    </Td>\n  )\n\n  return (\n    <tr\n      /**\n       * VoiceOver needs the \"tr\" to be in the DOM in order to be able to continue reading downwards,\n       * even it is either closed or opened. Else VO pretends that this current table row is the end of the table.\n       *\n       * + All the browsers do count the correct number (childCount) of rows + NVDA counts correct when used with Chrome.\n       * - Firefox on Windows does it as well, but not when used with NVDA.\n       */\n      aria-hidden={!isInDOM} // NVDA and VoiceOver needs \"aria-hidden\" to remove it from the accessibility tree\n      hidden={isInDOM ? undefined : true} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"tr\" element)\n      role={isInDOM ? 'row' : undefined} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"role\" element)\n      style={{ ...firstPaintStyle, ...style }}\n      className={classnames(\n        isInDOM && 'dnb-table__tr',\n        'dnb-table__tr__accordion-content',\n        isInDOM && 'dnb-table__tr__accordion-content--expanded',\n        isAnimating && 'dnb-table__tr__accordion-content--animating',\n        isVisibleParallax && 'dnb-table__tr__accordion-content--parallax',\n        className\n      )}\n      ref={trRef}\n      {...props}\n    >\n      {allProps.accordionChevronPlacement !== 'end' && expandColumn}\n      {isInDOM && children}\n      {allProps.accordionChevronPlacement === 'end' && expandColumn}\n    </tr>\n  )\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,wBAAwB,MAAM,4BAA4B;AACjE,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,OAAOC,EAAE,MAAM,WAAW;AAe1B,eAAe,SAASC,gBAAgBA,CACtCC,cACgD,EAChD;EAAA,IAAAC,iBAAA;EACA,MAAM;MACJC,QAAQ,GAAG,IAAI;MACfC,WAAW,GAAG,IAAI;MAClBC,SAAS;MACTC,QAAQ;MACRC;IAEF,CAAC,GAAGN,cAAc;IADbO,KAAK,GAAAC,wBAAA,CACNR,cAAc,EAAAS,SAAA;EAElB,MAAMC,QAAQ,IAAAT,iBAAA,GAAGP,KAAK,CAACiB,UAAU,CAACd,YAAY,CAAC,cAAAI,iBAAA,uBAA9BA,iBAAA,CAAgCS,QAAQ;EACzD,MAAME,QAAQ,GAAGlB,KAAK,CAACmB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMC,KAAK,GAAGpB,KAAK,CAACmB,MAAM,CAAsB,IAAI,CAAC;EAErD,MAAM;IACJE,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC,GAAGvB,wBAAwB,CAAC;IAC3BgB,QAAQ;IACRE,KAAK;IACLZ,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,MAAMiB,YAAY,GAChB1B,KAAA,CAAA2B,aAAA,CAACvB,EAAE,QACDJ,KAAA,CAAA2B,aAAA;IAAMjB,SAAS,EAAC;EAAa,GAC3BV,KAAA,CAAA2B,aAAA;IAAM,aAAU;EAAW,GACxBL,OAAO,IAAID,QAAQ,GAAGL,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEY,sBAAsB,GAAG,IACtD,CACF,CACJ,CACL;EAED,OACE5B,KAAA,CAAA2B,aAAA,OAAAE,QAAA;IAQE,eAAa,CAACP,OAAQ;IACtBQ,MAAM,EAAER,OAAO,GAAGS,SAAS,GAAG,IAAK;IACnCC,IAAI,EAAEV,OAAO,GAAG,KAAK,GAAGS,SAAU;IAClCnB,KAAK,EAAAqB,aAAA,CAAAA,aAAA,KAAOR,eAAe,GAAKb,KAAK,CAAG;IACxCF,SAAS,EAAET,UAAU,CAEnB,kCAAkC,EAIlCS,SAAS,EALTY,OAAO,gEAGPC,WAAW,IAAI,6CAA6C,EAC5DC,iBAAiB,IAAI,4CAEvB,CAAE;IACFU,GAAG,EAAEd;EAAM,GACPP,KAAK,GAERG,QAAQ,CAACmB,yBAAyB,KAAK,KAAK,IAAIT,YAAY,EAC5DJ,OAAO,IAAIX,QAAQ,EACnBK,QAAQ,CAACmB,yBAAyB,KAAK,KAAK,IAAIT,YAC/C,CAAC;AAET"}

package/es/components/table/TableContext.d.ts

@@ -3,5 +3,5 @@
  *
  */
 import React from 'react';
-declare const TableContext: React.Context<any>;
-export default TableContext;
+export declare const TableContext: React.Context<any>;
+export declare const TableAccordionContext: React.Context<any>;

package/es/components/table/TableContext.js

@@ -1,4 +1,4 @@
 import React from 'react';
-const TableContext = React.createContext(null);
-export default TableContext;
+export const TableContext = React.createContext(null);
+export const TableAccordionContext = React.createContext(null);
 //# sourceMappingURL=TableContext.js.map

package/es/components/table/TableContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableContext.js","names":["React","TableContext","createContext"],"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["/**\n * Web TableContext Context\n *\n */\n\nimport React from 'react'\n\nconst TableContext = React.createContext(null)\n\nexport default TableContext\n"],"mappings":"AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CAAC,IAAI,CAAC;AAE9C,eAAeD,YAAY"}
+{"version":3,"file":"TableContext.js","names":["React","TableContext","createContext","TableAccordionContext"],"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["/**\n * Web TableContext Context\n *\n */\n\nimport React from 'react'\n\nexport const TableContext = React.createContext(null)\n\nexport const TableAccordionContext = React.createContext(null)\n"],"mappings":"AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAO,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CAAC,IAAI,CAAC;AAErD,OAAO,MAAMC,qBAAqB,GAAGH,KAAK,CAACE,aAAa,CAAC,IAAI,CAAC"}

package/es/components/table/TableScrollView.d.ts

@@ -8,4 +8,8 @@ export type TableScrollViewProps = {
     children: React.ReactElement<HTMLTableElement>;
 };
 export type TableScrollViewAllProps = TableScrollViewProps & Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> & SpacingProps & ScrollViewAllProps;
-export default function TableScrollView(props: TableScrollViewAllProps): import("react/jsx-runtime").JSX.Element;
+declare function TableScrollView(props: TableScrollViewAllProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TableScrollView {
+    var _supportsSpacingProps: boolean;
+}
+export default TableScrollView;

package/es/components/table/TableScrollView.js

@@ -15,4 +15,5 @@ export default function TableScrollView(props) {
     interactive: "auto"
   }, rest), children);
 }
+TableScrollView._supportsSpacingProps = true;
 //# sourceMappingURL=TableScrollView.js.map

package/es/components/table/TableScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableScrollView.js","names":["React","classnames","ScrollView","TableScrollView","props","className","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","interactive"],"sources":["../../../../src/components/table/TableScrollView.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ScrollView, {\n  ScrollViewAllProps,\n} from '../../fragments/scroll-view/ScrollView'\n\nimport type { SpacingProps } from '../../shared/types'\n\nexport type TableScrollViewProps = {\n  /**\n   * The content of the component.\n   */\n  children: React.ReactElement<HTMLTableElement>\n}\n\nexport type TableScrollViewAllProps = TableScrollViewProps &\n  Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> &\n  SpacingProps &\n  ScrollViewAllProps\n\nexport default function TableScrollView(props: TableScrollViewAllProps) {\n  const { className, children, ...rest } = props\n\n  return (\n    <ScrollView\n      className={classnames('dnb-table__scroll-view', className)}\n      interactive=\"auto\"\n      {...rest}\n    >\n      {children}\n    </ScrollView>\n  )\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAEV,wCAAwC;AAgB/C,eAAe,SAASC,eAAeA,CAACC,KAA8B,EAAE;EACtE,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGF,KAAK;IAAdG,IAAI,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EAE9C,OACET,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAAS,QAAA;IACTN,SAAS,EAAEJ,UAAU,CAAC,wBAAwB,EAAEI,SAAS,CAAE;IAC3DO,WAAW,EAAC;EAAM,GACdL,IAAI,GAEPD,QACS,CAAC;AAEjB"}
+{"version":3,"file":"TableScrollView.js","names":["React","classnames","ScrollView","TableScrollView","props","className","children","rest","_objectWithoutProperties","_excluded","createElement","_extends","interactive","_supportsSpacingProps"],"sources":["../../../../src/components/table/TableScrollView.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ScrollView, {\n  ScrollViewAllProps,\n} from '../../fragments/scroll-view/ScrollView'\n\nimport type { SpacingProps } from '../../shared/types'\n\nexport type TableScrollViewProps = {\n  /**\n   * The content of the component.\n   */\n  children: React.ReactElement<HTMLTableElement>\n}\n\nexport type TableScrollViewAllProps = TableScrollViewProps &\n  Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> &\n  SpacingProps &\n  ScrollViewAllProps\n\nexport default function TableScrollView(props: TableScrollViewAllProps) {\n  const { className, children, ...rest } = props\n\n  return (\n    <ScrollView\n      className={classnames('dnb-table__scroll-view', className)}\n      interactive=\"auto\"\n      {...rest}\n    >\n      {children}\n    </ScrollView>\n  )\n}\n\nTableScrollView._supportsSpacingProps = true\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAEV,wCAAwC;AAgB/C,eAAe,SAASC,eAAeA,CAACC,KAA8B,EAAE;EACtE,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGF,KAAK;IAAdG,IAAI,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EAE9C,OACET,KAAA,CAAAU,aAAA,CAACR,UAAU,EAAAS,QAAA;IACTN,SAAS,EAAEJ,UAAU,CAAC,wBAAwB,EAAEI,SAAS,CAAE;IAC3DO,WAAW,EAAC;EAAM,GACdL,IAAI,GAEPD,QACS,CAAC;AAEjB;AAEAH,eAAe,CAACU,qBAAqB,GAAG,IAAI"}

package/es/components/table/TableTd.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import TableAccordionContent from './TableAccordionContent';
+import TableAccordionTd from './TableAccordionTd';
 export type TableTdProps = {
     /**
      * if set to `true`, no padding will be added
@@ -19,6 +19,6 @@ export type TableTdProps = {
 };
 declare function Td(componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Td {
-    var AccordionContent: typeof TableAccordionContent;
+    var AccordionContent: typeof TableAccordionTd;
 }
 export default Td;

package/es/components/table/TableTd.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["className", "children", "noSpacing", "spacing"];
 import React from 'react';
 import classnames from 'classnames';
-import TableAccordionContent from './TableAccordionContent';
+import TableAccordionTd from './TableAccordionTd';
 export default function Td(componentProps) {
   const {
       className,
@@ -17,5 +17,5 @@ export default function Td(componentProps) {
     className: classnames('dnb-table__td', className, noSpacing && 'dnb-table__td--no-spacing', spacing && `dnb-table__td--spacing-${spacing}`)
   }, props), children);
 }
-Td.AccordionContent = TableAccordionContent;
+Td.AccordionContent = TableAccordionTd;
 //# sourceMappingURL=TableTd.js.map

package/es/components/table/TableTd.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTd.js","names":["React","classnames","TableAccordionContent","Td","componentProps","className","children","noSpacing","spacing","props","_objectWithoutProperties","_excluded","createElement","_extends","role","AccordionContent"],"sources":["../../../../src/components/table/TableTd.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport TableAccordionContent from './TableAccordionContent'\n\nexport type TableTdProps = {\n  /**\n   * if set to `true`, no padding will be added\n   * Default: false\n   */\n  noSpacing?: boolean\n\n  /**\n   * Set to `horizontal` for padding on left and right side\n   * Default: false\n   */\n  spacing?: 'horizontal'\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  children?: React.ReactNode\n}\n\nexport default function Td(\n  componentProps: TableTdProps &\n    React.TdHTMLAttributes<HTMLTableCellElement>\n) {\n  const { className, children, noSpacing, spacing, ...props } =\n    componentProps\n\n  return (\n    <td\n      role=\"cell\"\n      className={classnames(\n        'dnb-table__td',\n        noSpacing && 'dnb-table__td--no-spacing',\n        spacing && `dnb-table__td--spacing-${spacing}`,\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </td>\n  )\n}\n\nTd.AccordionContent = TableAccordionContent\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,qBAAqB,MAAM,yBAAyB;AAsB3D,eAAe,SAASC,EAAEA,CACxBC,cAC8C,EAC9C;EACA,MAAM;MAAEC,SAAS;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GACzDJ,cAAc;IADoCK,KAAK,GAAAC,wBAAA,CACvDN,cAAc,EAAAO,SAAA;EAEhB,OACEX,KAAA,CAAAY,aAAA,OAAAC,QAAA;IACEC,IAAI,EAAC,MAAM;IACXT,SAAS,EAAEJ,UAAU,CACnB,eAAe,EAGfI,SAAS,EAFTE,SAAS,IAAI,2BAA2B,EACxCC,OAAO,IAAK,0BAAyBA,OAAQ,EAE/C;EAAE,GACEC,KAAK,GAERH,QACC,CAAC;AAET;AAEAH,EAAE,CAACY,gBAAgB,GAAGb,qBAAqB"}
+{"version":3,"file":"TableTd.js","names":["React","classnames","TableAccordionTd","Td","componentProps","className","children","noSpacing","spacing","props","_objectWithoutProperties","_excluded","createElement","_extends","role","AccordionContent"],"sources":["../../../../src/components/table/TableTd.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport TableAccordionTd from './TableAccordionTd'\n\nexport type TableTdProps = {\n  /**\n   * if set to `true`, no padding will be added\n   * Default: false\n   */\n  noSpacing?: boolean\n\n  /**\n   * Set to `horizontal` for padding on left and right side\n   * Default: false\n   */\n  spacing?: 'horizontal'\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  children?: React.ReactNode\n}\n\nexport default function Td(\n  componentProps: TableTdProps &\n    React.TdHTMLAttributes<HTMLTableCellElement>\n) {\n  const { className, children, noSpacing, spacing, ...props } =\n    componentProps\n\n  return (\n    <td\n      role=\"cell\"\n      className={classnames(\n        'dnb-table__td',\n        noSpacing && 'dnb-table__td--no-spacing',\n        spacing && `dnb-table__td--spacing-${spacing}`,\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </td>\n  )\n}\n\nTd.AccordionContent = TableAccordionTd\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,gBAAgB,MAAM,oBAAoB;AAsBjD,eAAe,SAASC,EAAEA,CACxBC,cAC8C,EAC9C;EACA,MAAM;MAAEC,SAAS;MAAEC,QAAQ;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GACzDJ,cAAc;IADoCK,KAAK,GAAAC,wBAAA,CACvDN,cAAc,EAAAO,SAAA;EAEhB,OACEX,KAAA,CAAAY,aAAA,OAAAC,QAAA;IACEC,IAAI,EAAC,MAAM;IACXT,SAAS,EAAEJ,UAAU,CACnB,eAAe,EAGfI,SAAS,EAFTE,SAAS,IAAI,2BAA2B,EACxCC,OAAO,IAAK,0BAAyBA,OAAQ,EAE/C;EAAE,GACEC,KAAK,GAERH,QACC,CAAC;AAET;AAEAH,EAAE,CAACY,gBAAgB,GAAGb,gBAAgB"}

package/es/components/table/TableTr.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableTdProps } from './TableTd';
+import TableAccordionTr from './TableAccordionTr';
 export type TableTrProps = {
     /**
      * The variant of the tr
@@ -46,9 +46,13 @@ export type TableTrProps = {
     /**
      * The content of the component.
      */
-    children: React.ReactElement<TableTdProps> | Array<React.ReactElement<TableTdProps>>;
+    children: React.ReactNode;
 };
-export default function Tr(componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+declare function Tr(componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Tr {
+    var AccordionContent: typeof TableAccordionTr;
+}
+export default Tr;
 /**
  * Handle odd/even on re-render and React.StrictMode
  */

package/es/components/table/TableTr.js

@@ -4,7 +4,8 @@ const _excluded = ["variant", "noWrap", "expanded", "disabled", "noAnimation", "
 import React from 'react';
 import classnames from 'classnames';
 import { useTableAccordion } from './TableAccordion';
-import TableContext from './TableContext';
+import { TableContext } from './TableContext';
+import TableAccordionTr from './TableAccordionTr';
 export default function Tr(componentProps) {
   const {
       variant,
@@ -20,11 +21,12 @@ export default function Tr(componentProps) {
     } = componentProps,
     props = _objectWithoutProperties(componentProps, _excluded);
   const {
-    currentVariant
+    currentVariant,
+    isLast
   } = useHandleTrVariant({
     variant
   });
-  const className = classnames('dnb-table__tr', _className, currentVariant && `dnb-table__tr--${currentVariant}`, noWrap && 'dnb-table--no-wrap');
+  const className = classnames('dnb-table__tr', _className, currentVariant && `dnb-table__tr--${currentVariant}`, isLast && 'dnb-table__tr--last', noWrap && 'dnb-table--no-wrap');
   const accordionTr = useTableAccordion({
     className,
     children,
@@ -70,8 +72,10 @@ function useHandleTrVariant({
   if (!currentVariant) {
     currentVariant = count % 2 ? 'odd' : 'even';
   }
+  const isLast = typeof countRef !== 'undefined' && countRef.count === count;
   return {
-    currentVariant
+    currentVariant,
+    isLast
   };
 }
 export function useHandleOddEven({
@@ -98,4 +102,5 @@ export function useHandleOddEven({
     setRerenderAlias({});
   }
 }
+Tr.AccordionContent = TableAccordionTr;
 //# sourceMappingURL=TableTr.js.map

package/es/components/table/TableTr.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTr.js","names":["React","classnames","useTableAccordion","TableContext","Tr","componentProps","variant","noWrap","expanded","disabled","noAnimation","onClick","onOpened","onClosed","children","className","_className","props","_objectWithoutProperties","_excluded","currentVariant","useHandleTrVariant","accordionTr","createElement","_extends","role","tableContext","useContext","countRef","trCountRef","current","increment","count","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","useRef","setRerenderAlias","isMounted","forceRerender"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { useTableAccordion } from './TableAccordion'\nimport { TableTdProps } from './TableTd'\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?: (event?: React.SyntheticEvent) => 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?: (event?: React.SyntheticEvent) => void\n\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableTdProps>\n    | Array<React.ReactElement<TableTdProps>>\n}\n\nexport default function Tr(\n  componentProps: TableTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    variant,\n    noWrap,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n    children,\n    className: _className,\n    ...props\n  } = componentProps\n\n  const { currentVariant } = useHandleTrVariant({ variant })\n\n  const className = classnames(\n    'dnb-table__tr',\n    currentVariant && `dnb-table__tr--${currentVariant}`,\n    noWrap && 'dnb-table--no-wrap',\n    _className\n  )\n\n  const accordionTr = useTableAccordion({\n    className,\n    children,\n    props,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n  })\n\n  if (accordionTr) {\n    return accordionTr\n  }\n\n  return (\n    <tr role=\"row\" className={className} {...props}>\n      {children}\n    </tr>\n  )\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\n  return {\n    currentVariant,\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"],"mappings":"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"}
+{"version":3,"file":"TableTr.js","names":["React","classnames","useTableAccordion","TableContext","TableAccordionTr","Tr","componentProps","variant","noWrap","expanded","disabled","noAnimation","onClick","onOpened","onClosed","children","className","_className","props","_objectWithoutProperties","_excluded","currentVariant","isLast","useHandleTrVariant","accordionTr","createElement","_extends","role","tableContext","useContext","countRef","trCountRef","current","increment","count","setCount","useState","window","useEffect","rerenderAlias","useHandleOddEven","useRef","setRerenderAlias","isMounted","forceRerender","AccordionContent"],"sources":["../../../../src/components/table/TableTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { useTableAccordion } from './TableAccordion'\nimport { TableContext } from './TableContext'\nimport TableAccordionTr from './TableAccordionTr'\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?: (event?: React.SyntheticEvent) => 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?: (event?: React.SyntheticEvent) => 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    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n    children,\n    className: _className,\n    ...props\n  } = componentProps\n\n  const { currentVariant, isLast } = 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 accordionTr = useTableAccordion({\n    className,\n    children,\n    props,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n  })\n\n  if (accordionTr) {\n    return accordionTr\n  }\n\n  return (\n    <tr role=\"row\" className={className} {...props}>\n      {children}\n    </tr>\n  )\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  }\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 = TableAccordionTr\n"],"mappings":"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"}

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

@@ -84,7 +84,7 @@
   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:nth-last-child(2) {
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content.dnb-table__tr--last {
   -webkit-clip-path: none;
           clip-path: none;
 }
@@ -92,17 +92,21 @@
 .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:nth-last-child(2) .dnb-table__th,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th::before,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th::after,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td::before,
-.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .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 {
   border-radius: 0;
 }
 .dnb-table.dnb-skeleton > * {
   -webkit-text-fill-color: var(--skeleton-color);
 }
+.dnb-card .dnb-table {
+  --table-outline-color: transparent;
+  margin-bottom: 0;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable, .dnb-table .dnb-table__th.dnb-table--sortable {
   color: var(--color-sea-green);
 }
@@ -133,7 +137,7 @@ html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-tab
   line-height: inherit;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
-  right: 1rem;
+  right: 0;
 }
 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
   align-self: flex-end;
@@ -245,6 +249,9 @@ html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
   padding-right: 0.5rem;
 }
+.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon {
+  margin-left: -0.5rem;
+}
 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
   padding-right: 0;
 }
@@ -382,7 +389,7 @@ 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):nth-last-child(2) {
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded).dnb-table__tr--last {
   -webkit-clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
           clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
 }
@@ -390,24 +397,24 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .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):nth-last-child(2) .dnb-table__th:first-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .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 {
   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):nth-last-child(2) .dnb-table__th:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child::after,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child::before,
-.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .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 {
   border-bottom-right-radius: var(--table-outline-radius);
 }
 .dnb-table__td--no-spacing,
@@ -559,10 +566,17 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 */
 .dnb-table {
   --table-accordion-background: var(--color-white);
+  --table-accordion-header-background: var(--color-white);
   --table-accordion-border-width: 0.0625rem;
   --table-accordion-border-color: var(--color-black-20);
   --table-accordion-border: var(--table-accordion-border-width) solid
     var(--table-accordion-border-color);
+  --table-accordion-icon-color: var(--color-sea-green);
+  --table-accordion-icon-color--active: var(--color-emerald-green);
+  --table-accordion-icon-color--disabled: var(--color-sea-green-30);
+  --table-accordion-outline-color: var(--color-emerald-green);
+  --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 {
   padding: 0;
@@ -592,7 +606,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   justify-content: center;
 }
 .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
-  color: var(--color-sea-green);
+  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 {
@@ -624,7 +638,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   z-index: 3;
   inset: 0;
   pointer-events: none;
-  border: var(--focus-ring-width) solid transparent;
+  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 {
   border-left: none;
@@ -636,21 +650,20 @@ html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-tabl
   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 {
-  border-color: var(--color-emerald-green);
+  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 {
-  color: var(--color-emerald-green);
+  color: var(--table-accordion-icon-color--active);
 }
-.dnb-table--outline tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(:nth-last-child(2)) .dnb-table__td::before {
-  bottom: calc(var(--table-outline-width) * -1);
+.dnb-table--border tbody .dnb-table__tr--has-accordion-content: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 {
   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 {
-  top: 0;
-  bottom: 0;
-  border-color: var(--color-emerald-green);
+  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 {
   left: 0;
@@ -660,31 +673,31 @@ html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__t
 }
 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 {
-  border-color: var(--color-emerald-green);
+  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 {
-  background-color: var(--color-pistachio);
+  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 {
-  color: var(--color-emerald-green);
+  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 {
-  background-color: var(--table-accordion-background);
+  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 {
   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) {
-  background-color: var(--table-accordion-background);
+  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 {
   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 {
-  color: var(--color-sea-green-30);
+  color: var(--table-accordion-icon-color--disabled);
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
   .dnb-table__tr__accordion-content[hidden] {
@@ -695,17 +708,51 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
     display: block;
   }
 }
-.dnb-table__tr__accordion-content td {
+.dnb-table__tr__accordion-content__inner {
+  overflow: hidden;
+  will-change: height;
+  transition: height 400ms var(--easing-default);
+  position: relative;
+}
+.dnb-table__tr__accordion-content__inner__spacing {
+  padding: 1rem;
+  transform: translateY(-10px);
+  transition: transform 500ms var(--easing-default);
+}
+.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transform: translateY(0);
+}
+html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transition: none;
+}
+.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 {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -0.0625rem;
+  bottom: 0;
+  z-index: 1;
+  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 {
+  right: 0;
+}
+.dnb-table__tr__accordion-content--single td {
   padding: 0 !important;
   width: calc(100% - 3.5rem);
 }
-.dnb-table__size--medium .dnb-table__tr__accordion-content td {
+.dnb-table__size--medium .dnb-table__tr__accordion-content--single td {
   width: calc(100% - 3rem);
 }
-.dnb-table__size--small .dnb-table__tr__accordion-content td {
+.dnb-table__size--small .dnb-table__tr__accordion-content--single td {
   width: calc(100% - 2.5rem);
 }
-.dnb-table__tr__accordion-content td::before {
+.dnb-table__tr__accordion-content--single td::before {
   content: "";
   position: absolute;
   top: auto;
@@ -715,39 +762,19 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
   pointer-events: none;
   border-bottom: var(--table-accordion-border);
 }
-.dnb-table--outline .dnb-table__tr__accordion-content:last-of-type td::before {
+.dnb-table--outline .dnb-table__tr__accordion-content--single:last-of-type td::before {
   border-bottom: none;
 }
-.dnb-table--border .dnb-table__tr__accordion-content td::after {
+.dnb-table--border .dnb-table__tr__accordion-content--single td::after {
   border-top: none;
 }
-.dnb-table__tr__accordion-content__inner {
-  overflow: hidden;
-  will-change: height;
-  transition: height 400ms var(--easing-default);
-  position: relative;
-}
-.dnb-table__tr__accordion-content__inner__spacing {
-  padding: 1rem;
-  transform: translateY(-10px);
-  transition: transform 500ms var(--easing-default);
-}
-.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
-  transform: translateY(0);
-}
-html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
-  transition: none;
-}
-.dnb-table__tr__accordion-content > td.dnb-table__td {
+.dnb-table__tr__accordion-content--single > td.dnb-table__td {
   padding: 0;
 }
-.dnb-table__tr__accordion-content > td.dnb-table__td .dnb-dl,
-.dnb-table__tr__accordion-content > td.dnb-table__td .dnb-dl dt {
+.dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl,
+.dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl dt {
   margin: 0;
 }
-.dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
-  background-color: var(--color-white);
-}
 .dnb-table__tr__accordion-content.dnb-table__tr .dnb-table__td {
   background-color: var(--table-accordion-background);
   /**