@spark-web/data-table 1.0.0-rc.19 → 1.0.0-rc.20

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @spark-web/data-table
 
+## 1.0.0-rc.20
+
+### Minor Changes
+
+- Support for component-level theming; button-level theming
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/checkbox@2.0.0-rc.20
+  - @spark-web/spinner@2.0.0-rc.20
+  - @spark-web/theme@4.0.0-rc.20
+  - @spark-web/utils@2.0.0-rc.20
+  - @spark-web/a11y@2.0.0-rc.20
+  - @spark-web/text@2.0.0-rc.20
+  - @spark-web/box@2.0.0-rc.20
+
 ## 1.0.0-rc.19
 
 ### Major Changes

package/dist/spark-web-data-table.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "./declarations/src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWRhdGEtdGFibGUuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
+export * from "../src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWRhdGEtdGFibGUuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

package/dist/spark-web-data-table.cjs.js

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./spark-web-data-table.cjs.prod.js");
-} else {
-  module.exports = require("./spark-web-data-table.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/data-table",
-  "version": "1.0.0-rc.19",
+  "version": "1.0.0-rc.20",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -18,13 +18,13 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^2.0.0-rc.19",
-    "@spark-web/box": "^2.0.0-rc.19",
-    "@spark-web/checkbox": "^2.0.0-rc.19",
-    "@spark-web/spinner": "^2.0.0-rc.19",
-    "@spark-web/text": "^2.0.0-rc.19",
-    "@spark-web/theme": "^4.0.0-rc.19",
-    "@spark-web/utils": "^2.0.0-rc.19",
+    "@spark-web/a11y": "^2.0.0-rc.20",
+    "@spark-web/box": "^2.0.0-rc.20",
+    "@spark-web/checkbox": "^2.0.0-rc.20",
+    "@spark-web/spinner": "^2.0.0-rc.20",
+    "@spark-web/text": "^2.0.0-rc.20",
+    "@spark-web/theme": "^4.0.0-rc.20",
+    "@spark-web/utils": "^2.0.0-rc.20",
     "@tanstack/react-table": "^8.14.0",
     "react-intersection-observer": "^9.8.2"
   },

package/dist/declarations/src/data-table.d.ts

@@ -1,29 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { type DataAttributeMap } from '@spark-web/utils/internal';
-import type { ColumnDef, ColumnHelper, ExpandedState, OnChangeFn, Row, Table, TableOptions } from '@tanstack/react-table';
-import { createColumnHelper, flexRender } from '@tanstack/react-table';
-import type { ReactElement } from 'react';
-/**
- * DataTable
- *
- * @see https://spark.brighte.com.au/package/data-table
- */
-declare function DataTable<T>({ data, items, className, columns, enableExpanding, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, rowClassName, expandedRowComponent, onBottomSpinnerShown, onRowClick, onRowSelectionChange, renderRow, ...tableOptions }: DataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId'>;
-declare type DataTableProps<T> = TableSubsetOptions<T> & {
-    className?: SerializedStyles;
-    headerClassName?: SerializedStyles;
-    footerClassName?: SerializedStyles;
-    rowClassName?: (row: Row<T>, index: number) => SerializedStyles;
-    /** Map of data attributes. */
-    data?: DataAttributeMap;
-    items: Array<T>;
-    enableClickableRow?: boolean;
-    showBottomSpinner?: boolean;
-    expandedRowComponent?: (row: Row<T>, table?: Table<T>) => ReactElement<T>;
-    onBottomSpinnerShown?: (isInView: boolean) => void;
-    onRowClick?: (row: Row<T>) => void;
-    renderRow?: (table: Table<T>) => ReactElement<T>;
-};
-export { createColumnHelper, DataTable, flexRender };
-export type { ColumnDef, ColumnHelper, DataTableProps, Row as DataTableRow, ExpandedState, OnChangeFn, };

package/dist/declarations/src/index.d.ts

@@ -1,2 +0,0 @@
-export { createColumnHelper, DataTable, flexRender } from "./data-table.js";
-export type { ColumnDef, ColumnHelper, DataTableProps, DataTableRow, ExpandedState, OnChangeFn, } from "./data-table.js";

package/dist/spark-web-data-table.cjs.dev.js

@@ -1,185 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('@emotion/react');
-var box = require('@spark-web/box');
-var spinner = require('@spark-web/spinner');
-var theme = require('@spark-web/theme');
-var internal = require('@spark-web/utils/internal');
-var reactTable = require('@tanstack/react-table');
-var React = require('react');
-var reactIntersectionObserver = require('react-intersection-observer');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
-function DataTable(_ref) {
-  var data = _ref.data,
-    items = _ref.items,
-    className = _ref.className,
-    columns = _ref.columns,
-    _ref$enableExpanding = _ref.enableExpanding,
-    enableExpanding = _ref$enableExpanding === void 0 ? false : _ref$enableExpanding,
-    _ref$enableHiding = _ref.enableHiding,
-    enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
-    _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
-    enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? false : _ref$enableMultiRowSe,
-    enableClickableRow = _ref.enableClickableRow,
-    headerClassName = _ref.headerClassName,
-    footerClassName = _ref.footerClassName,
-    showSpinner = _ref.showBottomSpinner,
-    rowClassName = _ref.rowClassName,
-    expandedRowComponent = _ref.expandedRowComponent,
-    onBottomSpinnerShown = _ref.onBottomSpinnerShown,
-    onRowClick = _ref.onRowClick,
-    onRowSelectionChange = _ref.onRowSelectionChange,
-    renderRow = _ref.renderRow,
-    tableOptions = _objectWithoutProperties(_ref, _excluded);
-  var theme$1 = theme.useTheme();
-  var enableRowSelection = !!onRowSelectionChange;
-  var table = reactTable.useReactTable(_objectSpread(_objectSpread({
-    data: items,
-    enableExpanding: enableExpanding,
-    enableMultiRowSelection: enableMultiRowSelection,
-    enableHiding: enableHiding,
-    enableRowSelection: enableRowSelection,
-    onRowSelectionChange: onRowSelectionChange,
-    columns: columns
-  }, tableOptions), {}, {
-    getCoreRowModel: reactTable.getCoreRowModel(),
-    getExpandedRowModel: enableExpanding ? reactTable.getCoreRowModel() : undefined
-  }));
-  var headerGroups = table.getHeaderGroups();
-  var footerGroups = table.getFooterGroups();
-  var defaultOnRowClick = function defaultOnRowClick(row) {
-    return row.toggleSelected();
-  };
-  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
-    as: "table"
-  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
-    css: className,
-    children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
-      as: "thead",
-      background: "neutral",
-      css: react.css({
-        // we use box shadow instead of bottom border
-        // to allow the border to stay in the header on scroll
-        // when the table is sticky
-        boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
-      }, headerClassName),
-      children: headerGroups.map(function (headerGroup) {
-        return jsxRuntime.jsx(box.Box, {
-          as: "tr",
-          children: headerGroup.headers.map(function (header) {
-            return jsxRuntime.jsx(box.Box, {
-              as: "th",
-              color: theme$1.color.foreground.muted,
-              padding: "medium",
-              css: react.css({
-                fontFamily: theme$1.typography.fontFamily.sans.name,
-                fontWeight: theme$1.typography.fontWeight.semibold,
-                textAlign: 'left',
-                textTransform: 'uppercase'
-              }),
-              children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
-            }, header.id);
-          })
-        }, headerGroup.id);
-      })
-    }) : null, jsxRuntime.jsxs(box.Box, {
-      as: "tbody",
-      children: [!renderRow ? table.getRowModel().rows.map(function (row) {
-        return jsxRuntime.jsxs(React__default["default"].Fragment, {
-          children: [jsxRuntime.jsx(box.Box, {
-            as: "tr",
-            css: react.css({
-              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
-                background: theme$1.color.background.primaryMuted
-              },
-              ':hover': {
-                background: theme$1.backgroundInteractions.neutralHover,
-                cursor: enableClickableRow ? 'pointer' : undefined
-              }
-            }, rowClassName ? rowClassName(row, row.index) : undefined),
-            onClick: function onClick() {
-              return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
-            },
-            "data-is-selected": row.getIsSelected(),
-            "data-is-expanded": row.getIsExpanded(),
-            children: row.getVisibleCells().map(function (cell) {
-              return jsxRuntime.jsx(box.Box, {
-                as: "td",
-                padding: "large",
-                css: react.css({
-                  borderBottom: '1px',
-                  borderBottomStyle: 'solid',
-                  borderColor: theme$1.border.color.standard,
-                  verticalAlign: 'middle',
-                  textAlign: 'left'
-                }),
-                children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-              }, cell.id);
-            })
-          }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
-        }, row.id);
-      }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
-        as: "tr"
-        // @ts-ignore
-        ,
-        css: react.css({
-          columnSpan: 'all'
-        }),
-        onChange: onBottomSpinnerShown,
-        children: jsxRuntime.jsx(box.Box, {
-          as: "td",
-          padding: "large",
-          colSpan: headerGroups.map(function (hg) {
-            return hg.headers.length;
-          }).reduce(function (sum, len) {
-            return len + 1;
-          }, 0),
-          css: react.css({
-            textAlign: 'center',
-            verticalAlign: 'middle'
-          }),
-          children: jsxRuntime.jsx(spinner.Spinner, {
-            data: {
-              testId: 'data-table-spinner'
-            },
-            size: "xsmall"
-          })
-        })
-      })]
-    }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
-      as: "tfoot",
-      css: react.css(footerClassName),
-      children: footerGroups.map(function (footerGroup) {
-        return jsxRuntime.jsx(box.Box, {
-          as: "tr",
-          children: footerGroup.headers.map(function (footer) {
-            return jsxRuntime.jsx(box.Box, {
-              as: "td",
-              children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
-            }, footer.id);
-          })
-        }, footerGroup.id);
-      })
-    }) : null]
-  }));
-}
-
-Object.defineProperty(exports, 'createColumnHelper', {
-  enumerable: true,
-  get: function () { return reactTable.createColumnHelper; }
-});
-Object.defineProperty(exports, 'flexRender', {
-  enumerable: true,
-  get: function () { return reactTable.flexRender; }
-});
-exports.DataTable = DataTable;

package/dist/spark-web-data-table.cjs.prod.js

@@ -1,185 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('@emotion/react');
-var box = require('@spark-web/box');
-var spinner = require('@spark-web/spinner');
-var theme = require('@spark-web/theme');
-var internal = require('@spark-web/utils/internal');
-var reactTable = require('@tanstack/react-table');
-var React = require('react');
-var reactIntersectionObserver = require('react-intersection-observer');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
-function DataTable(_ref) {
-  var data = _ref.data,
-    items = _ref.items,
-    className = _ref.className,
-    columns = _ref.columns,
-    _ref$enableExpanding = _ref.enableExpanding,
-    enableExpanding = _ref$enableExpanding === void 0 ? false : _ref$enableExpanding,
-    _ref$enableHiding = _ref.enableHiding,
-    enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
-    _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
-    enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? false : _ref$enableMultiRowSe,
-    enableClickableRow = _ref.enableClickableRow,
-    headerClassName = _ref.headerClassName,
-    footerClassName = _ref.footerClassName,
-    showSpinner = _ref.showBottomSpinner,
-    rowClassName = _ref.rowClassName,
-    expandedRowComponent = _ref.expandedRowComponent,
-    onBottomSpinnerShown = _ref.onBottomSpinnerShown,
-    onRowClick = _ref.onRowClick,
-    onRowSelectionChange = _ref.onRowSelectionChange,
-    renderRow = _ref.renderRow,
-    tableOptions = _objectWithoutProperties(_ref, _excluded);
-  var theme$1 = theme.useTheme();
-  var enableRowSelection = !!onRowSelectionChange;
-  var table = reactTable.useReactTable(_objectSpread(_objectSpread({
-    data: items,
-    enableExpanding: enableExpanding,
-    enableMultiRowSelection: enableMultiRowSelection,
-    enableHiding: enableHiding,
-    enableRowSelection: enableRowSelection,
-    onRowSelectionChange: onRowSelectionChange,
-    columns: columns
-  }, tableOptions), {}, {
-    getCoreRowModel: reactTable.getCoreRowModel(),
-    getExpandedRowModel: enableExpanding ? reactTable.getCoreRowModel() : undefined
-  }));
-  var headerGroups = table.getHeaderGroups();
-  var footerGroups = table.getFooterGroups();
-  var defaultOnRowClick = function defaultOnRowClick(row) {
-    return row.toggleSelected();
-  };
-  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({
-    as: "table"
-  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
-    css: className,
-    children: [headerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
-      as: "thead",
-      background: "neutral",
-      css: react.css({
-        // we use box shadow instead of bottom border
-        // to allow the border to stay in the header on scroll
-        // when the table is sticky
-        boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
-      }, headerClassName),
-      children: headerGroups.map(function (headerGroup) {
-        return jsxRuntime.jsx(box.Box, {
-          as: "tr",
-          children: headerGroup.headers.map(function (header) {
-            return jsxRuntime.jsx(box.Box, {
-              as: "th",
-              color: theme$1.color.foreground.muted,
-              padding: "medium",
-              css: react.css({
-                fontFamily: theme$1.typography.fontFamily.sans.name,
-                fontWeight: theme$1.typography.fontWeight.semibold,
-                textAlign: 'left',
-                textTransform: 'uppercase'
-              }),
-              children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
-            }, header.id);
-          })
-        }, headerGroup.id);
-      })
-    }) : null, jsxRuntime.jsxs(box.Box, {
-      as: "tbody",
-      children: [!renderRow ? table.getRowModel().rows.map(function (row) {
-        return jsxRuntime.jsxs(React__default["default"].Fragment, {
-          children: [jsxRuntime.jsx(box.Box, {
-            as: "tr",
-            css: react.css({
-              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
-                background: theme$1.color.background.primaryMuted
-              },
-              ':hover': {
-                background: theme$1.backgroundInteractions.neutralHover,
-                cursor: enableClickableRow ? 'pointer' : undefined
-              }
-            }, rowClassName ? rowClassName(row, row.index) : undefined),
-            onClick: function onClick() {
-              return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
-            },
-            "data-is-selected": row.getIsSelected(),
-            "data-is-expanded": row.getIsExpanded(),
-            children: row.getVisibleCells().map(function (cell) {
-              return jsxRuntime.jsx(box.Box, {
-                as: "td",
-                padding: "large",
-                css: react.css({
-                  borderBottom: '1px',
-                  borderBottomStyle: 'solid',
-                  borderColor: theme$1.border.color.standard,
-                  verticalAlign: 'middle',
-                  textAlign: 'left'
-                }),
-                children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-              }, cell.id);
-            })
-          }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
-        }, row.id);
-      }) : renderRow(table), showSpinner && jsxRuntime.jsx(reactIntersectionObserver.InView, {
-        as: "tr"
-        // @ts-ignore
-        ,
-        css: react.css({
-          columnSpan: 'all'
-        }),
-        onChange: onBottomSpinnerShown,
-        children: jsxRuntime.jsx(box.Box, {
-          as: "td",
-          padding: "large",
-          colSpan: headerGroups.map(function (hg) {
-            return hg.headers.length;
-          }).reduce(function (sum, len) {
-            return len + 1;
-          }, 0),
-          css: react.css({
-            textAlign: 'center',
-            verticalAlign: 'middle'
-          }),
-          children: jsxRuntime.jsx(spinner.Spinner, {
-            data: {
-              testId: 'data-table-spinner'
-            },
-            size: "xsmall"
-          })
-        })
-      })]
-    }), footerGroups.length > 0 ? jsxRuntime.jsx(box.Box, {
-      as: "tfoot",
-      css: react.css(footerClassName),
-      children: footerGroups.map(function (footerGroup) {
-        return jsxRuntime.jsx(box.Box, {
-          as: "tr",
-          children: footerGroup.headers.map(function (footer) {
-            return jsxRuntime.jsx(box.Box, {
-              as: "td",
-              children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
-            }, footer.id);
-          })
-        }, footerGroup.id);
-      })
-    }) : null]
-  }));
-}
-
-Object.defineProperty(exports, 'createColumnHelper', {
-  enumerable: true,
-  get: function () { return reactTable.createColumnHelper; }
-});
-Object.defineProperty(exports, 'flexRender', {
-  enumerable: true,
-  get: function () { return reactTable.flexRender; }
-});
-exports.DataTable = DataTable;

package/dist/spark-web-data-table.esm.js

@@ -1,170 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { css } from '@emotion/react';
-import { Box } from '@spark-web/box';
-import { Spinner } from '@spark-web/spinner';
-import { useTheme } from '@spark-web/theme';
-import { buildDataAttributes } from '@spark-web/utils/internal';
-import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
-export { createColumnHelper, flexRender } from '@tanstack/react-table';
-import React from 'react';
-import { InView } from 'react-intersection-observer';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-var _excluded = ["data", "items", "className", "columns", "enableExpanding", "enableHiding", "enableMultiRowSelection", "enableClickableRow", "headerClassName", "footerClassName", "showBottomSpinner", "rowClassName", "expandedRowComponent", "onBottomSpinnerShown", "onRowClick", "onRowSelectionChange", "renderRow"];
-function DataTable(_ref) {
-  var data = _ref.data,
-    items = _ref.items,
-    className = _ref.className,
-    columns = _ref.columns,
-    _ref$enableExpanding = _ref.enableExpanding,
-    enableExpanding = _ref$enableExpanding === void 0 ? false : _ref$enableExpanding,
-    _ref$enableHiding = _ref.enableHiding,
-    enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
-    _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
-    enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? false : _ref$enableMultiRowSe,
-    enableClickableRow = _ref.enableClickableRow,
-    headerClassName = _ref.headerClassName,
-    footerClassName = _ref.footerClassName,
-    showSpinner = _ref.showBottomSpinner,
-    rowClassName = _ref.rowClassName,
-    expandedRowComponent = _ref.expandedRowComponent,
-    onBottomSpinnerShown = _ref.onBottomSpinnerShown,
-    onRowClick = _ref.onRowClick,
-    onRowSelectionChange = _ref.onRowSelectionChange,
-    renderRow = _ref.renderRow,
-    tableOptions = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var enableRowSelection = !!onRowSelectionChange;
-  var table = useReactTable(_objectSpread(_objectSpread({
-    data: items,
-    enableExpanding: enableExpanding,
-    enableMultiRowSelection: enableMultiRowSelection,
-    enableHiding: enableHiding,
-    enableRowSelection: enableRowSelection,
-    onRowSelectionChange: onRowSelectionChange,
-    columns: columns
-  }, tableOptions), {}, {
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: enableExpanding ? getCoreRowModel() : undefined
-  }));
-  var headerGroups = table.getHeaderGroups();
-  var footerGroups = table.getFooterGroups();
-  var defaultOnRowClick = function defaultOnRowClick(row) {
-    return row.toggleSelected();
-  };
-  return jsxs(Box, _objectSpread(_objectSpread({
-    as: "table"
-  }, data ? buildDataAttributes(data) : undefined), {}, {
-    css: className,
-    children: [headerGroups.length > 0 ? jsx(Box, {
-      as: "thead",
-      background: "neutral",
-      css: css({
-        // we use box shadow instead of bottom border
-        // to allow the border to stay in the header on scroll
-        // when the table is sticky
-        boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
-      }, headerClassName),
-      children: headerGroups.map(function (headerGroup) {
-        return jsx(Box, {
-          as: "tr",
-          children: headerGroup.headers.map(function (header) {
-            return jsx(Box, {
-              as: "th",
-              color: theme.color.foreground.muted,
-              padding: "medium",
-              css: css({
-                fontFamily: theme.typography.fontFamily.sans.name,
-                fontWeight: theme.typography.fontWeight.semibold,
-                textAlign: 'left',
-                textTransform: 'uppercase'
-              }),
-              children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
-            }, header.id);
-          })
-        }, headerGroup.id);
-      })
-    }) : null, jsxs(Box, {
-      as: "tbody",
-      children: [!renderRow ? table.getRowModel().rows.map(function (row) {
-        return jsxs(React.Fragment, {
-          children: [jsx(Box, {
-            as: "tr",
-            css: css({
-              '&[data-is-selected="true"],&[data-is-expanded="true"]': {
-                background: theme.color.background.primaryMuted
-              },
-              ':hover': {
-                background: theme.backgroundInteractions.neutralHover,
-                cursor: enableClickableRow ? 'pointer' : undefined
-              }
-            }, rowClassName ? rowClassName(row, row.index) : undefined),
-            onClick: function onClick() {
-              return enableClickableRow && (onRowClick ? onRowClick(row) : defaultOnRowClick(row));
-            },
-            "data-is-selected": row.getIsSelected(),
-            "data-is-expanded": row.getIsExpanded(),
-            children: row.getVisibleCells().map(function (cell) {
-              return jsx(Box, {
-                as: "td",
-                padding: "large",
-                css: css({
-                  borderBottom: '1px',
-                  borderBottomStyle: 'solid',
-                  borderColor: theme.border.color.standard,
-                  verticalAlign: 'middle',
-                  textAlign: 'left'
-                }),
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
-              }, cell.id);
-            })
-          }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
-        }, row.id);
-      }) : renderRow(table), showSpinner && jsx(InView, {
-        as: "tr"
-        // @ts-ignore
-        ,
-        css: css({
-          columnSpan: 'all'
-        }),
-        onChange: onBottomSpinnerShown,
-        children: jsx(Box, {
-          as: "td",
-          padding: "large",
-          colSpan: headerGroups.map(function (hg) {
-            return hg.headers.length;
-          }).reduce(function (sum, len) {
-            return len + 1;
-          }, 0),
-          css: css({
-            textAlign: 'center',
-            verticalAlign: 'middle'
-          }),
-          children: jsx(Spinner, {
-            data: {
-              testId: 'data-table-spinner'
-            },
-            size: "xsmall"
-          })
-        })
-      })]
-    }), footerGroups.length > 0 ? jsx(Box, {
-      as: "tfoot",
-      css: css(footerClassName),
-      children: footerGroups.map(function (footerGroup) {
-        return jsx(Box, {
-          as: "tr",
-          children: footerGroup.headers.map(function (footer) {
-            return jsx(Box, {
-              as: "td",
-              children: flexRender(footer.column.columnDef.footer, footer.getContext())
-            }, footer.id);
-          })
-        }, footerGroup.id);
-      })
-    }) : null]
-  }));
-}
-
-export { DataTable };