@servicetitan/table 25.1.0 → 25.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/table",
-    "version": "25.1.0",
+    "version": "25.2.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/table",
     "repository": {
@@ -37,9 +37,9 @@
         "memoize-one": "~6.0.0"
     },
     "devDependencies": {
-        "@servicetitan/data-query": "^25.1.0",
+        "@servicetitan/data-query": "^25.2.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^25.1.0",
+        "@servicetitan/form": "^25.2.0",
         "@servicetitan/react-ioc": "^21.6.0",
         "@servicetitan/suppress-warnings": "^21.6.0",
         "@types/accounting": "~0.4.2",
@@ -53,9 +53,9 @@
         "react": "~17.0.2"
     },
     "peerDependencies": {
-        "@servicetitan/data-query": "^25.1.0",
+        "@servicetitan/data-query": "^25.2.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^25.1.0",
+        "@servicetitan/form": "^25.2.0",
         "@servicetitan/react-ioc": ">21.0.0",
         "@servicetitan/suppress-warnings": ">21.0.0",
         "accounting": "~0.4.1",
@@ -72,5 +72,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "bb6fc7bc0d532fce0512a7cc6e008cf0a5bfc91f"
+    "gitHead": "5ce3b7761ea46df59cee9e036aec6eefadd3e0ad"
 }

package/src/demo/filters/async-select-filter.tsx

@@ -27,8 +27,8 @@ export const AsyncSelectDefaultExample: FC = provide({
             () =>
                 asyncSelectColumnMenuFilter({
                     dataFetcher: categoryFetcher,
-                    placeholder: 'Search for Categories',
                     multiple: true,
+                    contentMaxHeight: '250px',
                 }),
             [categoryFetcher]
         );

package/src/demo/filters/categories.tsx

@@ -31,6 +31,30 @@ export const categories: Category[] = [
         CategoryID: 10,
         CategoryName: 'Sashimi',
     },
+    {
+        CategoryID: 21,
+        CategoryName: 'Borsh',
+    },
+    {
+        CategoryID: 22,
+        CategoryName: 'Pasta Carbonara',
+    },
+    {
+        CategoryID: 23,
+        CategoryName: 'Caesar salad',
+    },
+    {
+        CategoryID: 24,
+        CategoryName: 'Ravioli',
+    },
+    {
+        CategoryID: 25,
+        CategoryName: 'Pizza',
+    },
+    {
+        CategoryID: 26,
+        CategoryName: 'Steak',
+    },
 ];
 
 export const CategoryCell: FC<TableCellProps> = props => {

package/src/demo/filters/multiselect-filter.tsx

@@ -19,6 +19,16 @@ export const MultiSelectDefaultExample: FC = provide({
             [madeInOptions]
         );
 
+        const categoryColumnMenu = useMemo(
+            () =>
+                multiSelectColumnMenuFilter(
+                    new Array(20).fill(0).map((_, index) => index),
+                    undefined,
+                    { contentMaxHeight: '250px' }
+                ),
+            []
+        );
+
         return (
             <Table tableState={tableState}>
                 <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
@@ -26,6 +36,11 @@ export const MultiSelectDefaultExample: FC = provide({
                 <TableColumn field="ProductName" title="Product Name" width="240px" />
 
                 <TableColumn field="MadeIn" title="Made In" columnMenu={madeInColumnMenu} />
+                <TableColumn
+                    field="CategoryID"
+                    title="CategoryID"
+                    columnMenu={categoryColumnMenu}
+                />
             </Table>
         );
     })

package/src/demo/filters/select-filter.tsx

@@ -0,0 +1,147 @@
+import { useMemo, FC, Fragment } from 'react';
+import { observer } from 'mobx-react';
+import { Banner } from '@servicetitan/design-system';
+import { provide, useDependencies } from '@servicetitan/react-ioc';
+
+import { Table, TableColumn, selectColumnMenuFilter, TableCellProps } from '../..';
+
+import { TableStore } from './table.store';
+import { categories, CategoryCell } from './categories';
+import { Product } from '../overview/product';
+
+export const PackageCell: FC<TableCellProps> = props => {
+    const { dataItem } = props;
+
+    return <td>{dataItem?.Package?.PackageName}</td>;
+};
+
+export const SelectAsyncExample: FC = provide({
+    singletons: [TableStore],
+})(
+    observer(() => {
+        const [{ categoryFetcherClean, madeInFetcherClean, tableState }] =
+            useDependencies(TableStore);
+
+        const madeInColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    dataFetcher: madeInFetcherClean,
+                    search: true,
+                }),
+            [madeInFetcherClean]
+        );
+
+        const categoryColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    dataFetcher: categoryFetcherClean,
+                    multiple: true,
+                    contentMaxHeight: '250px',
+                    valueSelector: item => item.CategoryID,
+                }),
+            [categoryFetcherClean]
+        );
+
+        return (
+            <Fragment>
+                <Banner title="Default filter with async select" className="m-b-2">
+                    Async select filter allows to choose one or several option from the list that
+                    will be fetched from BE. The list size is not limited, so you can also use
+                    search to find desired option.
+                    <br />
+                    Use it when there can be greater than 20 possible options
+                </Banner>
+                <Table tableState={tableState} striped={false}>
+                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                    <TableColumn field="ProductName" title="Product Name" width="240px" />
+                    <TableColumn
+                        field="MadeIn"
+                        title="Made In (async single-select filter)"
+                        columnMenu={madeInColumnMenu}
+                    />
+                    <TableColumn
+                        field="CategoryID"
+                        title="Category (async multi-select filter)"
+                        columnMenu={categoryColumnMenu}
+                        cell={CategoryCell}
+                    />
+                </Table>
+            </Fragment>
+        );
+    })
+);
+
+export const SelectSyncExample: FC = provide({
+    singletons: [TableStore],
+})(
+    observer(() => {
+        const [{ madeInOptions, packageOptions, tableState }] = useDependencies(TableStore);
+
+        const madeInColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    data: madeInOptions,
+                    search: {
+                        placeholder: 'Search for made-ins',
+                        filter: search => item => item.toLowerCase().includes(search),
+                    },
+                }),
+            [madeInOptions]
+        );
+
+        const categoryColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    data: categories,
+                    multiple: true,
+                    contentMaxHeight: '250px',
+                    valueSelector: item => item.CategoryID,
+                    renderItem: item => item.CategoryName,
+                    search: true,
+                }),
+            []
+        );
+
+        const packageColumnMenu = useMemo(
+            () =>
+                selectColumnMenuFilter({
+                    data: packageOptions,
+                    multiple: false,
+                    valueSelector: item => item.Id,
+                    renderItem: item => item.Name,
+                    rowValueSelector: (item: Product['Package']) => item?.PackageId,
+                }),
+            [packageOptions]
+        );
+
+        return (
+            <Fragment>
+                <Banner title="Default filter with sync select" className="m-b-2">
+                    Select filter allows to choose one or multiple option(s) from the provided list.
+                    You can pass simple options (string or number) or complex objects
+                </Banner>
+                <Table tableState={tableState} striped={false}>
+                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                    <TableColumn field="ProductName" title="Product Name" width="240px" />
+                    <TableColumn
+                        field="MadeIn"
+                        title="Made In (sync single-select filter)"
+                        columnMenu={madeInColumnMenu}
+                    />
+                    <TableColumn
+                        field="CategoryID"
+                        title="Category (sync multi-select filter)"
+                        columnMenu={categoryColumnMenu}
+                        cell={CategoryCell}
+                    />
+                    <TableColumn
+                        field="Package"
+                        title="Package (sync single-select filter)"
+                        columnMenu={packageColumnMenu}
+                        cell={PackageCell}
+                    />
+                </Table>
+            </Fragment>
+        );
+    })
+);

package/src/demo/filters/single-select-filter.tsx

@@ -27,10 +27,11 @@ export const SingleSelectDefaultExample: FC = provide({
                     options: categories,
                     renderItem: cat => (
                         <BodyText>
-                            <span className="fw-bold">cat.CategoryName</span> (#{cat.CategoryID})
+                            <span className="fw-bold">{cat.CategoryName}</span> (#{cat.CategoryID})
                         </BodyText>
                     ),
                     valueSelector: cat => cat.CategoryID,
+                    contentMaxHeight: '200px',
                 }),
             []
         );

package/src/demo/filters/table.store.ts

@@ -1,8 +1,13 @@
 import { injectable } from '@servicetitan/react-ioc';
 
-import { InMemoryDataSource, TableState, AsyncSelectFilterDataFetcher } from '../..';
+import {
+    InMemoryDataSource,
+    TableState,
+    AsyncSelectFilterDataFetcher,
+    SelectFilterDataFetcher,
+} from '../..';
 import { products } from '../overview/products';
-import { categories } from './categories';
+import { categories, Category } from './categories';
 
 @injectable()
 export class TableStore {
@@ -15,6 +20,22 @@ export class TableStore {
         return Array.from(new Set(products.map(p => p.MadeIn)));
     }
 
+    get packageOptions() {
+        const map = products.reduce(
+            (out, product) => ({
+                ...out,
+                ...(product.Package
+                    ? { [product.Package.PackageId]: product.Package.PackageName }
+                    : {}),
+            }),
+            {} as Record<number, string>
+        );
+
+        return Object.keys(map)
+            .map(Number)
+            .map(id => ({ Id: id, Name: map[id] }));
+    }
+
     categoryFetcher: AsyncSelectFilterDataFetcher<number> = async opts => {
         await new Promise(resolve => setTimeout(resolve, 1500));
 
@@ -39,6 +60,28 @@ export class TableStore {
         };
     };
 
+    categoryFetcherClean: SelectFilterDataFetcher<Category> = async opts => {
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        const sv = opts.search?.trim().toLowerCase();
+
+        return {
+            data: categories.filter(cat =>
+                sv ? cat.CategoryName.toLowerCase().includes(sv) : true
+            ),
+        };
+    };
+
+    madeInFetcherClean: SelectFilterDataFetcher<string> = async opts => {
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        const sv = opts.search?.trim().toLowerCase();
+
+        return {
+            data: this.madeInOptions.filter(opt => (sv ? opt.toLowerCase().includes(sv) : true)),
+        };
+    };
+
     private getDataSource() {
         return new InMemoryDataSource(products, row => row.ProductID);
     }

package/src/demo/overview/product.ts

@@ -13,6 +13,11 @@ export enum Supplier {
     Benjamin,
 }
 
+export interface ProductPackage {
+    PackageId: number;
+    PackageName: string;
+}
+
 export interface Product {
     ProductID: number;
     ProductName: string;
@@ -25,4 +30,5 @@ export interface Product {
     UnitsOnOrder: Date;
     Discontinued: boolean;
     AvailableFor?: UserRole;
+    Package?: ProductPackage;
 }

package/src/demo/overview/products.ts

@@ -13,6 +13,10 @@ export const products: Product[] = [
         UnitsOnOrder: new Date('1/11/2023'),
         Discontinued: false,
         AvailableFor: UserRole.Admin,
+        Package: {
+            PackageId: 1,
+            PackageName: 'Standard package',
+        },
     },
     {
         ProductID: 2,
@@ -25,6 +29,10 @@ export const products: Product[] = [
         UnitsInStock: 17,
         UnitsOnOrder: new Date('2/11/2023'),
         Discontinued: false,
+        Package: {
+            PackageId: 1,
+            PackageName: 'Standard package',
+        },
     },
     {
         ProductID: 3,
@@ -63,6 +71,10 @@ export const products: Product[] = [
         UnitsOnOrder: new Date('5/11/2023'),
         Discontinued: true,
         AvailableFor: UserRole.GeneralOffice,
+        Package: {
+            PackageId: 2,
+            PackageName: 'Extended package',
+        },
     },
     {
         ProductID: 6,

package/src/demo/overview/table.store.ts

@@ -65,6 +65,7 @@ export class TableStore {
                 ),
                 Discontinued: new FieldState(false),
                 AvailableFor: new FieldState<UserRole | undefined>(undefined),
+                Package: new FieldState<Product['Package'] | undefined>(undefined),
             }),
             row
         );

package/src/filters/async-select/async-select-filter.tsx

@@ -10,7 +10,10 @@ import {
 } from '@servicetitan/design-system';
 import { IdType } from '@servicetitan/data-query';
 
-import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import {
+    CustomColumnMenuFilterSingleOpts,
+    renderCustomColumnMenuFilter,
+} from '../column-menu-filters';
 import { makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 
@@ -25,7 +28,7 @@ export interface AsyncSelectItem<TV extends IdType = IdType> {
 }
 
 interface SelectorProps<TID extends IdType, TO extends AsyncSelectItem<TID>> {
-    placeholder: string;
+    placeholder?: string;
     selected: TO[];
     dataFetcher: AsyncSelectFilterDataFetcher<TID, TO>;
     itemComponent: FC<SelectorItemProps>;
@@ -174,9 +177,10 @@ const SelectorItemMultiple: FC<SelectorItemProps> = ({ option, renderer, checked
     />
 );
 
-export interface AsyncSelectFilterOptions<TID extends IdType, TO extends AsyncSelectItem<TID>> {
+export interface AsyncSelectFilterOptions<TID extends IdType, TO extends AsyncSelectItem<TID>>
+    extends CustomColumnMenuFilterSingleOpts {
     dataFetcher: AsyncSelectFilterDataFetcher<TID, TO>;
-    placeholder: string;
+    placeholder?: string;
     multiple?: boolean;
     renderItem?: (item: TO) => ReactNode;
 }
@@ -185,13 +189,20 @@ interface TableFilterCellPropsTyped<T = any> extends Omit<TableFilterCellProps,
     value?: T;
 }
 
-export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends AsyncSelectItem<TID>>(
-    options: AsyncSelectFilterOptions<TID, TO>
-) {
+/**
+ * @deprecated use selectColumnMenuFilter instead
+ */
+export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends AsyncSelectItem<TID>>({
+    dataFetcher,
+    placeholder,
+    multiple,
+    renderItem,
+    ...opts
+}: AsyncSelectFilterOptions<TID, TO>) {
     const contains = (value: TID, options?: TO[]) => options?.some(opt => opt.value === value);
     const equals = (value: TID, option?: TO) => option?.value === value;
 
-    const FilterCell = options.multiple
+    const FilterCell = multiple
         ? ({ value, onChange }: TableFilterCellPropsTyped<TO[]>) => {
               const handleChange = (
                   option: TO,
@@ -214,9 +225,9 @@ export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends Async
                       selected={value ?? []}
                       itemComponent={SelectorItemMultiple}
                       onChange={handleChange}
-                      placeholder={options.placeholder}
-                      renderer={options.renderItem}
-                      dataFetcher={options.dataFetcher}
+                      placeholder={placeholder}
+                      renderer={renderItem}
+                      dataFetcher={dataFetcher}
                   />
               );
           }
@@ -238,12 +249,12 @@ export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends Async
                       selected={value ? [value] : []}
                       onChange={handleChange}
                       itemComponent={SelectorItemSingle}
-                      placeholder={options.placeholder}
-                      renderer={options.renderItem}
-                      dataFetcher={options.dataFetcher}
+                      placeholder={placeholder}
+                      renderer={renderItem}
+                      dataFetcher={dataFetcher}
                   />
               );
           };
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }

package/src/filters/column-menu-filters.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC } from 'react';
+import { ComponentType, CSSProperties, FC } from 'react';
 import {
     TableColumnMenuFilter,
     TableColumnMenuProps,
@@ -11,35 +11,58 @@ export const StandardColumnMenuFilter = (props: TableColumnMenuProps) => (
     <TableColumnMenuFilter {...props} expanded />
 );
 
+export interface CustomColumnMenuFilterSingleOpts {
+    contentMaxHeight?: string;
+    contentClassName?: string;
+}
+export interface CustomColumnMenuFilterDoubleOpts {
+    double?: boolean;
+    doubleContentClassName?: string;
+}
+
+export type CustomColumnMenuFilterOpts = CustomColumnMenuFilterSingleOpts &
+    CustomColumnMenuFilterDoubleOpts;
+
 export function renderCustomColumnMenuFilter(
     FilterCell: ComponentType<TableFilterCellProps>,
-    double?: boolean
+    doubleOrOptions?: boolean | CustomColumnMenuFilterOpts
 ) {
-    const filterUI: FC<TableColumnMenuFilterUIProps> = ({
+    const opts: CustomColumnMenuFilterOpts =
+        typeof doubleOrOptions === 'boolean' ? { double: doubleOrOptions } : doubleOrOptions ?? {};
+    const FilterUI: FC<TableColumnMenuFilterUIProps> = ({
         firstFilterProps,
         secondFilterProps,
         logicData,
         logicValue,
         onLogicChange,
-    }) => (
-        <div>
-            <FilterCell {...firstFilterProps} />
-            {double && (
-                <div>
-                    <DropDownList
-                        data={logicData}
-                        value={logicValue}
-                        onChange={onLogicChange}
-                        className="k-filter-and m-b-1"
-                        textField="text"
-                    />
-                    <FilterCell {...secondFilterProps} />
-                </div>
-            )}
-        </div>
-    );
+    }) => {
+        const contentStyles: CSSProperties = {};
+
+        if (opts.contentMaxHeight) {
+            contentStyles.maxHeight = opts.contentMaxHeight;
+            contentStyles.overflowY = 'auto';
+        }
+
+        return (
+            <div className={opts.contentClassName} style={contentStyles}>
+                <FilterCell {...firstFilterProps} />
+                {!!opts.double && (
+                    <div className={opts.doubleContentClassName}>
+                        <DropDownList
+                            data={logicData}
+                            value={logicValue}
+                            onChange={onLogicChange}
+                            className="k-filter-and m-b-1"
+                            textField="text"
+                        />
+                        <FilterCell {...secondFilterProps} />
+                    </div>
+                )}
+            </div>
+        );
+    };
 
     return (props: TableColumnMenuProps) => (
-        <TableColumnMenuFilter {...props} filterUI={filterUI} expanded />
+        <TableColumnMenuFilter {...props} filterUI={FilterUI} expanded />
     );
 }

package/src/filters/index.ts

@@ -8,3 +8,4 @@ export * from './multiselect-filter/multiselect-filter';
 export * from './numeric-filter-extended/numeric-filter-extended';
 export * from './single-select/single-select-filter';
 export * from './async-select/async-select-filter';
+export * from './select-filter/select-filter';

package/src/filters/multiselect-filter/multiselect-filter.tsx

@@ -2,7 +2,10 @@ import { Component, SyntheticEvent, ReactNode, FC } from 'react';
 
 import { TableFilterCellProps, Checkbox } from '@servicetitan/design-system';
 
-import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import {
+    CustomColumnMenuFilterSingleOpts,
+    renderCustomColumnMenuFilter,
+} from '../column-menu-filters';
 
 interface SelectorProps<T> {
     options: T[];
@@ -37,7 +40,11 @@ class Selector<T> extends Component<SelectorProps<T>> {
     }
 }
 
-export function multiSelectColumnMenuFilter<T>(data: T[], renderItem?: (item: T) => ReactNode) {
+export function multiSelectColumnMenuFilter<T>(
+    data: T[],
+    renderItem?: (item: T) => ReactNode,
+    opts?: CustomColumnMenuFilterSingleOpts
+) {
     const FilterCell: FC<TableFilterCellProps> = ({ value, onChange }) => {
         const handleChange = (value: T[] | undefined, event: SyntheticEvent<HTMLInputElement>) => {
             onChange({
@@ -57,12 +64,13 @@ export function multiSelectColumnMenuFilter<T>(data: T[], renderItem?: (item: T)
         );
     };
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }
 
 export function complexItemMultiSelectColumnMenuFilter<T>(
     data: T[],
-    renderItem?: (item: T) => ReactNode
+    renderItem?: (item: T) => ReactNode,
+    opts?: CustomColumnMenuFilterSingleOpts
 ) {
     class FilterCell extends Component<TableFilterCellProps> {
         contains = (item: any) => {
@@ -93,12 +101,13 @@ export function complexItemMultiSelectColumnMenuFilter<T>(
         }
     }
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }
 
 export function multiItemMultiSelectColumnMenuFilter<T>(
     data: T[],
-    renderItem?: (item: T) => ReactNode
+    renderItem?: (item: T) => ReactNode,
+    opts?: CustomColumnMenuFilterSingleOpts
 ) {
     class FilterCell extends Component<TableFilterCellProps> {
         contains = (item: any) => {
@@ -129,5 +138,5 @@ export function multiItemMultiSelectColumnMenuFilter<T>(
         }
     }
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }

package/src/filters/select-filter/__tests__/object-search.test.ts

@@ -0,0 +1,32 @@
+import { objectSearch } from '../object-search';
+
+describe('objectSearch', () => {
+    const obj = () => ({
+        id: 12345,
+        name: 'Some Name',
+        active: true,
+        category: null,
+    });
+
+    test('search and find in simple string', () => {
+        expect(objectSearch('iMPl')('sImplE String')).toBe(true);
+    });
+    test('search and not find in simple string', () => {
+        expect(objectSearch('iMoPl')('sImplE String')).toBe(false);
+    });
+
+    test('search simple number', () => {
+        expect(objectSearch('23')(12345)).toBe(false);
+    });
+
+    test('search null', () => {
+        expect(objectSearch('23')(null)).toBe(false);
+    });
+
+    test('search and find in object', () => {
+        expect(objectSearch('Me ')(obj())).toBe(true);
+    });
+    test('search and not find in object', () => {
+        expect(objectSearch('Mee')(obj)).toBe(false);
+    });
+});