@veritone-ce/design-system 1.12.46 → 1.12.48

package/dist/esm/components/Table/AutoTable/controlled.js

@@ -0,0 +1,115 @@
+'use client';
+
+var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "sx", "className"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { flexRender } from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableZeroState } from '../index.js';
+import React from 'react';
+import { Box, CircularProgress } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+import { useAutoTable } from './common.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ControlledAutoTable(_ref) {
+  var _options$manualRowCou;
+  var stickyHeader = _ref.stickyHeader,
+    loading = _ref.loading,
+    zeroStateMessage = _ref.zeroStateMessage,
+    sx = _ref.sx,
+    className = _ref.className,
+    options = _objectWithoutProperties(_ref, _excluded);
+  var table = useAutoTable(options);
+  var manualRowCount = (_options$manualRowCou = options.manualRowCount) !== null && _options$manualRowCou !== void 0 ? _options$manualRowCou : options.data.length;
+  return /*#__PURE__*/_jsx(Box, {
+    sx: sx,
+    className: className,
+    children: /*#__PURE__*/_jsxs(Table, {
+      sx: _objectSpread({
+        borderCollapse: 'separate'
+      }, stickyHeader ? {
+        '& th': {
+          position: 'sticky',
+          top: _typeof(stickyHeader) === 'object' ? stickyHeader.offset : 0,
+          zIndex: 2,
+          backgroundColor: function backgroundColor(theme) {
+            return theme.palette.background["default"];
+          }
+        }
+      } : {}),
+      children: [/*#__PURE__*/_jsx(TableHead, {
+        children: table.getHeaderGroups().map(function (headerGroup) {
+          return /*#__PURE__*/_jsx(TableRow, {
+            children: headerGroup.headers.map(function (header) {
+              var isSorted = header.column.getIsSorted();
+              return /*#__PURE__*/_jsx(TableCell, {
+                variant: "header",
+                children: header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/_jsxs(TableSortLabel, {
+                  active: isSorted !== false,
+                  direction: isSorted !== false ? isSorted : 'asc',
+                  onClick: header.column.getToggleSortingHandler(),
+                  children: [flexRender(header.column.columnDef.header, header.getContext()), isSorted !== false ? /*#__PURE__*/_jsx(Box, {
+                    component: "span",
+                    sx: visuallyHidden,
+                    children: isSorted === 'desc' ? 'sorted descending' : 'sorted ascending'
+                  }) : null]
+                }) : flexRender(header.column.columnDef.header, header.getContext())
+              }, header.id);
+            })
+          }, headerGroup.id);
+        })
+      }), loading ? /*#__PURE__*/_jsx(TableBody, {
+        children: /*#__PURE__*/_jsx(TableRow, {
+          children: /*#__PURE__*/_jsx(TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/_jsx(CircularProgress, {})
+          })
+        })
+      }) : options.data.length === 0 ? /*#__PURE__*/_jsx(TableBody, {
+        children: /*#__PURE__*/_jsx(TableRow, {
+          children: /*#__PURE__*/_jsx(TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/_jsx(TableZeroState, {
+              children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
+            })
+          })
+        })
+      }) : /*#__PURE__*/_jsx(TableBody, {
+        children: table.getRowModel().rows.map(function (row) {
+          return /*#__PURE__*/_jsx(TableRow, {
+            children: row.getAllCells().map(function (cell) {
+              return /*#__PURE__*/_jsx(React.Fragment, {
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              }, cell.id);
+            })
+          }, row.id);
+        })
+      }), options.enablePagination && (options.manualPagination ? manualRowCount : options.data.length) > table.initialState.pagination.pageSize && /*#__PURE__*/_jsx(TableFooter, {
+        children: /*#__PURE__*/_jsx(TableRow, {
+          children: /*#__PURE__*/_jsx(TablePagination, {
+            colSpan: table.getAllFlatColumns().length,
+            count: options.manualPagination ? manualRowCount : table.getFilteredRowModel().rows.length,
+            rowsPerPage: table.getState().pagination.pageSize,
+            page: table.getState().pagination.pageIndex,
+            onPageChange: function onPageChange(_, newPage) {
+              table.setPageIndex(newPage);
+              options.onPageChange(newPage);
+            },
+            rowsPerPageOptions: [10, 25, 50, 100],
+            onRowsPerPageChange: function onRowsPerPageChange(e) {
+              var size = e.target.value ? Number(e.target.value) : 10;
+              table.setPageSize(size);
+              options.onRowsPerPageChange(size);
+            }
+          })
+        })
+      })]
+    })
+  });
+}

package/dist/esm/components/Table/AutoTable/index.js

@@ -0,0 +1,107 @@
+'use client';
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React from 'react';
+import VirtualControlledAutoTable from './virtual.js';
+import ControlledAutoTable from './controlled.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+export { createColumnHelper } from './common.js';
+function AutoTable(props) {
+  var _props$enableSorting, _props$defaultSorting, _props$enableRowSelec, _props$enablePaginati;
+  // manage sorting
+  var enableSorting = (_props$enableSorting = props.enableSorting) !== null && _props$enableSorting !== void 0 ? _props$enableSorting : true;
+  var _useManagedStateSwitc = useManagedStateSwitch(props.sorting, props.onSortingChange, (_props$defaultSorting = props.defaultSorting) !== null && _props$defaultSorting !== void 0 ? _props$defaultSorting : []),
+    _useManagedStateSwitc2 = _slicedToArray(_useManagedStateSwitc, 2),
+    managedSorting = _useManagedStateSwitc2[0],
+    setManagedSorting = _useManagedStateSwitc2[1];
+
+  // manage selection
+  var enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : props.rowSelection !== undefined;
+  var _useManagedStateSwitc3 = useManagedStateSwitch(props.rowSelection, props.onRowSelectionChange, {}),
+    _useManagedStateSwitc4 = _slicedToArray(_useManagedStateSwitc3, 2),
+    managedRowSelection = _useManagedStateSwitc4[0],
+    setManagedRowSelection = _useManagedStateSwitc4[1];
+
+  // manage pagination
+  var enablePagination = (_props$enablePaginati = props.enablePagination) !== null && _props$enablePaginati !== void 0 ? _props$enablePaginati : true;
+  var _useManagedStateSwitc5 = useManagedStateSwitch(props.page, props.onPageChange, 0),
+    _useManagedStateSwitc6 = _slicedToArray(_useManagedStateSwitc5, 2),
+    managedPage = _useManagedStateSwitc6[0],
+    setManagedPage = _useManagedStateSwitc6[1];
+  var _useManagedStateSwitc7 = useManagedStateSwitch(props.rowsPerPage, props.onRowsPerPageChange, 10),
+    _useManagedStateSwitc8 = _slicedToArray(_useManagedStateSwitc7, 2),
+    managedRowsPerPage = _useManagedStateSwitc8[0],
+    setManagedRowsPerPage = _useManagedStateSwitc8[1];
+  var options = {
+    data: props.data,
+    columns: props.columns,
+    meta: props.meta,
+    getRowId: props.getRowId,
+    // sorting
+    sorting: managedSorting,
+    enableSorting: enableSorting,
+    onSortingChange: setManagedSorting,
+    manualSorting: props.manualSorting,
+    // selection
+    rowSelection: managedRowSelection,
+    enableRowSelection: enableRowSelection,
+    onRowSelectionChange: setManagedRowSelection,
+    // pagination
+    pagination: {
+      pageIndex: managedPage,
+      pageSize: enablePagination ? managedRowsPerPage : props.data.length
+    },
+    enablePagination: enablePagination,
+    onPageChange: setManagedPage,
+    onRowsPerPageChange: setManagedRowsPerPage,
+    manualPagination: props.manualRowCount !== undefined,
+    manualRowCount: props.manualRowCount
+  };
+  if (props.virtualizer) {
+    return /*#__PURE__*/_jsx(VirtualControlledAutoTable, _objectSpread(_objectSpread(_objectSpread({}, options), props.virtualizer), {}, {
+      stickyHeader: props.stickyHeader,
+      loading: props.loading,
+      zeroStateMessage: props.zeroStateMessage,
+      sx: props.sx,
+      className: props.className
+    }));
+  }
+  return /*#__PURE__*/_jsx(ControlledAutoTable, _objectSpread(_objectSpread({}, options), {}, {
+    stickyHeader: props.stickyHeader,
+    loading: props.loading,
+    zeroStateMessage: props.zeroStateMessage,
+    sx: props.sx,
+    className: props.className
+  }));
+}
+export default AutoTable;
+
+// switch between controlled (passed in) and uncontrolled (automatic) state
+function useManagedStateSwitch(controlled, setControlled, uncontrolledDefault) {
+  var _React$useState = React.useState(uncontrolledDefault),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    uncontrolled = _React$useState2[0],
+    setUncontrolled = _React$useState2[1];
+  var _ref = controlled !== undefined ? [controlled, function (u) {
+      setControlled === null || setControlled === void 0 ? void 0 : setControlled(u);
+    }] : [uncontrolled, function (u) {
+      setUncontrolled(u);
+      // allow listening, even if not using controlled value
+      setControlled === null || setControlled === void 0 ? void 0 : setControlled(u);
+    }],
+    _ref2 = _slicedToArray(_ref, 2),
+    managed = _ref2[0],
+    setManaged = _ref2[1];
+  return [managed, setManaged];
+}

package/dist/esm/components/Table/AutoTable/types.js

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

package/dist/esm/components/Table/AutoTable/virtual.js

@@ -0,0 +1,149 @@
+'use client';
+
+var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { flexRender } from '@tanstack/react-table';
+import { Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, TableZeroState } from '../index.js';
+import React from 'react';
+import { Box, CircularProgress, styled } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+import { useAutoTable } from './common.js';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TableContainer = styled(Box)(function (_ref) {
+  var virtualizerTotalHeight = _ref.virtualizerTotalHeight;
+  return {
+    height: "".concat(virtualizerTotalHeight, "px")
+  };
+});
+export default function VirtualControlledAutoTable(_ref2) {
+  var stickyHeader = _ref2.stickyHeader,
+    loading = _ref2.loading,
+    zeroStateMessage = _ref2.zeroStateMessage,
+    scrollOffset = _ref2.scrollOffset,
+    getScrollElement = _ref2.getScrollElement,
+    renderWhenNotVisible = _ref2.renderWhenNotVisible,
+    rowSize = _ref2.rowSize,
+    _ref2$headerSize = _ref2.headerSize,
+    headerSize = _ref2$headerSize === void 0 ? 50 : _ref2$headerSize,
+    overscan = _ref2.overscan,
+    sx = _ref2.sx,
+    className = _ref2.className,
+    options = _objectWithoutProperties(_ref2, _excluded);
+  var table = useAutoTable(options);
+  // const manualRowCount = options.manualRowCount ?? options.data.length
+
+  var _table$getRowModel = table.getRowModel(),
+    rows = _table$getRowModel.rows;
+
+  // get this table's offset from parent container
+  var offsetFromScrollEl = scrollOffset !== null && scrollOffset !== void 0 ? scrollOffset : 0; // listOffset;
+
+  var virtualizer = useVirtualizer({
+    getScrollElement: getScrollElement,
+    scrollMargin: offsetFromScrollEl,
+    count: rows.length,
+    overscan: overscan !== null && overscan !== void 0 ? overscan : 10,
+    estimateSize: function estimateSize() {
+      return rowSize;
+    }
+  });
+
+  // this will completely hide the table rows if it is not within the visible threshold
+  // maybe this will be default behavior in @tanstack/react-virtual one day
+  var visibilityOverscan = virtualizer.options.overscan * rowSize;
+  var tableIsVisible = renderWhenNotVisible || virtualizer.scrollOffset >= offsetFromScrollEl - visibilityOverscan && virtualizer.scrollOffset <= offsetFromScrollEl + virtualizer.getTotalSize() + visibilityOverscan;
+  var virtualItems = virtualizer.getVirtualItems();
+  var totalHeight = virtualizer.getTotalSize() + headerSize;
+  return /*#__PURE__*/_jsx(TableContainer, {
+    virtualizerTotalHeight: totalHeight,
+    sx: sx,
+    className: className,
+    children: /*#__PURE__*/_jsxs(Table, {
+      sx: _objectSpread({
+        borderCollapse: 'separate'
+      }, stickyHeader ? {
+        '& th': {
+          position: 'sticky',
+          top: _typeof(stickyHeader) === 'object' ? stickyHeader.offset : 0,
+          zIndex: 2,
+          backgroundColor: function backgroundColor(theme) {
+            return theme.palette.background["default"];
+          }
+        }
+      } : {}),
+      children: [/*#__PURE__*/_jsx(TableHead, {
+        sx: {
+          height: headerSize
+        },
+        children: table.getHeaderGroups().map(function (headerGroup) {
+          return /*#__PURE__*/_jsx(TableRow, {
+            children: headerGroup.headers.map(function (header) {
+              var isSorted = header.column.getIsSorted();
+              return /*#__PURE__*/_jsx(TableCell, {
+                variant: "header",
+                children: header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/_jsxs(TableSortLabel, {
+                  active: isSorted !== false,
+                  direction: isSorted !== false ? isSorted : 'asc',
+                  onClick: header.column.getToggleSortingHandler(),
+                  children: [flexRender(header.column.columnDef.header, header.getContext()), isSorted !== false ? /*#__PURE__*/_jsx(Box, {
+                    component: "span",
+                    sx: visuallyHidden,
+                    children: isSorted === 'desc' ? 'sorted descending' : 'sorted ascending'
+                  }) : null]
+                }) : flexRender(header.column.columnDef.header, header.getContext())
+              }, header.id);
+            })
+          }, headerGroup.id);
+        })
+      }), loading ? /*#__PURE__*/_jsx(TableBody, {
+        children: /*#__PURE__*/_jsx(TableRow, {
+          children: /*#__PURE__*/_jsx(TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/_jsx(CircularProgress, {})
+          })
+        })
+      }) : options.data.length === 0 ? /*#__PURE__*/_jsx(TableBody, {
+        children: /*#__PURE__*/_jsx(TableRow, {
+          children: /*#__PURE__*/_jsx(TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/_jsx(TableZeroState, {
+              children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
+            })
+          })
+        })
+      }) : tableIsVisible && /*#__PURE__*/_jsx(TableBody, {
+        sx: {
+          '&::after': {
+            display: 'block',
+            content: "''",
+            // this ensures the table takes up as much size as the total elements by adding padding to the end
+            height: "".concat(virtualItems.length * rowSize, "px")
+          }
+        },
+        children: virtualItems.map(function (virtualRow, index) {
+          var row = rows[virtualRow.index];
+          return /*#__PURE__*/_jsx(TableRow, {
+            sx: {
+              height: "".concat(virtualRow.size, "px"),
+              transform: "translateY(".concat(virtualRow.start - offsetFromScrollEl - index * virtualRow.size, "px)")
+            },
+            children: row.getAllCells().map(function (cell) {
+              return /*#__PURE__*/_jsx(React.Fragment, {
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              }, cell.id);
+            })
+          }, row.id);
+        })
+      })]
+    })
+  });
+}

package/dist/esm/components/Table/index.js

@@ -1,5 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["variant"];
+var _excluded = ["variant"],
+  _excluded2 = ["checked", "indeterminate", "disabled", "onChange", "sx", "className", "checkboxSx", "checkboxClassName"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -7,9 +8,11 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Table as MuiTable, TableBody as MuiTableBody, TableCell as MuiTableCell, TableContainer as MuiTableContainer, TableFooter as MuiTableFooter, TableHead as MuiTableHead, TablePagination as MuiTablePagination, TableRow as MuiTableRow, TableSortLabel as MuiTableSortLabel } from '@mui/material';
+import { Box, Table as MuiTable, TableBody as MuiTableBody, TableCell as MuiTableCell, TableFooter as MuiTableFooter, TableHead as MuiTableHead, TablePagination as MuiTablePagination, TableRow as MuiTableRow, TableSortLabel as MuiTableSortLabel } from '@mui/material';
 import React from 'react';
 import { styled } from '@mui/material/styles';
+import Typography from '../Typography/index.js';
+import Checkbox from '../Checkbox/index.js';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Table = function Table(props) {
   return /*#__PURE__*/_jsx(MuiTable, {
@@ -28,11 +31,21 @@ export var TableBody = function TableBody(props) {
     children: props.children
   });
 };
-export var TableCell = function TableCell(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'data' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(MuiTableCell, {
+var StyledMuiTableCell = styled(MuiTableCell)(function (_ref) {
+  var theme = _ref.theme,
+    noVerticalPadding = _ref.noVerticalPadding;
+  return {
+    fontSize: theme.typography.body1.fontSize,
+    borderBottomColor: theme.palette.text.disabled,
+    padding: "".concat(noVerticalPadding ? '0px' : '14.25px', " ", '16px')
+  };
+});
+export var TableCell = function TableCell(_ref2) {
+  var _props$noVerticalPadd;
+  var _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'data' : _ref2$variant,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/_jsx(StyledMuiTableCell, {
     "data-testid": props['data-testid'],
     component: variant === 'header' ? 'th' : 'td',
     align: props.align,
@@ -42,24 +55,41 @@ export var TableCell = function TableCell(_ref) {
     scope: props.scope,
     abbr: props.abbr,
     sortDirection: props.sortDirection,
+    noVerticalPadding: (_props$noVerticalPadd = props.noVerticalPadding) !== null && _props$noVerticalPadd !== void 0 ? _props$noVerticalPadd : false,
     sx: props.sx,
     className: props.className,
     children: props.children
   });
 };
-var StyledMuiTableContainer = styled(MuiTableContainer)({
-  '& .MuiTableCell-root': {
-    lineHeight: '21px',
-    fontWeight: 400
-  }
+var StyledSelectionTableCell = styled(TableCell)({
+  width: '50px'
 });
-export var TableContainer = function TableContainer(props) {
-  return /*#__PURE__*/_jsx(StyledMuiTableContainer, {
-    "data-testid": props['data-testid'],
-    sx: props.sx,
-    className: props.className,
-    children: props.children
-  });
+var StyledSelectionCheckbox = styled(Checkbox)({
+  padding: 0
+});
+export var SelectionTableCell = function SelectionTableCell(_ref3) {
+  var checked = _ref3.checked,
+    indeterminate = _ref3.indeterminate,
+    disabled = _ref3.disabled,
+    onChange = _ref3.onChange,
+    sx = _ref3.sx,
+    className = _ref3.className,
+    checkboxSx = _ref3.checkboxSx,
+    checkboxClassName = _ref3.checkboxClassName,
+    cellProps = _objectWithoutProperties(_ref3, _excluded2);
+  return /*#__PURE__*/_jsx(StyledSelectionTableCell, _objectSpread(_objectSpread({}, cellProps), {}, {
+    noVerticalPadding: true,
+    sx: sx,
+    className: className,
+    children: /*#__PURE__*/_jsx(StyledSelectionCheckbox, {
+      checked: checked,
+      indeterminate: indeterminate,
+      disabled: disabled,
+      onChange: onChange,
+      sx: checkboxSx,
+      className: checkboxClassName
+    })
+  }));
 };
 export var TableFooter = function TableFooter(props) {
   return /*#__PURE__*/_jsx(MuiTableFooter, {
@@ -90,20 +120,8 @@ export var TablePagination = function TablePagination(props) {
     onRowsPerPageChange: props.onRowsPerPageChange
   });
 };
-var StyledMuiTableRow = styled(MuiTableRow)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    '& .MuiTableCell-root': {
-      borderBottomColor: theme.palette.text.disabled,
-      padding: '14.25px 16px',
-      '&.MuiTableCell-paddingNone': {
-        padding: 0
-      }
-    }
-  };
-});
 export var TableRow = function TableRow(props) {
-  return /*#__PURE__*/_jsx(StyledMuiTableRow, {
+  return /*#__PURE__*/_jsx(MuiTableRow, {
     "data-testid": props['data-testid'],
     hover: props.hover,
     selected: props.selected,
@@ -113,5 +131,34 @@ export var TableRow = function TableRow(props) {
   });
 };
 export var TableSortLabel = function TableSortLabel(props) {
-  return /*#__PURE__*/_jsx(MuiTableSortLabel, _objectSpread({}, props));
+  return /*#__PURE__*/_jsx(MuiTableSortLabel, {
+    active: props.active,
+    direction: props.direction,
+    hideSortIcon: props.hideSortIcon,
+    onClick: props.onClick,
+    disabled: props.disabled,
+    children: props.children
+  });
+};
+var StyledTableZeroStateBase = styled(Box)({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+export var TableZeroState = function TableZeroState(props) {
+  return /*#__PURE__*/_jsx(StyledTableZeroStateBase, {
+    sx: props.sx,
+    className: props.className,
+    children: /*#__PURE__*/_jsx(Typography, {
+      sx: function sx(theme) {
+        return {
+          fontWeight: theme.typography.body2.fontWeight,
+          fontSize: theme.typography.body2.fontSize,
+          color: theme.palette.text.disabled
+        };
+      },
+      children: props.children
+    })
+  });
 };

package/dist/esm/index.js

@@ -7,8 +7,9 @@ export { default as Breadcrumbs } from './components/Breadcrumbs/index.js';
 export { default as Button } from './components/Button/index.js';
 export { default as Checkbox } from './components/Checkbox/index.js';
 export { default as Drawer } from './components/Drawer/index.js';
-export { default as FileUploader } from './components/FileUploader/index.js';
+export { default as FileUploader, useFileUploader } from './components/FileUploader/index.js';
 export { default as FormControlLabel } from './components/FormControlLabel/index.js';
+export { default as IconButton } from './components/IconButton/index.js';
 export { default as Input } from './components/Input/index.js';
 export { default as LinearProgress } from './components/LinearProgress/index.js';
 export { default as Link } from './components/Link/index.js';
@@ -27,7 +28,10 @@ export { default as StatusChip } from './components/StatusChip/index.js';
 export { default as Step } from './components/Step/index.js';
 export { default as StepLabel } from './components/StepLabel/index.js';
 export { default as Stepper } from './components/Stepper/index.js';
-export { Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel } from './components/Table/index.js';
+export { Table, TableBody, TableCell, SelectionTableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableZeroState } from './components/Table/index.js';
+export { default as AutoTable, createColumnHelper } from './components/Table/AutoTable/index.js';
+export { default as ControlledAutoTable } from './components/Table/AutoTable/controlled.js';
+export { default as VirtualControlledAutoTable } from './components/Table/AutoTable/virtual.js';
 export { default as Tabs } from './components/Tabs/index.js';
 export { default as ThemeProvider } from './components/ThemeProvider/index.js';
 export { default as Toast } from './components/Toast/index.js';

package/dist/types/components/Button/index.d.ts

@@ -14,6 +14,8 @@ export type ButtonProps = {
     onClick?: MouseEventHandler<HTMLButtonElement>;
     sx?: SxProps<Theme>;
     className?: string;
+    containerSx?: SxProps<Theme>;
+    containerClassName?: string;
 };
 /**
 - Use a button for common user click actions. Several variations available.

package/dist/types/components/FileUploader/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SxProps, Theme } from '@mui/material/styles';
-import { Accept, DropzoneRootProps, DropzoneInputProps } from 'react-dropzone';
+import { Accept } from 'react-dropzone';
 export interface FileState {
     name: string;
     uploadProgress: number;
@@ -8,27 +8,31 @@ export interface FileState {
     withError: boolean;
     feedbackText: string;
 }
-export type FileUploaderViewProps = {
+export type FileUploaderProps = {
     'data-testid'?: string;
-    extensions: string[];
     filesState: FileState[];
+    accept: Accept;
+    multiple?: boolean;
+    uploading?: boolean;
+    uploaded?: boolean;
+    onDrop(files: File[]): void;
     onDelete(fileIndex: number): void;
-    rootProps?: DropzoneRootProps;
-    inputProps?: DropzoneInputProps;
     sx?: SxProps<Theme>;
     className?: string;
 };
-export declare const FileUploaderView: (props: FileUploaderViewProps) => import("react").JSX.Element;
+export default function FileUploader(props: FileUploaderProps): import("react").JSX.Element;
 type FileUploadFn = (f: File) => AsyncGenerator<number>;
-export type FileUploaderProps = {
-    'data-testid'?: string;
-    accept: Accept;
-    multiple?: boolean;
+export type UseFileUploaderOptions = {
     uploadFile: FileUploadFn;
     onComplete?(f: File): void;
     onError?(v: Error): void;
-    sx?: SxProps<Theme>;
-    className?: string;
 };
-declare const FileUploader: ({ accept, multiple, uploadFile, onComplete, onError, ...props }: FileUploaderProps) => import("react").JSX.Element;
-export default FileUploader;
+export declare function useFileUploader(options: UseFileUploaderOptions): {
+    files: FileState[];
+    onDrop(acceptedFiles: File[]): void;
+    removeFile: (fileIndex: number) => void;
+    uploading: boolean;
+    uploaded: boolean;
+    uploadFiles(): Promise<PromiseSettledResult<void>[]>;
+};
+export {};

package/dist/types/components/IconButton/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { MouseEventHandler } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export type IconButtonProps = {
+    'data-testid'?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+/**
+- Use a button for common user click actions. Several variations available.
+**/
+declare const IconButton: (props: IconButtonProps) => React.JSX.Element;
+export default IconButton;