@pingux/astro 2.129.0-alpha.2 → 2.129.0-alpha.3

package/lib/cjs/components/TableBase/TableBase.test.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _index = require("../../index");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _TableBase = _interopRequireDefault(require("./TableBase"));
+var _react3 = require("@emotion/react");
+var testId = 'test-table';
+var defaultProps = {
+  'aria-label': 'table',
+  'data-testid': testId,
+  caption: 'Populations of Countries'
+};
+var headers = [{
+  key: 'country',
+  name: 'Country'
+}, {
+  key: 'population',
+  name: 'Population'
+}, {
+  key: 'continent',
+  name: 'Continent'
+}];
+var objects = [{
+  key: '1',
+  country: 'USA',
+  population: '320,000,000',
+  continent: 'South America',
+  cellProps: {
+    noWrap: true
+  }
+}, {
+  key: '2',
+  country: 'Canada',
+  population: '37,000,000',
+  continent: 'North America'
+}, {
+  key: '3',
+  country: 'China',
+  population: '1,398,000,000',
+  continent: 'Asia'
+}, {
+  key: '4',
+  country: 'France',
+  population: '67,000,000',
+  continent: 'Europe'
+}];
+var getComponent = function getComponent() {
+  return (0, _react2.render)((0, _react3.jsx)(_TableBase["default"], defaultProps, (0, _react3.jsx)(_index.THead, {
+    columns: headers
+  }, function (head) {
+    return (0, _react3.jsx)(_index.Column, {
+      key: head.key
+    }, head.name);
+  }), (0, _react3.jsx)(_index.TBody, {
+    items: objects
+  }, function (row) {
+    return (0, _react3.jsx)(_index.Row, {
+      key: row.key
+    }, function (columnKey) {
+      return (0, _react3.jsx)(_index.Cell, row.cellProps || {}, row[columnKey]);
+    });
+  })));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_TableBase["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react3.jsx)(_index.THead, {
+      columns: headers
+    }, function (head) {
+      return (0, _react3.jsx)(_index.Column, {
+        key: head.key
+      }, head.name);
+    }), (0, _react3.jsx)(_index.TBody, {
+      items: objects
+    }, function (row) {
+      return (0, _react3.jsx)(_index.Row, {
+        key: row.key
+      }, function (columnKey) {
+        return (0, _react3.jsx)(_index.Cell, null, row[columnKey]);
+      });
+    }));
+  }
+});
+test('default table', function () {
+  getComponent();
+  var table = _react2.screen.getByTestId(testId);
+  expect(table).toBeInTheDocument();
+});
+test('renders caption', function () {
+  getComponent();
+  var caption = _react2.screen.getByText(defaultProps.caption);
+  expect(caption).toBeInTheDocument();
+});
+test('renders table headers', function () {
+  getComponent();
+  var headerCells = _react2.screen.getAllByRole('columnheader');
+  expect(headerCells).toHaveLength(headers.length);
+  (0, _forEach["default"])(headers).call(headers, function (header) {
+    expect(_react2.screen.getByText(header.name)).toBeInTheDocument();
+  });
+});
+test('renders table rows', function () {
+  getComponent();
+  var rows = _react2.screen.getAllByRole('row');
+  expect(rows).toHaveLength(objects.length + 1);
+  (0, _forEach["default"])(objects).call(objects, function (object) {
+    expect(_react2.screen.getByText(object.country)).toBeInTheDocument();
+    expect(_react2.screen.getByText(object.population)).toBeInTheDocument();
+    expect(_react2.screen.getByText(object.continent)).toBeInTheDocument();
+  });
+});
+test('renders cell with noWrap prop', function () {
+  getComponent();
+  var cell = _react2.screen.getByText('South America');
+  expect(cell).toHaveClass('no-wrap');
+});

package/lib/cjs/components/TableBase/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TableBase';

package/lib/cjs/components/TableBase/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TableBase["default"];
+  }
+});
+var _TableBase = _interopRequireDefault(require("./TableBase"));

package/lib/cjs/components/TableBase/stories/NextGenDarkTableBase.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/TableBase/stories/NextGenDarkTableBase.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _NextGenTableBase = _interopRequireDefault(require("./NextGenTableBase"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx Dark TableBase'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenDarkTheme]
+  }, (0, _react2.jsx)(_NextGenTableBase["default"], null));
+};
+exports.Default = Default;

package/lib/cjs/components/TableBase/stories/NextGenTableBase.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/TableBase/stories/NextGenTableBase.chromatic.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _NextGenTableBase = _interopRequireDefault(require("./NextGenTableBase"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only Onyx TableBase'
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_.AstroProvider, {
+    themeOverrides: [_.NextGenTheme]
+  }, (0, _react2.jsx)(_NextGenTableBase["default"], null));
+};
+exports.Default = Default;

package/lib/cjs/components/TableBase/stories/NextGenTableBase.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NextGenTableBase: () => React.JSX.Element;
+export default NextGenTableBase;

package/lib/cjs/components/TableBase/stories/NextGenTableBase.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _react2 = require("@emotion/react");
+var NextGenTableBase = function NextGenTableBase() {
+  var headers = [{
+    key: 'type',
+    name: 'Type'
+  }, {
+    key: 'date',
+    name: 'Date'
+  }, {
+    key: 'additional_grant',
+    name: 'Additional Grant'
+  }, {
+    key: 'total_grant',
+    name: 'Total Grant'
+  }];
+  var objects = [{
+    id: 1,
+    type: 'Lorem ipsum',
+    date: '2020-06-12',
+    additional_grant: '+25,000',
+    total_grant: '25,000'
+  }, {
+    id: 2,
+    type: 'Lorem ipsum',
+    date: '2020-10-01',
+    additional_grant: '+25,000',
+    total_grant: '50,000'
+  }, {
+    id: 3,
+    type: 'Lorem ipsum',
+    date: '2021-01-01',
+    additional_grant: '+25,000',
+    total_grant: '75,000'
+  }];
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table"
+  }, (0, _react2.jsx)(_.THead, {
+    columns: headers
+  }, function (column) {
+    return (0, _react2.jsx)(_.Column, {
+      key: column.key
+    }, column.name);
+  }), (0, _react2.jsx)(_.TBody, {
+    items: objects
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.id
+    }, function (columnKey) {
+      return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
+    });
+  })));
+};
+var _default = NextGenTableBase;
+exports["default"] = _default;

package/lib/cjs/index.d.ts

@@ -184,6 +184,8 @@ export { default as Tab } from './components/Tab';
 export * from './components/Tab';
 export { default as Table } from './components/Table';
 export * from './components/Table';
+export * from './components/TableBase';
+export { default as TableBase } from './components/TableBase';
 export { default as TableBody } from './components/TableBody';
 export * from './components/TableBody';
 export { default as TableCaption } from './components/TableCaption';
@@ -218,5 +220,4 @@ export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
-export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';
-export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, } from 'react-stately';
+export { Cell, Column, TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, Item, Row, Section, TableBody as TBody, TableHeader as THead, useOverlayTriggerState, useTreeData, } from 'react-stately';

package/lib/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74, _context75, _context76, _context77, _context78, _context79, _context80, _context81;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74, _context75, _context76, _context77, _context78, _context79, _context80, _context81, _context82;
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
@@ -132,6 +132,7 @@ var _exportNames = {
   SwitchField: true,
   Tab: true,
   Table: true,
+  TableBase: true,
   TableBody: true,
   TableCaption: true,
   TableCell: true,
@@ -154,15 +155,20 @@ var _exportNames = {
   OverlayProvider: true,
   useOverlayPosition: true,
   useOverlayTrigger: true,
-  Item: true,
-  Section: true,
-  useOverlayTriggerState: true,
-  useTreeData: true,
+  Cell: true,
+  Column: true,
   DataTableBody: true,
   DataTableCell: true,
   DataTableColumn: true,
   DataTableHeader: true,
-  DataTableRow: true
+  DataTableRow: true,
+  Item: true,
+  Row: true,
+  Section: true,
+  TBody: true,
+  THead: true,
+  useOverlayTriggerState: true,
+  useTreeData: true
 };
 _Object$defineProperty(exports, "AIPanel", {
   enumerable: true,
@@ -302,6 +308,12 @@ _Object$defineProperty(exports, "Card", {
     return _Card["default"];
   }
 });
+_Object$defineProperty(exports, "Cell", {
+  enumerable: true,
+  get: function get() {
+    return _reactStately.Cell;
+  }
+});
 _Object$defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function get() {
@@ -350,6 +362,12 @@ _Object$defineProperty(exports, "ColorField", {
     return _ColorField["default"];
   }
 });
+_Object$defineProperty(exports, "Column", {
+  enumerable: true,
+  get: function get() {
+    return _reactStately.Column;
+  }
+});
 _Object$defineProperty(exports, "ComboBoxField", {
   enumerable: true,
   get: function get() {
@@ -860,6 +878,12 @@ _Object$defineProperty(exports, "RockerButtonGroup", {
     return _RockerButtonGroup["default"];
   }
 });
+_Object$defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function get() {
+    return _reactStately.Row;
+  }
+});
 _Object$defineProperty(exports, "ScrollBox", {
   enumerable: true,
   get: function get() {
@@ -944,6 +968,18 @@ _Object$defineProperty(exports, "SwitchField", {
     return _SwitchField["default"];
   }
 });
+_Object$defineProperty(exports, "TBody", {
+  enumerable: true,
+  get: function get() {
+    return _reactStately.TableBody;
+  }
+});
+_Object$defineProperty(exports, "THead", {
+  enumerable: true,
+  get: function get() {
+    return _reactStately.TableHeader;
+  }
+});
 _Object$defineProperty(exports, "Tab", {
   enumerable: true,
   get: function get() {
@@ -956,6 +992,12 @@ _Object$defineProperty(exports, "Table", {
     return _Table["default"];
   }
 });
+_Object$defineProperty(exports, "TableBase", {
+  enumerable: true,
+  get: function get() {
+    return _TableBase["default"];
+  }
+});
 _Object$defineProperty(exports, "TableBody", {
   enumerable: true,
   get: function get() {
@@ -1924,8 +1966,20 @@ _forEachInstanceProperty(_context67 = _Object$keys(_Table)).call(_context67, fun
     }
   });
 });
+var _TableBase = _interopRequireWildcard(require("./components/TableBase"));
+_forEachInstanceProperty(_context68 = _Object$keys(_TableBase)).call(_context68, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TableBase[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TableBase[key];
+    }
+  });
+});
 var _TableBody = _interopRequireWildcard(require("./components/TableBody"));
-_forEachInstanceProperty(_context68 = _Object$keys(_TableBody)).call(_context68, function (key) {
+_forEachInstanceProperty(_context69 = _Object$keys(_TableBody)).call(_context69, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableBody[key]) return;
@@ -1937,7 +1991,7 @@ _forEachInstanceProperty(_context68 = _Object$keys(_TableBody)).call(_context68,
   });
 });
 var _TableCaption = _interopRequireWildcard(require("./components/TableCaption"));
-_forEachInstanceProperty(_context69 = _Object$keys(_TableCaption)).call(_context69, function (key) {
+_forEachInstanceProperty(_context70 = _Object$keys(_TableCaption)).call(_context70, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableCaption[key]) return;
@@ -1949,7 +2003,7 @@ _forEachInstanceProperty(_context69 = _Object$keys(_TableCaption)).call(_context
   });
 });
 var _TableCell = _interopRequireWildcard(require("./components/TableCell"));
-_forEachInstanceProperty(_context70 = _Object$keys(_TableCell)).call(_context70, function (key) {
+_forEachInstanceProperty(_context71 = _Object$keys(_TableCell)).call(_context71, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableCell[key]) return;
@@ -1961,7 +2015,7 @@ _forEachInstanceProperty(_context70 = _Object$keys(_TableCell)).call(_context70,
   });
 });
 var _TableHead = _interopRequireWildcard(require("./components/TableHead"));
-_forEachInstanceProperty(_context71 = _Object$keys(_TableHead)).call(_context71, function (key) {
+_forEachInstanceProperty(_context72 = _Object$keys(_TableHead)).call(_context72, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableHead[key]) return;
@@ -1973,7 +2027,7 @@ _forEachInstanceProperty(_context71 = _Object$keys(_TableHead)).call(_context71,
   });
 });
 var _TableRow = _interopRequireWildcard(require("./components/TableRow"));
-_forEachInstanceProperty(_context72 = _Object$keys(_TableRow)).call(_context72, function (key) {
+_forEachInstanceProperty(_context73 = _Object$keys(_TableRow)).call(_context73, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TableRow[key]) return;
@@ -1985,7 +2039,7 @@ _forEachInstanceProperty(_context72 = _Object$keys(_TableRow)).call(_context72,
   });
 });
 var _Tabs = _interopRequireWildcard(require("./components/Tabs"));
-_forEachInstanceProperty(_context73 = _Object$keys(_Tabs)).call(_context73, function (key) {
+_forEachInstanceProperty(_context74 = _Object$keys(_Tabs)).call(_context74, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Tabs[key]) return;
@@ -1997,7 +2051,7 @@ _forEachInstanceProperty(_context73 = _Object$keys(_Tabs)).call(_context73, func
   });
 });
 var _Text = _interopRequireWildcard(require("./components/Text"));
-_forEachInstanceProperty(_context74 = _Object$keys(_Text)).call(_context74, function (key) {
+_forEachInstanceProperty(_context75 = _Object$keys(_Text)).call(_context75, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Text[key]) return;
@@ -2009,7 +2063,7 @@ _forEachInstanceProperty(_context74 = _Object$keys(_Text)).call(_context74, func
   });
 });
 var _TextArea = _interopRequireWildcard(require("./components/TextArea"));
-_forEachInstanceProperty(_context75 = _Object$keys(_TextArea)).call(_context75, function (key) {
+_forEachInstanceProperty(_context76 = _Object$keys(_TextArea)).call(_context76, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextArea[key]) return;
@@ -2021,7 +2075,7 @@ _forEachInstanceProperty(_context75 = _Object$keys(_TextArea)).call(_context75,
   });
 });
 var _TextAreaField = _interopRequireWildcard(require("./components/TextAreaField"));
-_forEachInstanceProperty(_context76 = _Object$keys(_TextAreaField)).call(_context76, function (key) {
+_forEachInstanceProperty(_context77 = _Object$keys(_TextAreaField)).call(_context77, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextAreaField[key]) return;
@@ -2033,7 +2087,7 @@ _forEachInstanceProperty(_context76 = _Object$keys(_TextAreaField)).call(_contex
   });
 });
 var _TextField = _interopRequireWildcard(require("./components/TextField"));
-_forEachInstanceProperty(_context77 = _Object$keys(_TextField)).call(_context77, function (key) {
+_forEachInstanceProperty(_context78 = _Object$keys(_TextField)).call(_context78, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TextField[key]) return;
@@ -2045,7 +2099,7 @@ _forEachInstanceProperty(_context77 = _Object$keys(_TextField)).call(_context77,
   });
 });
 var _TimeField = _interopRequireWildcard(require("./components/TimeField"));
-_forEachInstanceProperty(_context78 = _Object$keys(_TimeField)).call(_context78, function (key) {
+_forEachInstanceProperty(_context79 = _Object$keys(_TimeField)).call(_context79, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TimeField[key]) return;
@@ -2058,7 +2112,7 @@ _forEachInstanceProperty(_context78 = _Object$keys(_TimeField)).call(_context78,
 });
 var _TimeZonePicker = _interopRequireDefault(require("./components/TimeZonePicker"));
 var _TooltipTrigger = _interopRequireWildcard(require("./components/TooltipTrigger"));
-_forEachInstanceProperty(_context79 = _Object$keys(_TooltipTrigger)).call(_context79, function (key) {
+_forEachInstanceProperty(_context80 = _Object$keys(_TooltipTrigger)).call(_context80, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TooltipTrigger[key]) return;
@@ -2070,7 +2124,7 @@ _forEachInstanceProperty(_context79 = _Object$keys(_TooltipTrigger)).call(_conte
   });
 });
 var _TreeView = _interopRequireWildcard(require("./components/TreeView"));
-_forEachInstanceProperty(_context80 = _Object$keys(_TreeView)).call(_context80, function (key) {
+_forEachInstanceProperty(_context81 = _Object$keys(_TreeView)).call(_context81, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeView[key]) return;
@@ -2085,7 +2139,7 @@ var _PaginationContext = require("./context/PaginationContext");
 var _nextGenDarkMode = _interopRequireDefault(require("./styles/themeOverrides/nextGenDarkMode"));
 var _nextGen = _interopRequireDefault(require("./styles/themes/next-gen"));
 var _types = require("./types");
-_forEachInstanceProperty(_context81 = _Object$keys(_types)).call(_context81, function (key) {
+_forEachInstanceProperty(_context82 = _Object$keys(_types)).call(_context82, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -474,5 +474,27 @@ declare const _default: {
             };
         };
     };
+    table: {
+        caption: {
+            color: string;
+        };
+        head: {
+            color: string;
+        };
+        data: {
+            color: string;
+        };
+    };
+    tableBase: {
+        caption: {
+            color: string;
+        };
+        head: {
+            color: string;
+        };
+        data: {
+            color: string;
+        };
+    };
 };
 export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -124,6 +124,28 @@ var _default = {
         boxShadow: '0 0 0 3px inset #1a73e8'
       }
     }
+  },
+  table: {
+    caption: {
+      color: 'text.secondary'
+    },
+    head: {
+      color: 'text.secondary'
+    },
+    data: {
+      color: 'text.secondary'
+    }
+  },
+  tableBase: {
+    caption: {
+      color: 'text.secondary'
+    },
+    head: {
+      color: 'text.secondary'
+    },
+    data: {
+      color: 'text.secondary'
+    }
   }
 };
 exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/colors/colors.d.ts

@@ -55,6 +55,7 @@ declare const colors: {
         secondary: string;
         card: string;
         suggestion: string;
+        hover: string;
     };
     iconWrapper: {
         wrapper: {

package/lib/cjs/styles/themes/next-gen/colors/colors.js

@@ -109,7 +109,8 @@ var background = {
   base: 'white',
   secondary: _colorTokens.nextGenColors['gray-100'],
   card: _colorTokens.nextGenColors['blue-100'],
-  suggestion: '#ecf0f5'
+  suggestion: '#ecf0f5',
+  hover: _colorTokens.nextGenColors['gray-100']
 };
 var card = {
   blue: _colorTokens.nextGenColors['blue-100'],

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenOnlyComponents = exports["default"] = exports.componentSpecificNextGenBlacklist = exports.astroBlacklistStory = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'Table', 'TableBase'];
 var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],