@dfds-ui/experiences 2.0.29-alpha.87e7918e → 2.0.29-alpha.8a75601a

package/cjs/dynamic-table/stories/tableRowsExpandable.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Currency = () => (0, _react2.jsx)("span", {
+  style: {
+    fontSize: '10px'
+  }
+}, "EUR");
+const tableRowsExpandable = [{
+  id: '1001',
+  pallets: 10,
+  from: 'Copenhagen',
+  to: 'Stockholm',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "200"))
+}, {
+  id: '1002',
+  pallets: 41,
+  from: 'Istanbul',
+  to: 'London',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "320"))
+}, {
+  id: '1003',
+  pallets: 9,
+  from: 'Delphi',
+  to: 'Madrid',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "1574")),
+  subRows: [{
+    id: '1004',
+    pallets: 52,
+    from: 'Stockholm',
+    to: 'Amsterdam',
+    price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "945.50"))
+  }, {
+    id: '1005',
+    pallets: 4,
+    from: 'London',
+    to: 'Paris',
+    price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "850"))
+  }]
+}, {
+  id: '1006',
+  pallets: 33,
+  from: 'Madrid',
+  to: 'Berlin',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "2000"))
+}, {
+  id: '1007',
+  pallets: 17,
+  from: 'Berlin',
+  to: 'Oslo',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "887")),
+  subRows: [{
+    id: '1008',
+    pallets: 14,
+    from: 'Oslo',
+    to: 'Cairo',
+    price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "2400"))
+  }]
+}, {
+  id: '1009',
+  pallets: 23,
+  from: 'Paris',
+  to: 'Rome',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "1280.30"))
+}];
+var _default = tableRowsExpandable;
+exports.default = _default;

package/cjs/footer/Footer.js

@@ -88,4 +88,5 @@ const Footer = _ref2 => {
   }, metaLinks))))));
 };
 exports.Footer = Footer;
-var _default = exports.default = Footer;
+var _default = Footer;
+exports.default = _default;

package/cjs/footer/FooterColumn.js

@@ -31,4 +31,5 @@ const FooterColumn = _ref => {
   }, children));
 };
 exports.FooterColumn = FooterColumn;
-var _default = exports.default = FooterColumn;
+var _default = FooterColumn;
+exports.default = _default;

package/cjs/footer/FooterColumnItem.js

@@ -30,4 +30,5 @@ const FooterColumnItem = _ref => {
   }, rest), children);
 };
 exports.FooterColumnItem = FooterColumnItem;
-var _default = exports.default = FooterColumnItem;
+var _default = FooterColumnItem;
+exports.default = _default;

package/cjs/footer/FooterMetaLink.js

@@ -33,4 +33,5 @@ const FooterMetaLink = _ref2 => {
   }, rest), children);
 };
 exports.FooterMetaLink = FooterMetaLink;
-var _default = exports.default = FooterMetaLink;
+var _default = FooterMetaLink;
+exports.default = _default;

package/cjs/internet-explorer-modal/IEModal.js

@@ -123,4 +123,5 @@ const IEModal = _ref => {
   }));
 };
 exports.IEModal = IEModal;
-var _default = exports.default = IEModal;
+var _default = IEModal;
+exports.default = _default;

package/cjs/locale-selector/LocaleOption.js

@@ -37,4 +37,5 @@ const LocaleOption = ({
   }, label);
 };
 exports.LocaleOption = LocaleOption;
-var _default = exports.default = LocaleOption;
+var _default = LocaleOption;
+exports.default = _default;

package/cjs/locale-selector/LocaleSelector.js

@@ -31,7 +31,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9sb2NhbGUtc2VsZWN0b3IvTG9jYWxlU2VsZWN0b3IudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlFc0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2xvY2FsZS1zZWxlY3Rvci9Mb2NhbGVTZWxlY3Rvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlU3RhdGUsIFByb3BzV2l0aENoaWxkcmVuLCBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBMaW5rQnV0dG9uLCBMb2NhbGUsIGxvY2FsZURhdGEsIExvY2FsZUZsYWcsIGxvY2FsZXMgYXMgYWxsTG9jYWxlcyB9IGZyb20gJ0BkZmRzLXVpL3JlYWN0LWNvbXBvbmVudHMnXG5pbXBvcnQgeyBNb2RhbCwgTW9kYWxQcm9wcyB9IGZyb20gJ0BkZmRzLXVpL21vZGFsJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgTG9jYWxlT3B0aW9uIGZyb20gJy4vTG9jYWxlT3B0aW9uJ1xuaW1wb3J0IHsgbWVkaWEsIHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5cbmV4cG9ydCB0eXBlIExvY2FsZVNlbGVjdG9yUHJvcHMgPSBQcm9wc1dpdGhDaGlsZHJlbjxcbiAge1xuICAgIC8qKlxuICAgICAqIFByb3ZpZGUgbGltaXRlZCBzZXQgb2YgbG9jYWxlcyB0byBjaG9vc2UgZnJvbVxuICAgICAqL1xuICAgIGxvY2FsZXM/OiBSZWFkb25seUFycmF5PExvY2FsZT5cbiAgICAvKipcbiAgICAgKiBUZXh0IHRvIGRpc3BsYXkgb24gYnV0dG9uIHRoYXQgb3BlbiB0aGUgc2VsZWN0b3IgYXNcbiAgICAgKiB3ZWxsIGFzIGluIHRoZSBoZWFkaW5nIG9mIHRoZSBzZWxlY3RvclxuICAgICAqL1xuICAgIGxhYmVsPzogc3RyaW5nXG4gICAgLyoqXG4gICAgICogQ3VycmVudCBsb2NhbGUgb2YgdGhlIGFwcGxpY2F0aW9uXG4gICAgICovXG4gICAgY3VycmVudExvY2FsZTogTG9jYWxlXG4gICAgLyoqIENhbGxiYWNrIGZ1bmN0aW9uIHRoYXQgZmlyZXMgd2l0aCBsb2NhbGUgYXMgYW4gYXJndW1lbnQgKi9cbiAgICBvbkNoYW5nZTogKGxvY2FsZTogTG9jYWxlKSA9PiB2b2lkXG4gICAgLyoqIERpc2FibGVkIHZpc3VhbCBhcHBlYXJhbmNlIGFuZCBpbnRlcmFjdGlvbiBkaXNhYmxlZC4gKi9cbiAgICBkaXNhYmxlZD86IGJvb2xlYW5cbiAgICAvKipcbiAgICAgKiBjbGFzc05hbWUgdG8gYmUgYXNzaWduZWQgdG8gY29tcG9uZW50LlxuICAgICAqL1xuICAgIGNsYXNzTmFtZT86IHN0cmluZ1xuICB9ICYgUGljazxNb2RhbFByb3BzLCAncmVuZGVyV2hlbkNsb3NlZCc+XG4+XG5cbi8qKlxuICogQSBjb21wb25lbnQgdG8gZGlzcGxheSBhIG1vZGFsIHdpbmRvdyB3aGVyZSB0aGUgdXNlciBjYW4gc2VsZWN0IGEgbG9jYWxlLlxuICovXG5leHBvcnQgY29uc3QgTG9jYWxlU2VsZWN0b3IgPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgbG9jYWxlcyA9IGFsbExvY2FsZXMsXG4gICAgICBsYWJlbCA9ICdXZWJzaXRlIGFuZCBsYW5ndWFnZScsXG4gICAgICBjdXJyZW50TG9jYWxlLFxuICAgICAgcmVuZGVyV2hlbkNsb3NlZCA9IHRydWUsXG4gICAgICBvbkNoYW5nZSxcbiAgICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgICBjbGFzc05hbWUsXG4gICAgfTogTG9jYWxlU2VsZWN0b3JQcm9wcyxcbiAgICBfcmVmXG4gICkgPT4ge1xuICAgIGNvbnN0IFtzaG93TG9jYWxlTW9kYWwsIHNldFNob3dMb2NhbGVNb2RhbF0gPSB1c2VTdGF0ZShmYWxzZSlcblxuICAgIGNvbnN0IGhhbmRsZUNoYW5nZUxvY2FsZSA9IChsb2NhbGU6IExvY2FsZSkgPT4ge1xuICAgICAgb25DaGFuZ2UobG9jYWxlKVxuICAgICAgc2V0U2hvd0xvY2FsZU1vZGFsKGZhbHNlKVxuICAgIH1cbiAgICBjb25zdCBoYW5kbGVTaG93TG9jYWxCdXR0b24gPSAoKSA9PiB7XG4gICAgICBpZiAoIWRpc2FibGVkKSBzZXRTaG93TG9jYWxlTW9kYWwodHJ1ZSlcbiAgICB9XG4gICAgY29uc3QgTEFSR0VfVEhSRVNIT0xEID0gOSAvLyBtaW5pbXVtIG51bWJlciBvZiBsb2NhbGVzIGJlZm9yZSBzdXBwb3J0aW5nIDMgY29sdW1uc1xuICAgIGNvbnN0IGxhcmdlU2l6ZSA9IGxvY2FsZXMubGVuZ3RoID49IExBUkdFX1RIUkVTSE9MRCA/ICc4NDBweCcgOiAnNTYwcHgnXG4gICAgY29uc3Qgc2l6ZXMgPSB7IHM6ICdmdWxsc2NyZWVuJywgbTogJzU2MHB4JywgbDogJzU2MHB4JywgeGw6IGxhcmdlU2l6ZSwgeHhsOiBsYXJnZVNpemUgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgIDw+XG4gICAgICAgIDxMaW5rQnV0dG9uXG4gICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnMudGV4dC5wcmltYXJ5LnByaW1hcnl9O1xuICAgICAgICAgIGB9XG4gICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgaWNvbj17XG4gICAgICAgICAgICA8TG9jYWxlRmxhZ1xuICAgICAgICAgICAgICBsb2NhbGU9e2N1cnJlbnRMb2NhbGV9XG4gICAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAwLjVyZW07XG4gICAgICAgICAgICAgICAgZm9udC1zaXplOiAxLjI1cmVtO1xuICAgICAgICAgICAgICBgfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICB9XG4gICAgICAgICAgaWNvbkFsaWduPVwicmlnaHRcIlxuICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZVNob3dMb2NhbEJ1dHRvbn1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgPlxuICAgICAgICAgIHtsYWJlbCAmJiBsYWJlbH1cbiAgICAgICAgPC9MaW5rQnV0dG9uPlxuICAgICAgICA8TW9kYWxcbiAgICAgICAgICBoZWFkaW5nPXtsYWJlbH1cbiAgICAgICAgICBpc09wZW49e3Nob3dMb2NhbGVNb2RhbH1cbiAgICAgICAgICBzaG91bGRDbG9zZU9uRXNjPXt0cnVlfVxuICAgICAgICAgIG9uUmVxdWVzdENsb3NlPXsoKSA9PiBzZXRTaG93TG9jYWxlTW9kYWwoZmFsc2UpfVxuICAgICAgICAgIHJlbmRlcldoZW5DbG9zZWQ9e3JlbmRlcldoZW5DbG9zZWR9XG4gICAgICAgICAgc2l6ZXM9e3NpemVzfVxuICAgICAgICAgIG5vQ29udGVudFBhZGRpbmdcbiAgICAgICAgPlxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICAgICBwYWRkaW5nOiAwLjVyZW07XG4gICAgICAgICAgICAgIGNvbHVtbi1jb3VudDogMTtcbiAgICAgICAgICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDQ4MHB4KSB7XG4gICAgICAgICAgICAgICAgY29sdW1uLWNvdW50OiAyO1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICR7bG9jYWxlcy5sZW5ndGggPj0gTEFSR0VfVEhSRVNIT0xEICYmXG4gICAgICAgICAgICAgIG1lZGlhLmdyZWF0ZXJUaGFuKCd4bCcpYFxuICAgICAgICAgICAgICAgIGNvbHVtbi1jb3VudDogMztcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2xvY2FsZXMubWFwKChsb2NhbGUpID0+IHtcbiAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICA8TG9jYWxlT3B0aW9uXG4gICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBoYW5kbGVDaGFuZ2VMb2NhbGUobG9jYWxlKX1cbiAgICAgICAgICAgICAgICAgIGtleT17bG9jYWxlfVxuICAgICAgICAgICAgICAgICAgbG9jYWxlPXtsb2NhbGV9XG4gICAgICAgICAgICAgICAgICBsYWJlbD17bG9jYWxlRGF0YVtsb2NhbGVdLm5hdGl2ZU5hbWV9XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgfSl9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvTW9kYWw+XG4gICAgICA8Lz5cbiAgICApXG4gIH1cbilcblxuZXhwb3J0IGRlZmF1bHQgTG9jYWxlU2VsZWN0b3JcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-const LocaleSelector = exports.LocaleSelector = /*#__PURE__*/(0, _react.forwardRef)(({
+const LocaleSelector = /*#__PURE__*/(0, _react.forwardRef)(({
   locales = _reactComponents.locales,
   label = 'Website and language',
   currentLocale,
@@ -92,4 +92,6 @@ const LocaleSelector = exports.LocaleSelector = /*#__PURE__*/(0, _react.forwardR
     });
   }))));
 });
-var _default = exports.default = LocaleSelector;
+exports.LocaleSelector = LocaleSelector;
+var _default = LocaleSelector;
+exports.default = _default;

package/dynamic-table/Body/TableBody.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableBodyProps } from './TableBody.types';
-declare const TableBody: React.MemoExoticComponent<({ activeRow, headerRow, onClickRow, onSelectRow, rows, selectableRows, selectedRows }: TableBodyProps) => JSX.Element>;
+declare const TableBody: React.MemoExoticComponent<({ activeRow, expandable, headerRow, onClickRow, onSelectRow, rows, selectableRows, selectedRows, }: TableBodyProps) => JSX.Element>;
 export default TableBody;

package/dynamic-table/Body/TableBody.js

@@ -3,12 +3,13 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
 import React, { useCallback } from 'react';
-import TableRow from './TableRow';
+import TableRowGroup from './TableRowGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TableBody = /*#__PURE__*/React.memo(function (_ref) {
   var activeRow = _ref.activeRow,
+    expandable = _ref.expandable,
     headerRow = _ref.headerRow,
     onClickRow = _ref.onClickRow,
     onSelectRow = _ref.onSelectRow,
@@ -30,9 +31,10 @@ var TableBody = /*#__PURE__*/React.memo(function (_ref) {
     }
   }, [selectableRows, selectedRows]);
   return ___EmotionJSX("tbody", null, rows.map(function (row, index) {
-    return ___EmotionJSX(TableRow, {
+    return ___EmotionJSX(TableRowGroup, {
+      activeRow: activeRow,
+      expandable: expandable,
       headerRow: headerRow,
-      isActive: activeRow ? row.id === activeRow : false,
       key: index,
       onClickRow: onClickRow,
       onSelectRow: updateSelectedRows,

package/dynamic-table/Body/TableBody.types.d.ts

@@ -1,6 +1,7 @@
 import { Header, Row } from '../DynamicTable.types';
 export declare type TableBodyProps = {
     activeRow?: string;
+    expandable?: boolean;
     headerRow: Header[];
     onClickRow?: (id: string) => void;
     onSelectRow?: (list: string[]) => void;

package/dynamic-table/Body/TableCell.styles.d.ts

@@ -4,5 +4,6 @@ declare type TableCellProps = {
     customWidth?: string;
 };
 export declare const tableCellStyles: ({ align, customWidth }: TableCellProps) => import("@emotion/utils").SerializedStyles;
+export declare const tableCellExpanderStyles: import("@emotion/utils").SerializedStyles;
 export declare const tableCellCheckboxStyles: import("@emotion/utils").SerializedStyles;
 export {};

package/dynamic-table/Body/TableCell.styles.js

@@ -6,10 +6,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { theme } from '@dfds-ui/theme';
 import { css } from '@emotion/react';
-export var genericTableCellStyles = /*#__PURE__*/css("padding:0 ", theme.spacing.xs, ";&:first-of-type{padding-left:", theme.spacing.s, ";}&:last-of-type{padding-right:", theme.spacing.s, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:genericTableCellStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3lDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVDZWxsU3R5bGVzID0gY3NzYFxuICBwYWRkaW5nOiAwICR7dGhlbWUuc3BhY2luZy54c307XG5cbiAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgfVxuXG4gICY6bGFzdC1vZi10eXBlIHtcbiAgICBwYWRkaW5nLXJpZ2h0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cbmBcblxudHlwZSBUYWJsZUNlbGxQcm9wcyA9IHtcbiAgYWxpZ24/OiAnY2VudGVyJyB8ICdsZWZ0JyB8ICdyaWdodCdcbiAgY3VzdG9tV2lkdGg/OiBzdHJpbmdcbn1cblxuZXhwb3J0IGNvbnN0IHRhYmxlQ2VsbFN0eWxlcyA9ICh7IGFsaWduLCBjdXN0b21XaWR0aCB9OiBUYWJsZUNlbGxQcm9wcykgPT4gY3NzYFxuICAke3sgLi4uZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyB9fVxuXG4gIG1pbi13aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuICB0ZXh0LWFsaWduOiAke2FsaWduIHx8ICdsZWZ0J307XG4gIHdpZHRoOiAke2N1c3RvbVdpZHRoIHx8ICdhdXRvJ307XG5gXG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxDaGVja2JveFN0eWxlcyA9IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtYXgtd2lkdGg6IDQwcHg7XG4gIHdpZHRoOiA0MHB4O1xuYFxuIl19 */");
+export var genericTableCellStyles = /*#__PURE__*/css("padding:0 ", theme.spacing.xs, ";&:first-of-type{padding-left:", theme.spacing.s, ";}&:last-of-type{padding-right:", theme.spacing.s, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:genericTableCellStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR3lDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVDZWxsU3R5bGVzID0gY3NzYFxuICBwYWRkaW5nOiAwICR7dGhlbWUuc3BhY2luZy54c307XG5cbiAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgfVxuXG4gICY6bGFzdC1vZi10eXBlIHtcbiAgICBwYWRkaW5nLXJpZ2h0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cbmBcblxudHlwZSBUYWJsZUNlbGxQcm9wcyA9IHtcbiAgYWxpZ24/OiAnY2VudGVyJyB8ICdsZWZ0JyB8ICdyaWdodCdcbiAgY3VzdG9tV2lkdGg/OiBzdHJpbmdcbn1cblxuZXhwb3J0IGNvbnN0IHRhYmxlQ2VsbFN0eWxlcyA9ICh7IGFsaWduLCBjdXN0b21XaWR0aCB9OiBUYWJsZUNlbGxQcm9wcykgPT4gY3NzYFxuICAke3sgLi4uZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyB9fVxuXG4gIG1pbi13aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuICB0ZXh0LWFsaWduOiAke2FsaWduIHx8ICdsZWZ0J307XG4gIHdpZHRoOiAke2N1c3RvbVdpZHRoIHx8ICdhdXRvJ307XG5gXG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxFeHBhbmRlclN0eWxlcyA9IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtYXgtd2lkdGg6IDQ4cHg7XG4gIHdpZHRoOiA0OHB4O1xuYFxuXG5leHBvcnQgY29uc3QgdGFibGVDZWxsQ2hlY2tib3hTdHlsZXMgPSBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVDZWxsU3R5bGVzIH19XG5cbiAgbWF4LXdpZHRoOiA0MHB4O1xuICB3aWR0aDogNDBweDtcbmBcbiJdfQ== */");
 export var tableCellStyles = function tableCellStyles(_ref) {
   var align = _ref.align,
     customWidth = _ref.customWidth;
-  return /*#__PURE__*/css(_objectSpread({}, genericTableCellStyles), " min-width:", customWidth || 'auto', ";text-align:", align || 'left', ";width:", customWidth || 'auto', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:tableCellStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4RSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyA9IGNzc2BcbiAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcueHN9O1xuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cblxuICAmOmxhc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5gXG5cbnR5cGUgVGFibGVDZWxsUHJvcHMgPSB7XG4gIGFsaWduPzogJ2NlbnRlcicgfCAnbGVmdCcgfCAncmlnaHQnXG4gIGN1c3RvbVdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxTdHlsZXMgPSAoeyBhbGlnbiwgY3VzdG9tV2lkdGggfTogVGFibGVDZWxsUHJvcHMpID0+IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtaW4td2lkdGg6ICR7Y3VzdG9tV2lkdGggfHwgJ2F1dG8nfTtcbiAgdGV4dC1hbGlnbjogJHthbGlnbiB8fCAnbGVmdCd9O1xuICB3aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuYFxuXG5leHBvcnQgY29uc3QgdGFibGVDZWxsQ2hlY2tib3hTdHlsZXMgPSBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVDZWxsU3R5bGVzIH19XG5cbiAgbWF4LXdpZHRoOiA0MHB4O1xuICB3aWR0aDogNDBweDtcbmBcbiJdfQ== */");
+  return /*#__PURE__*/css(_objectSpread({}, genericTableCellStyles), " min-width:", customWidth || 'auto', ";text-align:", align || 'left', ";width:", customWidth || 'auto', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:tableCellStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4RSIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyA9IGNzc2BcbiAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcueHN9O1xuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cblxuICAmOmxhc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5gXG5cbnR5cGUgVGFibGVDZWxsUHJvcHMgPSB7XG4gIGFsaWduPzogJ2NlbnRlcicgfCAnbGVmdCcgfCAncmlnaHQnXG4gIGN1c3RvbVdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxTdHlsZXMgPSAoeyBhbGlnbiwgY3VzdG9tV2lkdGggfTogVGFibGVDZWxsUHJvcHMpID0+IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtaW4td2lkdGg6ICR7Y3VzdG9tV2lkdGggfHwgJ2F1dG8nfTtcbiAgdGV4dC1hbGlnbjogJHthbGlnbiB8fCAnbGVmdCd9O1xuICB3aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuYFxuXG5leHBvcnQgY29uc3QgdGFibGVDZWxsRXhwYW5kZXJTdHlsZXMgPSBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVDZWxsU3R5bGVzIH19XG5cbiAgbWF4LXdpZHRoOiA0OHB4O1xuICB3aWR0aDogNDhweDtcbmBcblxuZXhwb3J0IGNvbnN0IHRhYmxlQ2VsbENoZWNrYm94U3R5bGVzID0gY3NzYFxuICAke3sgLi4uZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyB9fVxuXG4gIG1heC13aWR0aDogNDBweDtcbiAgd2lkdGg6IDQwcHg7XG5gXG4iXX0= */");
 };
-export var tableCellCheckboxStyles = /*#__PURE__*/css(_objectSpread({}, genericTableCellStyles), " max-width:40px;width:40px;" + (process.env.NODE_ENV === "production" ? "" : ";label:tableCellCheckboxStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEIwQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyA9IGNzc2BcbiAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcueHN9O1xuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cblxuICAmOmxhc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5gXG5cbnR5cGUgVGFibGVDZWxsUHJvcHMgPSB7XG4gIGFsaWduPzogJ2NlbnRlcicgfCAnbGVmdCcgfCAncmlnaHQnXG4gIGN1c3RvbVdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxTdHlsZXMgPSAoeyBhbGlnbiwgY3VzdG9tV2lkdGggfTogVGFibGVDZWxsUHJvcHMpID0+IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtaW4td2lkdGg6ICR7Y3VzdG9tV2lkdGggfHwgJ2F1dG8nfTtcbiAgdGV4dC1hbGlnbjogJHthbGlnbiB8fCAnbGVmdCd9O1xuICB3aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuYFxuXG5leHBvcnQgY29uc3QgdGFibGVDZWxsQ2hlY2tib3hTdHlsZXMgPSBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVDZWxsU3R5bGVzIH19XG5cbiAgbWF4LXdpZHRoOiA0MHB4O1xuICB3aWR0aDogNDBweDtcbmBcbiJdfQ== */");
+export var tableCellExpanderStyles = /*#__PURE__*/css(_objectSpread({}, genericTableCellStyles), " max-width:48px;width:48px;" + (process.env.NODE_ENV === "production" ? "" : ";label:tableCellExpanderStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEIwQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyA9IGNzc2BcbiAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcueHN9O1xuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cblxuICAmOmxhc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5gXG5cbnR5cGUgVGFibGVDZWxsUHJvcHMgPSB7XG4gIGFsaWduPzogJ2NlbnRlcicgfCAnbGVmdCcgfCAncmlnaHQnXG4gIGN1c3RvbVdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxTdHlsZXMgPSAoeyBhbGlnbiwgY3VzdG9tV2lkdGggfTogVGFibGVDZWxsUHJvcHMpID0+IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtaW4td2lkdGg6ICR7Y3VzdG9tV2lkdGggfHwgJ2F1dG8nfTtcbiAgdGV4dC1hbGlnbjogJHthbGlnbiB8fCAnbGVmdCd9O1xuICB3aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuYFxuXG5leHBvcnQgY29uc3QgdGFibGVDZWxsRXhwYW5kZXJTdHlsZXMgPSBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVDZWxsU3R5bGVzIH19XG5cbiAgbWF4LXdpZHRoOiA0OHB4O1xuICB3aWR0aDogNDhweDtcbmBcblxuZXhwb3J0IGNvbnN0IHRhYmxlQ2VsbENoZWNrYm94U3R5bGVzID0gY3NzYFxuICAke3sgLi4uZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyB9fVxuXG4gIG1heC13aWR0aDogNDBweDtcbiAgd2lkdGg6IDQwcHg7XG5gXG4iXX0= */");
+export var tableCellCheckboxStyles = /*#__PURE__*/css(_objectSpread({}, genericTableCellStyles), " max-width:40px;width:40px;" + (process.env.NODE_ENV === "production" ? "" : ";label:tableCellCheckboxStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUMwQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyA9IGNzc2BcbiAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcueHN9O1xuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cblxuICAmOmxhc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5gXG5cbnR5cGUgVGFibGVDZWxsUHJvcHMgPSB7XG4gIGFsaWduPzogJ2NlbnRlcicgfCAnbGVmdCcgfCAncmlnaHQnXG4gIGN1c3RvbVdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZUNlbGxTdHlsZXMgPSAoeyBhbGlnbiwgY3VzdG9tV2lkdGggfTogVGFibGVDZWxsUHJvcHMpID0+IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZXMgfX1cblxuICBtaW4td2lkdGg6ICR7Y3VzdG9tV2lkdGggfHwgJ2F1dG8nfTtcbiAgdGV4dC1hbGlnbjogJHthbGlnbiB8fCAnbGVmdCd9O1xuICB3aWR0aDogJHtjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuYFxuXG5leHBvcnQgY29uc3QgdGFibGVDZWxsRXhwYW5kZXJTdHlsZXMgPSBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVDZWxsU3R5bGVzIH19XG5cbiAgbWF4LXdpZHRoOiA0OHB4O1xuICB3aWR0aDogNDhweDtcbmBcblxuZXhwb3J0IGNvbnN0IHRhYmxlQ2VsbENoZWNrYm94U3R5bGVzID0gY3NzYFxuICAke3sgLi4uZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlcyB9fVxuXG4gIG1heC13aWR0aDogNDBweDtcbiAgd2lkdGg6IDQwcHg7XG5gXG4iXX0= */");

package/dynamic-table/Body/TableRow.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableRowProps } from './TableRow.types';
-declare const TableRow: React.MemoExoticComponent<({ headerRow, isActive, onClickRow, onSelectRow, row, selectableRows, selectedRows }: TableRowProps) => JSX.Element>;
+declare const TableRow: React.MemoExoticComponent<({ expandable, headerRow, isActive, isExpanded, isSubRow, onClickRow, onSelectRow, row, selectableRows, selectedRows, setIsExpanded, }: TableRowProps) => JSX.Element>;
 export default TableRow;

package/dynamic-table/Body/TableRow.js

@@ -1,27 +1,46 @@
 import React from 'react';
 import { Checkbox } from '@dfds-ui/forms';
 import TableCell from './TableCell';
-import { tableCellCheckboxStyles } from './TableCell.styles';
-import { tableRowStyles } from './TableRow.styles';
+import { tableCellCheckboxStyles, tableCellExpanderStyles } from './TableCell.styles';
+import { chevronStyles, tableRowStyles } from './TableRow.styles';
+import { ChevronRight } from '@dfds-ui/icons/system';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TableRow = /*#__PURE__*/React.memo(function (_ref) {
-  var headerRow = _ref.headerRow,
+  var _row$subRows;
+  var expandable = _ref.expandable,
+    headerRow = _ref.headerRow,
     isActive = _ref.isActive,
+    isExpanded = _ref.isExpanded,
+    isSubRow = _ref.isSubRow,
     onClickRow = _ref.onClickRow,
     onSelectRow = _ref.onSelectRow,
     row = _ref.row,
     selectableRows = _ref.selectableRows,
-    selectedRows = _ref.selectedRows;
+    selectedRows = _ref.selectedRows,
+    setIsExpanded = _ref.setIsExpanded;
+  var hasSubRows = (((_row$subRows = row.subRows) === null || _row$subRows === void 0 ? void 0 : _row$subRows.length) || 0) > 0;
   return ___EmotionJSX("tr", {
     css: tableRowStyles({
       active: isActive,
-      hoverColor: !!onClickRow
+      expanded: isExpanded,
+      hoverColor: !!onClickRow,
+      subRow: !!isSubRow
     }),
     className: row.className,
     onClick: function onClick() {
       return onClickRow && onClickRow(row.id ? String(row.id) : '');
     }
-  }, selectableRows && row.id && ___EmotionJSX("td", {
+  }, expandable && ___EmotionJSX("td", {
+    css: tableCellExpanderStyles
+  }, hasSubRows ? ___EmotionJSX(ChevronRight, {
+    css: chevronStyles({
+      expanded: isExpanded
+    }),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setIsExpanded(!isExpanded);
+    }
+  }) : null), selectableRows && row.id && ___EmotionJSX("td", {
     css: tableCellCheckboxStyles
   }, ___EmotionJSX(Checkbox, {
     checked: selectedRows.includes(row.id),

package/dynamic-table/Body/TableRow.styles.d.ts

@@ -1,7 +1,11 @@
+import { ChevronProps } from './TableRow.types';
 export declare const genericTableRowStyles: import("@emotion/utils").SerializedStyles;
 declare type TableRowProps = {
     active?: boolean;
+    expanded: boolean;
     hoverColor: boolean;
+    subRow: boolean;
 };
-export declare const tableRowStyles: ({ active, hoverColor }: TableRowProps) => import("@emotion/utils").SerializedStyles;
+export declare const tableRowStyles: ({ active, expanded, hoverColor, subRow }: TableRowProps) => import("@emotion/utils").SerializedStyles;
+export declare const chevronStyles: ({ expanded }: ChevronProps) => import("@emotion/utils").SerializedStyles;
 export {};

package/dynamic-table/Body/TableRow.styles.js

@@ -4,11 +4,26 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import { theme } from '@dfds-ui/theme';
 import { css } from '@emotion/react';
-export var genericTableRowStyles = /*#__PURE__*/css("border-bottom:1px solid ", theme.colors.surface.secondary, ";border-collapse:collapse;height:48px;" + (process.env.NODE_ENV === "production" ? "" : ";label:genericTableRowStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHd0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlUm93U3R5bGVzID0gY3NzYFxuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc3VyZmFjZS5zZWNvbmRhcnl9O1xuICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xuICBoZWlnaHQ6IDQ4cHg7XG5gXG5cbnR5cGUgVGFibGVSb3dQcm9wcyA9IHtcbiAgYWN0aXZlPzogYm9vbGVhblxuICBob3ZlckNvbG9yOiBib29sZWFuXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZVJvd1N0eWxlcyA9ICh7IGFjdGl2ZSwgaG92ZXJDb2xvciB9OiBUYWJsZVJvd1Byb3BzKSA9PiBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZXMgfX1cblxuICAmOmhvdmVyIHtcbiAgICAke2hvdmVyQ29sb3IgJiZcbiAgICBgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICBjdXJzb3I6ICR7aG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICAgIGB9O1xuICB9XG5cbiAgJHthY3RpdmUgJiZcbiAgYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLmRpdmlkZXIuZGFya307XG4gIGB9O1xuYFxuIl19 */");
+export var genericTableRowStyles = process.env.NODE_ENV === "production" ? {
+  name: "674hgm",
+  styles: "border-bottom:1px solid #4d4e4c29;border-collapse:collapse;height:48px"
+} : {
+  name: "1sc9lfj-genericTableRowStyles",
+  styles: "border-bottom:1px solid #4d4e4c29;border-collapse:collapse;height:48px;label:genericTableRowStyles;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJd0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgQ2hldnJvblByb3BzIH0gZnJvbSAnLi9UYWJsZVJvdy50eXBlcydcblxuZXhwb3J0IGNvbnN0IGdlbmVyaWNUYWJsZVJvd1N0eWxlcyA9IGNzc2BcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICM0ZDRlNGMyOTtcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgaGVpZ2h0OiA0OHB4O1xuYFxuXG50eXBlIFRhYmxlUm93UHJvcHMgPSB7XG4gIGFjdGl2ZT86IGJvb2xlYW5cbiAgZXhwYW5kZWQ6IGJvb2xlYW5cbiAgaG92ZXJDb2xvcjogYm9vbGVhblxuICBzdWJSb3c6IGJvb2xlYW5cbn1cblxuZXhwb3J0IGNvbnN0IHRhYmxlUm93U3R5bGVzID0gKHsgYWN0aXZlLCBleHBhbmRlZCwgaG92ZXJDb2xvciwgc3ViUm93IH06IFRhYmxlUm93UHJvcHMpID0+IGNzc2BcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZVJvd1N0eWxlcyB9fVxuXG4gICY6aG92ZXIge1xuICAgICR7aG92ZXJDb2xvciAmJlxuICAgIGBcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgICAgIGN1cnNvcjogJHtob3ZlckNvbG9yICYmICdwb2ludGVyJ307XG4gICAgYH07XG4gIH1cblxuICAke2FjdGl2ZSAmJlxuICBgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMuZGl2aWRlci5kYXJrfTtcbiAgYH07XG5cbiAgJHtleHBhbmRlZCAmJlxuICBgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnMuc3VyZmFjZS5zZWNvbmRhcnl9O1xuICBgfTtcblxuICAke3N1YlJvdyAmJlxuICAhZXhwYW5kZWQgJiZcbiAgYFxuICAgIGRpc3BsYXk6IG5vbmU7XG4gIGB9O1xuYFxuXG5leHBvcnQgY29uc3QgY2hldnJvblN0eWxlcyA9ICh7IGV4cGFuZGVkIH06IENoZXZyb25Qcm9wcykgPT4gY3NzYFxuICBjb2xvcjogJHt0aGVtZS5jb2xvcnMucHJpbWFyeS5kYXJrfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBmb250LXNpemU6IDEuNXJlbTtcbiAgdHJhbnNmb3JtOiAke2V4cGFuZGVkICYmICdyb3RhdGUoOTBkZWcpJ307XG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDI1MG1zO1xuICB0cmFuc2l0aW9uLXByb3BlcnR5OiB0cmFuc2Zvcm07XG5gXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var tableRowStyles = function tableRowStyles(_ref) {
   var active = _ref.active,
-    hoverColor = _ref.hoverColor;
-  return /*#__PURE__*/css(_objectSpread({}, genericTableRowStyles), " &:hover{", hoverColor && "\n      background-color: ".concat(theme.colors.surface.secondary, ";\n      cursor: ").concat(hoverColor && 'pointer', ";\n    "), ";}", active && "\n    background-color: ".concat(theme.colors.divider.dark, ";\n  "), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:tableRowStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjNEUiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5leHBvcnQgY29uc3QgZ2VuZXJpY1RhYmxlUm93U3R5bGVzID0gY3NzYFxuICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuc3VyZmFjZS5zZWNvbmRhcnl9O1xuICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xuICBoZWlnaHQ6IDQ4cHg7XG5gXG5cbnR5cGUgVGFibGVSb3dQcm9wcyA9IHtcbiAgYWN0aXZlPzogYm9vbGVhblxuICBob3ZlckNvbG9yOiBib29sZWFuXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZVJvd1N0eWxlcyA9ICh7IGFjdGl2ZSwgaG92ZXJDb2xvciB9OiBUYWJsZVJvd1Byb3BzKSA9PiBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZXMgfX1cblxuICAmOmhvdmVyIHtcbiAgICAke2hvdmVyQ29sb3IgJiZcbiAgICBgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICBjdXJzb3I6ICR7aG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICAgIGB9O1xuICB9XG5cbiAgJHthY3RpdmUgJiZcbiAgYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLmRpdmlkZXIuZGFya307XG4gIGB9O1xuYFxuIl19 */");
+    expanded = _ref.expanded,
+    hoverColor = _ref.hoverColor,
+    subRow = _ref.subRow;
+  return /*#__PURE__*/css(_objectSpread({}, genericTableRowStyles), " &:hover{", hoverColor && "\n      background-color: ".concat(theme.colors.surface.secondary, ";\n      cursor: ").concat(hoverColor && 'pointer', ";\n    "), ";}", active && "\n    background-color: ".concat(theme.colors.divider.dark, ";\n  "), ";", expanded && "\n    background-color: ".concat(theme.colors.surface.secondary, ";\n  "), ";", subRow && !expanded && "\n    display: none;\n  ", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:tableRowStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjhGIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IENoZXZyb25Qcm9wcyB9IGZyb20gJy4vVGFibGVSb3cudHlwZXMnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVSb3dTdHlsZXMgPSBjc3NgXG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjNGQ0ZTRjMjk7XG4gIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XG4gIGhlaWdodDogNDhweDtcbmBcblxudHlwZSBUYWJsZVJvd1Byb3BzID0ge1xuICBhY3RpdmU/OiBib29sZWFuXG4gIGV4cGFuZGVkOiBib29sZWFuXG4gIGhvdmVyQ29sb3I6IGJvb2xlYW5cbiAgc3ViUm93OiBib29sZWFuXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZVJvd1N0eWxlcyA9ICh7IGFjdGl2ZSwgZXhwYW5kZWQsIGhvdmVyQ29sb3IsIHN1YlJvdyB9OiBUYWJsZVJvd1Byb3BzKSA9PiBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZXMgfX1cblxuICAmOmhvdmVyIHtcbiAgICAke2hvdmVyQ29sb3IgJiZcbiAgICBgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICBjdXJzb3I6ICR7aG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICAgIGB9O1xuICB9XG5cbiAgJHthY3RpdmUgJiZcbiAgYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLmRpdmlkZXIuZGFya307XG4gIGB9O1xuXG4gICR7ZXhwYW5kZWQgJiZcbiAgYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgYH07XG5cbiAgJHtzdWJSb3cgJiZcbiAgIWV4cGFuZGVkICYmXG4gIGBcbiAgICBkaXNwbGF5OiBub25lO1xuICBgfTtcbmBcblxuZXhwb3J0IGNvbnN0IGNoZXZyb25TdHlsZXMgPSAoeyBleHBhbmRlZCB9OiBDaGV2cm9uUHJvcHMpID0+IGNzc2BcbiAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkuZGFya307XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgZm9udC1zaXplOiAxLjVyZW07XG4gIHRyYW5zZm9ybTogJHtleHBhbmRlZCAmJiAncm90YXRlKDkwZGVnKSd9O1xuICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAyNTBtcztcbiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogdHJhbnNmb3JtO1xuYFxuIl19 */");
+};
+export var chevronStyles = function chevronStyles(_ref2) {
+  var expanded = _ref2.expanded;
+  return /*#__PURE__*/css("color:", theme.colors.primary.dark, ";cursor:pointer;font-size:1.5rem;transform:", expanded && 'rotate(90deg)', ";transition-duration:250ms;transition-property:transform;" + (process.env.NODE_ENV === "production" ? "" : ";label:chevronStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q2dFIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGRmZHMtdWkvdGhlbWUnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IENoZXZyb25Qcm9wcyB9IGZyb20gJy4vVGFibGVSb3cudHlwZXMnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVSb3dTdHlsZXMgPSBjc3NgXG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjNGQ0ZTRjMjk7XG4gIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XG4gIGhlaWdodDogNDhweDtcbmBcblxudHlwZSBUYWJsZVJvd1Byb3BzID0ge1xuICBhY3RpdmU/OiBib29sZWFuXG4gIGV4cGFuZGVkOiBib29sZWFuXG4gIGhvdmVyQ29sb3I6IGJvb2xlYW5cbiAgc3ViUm93OiBib29sZWFuXG59XG5cbmV4cG9ydCBjb25zdCB0YWJsZVJvd1N0eWxlcyA9ICh7IGFjdGl2ZSwgZXhwYW5kZWQsIGhvdmVyQ29sb3IsIHN1YlJvdyB9OiBUYWJsZVJvd1Byb3BzKSA9PiBjc3NgXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZXMgfX1cblxuICAmOmhvdmVyIHtcbiAgICAke2hvdmVyQ29sb3IgJiZcbiAgICBgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICBjdXJzb3I6ICR7aG92ZXJDb2xvciAmJiAncG9pbnRlcid9O1xuICAgIGB9O1xuICB9XG5cbiAgJHthY3RpdmUgJiZcbiAgYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLmRpdmlkZXIuZGFya307XG4gIGB9O1xuXG4gICR7ZXhwYW5kZWQgJiZcbiAgYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgYH07XG5cbiAgJHtzdWJSb3cgJiZcbiAgIWV4cGFuZGVkICYmXG4gIGBcbiAgICBkaXNwbGF5OiBub25lO1xuICBgfTtcbmBcblxuZXhwb3J0IGNvbnN0IGNoZXZyb25TdHlsZXMgPSAoeyBleHBhbmRlZCB9OiBDaGV2cm9uUHJvcHMpID0+IGNzc2BcbiAgY29sb3I6ICR7dGhlbWUuY29sb3JzLnByaW1hcnkuZGFya307XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgZm9udC1zaXplOiAxLjVyZW07XG4gIHRyYW5zZm9ybTogJHtleHBhbmRlZCAmJiAncm90YXRlKDkwZGVnKSd9O1xuICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAyNTBtcztcbiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogdHJhbnNmb3JtO1xuYFxuIl19 */");
 };

package/dynamic-table/Body/TableRow.types.d.ts

@@ -1,10 +1,17 @@
 import { Header, Row } from '../DynamicTable.types';
 export declare type TableRowProps = {
+    expandable?: boolean;
     headerRow: Header[];
     isActive: boolean;
+    isExpanded: boolean;
+    isSubRow?: boolean;
     onClickRow?: (id: string) => void;
     onSelectRow: (id: string) => void;
     row: Row;
     selectableRows: boolean;
     selectedRows: string[];
+    setIsExpanded: (expanded: boolean) => void;
+};
+export declare type ChevronProps = {
+    expanded: boolean;
 };

package/dynamic-table/Body/TableRowGroup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableRowGroupProps } from './TableRowGroup.types';
+declare const TableRowGroup: React.MemoExoticComponent<({ activeRow, expandable, headerRow, onClickRow, onSelectRow, row, selectableRows, selectedRows, }: TableRowGroupProps) => JSX.Element>;
+export default TableRowGroup;

package/dynamic-table/Body/TableRowGroup.js

@@ -0,0 +1,52 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+import TableRow from './TableRow';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableRowGroup = /*#__PURE__*/React.memo(function (_ref) {
+  var activeRow = _ref.activeRow,
+    expandable = _ref.expandable,
+    headerRow = _ref.headerRow,
+    onClickRow = _ref.onClickRow,
+    onSelectRow = _ref.onSelectRow,
+    row = _ref.row,
+    selectableRows = _ref.selectableRows,
+    selectedRows = _ref.selectedRows;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isExpanded = _React$useState2[0],
+    setIsExpanded = _React$useState2[1];
+  var subRows = row.subRows || [];
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableRow, {
+    headerRow: headerRow,
+    expandable: expandable,
+    isActive: activeRow ? row.id === activeRow : false,
+    isExpanded: isExpanded,
+    onClickRow: onClickRow,
+    onSelectRow: onSelectRow,
+    row: row,
+    selectableRows: selectableRows,
+    selectedRows: selectedRows,
+    setIsExpanded: setIsExpanded
+  }), subRows.map(function (row, index) {
+    return ___EmotionJSX(TableRow, {
+      headerRow: headerRow,
+      expandable: expandable,
+      isActive: activeRow ? row.id === activeRow : false,
+      isExpanded: isExpanded,
+      isSubRow: true,
+      key: index,
+      onClickRow: onClickRow,
+      onSelectRow: onSelectRow,
+      row: row,
+      selectableRows: selectableRows,
+      selectedRows: selectedRows,
+      setIsExpanded: setIsExpanded
+    });
+  }));
+});
+export default TableRowGroup;

package/dynamic-table/Body/TableRowGroup.types.d.ts

@@ -0,0 +1,14 @@
+import { Header, Row } from '../DynamicTable.types';
+export declare type TableRowGroupProps = {
+    activeRow?: string;
+    expandable?: boolean;
+    headerRow: Header[];
+    onClickRow?: (id: string) => void;
+    onSelectRow: (id: string) => void;
+    row: Row;
+    selectableRows: boolean;
+    selectedRows: string[];
+};
+export declare type ChevronProps = {
+    expanded: boolean;
+};

package/dynamic-table/Body/TableRowGroup.types.js

@@ -0,0 +1 @@
+export {};

package/dynamic-table/DynamicTable.js

@@ -1,13 +1,13 @@
-var _excluded = ["activeRow", "descending", "height", "headerRow", "isLoading", "onClickRow", "onSelectRow", "onSort", "rows", "selectedRows", "sortingBy", "stickyHeader"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _excluded = ["activeRow", "descending", "expandable", "height", "headerRow", "isLoading", "onClickRow", "onSelectRow", "onSort", "rows", "selectedRows", "sortingBy", "stickyHeader"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) { o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } } return t; }
 import React, { useEffect, useMemo, useState } from 'react';
 import TableBody from './Body/TableBody';
 import { tableStyles, tableWrapperStyles } from './DynamicTable.styles';
@@ -18,6 +18,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var DynamicTable = function DynamicTable(_ref) {
   var activeRow = _ref.activeRow,
     descending = _ref.descending,
+    expandable = _ref.expandable,
     height = _ref.height,
     headerRow = _ref.headerRow,
     isLoading = _ref.isLoading,
@@ -56,6 +57,7 @@ var DynamicTable = function DynamicTable(_ref) {
     css: tableStyles,
     "data-cy": !isLoading ? "dynamic-table-isLoaded" : ''
   }, headerRow && ___EmotionJSX(TableHead, {
+    expandable: expandable,
     headerRow: headerRow,
     onSelectRow: onSelectRow,
     onSort: onSort,
@@ -69,6 +71,7 @@ var DynamicTable = function DynamicTable(_ref) {
     stickyHeader: stickyHeader
   }), ___EmotionJSX(TableBody, {
     activeRow: activeRow,
+    expandable: expandable,
     headerRow: headerRow,
     onClickRow: onClickRow,
     onSelectRow: onSelectRow,

package/dynamic-table/DynamicTable.types.d.ts

@@ -7,14 +7,21 @@ export declare type Header = {
     textAlign?: 'center' | 'left' | 'right';
     width?: string;
 };
+export declare type SubRow = {
+    className?: string;
+    id?: string;
+    [name: string]: any;
+};
 export declare type Row = {
     className?: string;
     id?: string;
+    subRows?: SubRow[];
     [name: string]: any;
 };
 export declare type DynamicTableProps = {
     activeRow?: string;
     descending?: boolean;
+    expandable?: boolean;
     headerRow: Header[];
     height?: string;
     isLoading?: boolean;

package/dynamic-table/Head/TableHead.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableHeadProps } from './TableHead.types';
-declare const TableHead: React.MemoExoticComponent<({ headerRow, onSelectRow, onSort, rows, selectableRows, selectedRows, setSortDescending, setSortByKeyValue, sortDescending, sortByKeyValue, stickyHeader, }: TableHeadProps) => JSX.Element>;
+declare const TableHead: React.MemoExoticComponent<({ expandable, headerRow, onSelectRow, onSort, rows, selectableRows, selectedRows, setSortDescending, setSortByKeyValue, sortDescending, sortByKeyValue, stickyHeader, }: TableHeadProps) => JSX.Element>;
 export default TableHead;

package/dynamic-table/Head/TableHead.js

@@ -5,7 +5,8 @@ import { chevronStyles, tableHeadCellCheckboxStyles, tableHeadCellStyles } from
 import { genericTableRowStyles } from '../Body/TableRow.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TableHead = /*#__PURE__*/React.memo(function (_ref) {
-  var headerRow = _ref.headerRow,
+  var expandable = _ref.expandable,
+    headerRow = _ref.headerRow,
     onSelectRow = _ref.onSelectRow,
     onSort = _ref.onSort,
     rows = _ref.rows,
@@ -37,7 +38,7 @@ var TableHead = /*#__PURE__*/React.memo(function (_ref) {
   }, [onSort, setSortDescending, setSortByKeyValue, sortDescending]);
   return ___EmotionJSX("thead", null, ___EmotionJSX("tr", {
     css: genericTableRowStyles
-  }, selectableRows && ___EmotionJSX("th", {
+  }, expandable && ___EmotionJSX("th", null), selectableRows && ___EmotionJSX("th", {
     css: tableHeadCellCheckboxStyles({
       stickyHeader: stickyHeader
     })

package/dynamic-table/Head/TableHead.types.d.ts

@@ -1,5 +1,6 @@
 import { Header, Row } from '../DynamicTable.types';
 export declare type TableHeadProps = {
+    expandable?: boolean;
     headerRow: Header[];
     onSelectRow?: (list: string[]) => void;
     onSort?: (value: string, sortDescending: boolean) => void;

package/dynamic-table/Skeleton/helpers/createSkeletonRows.js

@@ -3,7 +3,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import React from 'react';
 import { Skeleton } from '@dfds-ui/react-components';
@@ -21,7 +21,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var createSkeletonRows = function createSkeletonRows(headerRow) {
   return _toConsumableArray(Array(7)).map(function () {
     var row = {};
-    headerRow === null || headerRow === void 0 || headerRow.forEach(function (cell) {
+    headerRow === null || headerRow === void 0 ? void 0 : headerRow.forEach(function (cell) {
       row[cell.key] = ___EmotionJSX(Skeleton, {
         css: _ref,
         variant: "text"

package/dynamic-table/stories/tableRowsExpandable.d.ts

@@ -0,0 +1,3 @@
+import { Row } from '../DynamicTable.types';
+declare const tableRowsExpandable: Row[];
+export default tableRowsExpandable;