@veritone-ce/design-system 1.12.46 → 1.12.48

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

@@ -1,18 +1,18 @@
+import { PopoverProps } from '@mui/material';
 import React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 export type MenuOption = {
-    label: string;
+    label: React.ReactNode;
     icon?: React.ReactElement;
+    onSelect(): void;
 };
 export type MenuFlyoutProps = {
     'data-testid'?: string;
     open: boolean;
+    anchorEl?: PopoverProps['anchorEl'];
     onClose?: {
         bivarianceHack(event: Event, reason: 'backdropClick' | 'escapeKeyDown'): void;
     }['bivarianceHack'];
-    /**
-     An array of objects of type `MenuOption[]`. Each object in this array **requires** a label property of type `string` and an **optional** icon property of type `React.ReactElement`. Each object represents a list item on the menu flyout component.
-    **/
     menuOptions: MenuOption[];
     sx?: SxProps<Theme>;
     className?: string;

package/dist/types/components/Table/AutoTable/common.d.ts

@@ -0,0 +1,25 @@
+import { ColumnDef as RTColumnDef, PaginationState, Row, RowSelectionState, SortingState, RowData } from '@tanstack/react-table';
+import type { ColumnDef, ColumnHelper } from './types.js';
+export declare function createColumnHelper<TData extends RowData, TMeta = unknown>(): ColumnHelper<TData, TMeta>;
+export type AutoTableHookOptions<TData, TMeta = unknown> = {
+    data: TData[];
+    columns: ColumnDef<TData, TMeta>[];
+    meta?: TMeta;
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    sorting: SortingState;
+    enableSorting: boolean;
+    onSortingChange(newSorting: SortingState): void;
+    manualSorting?: boolean;
+    rowSelection: RowSelectionState;
+    enableRowSelection: boolean;
+    onRowSelectionChange(newRowSelection: RowSelectionState): void;
+    pagination: PaginationState;
+    enablePagination: boolean;
+    onPageChange(newPage: number): void;
+    onRowsPerPageChange(newRowsPerPage: number): void;
+    manualPagination?: boolean;
+    manualRowCount?: number;
+};
+export declare function useAutoTable<TData, TMeta = unknown>(options: AutoTableHookOptions<TData, TMeta>): import("@tanstack/react-table").Table<TData>;
+export declare function mapColumnDefs<TData, TMeta>(columnDefs: ColumnDef<TData, TMeta>[]): RTColumnDef<TData>[];
+export declare function mapColumnDef<TData, TMeta, VData = unknown>(columnDef: ColumnDef<TData, TMeta, VData>): RTColumnDef<TData, VData>;

package/dist/types/components/Table/AutoTable/controlled.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { AutoTableHookOptions } from './common.js';
+export type ControlledAutoTableProps<TData, TMeta = unknown> = AutoTableHookOptions<TData, TMeta> & {
+    stickyHeader?: boolean | {
+        offset: number;
+    };
+    loading?: boolean;
+    zeroStateMessage?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export default function ControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, sx, className, ...options }: ControlledAutoTableProps<TData, TMeta>): React.JSX.Element;

package/dist/types/components/Table/AutoTable/index.d.ts

@@ -0,0 +1,44 @@
+import { SortingState, RowSelectionState, Row } from '@tanstack/react-table';
+import React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ColumnDef } from './types.js';
+export { createColumnHelper } from './common.js';
+export type AutoTableProps<TData, TMeta = unknown> = {
+    data: TData[];
+    columns: ColumnDef<TData, TMeta>[];
+    meta?: TMeta;
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    /** controlled sorting */
+    sorting?: SortingState;
+    /** uncontrolled sorting */
+    defaultSorting?: SortingState;
+    enableSorting?: boolean;
+    onSortingChange?(newSorting: SortingState): void;
+    manualSorting?: boolean;
+    rowSelection?: RowSelectionState;
+    enableRowSelection?: boolean;
+    onRowSelectionChange?(newRowSelection: RowSelectionState): void;
+    page?: number;
+    rowsPerPage?: number;
+    enablePagination?: boolean;
+    onPageChange?(newPage: number): void;
+    onRowsPerPageChange?(newRowsPerPage: number): void;
+    manualRowCount?: number;
+    virtualizer?: {
+        scrollOffset?: number;
+        getScrollElement: () => Element | null;
+        renderWhenNotVisible?: boolean;
+        rowSize: number;
+        headerSize?: number;
+        overscan?: number;
+    };
+    stickyHeader?: boolean | {
+        offset: number;
+    };
+    loading?: boolean;
+    zeroStateMessage?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+declare function AutoTable<TData, TMeta = unknown>(props: AutoTableProps<TData, TMeta>): React.JSX.Element;
+export default AutoTable;

package/dist/types/components/Table/AutoTable/types.d.ts

@@ -0,0 +1,106 @@
+export { type SortingState } from '@tanstack/react-table';
+import { AccessorFn, Cell, Column, ColumnDefTemplate, ColumnMeta, DeepKeys, DeepValue, Getter, Header, Row, RowData, SortingFnOption, Table } from '@tanstack/react-table';
+export type InternalColumnMeta = {
+    noVerticalPadding?: boolean;
+};
+export type ColumnHelper<TData extends RowData, TMeta> = {
+    accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? DisplayColumnDef<TData, TMeta, TValue> : IdentifiedColumnDef<TData, TMeta, TValue>) => AccessorColumnDef<TData, TMeta, TValue>;
+    display: (column: DisplayColumnDef<TData, TMeta>) => ColumnDef<TData, TMeta, unknown>;
+};
+export interface HeaderContext<TData, TMeta, TValue> {
+    /**
+     * An instance of a column.
+     */
+    column: Column<TData, TValue>;
+    /**
+     * An instance of a header.
+     */
+    header: Header<TData, TValue>;
+    /**
+     * The table instance.
+     */
+    table: Table<TData>;
+    meta: TMeta;
+}
+export type StringOrTemplateHeader<TData, TMeta, TValue> = string | ColumnDefTemplate<HeaderContext<TData, TMeta, TValue>>;
+interface StringHeaderIdentifier {
+    header: string;
+    id?: string;
+}
+interface IdIdentifier<TData extends RowData, TMeta, TValue> {
+    id: string;
+    header?: StringOrTemplateHeader<TData, TMeta, TValue>;
+}
+type ColumnIdentifiers<TData extends RowData, TMeta, TValue> = IdIdentifier<TData, TMeta, TValue> | StringHeaderIdentifier;
+export interface IdentifiedColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> extends ColumnDefBase<TData, TMeta, TValue> {
+    id?: string;
+    header?: StringOrTemplateHeader<TData, TMeta, TValue>;
+}
+export interface CellContext<TData extends RowData, TMeta, TValue> {
+    cell: Cell<TData, TValue>;
+    column: Column<TData, TValue>;
+    getValue: Getter<TValue>;
+    renderValue: Getter<TValue | null>;
+    row: Row<TData>;
+    table: Table<TData>;
+    meta: TMeta;
+}
+export interface ColumnDefBase<TData extends RowData, TMeta = unknown, TValue = unknown> {
+    getUniqueValues?: AccessorFn<TData, unknown[]>;
+    meta?: ColumnMeta<TData, TValue>;
+    cell?: ColumnDefTemplate<CellContext<TData, TMeta, TValue>>;
+    noVerticalPadding?: boolean;
+    /**
+     * Enables/Disables multi-sorting for this column.
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#enablemultisort)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    enableMultiSort?: boolean;
+    /**
+     * Enables/Disables sorting for this column.
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#enablesorting)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    enableSorting?: boolean;
+    /**
+     * Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#invertsorting)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    invertSorting?: boolean;
+    /**
+     * Set to `true` for sorting toggles on this column to start in the descending direction.
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#sortdescfirst)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    sortDescFirst?: boolean;
+    /**
+     * The sorting function to use with this column.
+     * - A `string` referencing a built-in sorting function
+     * - A custom sorting function
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#sortingfn)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    sortingFn?: SortingFnOption<TData>;
+    /**
+     * - `false`
+     *   - Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies)
+     * - `-1`
+     *   - Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list)
+     * - `1`
+     *   - Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)
+     */
+    sortUndefined?: false | -1 | 1;
+}
+export type DisplayColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> = ColumnDefBase<TData, TMeta, TValue> & ColumnIdentifiers<TData, TMeta, TValue>;
+interface AccessorFnColumnDefBase<TData extends RowData, TMeta, TValue = unknown> extends ColumnDefBase<TData, TMeta, TValue> {
+    accessorFn: AccessorFn<TData, TValue>;
+}
+export type AccessorFnColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> = AccessorFnColumnDefBase<TData, TMeta, TValue> & ColumnIdentifiers<TData, TMeta, TValue>;
+interface AccessorKeyColumnDefBase<TData extends RowData, TMeta, TValue = unknown> extends ColumnDefBase<TData, TMeta, TValue> {
+    id?: string;
+    accessorKey: (string & {}) | keyof TData;
+}
+export type AccessorKeyColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> = AccessorKeyColumnDefBase<TData, TMeta, TValue> & Partial<ColumnIdentifiers<TData, TMeta, TValue>>;
+export type AccessorColumnDef<TData extends RowData, TMeta, TValue = unknown> = AccessorKeyColumnDef<TData, TMeta, TValue> | AccessorFnColumnDef<TData, TMeta, TValue>;
+export type ColumnDef<TData extends RowData, TMeta = unknown, TValue = unknown> = DisplayColumnDef<TData, TMeta, TValue> | AccessorColumnDef<TData, TMeta, TValue>;

package/dist/types/components/Table/AutoTable/virtual.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { AutoTableHookOptions } from './common.js';
+export type VirtualControlledAutoTableProps<TData, TMeta = unknown> = AutoTableHookOptions<TData, TMeta> & {
+    stickyHeader?: boolean | {
+        offset: number;
+    };
+    loading?: boolean;
+    zeroStateMessage?: React.ReactNode;
+    scrollOffset?: number;
+    getScrollElement: () => Element | null;
+    renderWhenNotVisible?: boolean;
+    rowSize: number;
+    headerSize?: number;
+    overscan?: number;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export default function VirtualControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, scrollOffset, getScrollElement, renderWhenNotVisible, rowSize, headerSize, overscan, sx, className, ...options }: VirtualControlledAutoTableProps<TData, TMeta>): React.JSX.Element;

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

@@ -1,5 +1,4 @@
-import { TableSortLabelProps as MuiTableSortLabelProps } from '@mui/material';
-import React from 'react';
+import React, { ChangeEvent, MouseEventHandler } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 export type TableProps = {
     'data-testid'?: string;
@@ -22,8 +21,7 @@ export type TableBodyProps = {
     className?: string;
 };
 export declare const TableBody: (props: TableBodyProps) => React.JSX.Element;
-export type TableCellProps = {
-    'data-testid'?: string;
+type CommonTableCellProps = {
     variant?: 'header' | 'data';
     align?: 'left' | 'center' | 'right' | 'justify' | 'inherit';
     colSpan?: number;
@@ -32,18 +30,27 @@ export type TableCellProps = {
     scope?: string;
     abbr?: string;
     sortDirection?: 'asc' | 'desc' | false;
+};
+export type TableCellProps = CommonTableCellProps & {
+    'data-testid'?: string;
     children?: React.ReactNode;
+    noVerticalPadding?: boolean;
     sx?: SxProps<Theme>;
     className?: string;
 };
 export declare const TableCell: ({ variant, ...props }: TableCellProps) => React.JSX.Element;
-export type TableContainerProps = {
+export type SelectionTableCellProps = CommonTableCellProps & {
     'data-testid'?: string;
-    children?: React.ReactNode;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange?(event: ChangeEvent<HTMLInputElement>, checked: boolean): void;
     sx?: SxProps<Theme>;
     className?: string;
+    checkboxSx?: SxProps<Theme>;
+    checkboxClassName?: string;
 };
-export declare const TableContainer: (props: TableContainerProps) => React.JSX.Element;
+export declare const SelectionTableCell: ({ checked, indeterminate, disabled, onChange, sx, className, checkboxSx, checkboxClassName, ...cellProps }: SelectionTableCellProps) => React.JSX.Element;
 export type TableFooterProps = {
     'data-testid'?: string;
     children?: React.ReactNode;
@@ -109,5 +116,35 @@ export type TableRowProps = {
 export declare const TableRow: (props: TableRowProps) => React.JSX.Element;
 export type TableSortLabelProps = {
     'data-testid'?: string;
-} & MuiTableSortLabelProps;
+    /**
+     * If `true`, the label will have the active styling (should be true for the sorted column).
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Label contents, the arrow will be appended automatically.
+     */
+    children?: React.ReactNode;
+    /**
+     * The current sort direction.
+     * @default 'asc'
+     */
+    direction?: 'asc' | 'desc';
+    /**
+     * Hide sort icon when active is false.
+     * @default false
+     */
+    hideSortIcon?: boolean;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
 export declare const TableSortLabel: (props: TableSortLabelProps) => React.JSX.Element;
+export type TableZeroStateProps = {
+    children: React.ReactNode;
+    sx?: SxProps<Theme>;
+    className?: string;
+};
+export declare const TableZeroState: (props: TableZeroStateProps) => React.JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -12,10 +12,12 @@ export { default as Checkbox } from './components/Checkbox/index.js';
 export type { CheckboxProps } from './components/Checkbox/index.js';
 export { default as Drawer } from './components/Drawer/index.js';
 export type { DrawerProps } from './components/Drawer/index.js';
-export { default as FileUploader } from './components/FileUploader/index.js';
-export type { FileUploaderProps } from './components/FileUploader/index.js';
+export { default as FileUploader, useFileUploader } from './components/FileUploader/index.js';
+export type { FileUploaderProps, UseFileUploaderOptions } from './components/FileUploader/index.js';
 export { default as FormControlLabel } from './components/FormControlLabel/index.js';
 export type { FormControlLabelProps } from './components/FormControlLabel/index.js';
+export { default as IconButton } from './components/IconButton/index.js';
+export type { IconButtonProps } from './components/IconButton/index.js';
 export { default as Input } from './components/Input/index.js';
 export type { InputProps } from './components/Input/index.js';
 export { default as LinearProgress } from './components/LinearProgress/index.js';
@@ -52,8 +54,15 @@ export { default as StepLabel } from './components/StepLabel/index.js';
 export type { StepLabelProps } from './components/StepLabel/index.js';
 export { default as Stepper } from './components/Stepper/index.js';
 export type { StepperProps } from './components/Stepper/index.js';
-export { Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel } from './components/Table/index.js';
-export type { TableProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableRowProps, TableSortLabelProps } from './components/Table/index.js';
+export { Table, TableBody, TableCell, SelectionTableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel, TableZeroState } from './components/Table/index.js';
+export type { TableProps, TableBodyProps, TableCellProps, SelectionTableCellProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableRowProps, TableSortLabelProps, TableZeroStateProps } from './components/Table/index.js';
+export { default as AutoTable, createColumnHelper } from './components/Table/AutoTable/index.js';
+export type { AutoTableProps } from './components/Table/AutoTable/index.js';
+export { default as ControlledAutoTable } from './components/Table/AutoTable/controlled.js';
+export type { ControlledAutoTableProps } from './components/Table/AutoTable/controlled.js';
+export { default as VirtualControlledAutoTable } from './components/Table/AutoTable/virtual.js';
+export type { VirtualControlledAutoTableProps } from './components/Table/AutoTable/virtual.js';
+export type * from './components/Table/AutoTable/types.js';
 export { default as Tabs } from './components/Tabs/index.js';
 export type { BasicTabsProps, Tab } from './components/Tabs/index.js';
 export { default as ThemeProvider } from './components/ThemeProvider/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.46",
+  "version": "1.12.48",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [
@@ -60,6 +60,8 @@
     }
   },
   "dependencies": {
+    "@tanstack/react-table": "^8.10.7",
+    "@tanstack/react-virtual": "^v3.0.0-beta.68",
     "deepmerge": "^4.3.1",
     "react-dropzone": "^14.2.3"
   },
@@ -75,6 +77,7 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@faker-js/faker": "^8.2.0",
     "@fontsource/dosis": "^5.0.5",
     "@fontsource/nunito-sans": "^5.0.5",
     "@mui/icons-material": "^5.10.6",