@veritone-ce/design-system 1.12.47 → 1.12.48

package/dist/cjs/index.js

@@ -16,10 +16,16 @@ Object.defineProperty(exports, "AudioSlider", {
     return _index2["default"];
   }
 });
+Object.defineProperty(exports, "AutoTable", {
+  enumerable: true,
+  get: function get() {
+    return _index29["default"];
+  }
+});
 Object.defineProperty(exports, "Autocomplete", {
   enumerable: true,
   get: function get() {
-    return _index35["default"];
+    return _index37["default"];
   }
 });
 Object.defineProperty(exports, "Breadcrumbs", {
@@ -40,6 +46,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _index5["default"];
   }
 });
+Object.defineProperty(exports, "ControlledAutoTable", {
+  enumerable: true,
+  get: function get() {
+    return _controlled["default"];
+  }
+});
 Object.defineProperty(exports, "Drawer", {
   enumerable: true,
   get: function get() {
@@ -61,205 +73,229 @@ Object.defineProperty(exports, "FormControlLabel", {
 Object.defineProperty(exports, "HomeOutlinedIcon", {
   enumerable: true,
   get: function get() {
-    return _index32["default"];
+    return _index34["default"];
+  }
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function get() {
+    return _index9["default"];
   }
 });
 Object.defineProperty(exports, "IconGroups", {
   enumerable: true,
   get: function get() {
-    return _index33["default"];
+    return _index35["default"];
   }
 });
 Object.defineProperty(exports, "IconListItem", {
   enumerable: true,
   get: function get() {
-    return _index34["default"];
+    return _index36["default"];
   }
 });
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
-    return _index9["default"];
+    return _index10["default"];
   }
 });
 Object.defineProperty(exports, "LinearProgress", {
   enumerable: true,
   get: function get() {
-    return _index10["default"];
+    return _index11["default"];
   }
 });
 Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: function get() {
-    return _index11["default"];
+    return _index12["default"];
   }
 });
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function get() {
-    return _index12["default"];
+    return _index13["default"];
   }
 });
 Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function get() {
-    return _index13["default"];
+    return _index14["default"];
   }
 });
 Object.defineProperty(exports, "ListItemButton", {
   enumerable: true,
   get: function get() {
-    return _index14["default"];
+    return _index15["default"];
   }
 });
 Object.defineProperty(exports, "ListItemText", {
   enumerable: true,
   get: function get() {
-    return _index15["default"];
+    return _index16["default"];
   }
 });
 Object.defineProperty(exports, "MenuFlyout", {
   enumerable: true,
   get: function get() {
-    return _index16["default"];
+    return _index17["default"];
   }
 });
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
-    return _index17["default"];
+    return _index18["default"];
   }
 });
 Object.defineProperty(exports, "Panel", {
   enumerable: true,
   get: function get() {
-    return _index18["default"];
+    return _index19["default"];
   }
 });
 Object.defineProperty(exports, "ProgressIndicator", {
   enumerable: true,
   get: function get() {
-    return _index19["default"];
+    return _index20["default"];
   }
 });
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function get() {
-    return _index20["default"];
+    return _index21["default"];
   }
 });
 Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function get() {
-    return _index21["default"];
+    return _index22["default"];
   }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
-    return _index22["default"];
+    return _index23["default"];
   }
 });
-Object.defineProperty(exports, "StatusChip", {
+Object.defineProperty(exports, "SelectionTableCell", {
   enumerable: true,
   get: function get() {
-    return _index23["default"];
+    return _index28.SelectionTableCell;
   }
 });
-Object.defineProperty(exports, "Step", {
+Object.defineProperty(exports, "StatusChip", {
   enumerable: true,
   get: function get() {
     return _index24["default"];
   }
 });
-Object.defineProperty(exports, "StepLabel", {
+Object.defineProperty(exports, "Step", {
   enumerable: true,
   get: function get() {
     return _index25["default"];
   }
 });
-Object.defineProperty(exports, "Stepper", {
+Object.defineProperty(exports, "StepLabel", {
   enumerable: true,
   get: function get() {
     return _index26["default"];
   }
 });
-Object.defineProperty(exports, "Table", {
+Object.defineProperty(exports, "Stepper", {
   enumerable: true,
   get: function get() {
-    return _index27.Table;
+    return _index27["default"];
   }
 });
-Object.defineProperty(exports, "TableBody", {
+Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
-    return _index27.TableBody;
+    return _index28.Table;
   }
 });
-Object.defineProperty(exports, "TableCell", {
+Object.defineProperty(exports, "TableBody", {
   enumerable: true,
   get: function get() {
-    return _index27.TableCell;
+    return _index28.TableBody;
   }
 });
-Object.defineProperty(exports, "TableContainer", {
+Object.defineProperty(exports, "TableCell", {
   enumerable: true,
   get: function get() {
-    return _index27.TableContainer;
+    return _index28.TableCell;
   }
 });
 Object.defineProperty(exports, "TableFooter", {
   enumerable: true,
   get: function get() {
-    return _index27.TableFooter;
+    return _index28.TableFooter;
   }
 });
 Object.defineProperty(exports, "TableHead", {
   enumerable: true,
   get: function get() {
-    return _index27.TableHead;
+    return _index28.TableHead;
   }
 });
 Object.defineProperty(exports, "TablePagination", {
   enumerable: true,
   get: function get() {
-    return _index27.TablePagination;
+    return _index28.TablePagination;
   }
 });
 Object.defineProperty(exports, "TableRow", {
   enumerable: true,
   get: function get() {
-    return _index27.TableRow;
+    return _index28.TableRow;
   }
 });
 Object.defineProperty(exports, "TableSortLabel", {
   enumerable: true,
   get: function get() {
-    return _index27.TableSortLabel;
+    return _index28.TableSortLabel;
+  }
+});
+Object.defineProperty(exports, "TableZeroState", {
+  enumerable: true,
+  get: function get() {
+    return _index28.TableZeroState;
   }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function get() {
-    return _index28["default"];
+    return _index30["default"];
   }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function get() {
-    return _index29["default"];
+    return _index31["default"];
   }
 });
 Object.defineProperty(exports, "Toast", {
   enumerable: true,
   get: function get() {
-    return _index30["default"];
+    return _index32["default"];
   }
 });
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
   get: function get() {
-    return _index31["default"];
+    return _index33["default"];
+  }
+});
+Object.defineProperty(exports, "VirtualControlledAutoTable", {
+  enumerable: true,
+  get: function get() {
+    return _virtual["default"];
+  }
+});
+Object.defineProperty(exports, "createColumnHelper", {
+  enumerable: true,
+  get: function get() {
+    return _index29.createColumnHelper;
   }
 });
 Object.defineProperty(exports, "createDesignSystemTheme", {
@@ -289,33 +325,37 @@ var _index5 = _interopRequireDefault(require("./components/Checkbox/index.js"));
 var _index6 = _interopRequireDefault(require("./components/Drawer/index.js"));
 var _index7 = _interopRequireWildcard(require("./components/FileUploader/index.js"));
 var _index8 = _interopRequireDefault(require("./components/FormControlLabel/index.js"));
-var _index9 = _interopRequireDefault(require("./components/Input/index.js"));
-var _index10 = _interopRequireDefault(require("./components/LinearProgress/index.js"));
-var _index11 = _interopRequireDefault(require("./components/Link/index.js"));
-var _index12 = _interopRequireDefault(require("./components/List/index.js"));
-var _index13 = _interopRequireDefault(require("./components/ListItem/index.js"));
-var _index14 = _interopRequireDefault(require("./components/ListItemButton/index.js"));
-var _index15 = _interopRequireDefault(require("./components/ListItemText/index.js"));
-var _index16 = _interopRequireDefault(require("./components/MenuFlyout/index.js"));
-var _index17 = _interopRequireDefault(require("./components/Modal/index.js"));
-var _index18 = _interopRequireDefault(require("./components/Panel/index.js"));
-var _index19 = _interopRequireDefault(require("./components/ProgressIndicator/index.js"));
-var _index20 = _interopRequireDefault(require("./components/RadioButton/index.js"));
-var _index21 = _interopRequireDefault(require("./components/RadioGroup/index.js"));
-var _index22 = _interopRequireDefault(require("./components/Select/index.js"));
-var _index23 = _interopRequireDefault(require("./components/StatusChip/index.js"));
-var _index24 = _interopRequireDefault(require("./components/Step/index.js"));
-var _index25 = _interopRequireDefault(require("./components/StepLabel/index.js"));
-var _index26 = _interopRequireDefault(require("./components/Stepper/index.js"));
-var _index27 = require("./components/Table/index.js");
-var _index28 = _interopRequireDefault(require("./components/Tabs/index.js"));
-var _index29 = _interopRequireDefault(require("./components/ThemeProvider/index.js"));
-var _index30 = _interopRequireDefault(require("./components/Toast/index.js"));
-var _index31 = _interopRequireDefault(require("./components/Typography/index.js"));
-var _index32 = _interopRequireDefault(require("./components/icons/HomeOutlinedIcon/index.js"));
-var _index33 = _interopRequireDefault(require("./components/icons/IconGroups/index.js"));
-var _index34 = _interopRequireDefault(require("./components/icons/IconListItem/index.js"));
-var _index35 = _interopRequireDefault(require("./components/Autocomplete/index.js"));
+var _index9 = _interopRequireDefault(require("./components/IconButton/index.js"));
+var _index10 = _interopRequireDefault(require("./components/Input/index.js"));
+var _index11 = _interopRequireDefault(require("./components/LinearProgress/index.js"));
+var _index12 = _interopRequireDefault(require("./components/Link/index.js"));
+var _index13 = _interopRequireDefault(require("./components/List/index.js"));
+var _index14 = _interopRequireDefault(require("./components/ListItem/index.js"));
+var _index15 = _interopRequireDefault(require("./components/ListItemButton/index.js"));
+var _index16 = _interopRequireDefault(require("./components/ListItemText/index.js"));
+var _index17 = _interopRequireDefault(require("./components/MenuFlyout/index.js"));
+var _index18 = _interopRequireDefault(require("./components/Modal/index.js"));
+var _index19 = _interopRequireDefault(require("./components/Panel/index.js"));
+var _index20 = _interopRequireDefault(require("./components/ProgressIndicator/index.js"));
+var _index21 = _interopRequireDefault(require("./components/RadioButton/index.js"));
+var _index22 = _interopRequireDefault(require("./components/RadioGroup/index.js"));
+var _index23 = _interopRequireDefault(require("./components/Select/index.js"));
+var _index24 = _interopRequireDefault(require("./components/StatusChip/index.js"));
+var _index25 = _interopRequireDefault(require("./components/Step/index.js"));
+var _index26 = _interopRequireDefault(require("./components/StepLabel/index.js"));
+var _index27 = _interopRequireDefault(require("./components/Stepper/index.js"));
+var _index28 = require("./components/Table/index.js");
+var _index29 = _interopRequireWildcard(require("./components/Table/AutoTable/index.js"));
+var _controlled = _interopRequireDefault(require("./components/Table/AutoTable/controlled.js"));
+var _virtual = _interopRequireDefault(require("./components/Table/AutoTable/virtual.js"));
+var _index30 = _interopRequireDefault(require("./components/Tabs/index.js"));
+var _index31 = _interopRequireDefault(require("./components/ThemeProvider/index.js"));
+var _index32 = _interopRequireDefault(require("./components/Toast/index.js"));
+var _index33 = _interopRequireDefault(require("./components/Typography/index.js"));
+var _index34 = _interopRequireDefault(require("./components/icons/HomeOutlinedIcon/index.js"));
+var _index35 = _interopRequireDefault(require("./components/icons/IconGroups/index.js"));
+var _index36 = _interopRequireDefault(require("./components/icons/IconListItem/index.js"));
+var _index37 = _interopRequireDefault(require("./components/Autocomplete/index.js"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/esm/assets/theme.js

@@ -328,20 +328,22 @@ defaultTheme = createTheme(defaultTheme, {
         }
       }
     },
-    MuiPagination: {
+    MuiTablePagination: {
       styleOverrides: {
         selectLabel: {
           fontWeight: 400,
           fontSize: '12px',
-          lineHeight: '18px',
-          color: colors.text.disabled
+          lineHeight: '18px'
+          // color: colors.text.disabled
         },
+
         displayedRows: {
           fontWeight: 400,
           fontSize: '12px',
-          lineHeight: '18px',
-          color: colors.text.disabled
+          lineHeight: '18px'
+          // color: colors.text.disabled
         },
+
         input: {
           fontWeight: 400,
           fontSize: '12px',

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

@@ -9,6 +9,18 @@ var ButtonContainer = styled(Box)(function () {
     position: "relative"
   };
 });
+var StyledButton = styled(MuiButton)({
+  fontSize: '14px',
+  gap: '5px',
+  paddingTop: '8px',
+  paddingBottom: '8px',
+  paddingLeft: '15px',
+  paddingRight: '15px',
+  display: 'flex',
+  alignItems: 'center',
+  lineHeight: '16px',
+  height: 36
+});
 
 /**
 - Use a button for common user click actions. Several variations available.
@@ -17,21 +29,9 @@ var Button = function Button(props) {
   var disabled = props.isLoading || props.disabled;
   return /*#__PURE__*/_jsxs(ButtonContainer, {
     "data-testid": props['data-testid'],
-    sx: props.sx,
-    className: props.className,
-    children: [/*#__PURE__*/_jsx(MuiButton, {
-      sx: {
-        fontSize: '14px',
-        gap: '5px',
-        paddingTop: '8px',
-        paddingBottom: '8px',
-        paddingLeft: '15px',
-        paddingRight: '15px',
-        display: 'flex',
-        alignItems: 'center',
-        lineHeight: '16px',
-        height: 36
-      },
+    sx: props.containerSx,
+    className: props.containerClassName,
+    children: [/*#__PURE__*/_jsx(StyledButton, {
       color: props.color,
       disableElevation: true,
       variant: props.variant,
@@ -39,6 +39,8 @@ var Button = function Button(props) {
       startIcon: props.startIcon,
       endIcon: props.endIcon,
       onClick: props.onClick,
+      sx: props.sx,
+      className: props.className,
       children: props.children
     }), props.isLoading && /*#__PURE__*/_jsx(Indicator, {})]
   });

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

@@ -0,0 +1,17 @@
+import { IconButton as MuiIconButton } from '@mui/material';
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+- Use a button for common user click actions. Several variations available.
+**/
+var IconButton = function IconButton(props) {
+  var disabled = props.disabled;
+  return /*#__PURE__*/_jsx(MuiIconButton, {
+    disabled: disabled,
+    onClick: props.onClick,
+    sx: props.sx,
+    className: props.className,
+    children: props.children
+  });
+};
+export default IconButton;

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

@@ -5,12 +5,14 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var MenuFlyout = function MenuFlyout(props) {
   return /*#__PURE__*/_jsx(MuiMenu, {
     "data-testid": props['data-testid'],
+    anchorEl: props.anchorEl,
     open: props.open,
     onClose: props.onClose,
     sx: props.sx,
     className: props.className,
     children: props.menuOptions.map(function (menuItem, index) {
       return /*#__PURE__*/_jsx(MenuItem, {
+        onClick: menuItem.onSelect,
         children: /*#__PURE__*/_jsxs(Box, {
           sx: {
             display: 'flex',

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

@@ -0,0 +1,133 @@
+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); }
+import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
+import React from 'react';
+import { TableCell } from '../index.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function createColumnHelper() {
+  return {
+    accessor: function accessor(_accessor, column) {
+      return typeof _accessor === 'function' ? _objectSpread(_objectSpread({}, column), {}, {
+        accessorFn: _accessor
+      }) : _objectSpread(_objectSpread({}, column), {}, {
+        accessorKey: _accessor
+      });
+    },
+    display: function display(column) {
+      return column;
+    }
+    // group: column => column
+  };
+}
+
+export function useAutoTable(options) {
+  var columnsProp = options.columns;
+  var mappedColumns = React.useMemo(function () {
+    return mapColumnDefs(columnsProp);
+  }, [columnsProp]);
+  return useReactTable({
+    data: options.data,
+    columns: mappedColumns,
+    manualSorting: options.manualSorting,
+    manualPagination: options.manualPagination,
+    enableSorting: options.enableSorting,
+    enableRowSelection: options.enableRowSelection,
+    meta: options.meta,
+    getRowId: options.getRowId,
+    defaultColumn: {
+      cell: function cell(info) {
+        return /*#__PURE__*/_jsx(TableCell, {
+          children: info.renderValue()
+        });
+      }
+    },
+    initialState: {
+      pagination: {
+        pageSize: options.pagination.pageSize
+      }
+    },
+    state: {
+      pagination: options.pagination,
+      sorting: options.sorting,
+      rowSelection: options.rowSelection
+    },
+    onSortingChange: function onSortingChange(updater) {
+      var value = typeof updater === 'function' ? updater(options.sorting) : updater;
+      options.onSortingChange(value);
+    },
+    onRowSelectionChange: function onRowSelectionChange(updater) {
+      var value = typeof updater === 'function' ? updater(options.rowSelection) : updater;
+      options.onRowSelectionChange(value);
+    },
+    onPaginationChange: function onPaginationChange() {},
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel()
+  });
+}
+export function mapColumnDefs(columnDefs) {
+  return columnDefs.map(mapColumnDef);
+}
+export function mapColumnDef(columnDef) {
+  // typed column meta
+  var meta = {
+    noVerticalPadding: columnDef.noVerticalPadding
+  };
+  var mappedDef = {
+    id: columnDef.id,
+    accessorFn: columnDef.accessorFn,
+    accessorKey: columnDef.accessorKey,
+    meta: meta,
+    getUniqueValues: columnDef.getUniqueValues,
+    header: columnDef.header !== undefined ? makeHeaderMappingComponent(columnDef.header) : undefined,
+    cell: columnDef.cell !== undefined ? makeCellMappingComponent(columnDef.cell) : undefined,
+    enableMultiSort: columnDef.enableMultiSort,
+    enableSorting: columnDef.enableSorting,
+    invertSorting: columnDef.invertSorting,
+    sortDescFirst: columnDef.sortDescFirst,
+    sortingFn: columnDef.sortingFn,
+    sortUndefined: columnDef.sortUndefined
+  };
+
+  // remove all fileds that are undefined because react-table is probably using Object.keys in a weird way under the hood
+  Object.keys(mappedDef).forEach(function (key) {
+    var k = key;
+    if (mappedDef[k] === undefined) {
+      delete mappedDef[k];
+    }
+  });
+  return mappedDef;
+}
+function makeHeaderMappingComponent(header) {
+  if (typeof header === 'string') {
+    return header;
+  }
+  return function (props) {
+    return header({
+      column: props.column,
+      header: props.header,
+      table: props.table,
+      meta: props.table.options.meta
+    });
+  };
+}
+function makeCellMappingComponent(cell) {
+  if (typeof cell === 'string') {
+    return cell;
+  }
+  return function (props) {
+    return cell({
+      cell: props.cell,
+      column: props.column,
+      getValue: props.getValue,
+      renderValue: props.renderValue,
+      row: props.row,
+      table: props.table,
+      meta: props.table.options.meta
+    });
+  };
+}