@veritone-ce/design-system 1.12.47 → 1.12.48

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

@@ -0,0 +1,154 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = VirtualControlledAutoTable;
+var _reactTable = require("@tanstack/react-table");
+var _index = require("../index.js");
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _utils = require("@mui/utils");
+var _common = require("./common.js");
+var _reactVirtual = require("@tanstack/react-virtual");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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; }
+var TableContainer = (0, _material.styled)(_material.Box)(function (_ref) {
+  var virtualizerTotalHeight = _ref.virtualizerTotalHeight;
+  return {
+    height: "".concat(virtualizerTotalHeight, "px")
+  };
+});
+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 = (0, _common.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 = (0, _reactVirtual.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__*/(0, _jsxRuntime.jsx)(TableContainer, {
+    virtualizerTotalHeight: totalHeight,
+    sx: sx,
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.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__*/(0, _jsxRuntime.jsx)(_index.TableHead, {
+        sx: {
+          height: headerSize
+        },
+        children: table.getHeaderGroups().map(function (headerGroup) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
+            children: headerGroup.headers.map(function (header) {
+              var isSorted = header.column.getIsSorted();
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
+                variant: "header",
+                children: header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.TableSortLabel, {
+                  active: isSorted !== false,
+                  direction: isSorted !== false ? isSorted : 'asc',
+                  onClick: header.column.getToggleSortingHandler(),
+                  children: [(0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), isSorted !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                    component: "span",
+                    sx: _utils.visuallyHidden,
+                    children: isSorted === 'desc' ? 'sorted descending' : 'sorted ascending'
+                  }) : null]
+                }) : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext())
+              }, header.id);
+            })
+          }, headerGroup.id);
+        })
+      }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+          })
+        })
+      }) : options.data.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
+            colSpan: table.getAllFlatColumns().length,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableZeroState, {
+              children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
+            })
+          })
+        })
+      }) : tableIsVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.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__*/(0, _jsxRuntime.jsx)(_index.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__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {
+                children: (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())
+              }, cell.id);
+            })
+          }, row.id);
+        })
+      })]
+    })
+  });
+}

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

@@ -4,12 +4,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableSortLabel = exports.TableRow = exports.TablePagination = exports.TableHead = exports.TableFooter = exports.TableContainer = exports.TableCell = exports.TableBody = exports.Table = void 0;
+exports.TableZeroState = exports.TableSortLabel = exports.TableRow = exports.TablePagination = exports.TableHead = exports.TableFooter = exports.TableCell = exports.TableBody = exports.Table = exports.SelectionTableCell = void 0;
 var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@mui/material/styles");
+var _index = _interopRequireDefault(require("../Typography/index.js"));
+var _index2 = _interopRequireDefault(require("../Checkbox/index.js"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["variant"];
+var _excluded = ["variant"],
+  _excluded2 = ["checked", "indeterminate", "disabled", "onChange", "sx", "className", "checkboxSx", "checkboxClassName"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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; }
@@ -37,11 +40,21 @@ var TableBody = function TableBody(props) {
   });
 };
 exports.TableBody = TableBody;
-var TableCell = function TableCell(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'data' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+var StyledMuiTableCell = (0, _styles.styled)(_material.TableCell)(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')
+  };
+});
+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__*/(0, _jsxRuntime.jsx)(StyledMuiTableCell, {
     "data-testid": props['data-testid'],
     component: variant === 'header' ? 'th' : 'td',
     align: props.align,
@@ -51,27 +64,44 @@ 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
   });
 };
 exports.TableCell = TableCell;
-var StyledMuiTableContainer = (0, _styles.styled)(_material.TableContainer)({
-  '& .MuiTableCell-root': {
-    lineHeight: '21px',
-    fontWeight: 400
-  }
+var StyledSelectionTableCell = (0, _styles.styled)(TableCell)({
+  width: '50px'
 });
-var TableContainer = function TableContainer(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTableContainer, {
-    "data-testid": props['data-testid'],
-    sx: props.sx,
-    className: props.className,
-    children: props.children
-  });
+var StyledSelectionCheckbox = (0, _styles.styled)(_index2["default"])({
+  padding: 0
+});
+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__*/(0, _jsxRuntime.jsx)(StyledSelectionTableCell, _objectSpread(_objectSpread({}, cellProps), {}, {
+    noVerticalPadding: true,
+    sx: sx,
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSelectionCheckbox, {
+      checked: checked,
+      indeterminate: indeterminate,
+      disabled: disabled,
+      onChange: onChange,
+      sx: checkboxSx,
+      className: checkboxClassName
+    })
+  }));
 };
-exports.TableContainer = TableContainer;
+exports.SelectionTableCell = SelectionTableCell;
 var TableFooter = function TableFooter(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableFooter, {
     "data-testid": props['data-testid'],
@@ -104,20 +134,8 @@ var TablePagination = function TablePagination(props) {
   });
 };
 exports.TablePagination = TablePagination;
-var StyledMuiTableRow = (0, _styles.styled)(_material.TableRow)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    '& .MuiTableCell-root': {
-      borderBottomColor: theme.palette.text.disabled,
-      padding: '14.25px 16px',
-      '&.MuiTableCell-paddingNone': {
-        padding: 0
-      }
-    }
-  };
-});
 var TableRow = function TableRow(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTableRow, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableRow, {
     "data-testid": props['data-testid'],
     hover: props.hover,
     selected: props.selected,
@@ -128,6 +146,36 @@ var TableRow = function TableRow(props) {
 };
 exports.TableRow = TableRow;
 var TableSortLabel = function TableSortLabel(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, _objectSpread({}, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, {
+    active: props.active,
+    direction: props.direction,
+    hideSortIcon: props.hideSortIcon,
+    onClick: props.onClick,
+    disabled: props.disabled,
+    children: props.children
+  });
+};
+exports.TableSortLabel = TableSortLabel;
+var StyledTableZeroStateBase = (0, _styles.styled)(_material.Box)({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var TableZeroState = function TableZeroState(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTableZeroStateBase, {
+    sx: props.sx,
+    className: props.className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
+      sx: function sx(theme) {
+        return {
+          fontWeight: theme.typography.body2.fontWeight,
+          fontSize: theme.typography.body2.fontSize,
+          color: theme.palette.text.disabled
+        };
+      },
+      children: props.children
+    })
+  });
 };
-exports.TableSortLabel = TableSortLabel;
+exports.TableZeroState = TableZeroState;