@servicetitan/table 31.2.0 → 32.0.0

package/dist/demo/filters/single-select-filter.js

@@ -7,30 +7,121 @@ import { TableStore } from './table.store';
 import { categories, CategoryCell } from './categories';
 import { Banner, BodyText } from '@servicetitan/design-system';
 export const SingleSelectDefaultExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    singletons: [
+        TableStore
+    ]
+})(observer(()=>{
     const [{ tableState, madeInOptions }] = useDependencies(TableStore);
-    const madeInColumnMenu = useMemo(() => singleSelectColumnMenuFilter({ options: madeInOptions }), [madeInOptions]);
-    const categoryColumnMenu = useMemo(() => singleSelectColumnMenuFilter({
-        options: categories,
-        renderItem: cat => (_jsxs(BodyText, { children: [_jsx("span", { className: "fw-bold", children: cat.CategoryName }), " (#", cat.CategoryID, ")"] })),
-        valueSelector: cat => cat.CategoryID,
-        contentMaxHeight: '200px',
-    }), []);
-    return (_jsxs(Fragment, { children: [_jsxs(Banner, { title: "Default filter with single select", className: "m-b-2", children: ["Single select filter allows to choose one option from the provided list. You can pass simple options (string or number) or complex objects", _jsx("br", {}), "Use it when options list is fixed and less than 20 items"] }), _jsxs(Table, { tableState: tableState, striped: false, children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", width: "240px" }), _jsx(TableColumn, { field: "MadeIn", title: "Made In (simple single-select filter)", columnMenu: madeInColumnMenu }), _jsx(TableColumn, { field: "CategoryID", title: "Category (simple single-select filter)", columnMenu: categoryColumnMenu, cell: CategoryCell })] })] }));
+    const madeInColumnMenu = useMemo(()=>singleSelectColumnMenuFilter({
+            options: madeInOptions
+        }), [
+        madeInOptions
+    ]);
+    const categoryColumnMenu = useMemo(()=>singleSelectColumnMenuFilter({
+            options: categories,
+            renderItem: (cat)=>/*#__PURE__*/ _jsxs(BodyText, {
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "fw-bold",
+                            children: cat.CategoryName
+                        }),
+                        " (#",
+                        cat.CategoryID,
+                        ")"
+                    ]
+                }),
+            valueSelector: (cat)=>cat.CategoryID,
+            contentMaxHeight: '200px'
+        }), []);
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Banner, {
+                title: "Default filter with single select",
+                className: "m-b-2",
+                children: [
+                    "Single select filter allows to choose one option from the provided list. You can pass simple options (string or number) or complex objects",
+                    /*#__PURE__*/ _jsx("br", {}),
+                    "Use it when options list is fixed and less than 20 items"
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Table, {
+                tableState: tableState,
+                striped: false,
+                children: [
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "ProductID",
+                        title: "ID",
+                        editable: false,
+                        width: "100px"
+                    }),
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "ProductName",
+                        title: "Product Name",
+                        width: "240px"
+                    }),
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "MadeIn",
+                        title: "Made In (simple single-select filter)",
+                        columnMenu: madeInColumnMenu
+                    }),
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "CategoryID",
+                        title: "Category (simple single-select filter)",
+                        columnMenu: categoryColumnMenu,
+                        cell: CategoryCell
+                    })
+                ]
+            })
+        ]
+    });
 }));
 export const SingleSelectCustomFilterExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    singletons: [
+        TableStore
+    ]
+})(observer(()=>{
     const [{ tableState }] = useDependencies(TableStore);
-    const productNameCustomFilter = useMemo(() => {
-        const isVowel = (str) => /[aeiou]/i.test(str[0]);
+    const productNameCustomFilter = useMemo(()=>{
+        const isVowel = (str)=>/[aeiou]/i.test(str[0]);
         return singleSelectColumnMenuFilter({
-            options: [0, 1],
-            renderItem: item => (item ? 'Start with Vowel' : 'Start with Consonants'),
-            filterOperator: (madeIn, value) => madeIn ? (value ? isVowel(madeIn) : !isVowel(madeIn)) : false,
+            options: [
+                0,
+                1
+            ],
+            renderItem: (item)=>item ? 'Start with Vowel' : 'Start with Consonants',
+            filterOperator: (madeIn, value)=>madeIn ? value ? isVowel(madeIn) : !isVowel(madeIn) : false
         });
     }, []);
-    return (_jsxs(Fragment, { children: [_jsxs(Banner, { title: "Default filter with single select", className: "m-b-2", children: ["Single select filter allows to choose one option from the provided list. You can pass simple options (string or number) or complex objects", _jsx("br", {}), "Custom filter allows you to provide custom filtering options"] }), _jsxs(Table, { tableState: tableState, striped: false, children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name (custom single-select filter)", columnMenu: productNameCustomFilter })] })] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Banner, {
+                title: "Default filter with single select",
+                className: "m-b-2",
+                children: [
+                    "Single select filter allows to choose one option from the provided list. You can pass simple options (string or number) or complex objects",
+                    /*#__PURE__*/ _jsx("br", {}),
+                    "Custom filter allows you to provide custom filtering options"
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Table, {
+                tableState: tableState,
+                striped: false,
+                children: [
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "ProductID",
+                        title: "ID",
+                        editable: false,
+                        width: "100px"
+                    }),
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "ProductName",
+                        title: "Product Name (custom single-select filter)",
+                        columnMenu: productNameCustomFilter
+                    })
+                ]
+            })
+        ]
+    });
 }));
+
 //# sourceMappingURL=single-select-filter.js.map

package/dist/demo/filters/single-select-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/demo/filters/single-select-filter.tsx"],"sourcesContent":["import { useMemo, FC, Fragment } from 'react';\n\nimport { provide, useDependencies } from '@servicetitan/react-ioc';\n\nimport { observer } from 'mobx-react';\n\nimport { Table, TableColumn, singleSelectColumnMenuFilter } from '../..';\n\nimport { TableStore } from './table.store';\nimport { categories, CategoryCell } from './categories';\nimport { Banner, BodyText } from '@servicetitan/design-system';\n\nexport const SingleSelectDefaultExample: FC = provide({\n    singletons: [TableStore],\n})(\n    observer(() => {\n        const [{ tableState, madeInOptions }] = useDependencies(TableStore);\n\n        const madeInColumnMenu = useMemo(\n            () => singleSelectColumnMenuFilter({ options: madeInOptions }),\n            [madeInOptions]\n        );\n\n        const categoryColumnMenu = useMemo(\n            () =>\n                singleSelectColumnMenuFilter({\n                    options: categories,\n                    renderItem: cat => (\n                        <BodyText>\n                            <span className=\"fw-bold\">{cat.CategoryName}</span> (#{cat.CategoryID})\n                        </BodyText>\n                    ),\n                    valueSelector: cat => cat.CategoryID,\n                    contentMaxHeight: '200px',\n                }),\n            []\n        );\n\n        return (\n            <Fragment>\n                <Banner title=\"Default filter with single select\" className=\"m-b-2\">\n                    Single select filter allows to choose one option from the provided list. You can\n                    pass simple options (string or number) or complex objects\n                    <br />\n                    Use it when options list is fixed and less than 20 items\n                </Banner>\n                <Table tableState={tableState} striped={false}>\n                    <TableColumn field=\"ProductID\" title=\"ID\" editable={false} width=\"100px\" />\n                    <TableColumn field=\"ProductName\" title=\"Product Name\" width=\"240px\" />\n                    <TableColumn\n                        field=\"MadeIn\"\n                        title=\"Made In (simple single-select filter)\"\n                        columnMenu={madeInColumnMenu}\n                    />\n                    <TableColumn\n                        field=\"CategoryID\"\n                        title=\"Category (simple single-select filter)\"\n                        columnMenu={categoryColumnMenu}\n                        cell={CategoryCell}\n                    />\n                </Table>\n            </Fragment>\n        );\n    })\n);\n\nexport const SingleSelectCustomFilterExample: FC = provide({\n    singletons: [TableStore],\n})(\n    observer(() => {\n        const [{ tableState }] = useDependencies(TableStore);\n\n        const productNameCustomFilter = useMemo(() => {\n            const isVowel = (str: string) => /[aeiou]/i.test(str[0]);\n\n            return singleSelectColumnMenuFilter({\n                options: [0, 1],\n                renderItem: item => (item ? 'Start with Vowel' : 'Start with Consonants'),\n                filterOperator: (madeIn: string, value: number) =>\n                    madeIn ? (value ? isVowel(madeIn) : !isVowel(madeIn)) : false,\n            });\n        }, []);\n\n        return (\n            <Fragment>\n                <Banner title=\"Default filter with single select\" className=\"m-b-2\">\n                    Single select filter allows to choose one option from the provided list. You can\n                    pass simple options (string or number) or complex objects\n                    <br />\n                    Custom filter allows you to provide custom filtering options\n                </Banner>\n                <Table tableState={tableState} striped={false}>\n                    <TableColumn field=\"ProductID\" title=\"ID\" editable={false} width=\"100px\" />\n                    <TableColumn\n                        field=\"ProductName\"\n                        title=\"Product Name (custom single-select filter)\"\n                        columnMenu={productNameCustomFilter}\n                    />\n                </Table>\n            </Fragment>\n        );\n    })\n);\n"],"names":["useMemo","Fragment","provide","useDependencies","observer","Table","TableColumn","singleSelectColumnMenuFilter","TableStore","categories","CategoryCell","Banner","BodyText","SingleSelectDefaultExample","singletons","tableState","madeInOptions","madeInColumnMenu","options","categoryColumnMenu","renderItem","cat","span","className","CategoryName","CategoryID","valueSelector","contentMaxHeight","title","br","striped","field","editable","width","columnMenu","cell","SingleSelectCustomFilterExample","productNameCustomFilter","isVowel","str","test","item","filterOperator","madeIn","value"],"mappings":";AAAA,SAASA,OAAO,EAAMC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,OAAO,EAAEC,eAAe,QAAQ,0BAA0B;AAEnE,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,KAAK,EAAEC,WAAW,EAAEC,4BAA4B,QAAQ,QAAQ;AAEzE,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,UAAU,EAAEC,YAAY,QAAQ,eAAe;AACxD,SAASC,MAAM,EAAEC,QAAQ,QAAQ,8BAA8B;AAE/D,OAAO,MAAMC,6BAAiCX,QAAQ;IAClDY,YAAY;QAACN;KAAW;AAC5B,GACIJ,SAAS;IACL,MAAM,CAAC,EAAEW,UAAU,EAAEC,aAAa,EAAE,CAAC,GAAGb,gBAAgBK;IAExD,MAAMS,mBAAmBjB,QACrB,IAAMO,6BAA6B;YAAEW,SAASF;QAAc,IAC5D;QAACA;KAAc;IAGnB,MAAMG,qBAAqBnB,QACvB,IACIO,6BAA6B;YACzBW,SAAST;YACTW,YAAYC,CAAAA,oBACR,MAACT;;sCACG,KAACU;4BAAKC,WAAU;sCAAWF,IAAIG,YAAY;;wBAAQ;wBAAIH,IAAII,UAAU;wBAAC;;;YAG9EC,eAAeL,CAAAA,MAAOA,IAAII,UAAU;YACpCE,kBAAkB;QACtB,IACJ,EAAE;IAGN,qBACI,MAAC1B;;0BACG,MAACU;gBAAOiB,OAAM;gBAAoCL,WAAU;;oBAAQ;kCAGhE,KAACM;oBAAK;;;0BAGV,MAACxB;gBAAMU,YAAYA;gBAAYe,SAAS;;kCACpC,KAACxB;wBAAYyB,OAAM;wBAAYH,OAAM;wBAAKI,UAAU;wBAAOC,OAAM;;kCACjE,KAAC3B;wBAAYyB,OAAM;wBAAcH,OAAM;wBAAeK,OAAM;;kCAC5D,KAAC3B;wBACGyB,OAAM;wBACNH,OAAM;wBACNM,YAAYjB;;kCAEhB,KAACX;wBACGyB,OAAM;wBACNH,OAAM;wBACNM,YAAYf;wBACZgB,MAAMzB;;;;;;AAK1B,IACF;AAEF,OAAO,MAAM0B,kCAAsClC,QAAQ;IACvDY,YAAY;QAACN;KAAW;AAC5B,GACIJ,SAAS;IACL,MAAM,CAAC,EAAEW,UAAU,EAAE,CAAC,GAAGZ,gBAAgBK;IAEzC,MAAM6B,0BAA0BrC,QAAQ;QACpC,MAAMsC,UAAU,CAACC,MAAgB,WAAWC,IAAI,CAACD,GAAG,CAAC,EAAE;QAEvD,OAAOhC,6BAA6B;YAChCW,SAAS;gBAAC;gBAAG;aAAE;YACfE,YAAYqB,CAAAA,OAASA,OAAO,qBAAqB;YACjDC,gBAAgB,CAACC,QAAgBC,QAC7BD,SAAUC,QAAQN,QAAQK,UAAU,CAACL,QAAQK,UAAW;QAChE;IACJ,GAAG,EAAE;IAEL,qBACI,MAAC1C;;0BACG,MAACU;gBAAOiB,OAAM;gBAAoCL,WAAU;;oBAAQ;kCAGhE,KAACM;oBAAK;;;0BAGV,MAACxB;gBAAMU,YAAYA;gBAAYe,SAAS;;kCACpC,KAACxB;wBAAYyB,OAAM;wBAAYH,OAAM;wBAAKI,UAAU;wBAAOC,OAAM;;kCACjE,KAAC3B;wBACGyB,OAAM;wBACNH,OAAM;wBACNM,YAAYG;;;;;;AAKhC,IACF"}

package/dist/demo/filters/table.store.js

@@ -1,101 +1,92 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _ts_decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+}
 import { injectable } from '@servicetitan/react-ioc';
-import { InMemoryDataSource, TableState, } from '../..';
+import { InMemoryDataSource, TableState } from '../..';
 import { products } from '../overview/products';
 import { categories } from './categories';
-let TableStore = class TableStore {
-    constructor() {
-        Object.defineProperty(this, "tableState", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new TableState({
-                dataSource: this.getDataSource(),
-                pageSize: 5,
-            })
-        });
-        Object.defineProperty(this, "categoryFetcher", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: async (opts) => {
-                var _a;
-                await new Promise(resolve => setTimeout(resolve, 1500));
-                const sv = (_a = opts.search) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
-                return {
-                    data: categories
-                        .filter(cat => (sv ? cat.CategoryName.toLowerCase().includes(sv) : true))
-                        .map(cat => ({ value: cat.CategoryID, text: cat.CategoryName })),
-                };
-            }
-        });
-        Object.defineProperty(this, "madeInFetcher", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: async (opts) => {
-                var _a;
-                await new Promise(resolve => setTimeout(resolve, 1500));
-                const sv = (_a = opts.search) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
-                return {
-                    data: this.madeInOptions
-                        .filter(opt => (sv ? opt.toLowerCase().includes(sv) : true))
-                        .map(opt => ({ value: opt, text: opt })),
-                };
-            }
-        });
-        Object.defineProperty(this, "categoryFetcherClean", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: async (opts) => {
-                var _a;
-                await new Promise(resolve => setTimeout(resolve, 1500));
-                const sv = (_a = opts.search) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
-                return {
-                    data: categories.filter(cat => sv ? cat.CategoryName.toLowerCase().includes(sv) : true),
-                };
-            }
-        });
-        Object.defineProperty(this, "madeInFetcherClean", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: async (opts) => {
-                var _a;
-                await new Promise(resolve => setTimeout(resolve, 1500));
-                const sv = (_a = opts.search) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
-                return {
-                    data: this.madeInOptions.filter(opt => (sv ? opt.toLowerCase().includes(sv) : true)),
-                };
-            }
-        });
-    }
+export class TableStore {
     get madeInOptions() {
-        return Array.from(new Set(products.map(p => p.MadeIn)));
+        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 }
-                : {}),
-        }), {});
-        return Object.keys(map)
-            .map(Number)
-            .map(id => ({ Id: id, Name: map[id] }));
+        const map = products.reduce((out, product)=>({
+                ...out,
+                ...product.Package ? {
+                    [product.Package.PackageId]: product.Package.PackageName
+                } : {}
+            }), {});
+        return Object.keys(map).map(Number).map((id)=>({
+                Id: id,
+                Name: map[id]
+            }));
     }
     getDataSource() {
-        return new InMemoryDataSource(products, row => row.ProductID);
+        return new InMemoryDataSource(products, (row)=>row.ProductID);
+    }
+    constructor(){
+        _define_property(this, "tableState", new TableState({
+            dataSource: this.getDataSource(),
+            pageSize: 5
+        }));
+        _define_property(this, "categoryFetcher", async (opts)=>{
+            var _opts_search;
+            await new Promise((resolve)=>setTimeout(resolve, 1500));
+            const sv = (_opts_search = opts.search) === null || _opts_search === void 0 ? void 0 : _opts_search.trim().toLowerCase();
+            return {
+                data: categories.filter((cat)=>sv ? cat.CategoryName.toLowerCase().includes(sv) : true).map((cat)=>({
+                        value: cat.CategoryID,
+                        text: cat.CategoryName
+                    }))
+            };
+        });
+        _define_property(this, "madeInFetcher", async (opts)=>{
+            var _opts_search;
+            await new Promise((resolve)=>setTimeout(resolve, 1500));
+            const sv = (_opts_search = opts.search) === null || _opts_search === void 0 ? void 0 : _opts_search.trim().toLowerCase();
+            return {
+                data: this.madeInOptions.filter((opt)=>sv ? opt.toLowerCase().includes(sv) : true).map((opt)=>({
+                        value: opt,
+                        text: opt
+                    }))
+            };
+        });
+        _define_property(this, "categoryFetcherClean", async (opts)=>{
+            var _opts_search;
+            await new Promise((resolve)=>setTimeout(resolve, 1500));
+            const sv = (_opts_search = opts.search) === null || _opts_search === void 0 ? void 0 : _opts_search.trim().toLowerCase();
+            return {
+                data: categories.filter((cat)=>sv ? cat.CategoryName.toLowerCase().includes(sv) : true)
+            };
+        });
+        _define_property(this, "madeInFetcherClean", async (opts)=>{
+            var _opts_search;
+            await new Promise((resolve)=>setTimeout(resolve, 1500));
+            const sv = (_opts_search = opts.search) === null || _opts_search === void 0 ? void 0 : _opts_search.trim().toLowerCase();
+            return {
+                data: this.madeInOptions.filter((opt)=>sv ? opt.toLowerCase().includes(sv) : true)
+            };
+        });
     }
-};
-TableStore = __decorate([
+}
+TableStore = _ts_decorate([
     injectable()
 ], TableStore);
-export { TableStore };
+
 //# sourceMappingURL=table.store.js.map

package/dist/demo/filters/table.store.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.store.js","sourceRoot":"","sources":["../../../src/demo/filters/table.store.ts"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/demo/filters/table.store.ts"],"sourcesContent":["import { injectable } from '@servicetitan/react-ioc';\n\nimport {\n    InMemoryDataSource,\n    TableState,\n    AsyncSelectFilterDataFetcher,\n    SelectFilterDataFetcher,\n} from '../..';\nimport { products } from '../overview/products';\nimport { categories, Category } from './categories';\n\n@injectable()\nexport class TableStore {\n    tableState = new TableState({\n        dataSource: this.getDataSource(),\n        pageSize: 5,\n    });\n\n    get madeInOptions() {\n        return Array.from(new Set(products.map(p => p.MadeIn)));\n    }\n\n    get packageOptions() {\n        const map = products.reduce(\n            (out, product) => ({\n                ...out,\n                ...(product.Package\n                    ? { [product.Package.PackageId]: product.Package.PackageName }\n                    : {}),\n            }),\n            {} as Record<number, string>\n        );\n\n        return Object.keys(map)\n            .map(Number)\n            .map(id => ({ Id: id, Name: map[id] }));\n    }\n\n    categoryFetcher: AsyncSelectFilterDataFetcher<number> = async opts => {\n        await new Promise(resolve => setTimeout(resolve, 1500));\n\n        const sv = opts.search?.trim().toLowerCase();\n\n        return {\n            data: categories\n                .filter(cat => (sv ? cat.CategoryName.toLowerCase().includes(sv) : true))\n                .map(cat => ({ value: cat.CategoryID, text: cat.CategoryName })),\n        };\n    };\n\n    madeInFetcher: AsyncSelectFilterDataFetcher<string> = async opts => {\n        await new Promise(resolve => setTimeout(resolve, 1500));\n\n        const sv = opts.search?.trim().toLowerCase();\n\n        return {\n            data: this.madeInOptions\n                .filter(opt => (sv ? opt.toLowerCase().includes(sv) : true))\n                .map(opt => ({ value: opt, text: opt })),\n        };\n    };\n\n    categoryFetcherClean: SelectFilterDataFetcher<Category> = async opts => {\n        await new Promise(resolve => setTimeout(resolve, 1500));\n\n        const sv = opts.search?.trim().toLowerCase();\n\n        return {\n            data: categories.filter(cat =>\n                sv ? cat.CategoryName.toLowerCase().includes(sv) : true\n            ),\n        };\n    };\n\n    madeInFetcherClean: SelectFilterDataFetcher<string> = async opts => {\n        await new Promise(resolve => setTimeout(resolve, 1500));\n\n        const sv = opts.search?.trim().toLowerCase();\n\n        return {\n            data: this.madeInOptions.filter(opt => (sv ? opt.toLowerCase().includes(sv) : true)),\n        };\n    };\n\n    private getDataSource() {\n        return new InMemoryDataSource(products, row => row.ProductID);\n    }\n}\n"],"names":["injectable","InMemoryDataSource","TableState","products","categories","TableStore","madeInOptions","Array","from","Set","map","p","MadeIn","packageOptions","reduce","out","product","Package","PackageId","PackageName","Object","keys","Number","id","Id","Name","getDataSource","row","ProductID","tableState","dataSource","pageSize","categoryFetcher","opts","Promise","resolve","setTimeout","sv","search","trim","toLowerCase","data","filter","cat","CategoryName","includes","value","CategoryID","text","madeInFetcher","opt","categoryFetcherClean","madeInFetcherClean"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAASA,UAAU,QAAQ,0BAA0B;AAErD,SACIC,kBAAkB,EAClBC,UAAU,QAGP,QAAQ;AACf,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,UAAU,QAAkB,eAAe;AAGpD,OAAO,MAAMC;IAMT,IAAIC,gBAAgB;QAChB,OAAOC,MAAMC,IAAI,CAAC,IAAIC,IAAIN,SAASO,GAAG,CAACC,CAAAA,IAAKA,EAAEC,MAAM;IACxD;IAEA,IAAIC,iBAAiB;QACjB,MAAMH,MAAMP,SAASW,MAAM,CACvB,CAACC,KAAKC,UAAa,CAAA;gBACf,GAAGD,GAAG;gBACN,GAAIC,QAAQC,OAAO,GACb;oBAAE,CAACD,QAAQC,OAAO,CAACC,SAAS,CAAC,EAAEF,QAAQC,OAAO,CAACE,WAAW;gBAAC,IAC3D,CAAC,CAAC;YACZ,CAAA,GACA,CAAC;QAGL,OAAOC,OAAOC,IAAI,CAACX,KACdA,GAAG,CAACY,QACJZ,GAAG,CAACa,CAAAA,KAAO,CAAA;gBAAEC,IAAID;gBAAIE,MAAMf,GAAG,CAACa,GAAG;YAAC,CAAA;IAC5C;IAgDQG,gBAAgB;QACpB,OAAO,IAAIzB,mBAAmBE,UAAUwB,CAAAA,MAAOA,IAAIC,SAAS;IAChE;;QAzEAC,uBAAAA,cAAa,IAAI3B,WAAW;YACxB4B,YAAY,IAAI,CAACJ,aAAa;YAC9BK,UAAU;QACd;QAsBAC,uBAAAA,mBAAwD,OAAMC;gBAG/CA;YAFX,MAAM,IAAIC,QAAQC,CAAAA,UAAWC,WAAWD,SAAS;YAEjD,MAAME,MAAKJ,eAAAA,KAAKK,MAAM,cAAXL,mCAAAA,aAAaM,IAAI,GAAGC,WAAW;YAE1C,OAAO;gBACHC,MAAMrC,WACDsC,MAAM,CAACC,CAAAA,MAAQN,KAAKM,IAAIC,YAAY,CAACJ,WAAW,GAAGK,QAAQ,CAACR,MAAM,MAClE3B,GAAG,CAACiC,CAAAA,MAAQ,CAAA;wBAAEG,OAAOH,IAAII,UAAU;wBAAEC,MAAML,IAAIC,YAAY;oBAAC,CAAA;YACrE;QACJ;QAEAK,uBAAAA,iBAAsD,OAAMhB;gBAG7CA;YAFX,MAAM,IAAIC,QAAQC,CAAAA,UAAWC,WAAWD,SAAS;YAEjD,MAAME,MAAKJ,eAAAA,KAAKK,MAAM,cAAXL,mCAAAA,aAAaM,IAAI,GAAGC,WAAW;YAE1C,OAAO;gBACHC,MAAM,IAAI,CAACnC,aAAa,CACnBoC,MAAM,CAACQ,CAAAA,MAAQb,KAAKa,IAAIV,WAAW,GAAGK,QAAQ,CAACR,MAAM,MACrD3B,GAAG,CAACwC,CAAAA,MAAQ,CAAA;wBAAEJ,OAAOI;wBAAKF,MAAME;oBAAI,CAAA;YAC7C;QACJ;QAEAC,uBAAAA,wBAA0D,OAAMlB;gBAGjDA;YAFX,MAAM,IAAIC,QAAQC,CAAAA,UAAWC,WAAWD,SAAS;YAEjD,MAAME,MAAKJ,eAAAA,KAAKK,MAAM,cAAXL,mCAAAA,aAAaM,IAAI,GAAGC,WAAW;YAE1C,OAAO;gBACHC,MAAMrC,WAAWsC,MAAM,CAACC,CAAAA,MACpBN,KAAKM,IAAIC,YAAY,CAACJ,WAAW,GAAGK,QAAQ,CAACR,MAAM;YAE3D;QACJ;QAEAe,uBAAAA,sBAAsD,OAAMnB;gBAG7CA;YAFX,MAAM,IAAIC,QAAQC,CAAAA,UAAWC,WAAWD,SAAS;YAEjD,MAAME,MAAKJ,eAAAA,KAAKK,MAAM,cAAXL,mCAAAA,aAAaM,IAAI,GAAGC,WAAW;YAE1C,OAAO;gBACHC,MAAM,IAAI,CAACnC,aAAa,CAACoC,MAAM,CAACQ,CAAAA,MAAQb,KAAKa,IAAIV,WAAW,GAAGK,QAAQ,CAACR,MAAM;YAClF;QACJ;;AAKJ"}

package/dist/demo/footer-page-size/index.js

@@ -1,2 +1,3 @@
 export * from './table';
+
 //# sourceMappingURL=index.js.map

package/dist/demo/footer-page-size/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/demo/footer-page-size/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../../../src/demo/footer-page-size/index.ts"],"sourcesContent":["export * from './table';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU"}

package/dist/demo/footer-page-size/table.js

@@ -4,15 +4,91 @@ import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { observer } from 'mobx-react';
 import { Tag } from '@servicetitan/design-system';
 import { getEnumKeys } from '@servicetitan/form';
-import { Table, TableColumn, BooleanEditableCell, DateRangeColumnMenuFilter, StandardColumnMenuFilter, standardFilterWithMultiselect, multiSelectColumnMenuFilter, CurrencyRangeColumnMenuFilter, } from '../..';
+import { Table, TableColumn, BooleanEditableCell, DateRangeColumnMenuFilter, StandardColumnMenuFilter, standardFilterWithMultiselect, multiSelectColumnMenuFilter, CurrencyRangeColumnMenuFilter } from '../..';
 import { TableStore } from '../overview/table.store';
 import { UserRole } from '../overview/product';
-const UserRoleColumnMenuFilter = multiSelectColumnMenuFilter(getEnumKeys(UserRole), userRole => (_jsx(Tag, { compact: true, color: UserRole[userRole] === UserRole.Owner ? 'success' : 'default', children: userRole })));
+const UserRoleColumnMenuFilter = multiSelectColumnMenuFilter(getEnumKeys(UserRole), (userRole)=>/*#__PURE__*/ _jsx(Tag, {
+        compact: true,
+        color: UserRole[userRole] === UserRole.Owner ? 'success' : 'default',
+        children: userRole
+    }));
 export const TableFooterPageSizeExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    singletons: [
+        TableStore
+    ]
+})(observer(()=>{
     const [{ tableState }] = useDependencies(TableStore);
-    const madeInColumnMenu = useMemo(() => standardFilterWithMultiselect({ tableState }), [tableState]);
-    return (_jsxs(Table, { tableState: tableState, striped: false, sortable: true, pager: { pageSizes: [3, 5, 7, 10] }, children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", columnMenu: StandardColumnMenuFilter, width: "240px" }), _jsx(TableColumn, { field: "Supplier", title: "Supplier", columnMenu: StandardColumnMenuFilter, width: "150px" }), _jsx(TableColumn, { field: "MadeIn", title: "Made In", columnMenu: madeInColumnMenu, width: "175px" }), _jsx(TableColumn, { field: "UnitsOnOrder", title: "First Ordered On", columnMenu: DateRangeColumnMenuFilter, format: "{0:MM/dd/yyyy}", width: "240px" }), _jsx(TableColumn, { field: "UnitPrice", title: "Unit Price", columnMenu: CurrencyRangeColumnMenuFilter, format: "{0:c}", width: "125px" }), _jsx(TableColumn, { field: "Discontinued", title: "Discontinued", cell: BooleanEditableCell, sortable: false, width: "125px" }), _jsx(TableColumn, { field: "AvailableFor", title: "Available For", columnMenu: UserRoleColumnMenuFilter, width: "240px" })] }));
+    const madeInColumnMenu = useMemo(()=>standardFilterWithMultiselect({
+            tableState
+        }), [
+        tableState
+    ]);
+    return /*#__PURE__*/ _jsxs(Table, {
+        tableState: tableState,
+        striped: false,
+        sortable: true,
+        pager: {
+            pageSizes: [
+                3,
+                5,
+                7,
+                10
+            ]
+        },
+        children: [
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "ProductID",
+                title: "ID",
+                editable: false,
+                width: "100px"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "ProductName",
+                title: "Product Name",
+                columnMenu: StandardColumnMenuFilter,
+                width: "240px"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "Supplier",
+                title: "Supplier",
+                columnMenu: StandardColumnMenuFilter,
+                width: "150px"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "MadeIn",
+                title: "Made In",
+                columnMenu: madeInColumnMenu,
+                width: "175px"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "UnitsOnOrder",
+                title: "First Ordered On",
+                columnMenu: DateRangeColumnMenuFilter,
+                format: "{0:MM/dd/yyyy}",
+                width: "240px"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "UnitPrice",
+                title: "Unit Price",
+                columnMenu: CurrencyRangeColumnMenuFilter,
+                format: "{0:c}",
+                width: "125px"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "Discontinued",
+                title: "Discontinued",
+                cell: BooleanEditableCell,
+                sortable: false,
+                width: "125px"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "AvailableFor",
+                title: "Available For",
+                columnMenu: UserRoleColumnMenuFilter,
+                width: "240px"
+            })
+        ]
+    });
 }));
+
 //# sourceMappingURL=table.js.map

package/dist/demo/footer-page-size/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/demo/footer-page-size/table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/demo/footer-page-size/table.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\n\nimport { provide, useDependencies } from '@servicetitan/react-ioc';\n\nimport { observer } from 'mobx-react';\n\nimport { Tag } from '@servicetitan/design-system';\nimport { getEnumKeys } from '@servicetitan/form';\n\nimport {\n    Table,\n    TableColumn,\n    BooleanEditableCell,\n    DateRangeColumnMenuFilter,\n    StandardColumnMenuFilter,\n    standardFilterWithMultiselect,\n    multiSelectColumnMenuFilter,\n    CurrencyRangeColumnMenuFilter,\n} from '../..';\n\nimport { TableStore } from '../overview/table.store';\nimport { UserRole } from '../overview/product';\n\nconst UserRoleColumnMenuFilter = multiSelectColumnMenuFilter(getEnumKeys(UserRole), userRole => (\n    <Tag compact color={UserRole[userRole] === UserRole.Owner ? 'success' : 'default'}>\n        {userRole}\n    </Tag>\n));\n\nexport const TableFooterPageSizeExample: FC = provide({\n    singletons: [TableStore],\n})(\n    observer(() => {\n        const [{ tableState }] = useDependencies(TableStore);\n\n        const madeInColumnMenu = useMemo(\n            () => standardFilterWithMultiselect({ tableState }),\n            [tableState]\n        );\n\n        return (\n            <Table\n                tableState={tableState}\n                striped={false}\n                sortable\n                pager={{ pageSizes: [3, 5, 7, 10] }}\n            >\n                <TableColumn field=\"ProductID\" title=\"ID\" editable={false} width=\"100px\" />\n\n                <TableColumn\n                    field=\"ProductName\"\n                    title=\"Product Name\"\n                    columnMenu={StandardColumnMenuFilter}\n                    width=\"240px\"\n                />\n\n                <TableColumn\n                    field=\"Supplier\"\n                    title=\"Supplier\"\n                    columnMenu={StandardColumnMenuFilter}\n                    width=\"150px\"\n                />\n\n                <TableColumn\n                    field=\"MadeIn\"\n                    title=\"Made In\"\n                    columnMenu={madeInColumnMenu}\n                    width=\"175px\"\n                />\n\n                <TableColumn\n                    field=\"UnitsOnOrder\"\n                    title=\"First Ordered On\"\n                    columnMenu={DateRangeColumnMenuFilter}\n                    format=\"{0:MM/dd/yyyy}\"\n                    width=\"240px\"\n                />\n\n                <TableColumn\n                    field=\"UnitPrice\"\n                    title=\"Unit Price\"\n                    columnMenu={CurrencyRangeColumnMenuFilter}\n                    format=\"{0:c}\"\n                    width=\"125px\"\n                />\n\n                <TableColumn\n                    field=\"Discontinued\"\n                    title=\"Discontinued\"\n                    cell={BooleanEditableCell}\n                    sortable={false}\n                    width=\"125px\"\n                />\n\n                <TableColumn\n                    field=\"AvailableFor\"\n                    title=\"Available For\"\n                    columnMenu={UserRoleColumnMenuFilter}\n                    width=\"240px\"\n                />\n            </Table>\n        );\n    })\n);\n"],"names":["useMemo","provide","useDependencies","observer","Tag","getEnumKeys","Table","TableColumn","BooleanEditableCell","DateRangeColumnMenuFilter","StandardColumnMenuFilter","standardFilterWithMultiselect","multiSelectColumnMenuFilter","CurrencyRangeColumnMenuFilter","TableStore","UserRole","UserRoleColumnMenuFilter","userRole","compact","color","Owner","TableFooterPageSizeExample","singletons","tableState","madeInColumnMenu","striped","sortable","pager","pageSizes","field","title","editable","width","columnMenu","format","cell"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AAEpC,SAASC,OAAO,EAAEC,eAAe,QAAQ,0BAA0B;AAEnE,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,GAAG,QAAQ,8BAA8B;AAClD,SAASC,WAAW,QAAQ,qBAAqB;AAEjD,SACIC,KAAK,EACLC,WAAW,EACXC,mBAAmB,EACnBC,yBAAyB,EACzBC,wBAAwB,EACxBC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,6BAA6B,QAC1B,QAAQ;AAEf,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,MAAMC,2BAA2BJ,4BAA4BP,YAAYU,WAAWE,CAAAA,yBAChF,KAACb;QAAIc,OAAO;QAACC,OAAOJ,QAAQ,CAACE,SAAS,KAAKF,SAASK,KAAK,GAAG,YAAY;kBACnEH;;AAIT,OAAO,MAAMI,6BAAiCpB,QAAQ;IAClDqB,YAAY;QAACR;KAAW;AAC5B,GACIX,SAAS;IACL,MAAM,CAAC,EAAEoB,UAAU,EAAE,CAAC,GAAGrB,gBAAgBY;IAEzC,MAAMU,mBAAmBxB,QACrB,IAAMW,8BAA8B;YAAEY;QAAW,IACjD;QAACA;KAAW;IAGhB,qBACI,MAACjB;QACGiB,YAAYA;QACZE,SAAS;QACTC,QAAQ;QACRC,OAAO;YAAEC,WAAW;gBAAC;gBAAG;gBAAG;gBAAG;aAAG;QAAC;;0BAElC,KAACrB;gBAAYsB,OAAM;gBAAYC,OAAM;gBAAKC,UAAU;gBAAOC,OAAM;;0BAEjE,KAACzB;gBACGsB,OAAM;gBACNC,OAAM;gBACNG,YAAYvB;gBACZsB,OAAM;;0BAGV,KAACzB;gBACGsB,OAAM;gBACNC,OAAM;gBACNG,YAAYvB;gBACZsB,OAAM;;0BAGV,KAACzB;gBACGsB,OAAM;gBACNC,OAAM;gBACNG,YAAYT;gBACZQ,OAAM;;0BAGV,KAACzB;gBACGsB,OAAM;gBACNC,OAAM;gBACNG,YAAYxB;gBACZyB,QAAO;gBACPF,OAAM;;0BAGV,KAACzB;gBACGsB,OAAM;gBACNC,OAAM;gBACNG,YAAYpB;gBACZqB,QAAO;gBACPF,OAAM;;0BAGV,KAACzB;gBACGsB,OAAM;gBACNC,OAAM;gBACNK,MAAM3B;gBACNkB,UAAU;gBACVM,OAAM;;0BAGV,KAACzB;gBACGsB,OAAM;gBACNC,OAAM;gBACNG,YAAYjB;gBACZgB,OAAM;;;;AAItB,IACF"}

package/dist/demo/index.js

@@ -4,4 +4,5 @@ export * from './state-caching';
 export * from './column-hiding';
 export * from './footer-page-size';
 export * from './row-details';
+
 //# sourceMappingURL=index.js.map

package/dist/demo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/demo/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC"}
+{"version":3,"sources":["../../src/demo/index.ts"],"sourcesContent":["export * from './overview';\nexport * from './master-detail';\nexport * from './state-caching';\nexport * from './column-hiding';\nexport * from './footer-page-size';\nexport * from './row-details';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,qBAAqB;AACnC,cAAc,gBAAgB"}

package/dist/demo/master-detail/detail-table.js

@@ -6,23 +6,55 @@ import { Icon, Checkbox } from '@servicetitan/design-system';
 import { Table, TableColumn } from '../..';
 import { DetailTableStore } from './detail-table.store';
 export const DetailTable = provide({
-    singletons: [DetailTableStore],
-})(observer(({ dataItem }) => {
+    singletons: [
+        DetailTableStore
+    ]
+})(observer(({ dataItem })=>{
     const [store] = useDependencies(DetailTableStore);
-    useEffect(() => {
+    useEffect(()=>{
         store.initialize(dataItem);
-        return () => store.dispose();
-    }, [store, dataItem]);
+        return ()=>store.dispose();
+    }, [
+        store,
+        dataItem
+    ]);
     if (!store.tableState) {
         return null;
     }
-    return (_jsxs(Table, { selectable: true, hideSelectAll: true, tableState: store.tableState, selectionControl: LockFieldIcon, children: [_jsx(TableColumn, { field: "Field" }), _jsx(TableColumn, { field: "OldValue" }), _jsx(TableColumn, { field: "NewValue" })] }));
+    return /*#__PURE__*/ _jsxs(Table, {
+        selectable: true,
+        hideSelectAll: true,
+        tableState: store.tableState,
+        selectionControl: LockFieldIcon,
+        children: [
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "Field"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "OldValue"
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "NewValue"
+            })
+        ]
+    });
 }));
-const LockFieldIcon = props => {
+const LockFieldIcon = (props)=>{
     const { checked, disabled } = props;
     if (!disabled) {
-        return _jsx(Checkbox, { ...props });
+        return /*#__PURE__*/ _jsx(Checkbox, {
+            ...props
+        });
     }
-    return (_jsx("div", { children: checked ? (_jsx(Icon, { name: "check", className: "c-blue-300" })) : (_jsx(Icon, { name: "remove", className: "c-neutral-70" })) }));
+    return /*#__PURE__*/ _jsx("div", {
+        children: checked ? /*#__PURE__*/ _jsx(Icon, {
+            name: "check",
+            className: "c-blue-300"
+        }) : /*#__PURE__*/ _jsx(Icon, {
+            name: "remove",
+            className: "c-neutral-70"
+        })
+    });
 };
+
 //# sourceMappingURL=detail-table.js.map