@veritone-ce/design-system 2.8.14-next.2.0 → 2.8.14

package/dist/cjs/Table/AutoTable/common.js

@@ -0,0 +1,131 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var React = require('react');
+var index = require('../TableCell/index.js');
+var styles_module = require('./styles.module.scss.js');
+
+function createColumnHelper() {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === "function" ? {
+        ...column,
+        accessorFn: accessor
+      } : {
+        ...column,
+        accessorKey: accessor
+      };
+    },
+    display: (column) => column
+    // group: column => column
+  };
+}
+function useAutoTable(options) {
+  const columnsProp = options.columns;
+  const mappedColumns = React.useMemo(
+    () => mapColumnDefs(columnsProp),
+    [columnsProp]
+  );
+  return reactTable.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: (info) => /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: info.renderValue() })
+    },
+    initialState: {
+      pagination: {
+        pageSize: options.pagination.pageSize
+      }
+    },
+    state: {
+      pagination: options.pagination,
+      sorting: options.sorting,
+      rowSelection: options.rowSelection
+    },
+    onSortingChange: (updater) => {
+      const value = typeof updater === "function" ? updater(options.sorting) : updater;
+      options.onSortingChange(value);
+    },
+    onRowSelectionChange: (updater) => {
+      const value = typeof updater === "function" ? updater(options.rowSelection) : updater;
+      options.onRowSelectionChange(value);
+    },
+    onPaginationChange: () => {
+    },
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getPaginationRowModel: reactTable.getPaginationRowModel()
+  });
+}
+function mapColumnDefs(columnDefs) {
+  return columnDefs.map(mapColumnDef);
+}
+function mapColumnDef(columnDef) {
+  const meta = {
+    noVerticalPadding: columnDef.noVerticalPadding
+  };
+  const mappedDef = {
+    id: columnDef.id,
+    accessorFn: columnDef.accessorFn,
+    accessorKey: columnDef.accessorKey,
+    meta,
+    getUniqueValues: columnDef.getUniqueValues,
+    header: columnDef.header !== void 0 ? makeHeaderMappingComponent(columnDef.header) : void 0,
+    cell: columnDef.cell !== void 0 ? makeCellMappingComponent(columnDef.cell) : void 0,
+    enableMultiSort: columnDef.enableMultiSort,
+    enableSorting: columnDef.enableSorting,
+    invertSorting: columnDef.invertSorting,
+    sortDescFirst: columnDef.sortDescFirst,
+    sortingFn: columnDef.sortingFn,
+    sortUndefined: columnDef.sortUndefined
+  };
+  Object.keys(mappedDef).forEach((key) => {
+    const k = key;
+    if (mappedDef[k] === void 0) {
+      delete mappedDef[k];
+    }
+  });
+  return mappedDef;
+}
+function makeHeaderMappingComponent(header) {
+  if (typeof header === "string") {
+    return header;
+  }
+  return (props) => 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 (props) => cell({
+    cell: props.cell,
+    column: props.column,
+    getValue: props.getValue,
+    renderValue: props.renderValue,
+    row: props.row,
+    table: props.table,
+    meta: props.table.options.meta
+  });
+}
+const DefaultErrorContainer = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.errorContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Error" }) });
+};
+
+exports.DefaultErrorContainer = DefaultErrorContainer;
+exports.createColumnHelper = createColumnHelper;
+exports.mapColumnDef = mapColumnDef;
+exports.mapColumnDefs = mapColumnDefs;
+exports.useAutoTable = useAutoTable;

package/dist/cjs/Table/AutoTable/controlled.js

@@ -0,0 +1,95 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var index = require('../index.js');
+var index$1 = require('../TableRow/index.js');
+var index$2 = require('../TableCell/index.js');
+var React = require('react');
+var utils = require('@mui/utils');
+var common = require('./common.js');
+var index$4 = require('../../TablePagination/index.js');
+var index$3 = require('../../CircularProgress/index.js');
+var cx = require('../../styles/cx.js');
+require('../../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../../styles/defaultTheme.js');
+require('../../styles/provider.client.js');
+require('../../styles/css-vars.js');
+var styles_module = require('./styles.module.scss.js');
+
+function ControlledAutoTable({
+  stickyHeader,
+  loading,
+  zeroStateMessage,
+  error,
+  ErrorContainer = common.DefaultErrorContainer,
+  style,
+  className,
+  ...options
+}) {
+  const table = common.useAutoTable(options);
+  const rows = options.data;
+  const manualRowCount = options.manualRowCount ?? rows.length;
+  const showMessage = error || loading || rows.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, className, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    index.Table,
+    {
+      className: cx.cx(styles_module.default.table, stickyHeader && styles_module.default.stickyHeader),
+      style: {
+        ...stickyHeader && typeof stickyHeader === "object" && {
+          "--vt-ce-auto-table-sticky-offset": stickyHeader.offset
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(index.TableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: headerGroup.headers.map((header) => {
+          const isSorted = header.column.getIsSorted();
+          return /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { variant: "header", children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxRuntime.jsxs(
+            index.TableSortLabel,
+            {
+              active: isSorted !== false,
+              direction: isSorted !== false ? isSorted : "asc",
+              onClick: header.column.getToggleSortingHandler(),
+              children: [
+                reactTable.flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ),
+                isSorted !== false ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: utils.visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
+              ]
+            }
+          ) : reactTable.flexRender(
+            header.column.columnDef.header,
+            header.getContext()
+          ) }, header.id);
+        }) }, headerGroup.id)) }),
+        showMessage ? /* @__PURE__ */ jsxRuntime.jsx(index.TableBody, { children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { colSpan: table.getAllFlatColumns().length, children: error ? /* @__PURE__ */ jsxRuntime.jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.loadingContainer, children: /* @__PURE__ */ jsxRuntime.jsx(index$3.default, {}) }) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.TableMessage, { children: zeroStateMessage ?? "No data found" }) : null }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(index.TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: row.getAllCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) }),
+        options.enablePagination && (options.manualPagination ? manualRowCount : options.data.length) > table.initialState.pagination.pageSize && /* @__PURE__ */ jsxRuntime.jsx(index.TableFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: table.getAllFlatColumns().length, children: /* @__PURE__ */ jsxRuntime.jsx(
+          index$4.default,
+          {
+            count: options.manualPagination ? manualRowCount : table.getFilteredRowModel().rows.length,
+            rowsPerPage: table.getState().pagination.pageSize,
+            page: table.getState().pagination.pageIndex + 1,
+            onChangePage: (newPage) => {
+              table.setPageIndex(newPage - 1);
+              options.onPageChange(newPage - 1);
+            },
+            rowsPerPageOptions: [10, 25, 50, 100],
+            onRowsPerPageChange: (rowsPerPage) => {
+              const size = rowsPerPage ?? 10;
+              table.setPageSize(size);
+              options.onRowsPerPageChange(size);
+            }
+          }
+        ) }) }) })
+      ]
+    }
+  ) });
+}
+
+exports.default = ControlledAutoTable;

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

@@ -0,0 +1,110 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var virtual = require('./virtual.js');
+var controlled = require('./controlled.js');
+require('@tanstack/react-table');
+require('../TableCell/index.js');
+
+function AutoTable(props) {
+  const enableSorting = props.enableSorting ?? true;
+  const [managedSorting, setManagedSorting] = useManagedStateSwitch(
+    props.sorting,
+    props.onSortingChange,
+    props.defaultSorting ?? []
+  );
+  const enableRowSelection = props.enableRowSelection ?? props.rowSelection !== void 0;
+  const [managedRowSelection, setManagedRowSelection] = useManagedStateSwitch(
+    props.rowSelection,
+    props.onRowSelectionChange,
+    {}
+  );
+  const enablePagination = props.enablePagination ?? true;
+  const [managedPage, setManagedPage] = useManagedStateSwitch(
+    props.page,
+    props.onPageChange,
+    0
+  );
+  const [managedRowsPerPage, setManagedRowsPerPage] = useManagedStateSwitch(
+    props.rowsPerPage,
+    props.onRowsPerPageChange,
+    10
+  );
+  const options = {
+    data: props.data,
+    columns: props.columns,
+    meta: props.meta,
+    getRowId: props.getRowId,
+    // sorting
+    sorting: managedSorting,
+    enableSorting,
+    onSortingChange: setManagedSorting,
+    manualSorting: props.manualSorting,
+    // selection
+    rowSelection: managedRowSelection,
+    enableRowSelection,
+    onRowSelectionChange: setManagedRowSelection,
+    // pagination
+    pagination: {
+      pageIndex: managedPage,
+      pageSize: enablePagination ? managedRowsPerPage : props.data.length
+    },
+    enablePagination,
+    onPageChange: setManagedPage,
+    onRowsPerPageChange: setManagedRowsPerPage,
+    manualPagination: props.manualRowCount !== void 0,
+    manualRowCount: props.manualRowCount
+  };
+  if (props.virtualizer) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      virtual.default,
+      {
+        ...options,
+        ...props.virtualizer,
+        stickyHeader: props.stickyHeader,
+        loading: props.loading,
+        zeroStateMessage: props.zeroStateMessage,
+        error: props.error,
+        ErrorContainer: props.ErrorContainer,
+        style: props.style,
+        className: props.className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    controlled.default,
+    {
+      ...options,
+      stickyHeader: props.stickyHeader,
+      loading: props.loading,
+      zeroStateMessage: props.zeroStateMessage,
+      error: props.error,
+      ErrorContainer: props.ErrorContainer,
+      style: props.style,
+      className: props.className
+    }
+  );
+}
+function useManagedStateSwitch(controlled, setControlled, uncontrolledDefault) {
+  const [uncontrolled, setUncontrolled] = React.useState(uncontrolledDefault);
+  const [managed, setManaged] = controlled !== void 0 ? [
+    controlled,
+    (u) => {
+      setControlled?.(u);
+    }
+  ] : [
+    uncontrolled,
+    (u) => {
+      setUncontrolled(u);
+      setControlled?.(u);
+    }
+  ];
+  return [managed, setManaged];
+}
+
+exports.default = AutoTable;

package/dist/cjs/Table/AutoTable/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"visuallyHidden":"vt_ce_AutoTable_visuallyHidden__d42457bf","errorContainer":"vt_ce_AutoTable_errorContainer__22629d1a","loadingContainer":"vt_ce_AutoTable_loadingContainer__800e1c5c","table":"vt_ce_AutoTable_table__abdcf037","stickyHeader":"vt_ce_AutoTable_stickyHeader__1fdfff7b","virtualTableBody":"vt_ce_AutoTable_virtualTableBody__1264b0bb"};
+
+exports.default = styles;

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

@@ -0,0 +1,173 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var index = require('../index.js');
+var index$1 = require('../TableRow/index.js');
+var index$2 = require('../TableCell/index.js');
+var React = require('react');
+var common = require('./common.js');
+var reactVirtual = require('@tanstack/react-virtual');
+var cx = require('../../styles/cx.js');
+require('../../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../../styles/defaultTheme.js');
+require('../../styles/provider.client.js');
+require('../../styles/css-vars.js');
+var styles_module = require('./styles.module.scss.js');
+var index$3 = require('../../CircularProgress/index.js');
+
+const TableMessageMaxHeight = 100;
+function VirtualControlledAutoTable({
+  stickyHeader,
+  loading,
+  zeroStateMessage,
+  error,
+  ErrorContainer = common.DefaultErrorContainer,
+  scrollOffset,
+  getScrollElement,
+  renderWhenNotVisible = true,
+  rowSize,
+  headerSize = 50,
+  overscan,
+  debug,
+  style,
+  className,
+  ...options
+}) {
+  const table = common.useAutoTable(options);
+  const { rows } = table.getRowModel();
+  const offsetFromScrollEl = scrollOffset ?? 0;
+  const virtualizer = reactVirtual.useVirtualizer({
+    getScrollElement,
+    scrollMargin: offsetFromScrollEl,
+    count: rows.length,
+    overscan: overscan ?? 10,
+    estimateSize: () => rowSize
+  });
+  const showMessage = error || loading || rows.length === 0;
+  const rowsHeight = rows.length * rowSize;
+  const totalHeight = headerSize + (showMessage ? TableMessageMaxHeight : rowsHeight);
+  const visibilityOverscan = virtualizer.options.overscan * rowSize;
+  const visibilityBounds = {
+    lower: offsetFromScrollEl - visibilityOverscan,
+    upper: offsetFromScrollEl + totalHeight + visibilityOverscan
+  };
+  const tableIsVisible = renderWhenNotVisible || virtualizer.scrollOffset + virtualizer.scrollRect.height >= visibilityBounds.lower && virtualizer.scrollOffset <= visibilityBounds.upper;
+  const virtualItems = virtualizer.getVirtualItems();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        height: `${totalHeight}px`,
+        ...style
+      },
+      className,
+      children: [
+        debug && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              color: "red",
+              zIndex: 100,
+              fontSize: 10
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: virtualizer.scrollOffset }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: virtualizer.scrollOffset + virtualizer.scrollRect.height }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: offsetFromScrollEl }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: visibilityBounds.lower }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: 5 }, children: visibilityBounds.upper })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          index.Table,
+          {
+            className: cx.cx(styles_module.default.table, stickyHeader && styles_module.default.stickyHeader),
+            style: {
+              ...stickyHeader && typeof stickyHeader === "object" && {
+                "--vt-ce-auto-table-sticky-offset": stickyHeader.offset
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(index.TableHead, { style: { height: headerSize }, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: headerGroup.headers.map((header) => {
+                const isSorted = header.column.getIsSorted();
+                return /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { variant: "header", children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  index.TableSortLabel,
+                  {
+                    active: isSorted !== false,
+                    direction: isSorted !== false ? isSorted : "asc",
+                    onClick: header.column.getToggleSortingHandler(),
+                    children: [
+                      reactTable.flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      ),
+                      isSorted !== false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.visuallyHidden, children: isSorted === "desc" ? "sorted descending" : "sorted ascending" }) : null
+                    ]
+                  }
+                ) : reactTable.flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) }, header.id);
+              }) }, headerGroup.id)) }),
+              showMessage ? /* @__PURE__ */ jsxRuntime.jsx(index.TableBody, { children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                index$2.default,
+                {
+                  colSpan: table.getAllFlatColumns().length,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: error ? /* @__PURE__ */ jsxRuntime.jsx(ErrorContainer, { error }) : loading ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "center",
+                        paddingTop: "10px",
+                        paddingBottom: "10px"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(index$3.default, {})
+                    }
+                  ) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.TableMessage, { children: zeroStateMessage ?? "No data found" }) : null })
+                }
+              ) }) }) : tableIsVisible && /* @__PURE__ */ jsxRuntime.jsx(
+                index.TableBody,
+                {
+                  className: styles_module.default.virtualTableBody,
+                  style: {
+                    ...{
+                      "--vt-ce-auto-table-virtual-table-body-height": `${(rows.length - virtualItems.length) * rowSize}px`
+                    }
+                  },
+                  children: virtualItems.map((virtualRow) => {
+                    const row = rows[virtualRow.index];
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      index$1.default,
+                      {
+                        children: row.getAllCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: reactTable.flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        ) }, cell.id))
+                      },
+                      row.id
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.TableMessageMaxHeight = TableMessageMaxHeight;
+exports.default = VirtualControlledAutoTable;

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

@@ -0,0 +1,49 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../../styles/cx.js');
+require('../../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../../styles/defaultTheme.js');
+require('../../styles/provider.client.js');
+require('../../styles/css-vars.js');
+
+const TableCell = React.forwardRef(
+  ({
+    children,
+    "data-testid": dataTestId,
+    noVerticalPadding,
+    variant = "data",
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const Tag = React.useMemo(
+      () => variant === "header" ? "th" : "td",
+      [variant]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Tag,
+      {
+        ref,
+        ...props,
+        "data-testid": dataTestId,
+        className: cx.cx(styles_module.default.tableCell, className),
+        style: {
+          padding: `${noVerticalPadding ? "0px" : "14.25px"} ${"16px"}`,
+          ...style
+        },
+        children
+      }
+    );
+  }
+);
+
+exports.default = TableCell;

package/dist/cjs/Table/TableCell/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"tableCell":"vt_ce_TableCell_tableCell__a1247ad8"};
+
+exports.default = styles;

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

@@ -0,0 +1,33 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../../styles/cx.js');
+require('../../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../../styles/defaultTheme.js');
+require('../../styles/provider.client.js');
+require('../../styles/css-vars.js');
+
+const TableRow = React.forwardRef(
+  ({ children, "data-testid": dataTestId, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        ref,
+        ...props,
+        "data-testid": dataTestId,
+        className: cx.cx(styles_module.default.tableRow, className),
+        children
+      }
+    );
+  }
+);
+
+exports.default = TableRow;

package/dist/cjs/Table/TableRow/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"tableRow":"vt_ce_TableRow_tableRow__20cdba2f"};
+
+exports.default = styles;