@servicetitan/table 31.2.0 → 31.3.0

package/dist/demo/filters/categories.js

@@ -2,55 +2,59 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const categories = [
     {
         CategoryID: 1,
-        CategoryName: 'Wok',
+        CategoryName: 'Wok'
     },
     {
         CategoryID: 2,
-        CategoryName: 'Sushi',
+        CategoryName: 'Sushi'
     },
     {
         CategoryID: 6,
-        CategoryName: 'Gunkan',
+        CategoryName: 'Gunkan'
     },
     {
         CategoryID: 7,
-        CategoryName: 'Miso',
+        CategoryName: 'Miso'
     },
     {
         CategoryID: 8,
-        CategoryName: 'Roll',
+        CategoryName: 'Roll'
     },
     {
         CategoryID: 10,
-        CategoryName: 'Sashimi',
+        CategoryName: 'Sashimi'
     },
     {
         CategoryID: 21,
-        CategoryName: 'Borsh',
+        CategoryName: 'Borsh'
     },
     {
         CategoryID: 22,
-        CategoryName: 'Pasta Carbonara',
+        CategoryName: 'Pasta Carbonara'
     },
     {
         CategoryID: 23,
-        CategoryName: 'Caesar salad',
+        CategoryName: 'Caesar salad'
     },
     {
         CategoryID: 24,
-        CategoryName: 'Ravioli',
+        CategoryName: 'Ravioli'
     },
     {
         CategoryID: 25,
-        CategoryName: 'Pizza',
+        CategoryName: 'Pizza'
     },
     {
         CategoryID: 26,
-        CategoryName: 'Steak',
-    },
+        CategoryName: 'Steak'
+    }
 ];
-export const CategoryCell = ({ field, dataItem, tdProps }) => {
-    var _a;
-    return (_jsx("td", { ...tdProps, children: (_a = categories.find(c => c.CategoryID === dataItem[field])) === null || _a === void 0 ? void 0 : _a.CategoryName }));
+export const CategoryCell = ({ field, dataItem, tdProps })=>{
+    var _categories_find;
+    return /*#__PURE__*/ _jsx("td", {
+        ...tdProps,
+        children: (_categories_find = categories.find((c)=>c.CategoryID === dataItem[field])) === null || _categories_find === void 0 ? void 0 : _categories_find.CategoryName
+    });
 };
+
 //# sourceMappingURL=categories.js.map

package/dist/demo/filters/categories.js.map

@@ -1 +1 @@
-{"version":3,"file":"categories.js","sourceRoot":"","sources":["../../../src/demo/filters/categories.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,MAAM,UAAU,GAAe;IAClC;QACI,UAAU,EAAE,CAAC;QACb,YAAY,EAAE,KAAK;KACtB;IACD;QACI,UAAU,EAAE,CAAC;QACb,YAAY,EAAE,OAAO;KACxB;IACD;QACI,UAAU,EAAE,CAAC;QACb,YAAY,EAAE,QAAQ;KACzB;IACD;QACI,UAAU,EAAE,CAAC;QACb,YAAY,EAAE,MAAM;KACvB;IACD;QACI,UAAU,EAAE,CAAC;QACb,YAAY,EAAE,MAAM;KACvB;IACD;QACI,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,SAAS;KAC1B;IACD;QACI,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,OAAO;KACxB;IACD;QACI,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,iBAAiB;KAClC;IACD;QACI,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,cAAc;KAC/B;IACD;QACI,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,SAAS;KAC1B;IACD;QACI,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,OAAO;KACxB;IACD;QACI,UAAU,EAAE,EAAE;QACd,YAAY,EAAE,OAAO;KACxB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAuB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;;IAAC,OAAA,CAC9E,gBAAQ,OAAO,YAAG,MAAA,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,QAAQ,CAAC,KAAM,CAAC,CAAC,0CAAE,YAAY,GAAM,CAChG,CAAA;CAAA,CAAC"}
+{"version":3,"sources":["../../../src/demo/filters/categories.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { TableCellProps } from '../../table';\n\nexport interface Category {\n    CategoryID: number;\n    CategoryName: string;\n}\n\nexport const categories: Category[] = [\n    {\n        CategoryID: 1,\n        CategoryName: 'Wok',\n    },\n    {\n        CategoryID: 2,\n        CategoryName: 'Sushi',\n    },\n    {\n        CategoryID: 6,\n        CategoryName: 'Gunkan',\n    },\n    {\n        CategoryID: 7,\n        CategoryName: 'Miso',\n    },\n    {\n        CategoryID: 8,\n        CategoryName: 'Roll',\n    },\n    {\n        CategoryID: 10,\n        CategoryName: 'Sashimi',\n    },\n    {\n        CategoryID: 21,\n        CategoryName: 'Borsh',\n    },\n    {\n        CategoryID: 22,\n        CategoryName: 'Pasta Carbonara',\n    },\n    {\n        CategoryID: 23,\n        CategoryName: 'Caesar salad',\n    },\n    {\n        CategoryID: 24,\n        CategoryName: 'Ravioli',\n    },\n    {\n        CategoryID: 25,\n        CategoryName: 'Pizza',\n    },\n    {\n        CategoryID: 26,\n        CategoryName: 'Steak',\n    },\n];\n\nexport const CategoryCell: FC<TableCellProps> = ({ field, dataItem, tdProps }) => (\n    <td {...tdProps}>{categories.find(c => c.CategoryID === dataItem[field!])?.CategoryName}</td>\n);\n"],"names":["categories","CategoryID","CategoryName","CategoryCell","field","dataItem","tdProps","td","find","c"],"mappings":";AAQA,OAAO,MAAMA,aAAyB;IAClC;QACIC,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;IACA;QACID,YAAY;QACZC,cAAc;IAClB;CACH,CAAC;AAEF,OAAO,MAAMC,eAAmC,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAE;QACvDN;yBAAlB,KAACO;QAAI,GAAGD,OAAO;mBAAGN,mBAAAA,WAAWQ,IAAI,CAACC,CAAAA,IAAKA,EAAER,UAAU,KAAKI,QAAQ,CAACD,MAAO,eAAtDJ,uCAAAA,iBAAyDE,YAAY;;EACzF"}

package/dist/demo/filters/multiselect-filter.js

@@ -5,11 +5,43 @@ import { observer } from 'mobx-react';
 import { Table, TableColumn, multiSelectColumnMenuFilter } from '../..';
 import { TableStore } from './table.store';
 export const MultiSelectDefaultExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    singletons: [
+        TableStore
+    ]
+})(observer(()=>{
     const [{ tableState, madeInOptions }] = useDependencies(TableStore);
-    const madeInColumnMenu = useMemo(() => multiSelectColumnMenuFilter(madeInOptions), [madeInOptions]);
-    const categoryColumnMenu = useMemo(() => multiSelectColumnMenuFilter(new Array(20).fill(0).map((_, index) => index), undefined, { contentMaxHeight: '250px' }), []);
-    return (_jsxs(Table, { tableState: tableState, 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", columnMenu: madeInColumnMenu }), _jsx(TableColumn, { field: "CategoryID", title: "CategoryID", columnMenu: categoryColumnMenu })] }));
+    const madeInColumnMenu = useMemo(()=>multiSelectColumnMenuFilter(madeInOptions), [
+        madeInOptions
+    ]);
+    const categoryColumnMenu = useMemo(()=>multiSelectColumnMenuFilter(new Array(20).fill(0).map((_, index)=>index), undefined, {
+            contentMaxHeight: '250px'
+        }), []);
+    return /*#__PURE__*/ _jsxs(Table, {
+        tableState: tableState,
+        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",
+                columnMenu: madeInColumnMenu
+            }),
+            /*#__PURE__*/ _jsx(TableColumn, {
+                field: "CategoryID",
+                title: "CategoryID",
+                columnMenu: categoryColumnMenu
+            })
+        ]
+    });
 }));
+
 //# sourceMappingURL=multiselect-filter.js.map

package/dist/demo/filters/multiselect-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/multiselect-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAM,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,2BAA2B,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,CAAC,MAAM,yBAAyB,GAAO,OAAO,CAAC;IACjD,UAAU,EAAE,CAAC,UAAU,CAAC;CAC3B,CAAC,CACE,QAAQ,CAAC,GAAG,EAAE;IACV,MAAM,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,2BAA2B,CAAC,aAAa,CAAC,EAChD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACD,2BAA2B,CACvB,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAC9C,SAAS,EACT,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAChC,EACL,EAAE,CACL,CAAC;IAEF,OAAO,CACH,MAAC,KAAK,IAAC,UAAU,EAAE,UAAU,aACzB,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAE3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EAEtE,KAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAE,gBAAgB,GAAI,EAC5E,KAAC,WAAW,IACR,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE,kBAAkB,GAChC,IACE,CACX,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}
+{"version":3,"sources":["../../../src/demo/filters/multiselect-filter.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\n\nimport { provide, useDependencies } from '@servicetitan/react-ioc';\n\nimport { observer } from 'mobx-react';\n\nimport { Table, TableColumn, multiSelectColumnMenuFilter } from '../..';\n\nimport { TableStore } from './table.store';\n\nexport const MultiSelectDefaultExample: FC = provide({\n    singletons: [TableStore],\n})(\n    observer(() => {\n        const [{ tableState, madeInOptions }] = useDependencies(TableStore);\n\n        const madeInColumnMenu = useMemo(\n            () => multiSelectColumnMenuFilter(madeInOptions),\n            [madeInOptions]\n        );\n\n        const categoryColumnMenu = useMemo(\n            () =>\n                multiSelectColumnMenuFilter(\n                    new Array(20).fill(0).map((_, index) => index),\n                    undefined,\n                    { contentMaxHeight: '250px' }\n                ),\n            []\n        );\n\n        return (\n            <Table tableState={tableState}>\n                <TableColumn field=\"ProductID\" title=\"ID\" editable={false} width=\"100px\" />\n\n                <TableColumn field=\"ProductName\" title=\"Product Name\" width=\"240px\" />\n\n                <TableColumn field=\"MadeIn\" title=\"Made In\" columnMenu={madeInColumnMenu} />\n                <TableColumn\n                    field=\"CategoryID\"\n                    title=\"CategoryID\"\n                    columnMenu={categoryColumnMenu}\n                />\n            </Table>\n        );\n    })\n);\n"],"names":["useMemo","provide","useDependencies","observer","Table","TableColumn","multiSelectColumnMenuFilter","TableStore","MultiSelectDefaultExample","singletons","tableState","madeInOptions","madeInColumnMenu","categoryColumnMenu","Array","fill","map","_","index","undefined","contentMaxHeight","field","title","editable","width","columnMenu"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AAEpC,SAASC,OAAO,EAAEC,eAAe,QAAQ,0BAA0B;AAEnE,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,KAAK,EAAEC,WAAW,EAAEC,2BAA2B,QAAQ,QAAQ;AAExE,SAASC,UAAU,QAAQ,gBAAgB;AAE3C,OAAO,MAAMC,4BAAgCP,QAAQ;IACjDQ,YAAY;QAACF;KAAW;AAC5B,GACIJ,SAAS;IACL,MAAM,CAAC,EAAEO,UAAU,EAAEC,aAAa,EAAE,CAAC,GAAGT,gBAAgBK;IAExD,MAAMK,mBAAmBZ,QACrB,IAAMM,4BAA4BK,gBAClC;QAACA;KAAc;IAGnB,MAAME,qBAAqBb,QACvB,IACIM,4BACI,IAAIQ,MAAM,IAAIC,IAAI,CAAC,GAAGC,GAAG,CAAC,CAACC,GAAGC,QAAUA,QACxCC,WACA;YAAEC,kBAAkB;QAAQ,IAEpC,EAAE;IAGN,qBACI,MAAChB;QAAMM,YAAYA;;0BACf,KAACL;gBAAYgB,OAAM;gBAAYC,OAAM;gBAAKC,UAAU;gBAAOC,OAAM;;0BAEjE,KAACnB;gBAAYgB,OAAM;gBAAcC,OAAM;gBAAeE,OAAM;;0BAE5D,KAACnB;gBAAYgB,OAAM;gBAASC,OAAM;gBAAUG,YAAYb;;0BACxD,KAACP;gBACGgB,OAAM;gBACNC,OAAM;gBACNG,YAAYZ;;;;AAI5B,IACF"}

package/dist/demo/filters/range-filter.js

@@ -2,25 +2,119 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { observer } from 'mobx-react';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
-import { Table, TableColumn, DateRangeColumnMenuFilter, NumericRangeColumnMenuFilter, CurrencyRangeColumnMenuFilter, } from '../..';
+import { Table, TableColumn, DateRangeColumnMenuFilter, NumericRangeColumnMenuFilter, CurrencyRangeColumnMenuFilter } from '../..';
 import { TableStore } from './table.store';
 import { Banner } from '@servicetitan/design-system';
 export const RangeSelectDateExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    singletons: [
+        TableStore
+    ]
+})(observer(()=>{
     const [{ tableState }] = useDependencies(TableStore);
-    return (_jsxs(Fragment, { children: [_jsx(Banner, { title: "Date range filter", className: "m-b-2", children: "Allows to choose date range" }), _jsxs(Table, { tableState: tableState, children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", width: "240px" }), _jsx(TableColumn, { field: "UnitsOnOrder", title: "Units On Order", columnMenu: DateRangeColumnMenuFilter })] })] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Banner, {
+                title: "Date range filter",
+                className: "m-b-2",
+                children: "Allows to choose date range"
+            }),
+            /*#__PURE__*/ _jsxs(Table, {
+                tableState: tableState,
+                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: "UnitsOnOrder",
+                        title: "Units On Order",
+                        columnMenu: DateRangeColumnMenuFilter
+                    })
+                ]
+            })
+        ]
+    });
 }));
 export const RangeSelectNumberExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    singletons: [
+        TableStore
+    ]
+})(observer(()=>{
     const [{ tableState }] = useDependencies(TableStore);
-    return (_jsxs(Fragment, { children: [_jsx(Banner, { title: "Numeric range filter", className: "m-b-2", children: "Allows to choose numeric range" }), _jsxs(Table, { tableState: tableState, children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", width: "240px" }), _jsx(TableColumn, { field: "UnitsInStock", title: "Units In Stock", columnMenu: NumericRangeColumnMenuFilter })] })] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Banner, {
+                title: "Numeric range filter",
+                className: "m-b-2",
+                children: "Allows to choose numeric range"
+            }),
+            /*#__PURE__*/ _jsxs(Table, {
+                tableState: tableState,
+                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: "UnitsInStock",
+                        title: "Units In Stock",
+                        columnMenu: NumericRangeColumnMenuFilter
+                    })
+                ]
+            })
+        ]
+    });
 }));
 export const RangeSelectCurrencyExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    singletons: [
+        TableStore
+    ]
+})(observer(()=>{
     const [{ tableState }] = useDependencies(TableStore);
-    return (_jsxs(Fragment, { children: [_jsx(Banner, { title: "Currency range filter", className: "m-b-2", children: "Allows to choose currency range" }), _jsxs(Table, { tableState: tableState, children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", width: "240px" }), _jsx(TableColumn, { field: "UnitPrice", title: "Unit Price", columnMenu: CurrencyRangeColumnMenuFilter })] })] }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Banner, {
+                title: "Currency range filter",
+                className: "m-b-2",
+                children: "Allows to choose currency range"
+            }),
+            /*#__PURE__*/ _jsxs(Table, {
+                tableState: tableState,
+                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: "UnitPrice",
+                        title: "Unit Price",
+                        columnMenu: CurrencyRangeColumnMenuFilter
+                    })
+                ]
+            })
+        ]
+    });
 }));
+
 //# sourceMappingURL=range-filter.js.map

package/dist/demo/filters/range-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/range-filter.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/demo/filters/range-filter.tsx"],"sourcesContent":["import { FC, Fragment } from 'react';\nimport { observer } from 'mobx-react';\nimport { provide, useDependencies } from '@servicetitan/react-ioc';\n\nimport {\n    Table,\n    TableColumn,\n    DateRangeColumnMenuFilter,\n    NumericRangeColumnMenuFilter,\n    CurrencyRangeColumnMenuFilter,\n} from '../..';\nimport { TableStore } from './table.store';\nimport { Banner } from '@servicetitan/design-system';\n\nexport const RangeSelectDateExample: FC = provide({\n    singletons: [TableStore],\n})(\n    observer(() => {\n        const [{ tableState }] = useDependencies(TableStore);\n\n        return (\n            <Fragment>\n                <Banner title=\"Date range filter\" className=\"m-b-2\">\n                    Allows to choose date range\n                </Banner>\n                <Table tableState={tableState}>\n                    <TableColumn field=\"ProductID\" title=\"ID\" editable={false} width=\"100px\" />\n                    <TableColumn field=\"ProductName\" title=\"Product Name\" width=\"240px\" />\n                    <TableColumn\n                        field=\"UnitsOnOrder\"\n                        title=\"Units On Order\"\n                        columnMenu={DateRangeColumnMenuFilter}\n                    />\n                </Table>\n            </Fragment>\n        );\n    })\n);\n\nexport const RangeSelectNumberExample: FC = provide({\n    singletons: [TableStore],\n})(\n    observer(() => {\n        const [{ tableState }] = useDependencies(TableStore);\n\n        return (\n            <Fragment>\n                <Banner title=\"Numeric range filter\" className=\"m-b-2\">\n                    Allows to choose numeric range\n                </Banner>\n                <Table tableState={tableState}>\n                    <TableColumn field=\"ProductID\" title=\"ID\" editable={false} width=\"100px\" />\n                    <TableColumn field=\"ProductName\" title=\"Product Name\" width=\"240px\" />\n                    <TableColumn\n                        field=\"UnitsInStock\"\n                        title=\"Units In Stock\"\n                        columnMenu={NumericRangeColumnMenuFilter}\n                    />\n                </Table>\n            </Fragment>\n        );\n    })\n);\n\nexport const RangeSelectCurrencyExample: FC = provide({\n    singletons: [TableStore],\n})(\n    observer(() => {\n        const [{ tableState }] = useDependencies(TableStore);\n\n        return (\n            <Fragment>\n                <Banner title=\"Currency range filter\" className=\"m-b-2\">\n                    Allows to choose currency range\n                </Banner>\n                <Table tableState={tableState}>\n                    <TableColumn field=\"ProductID\" title=\"ID\" editable={false} width=\"100px\" />\n                    <TableColumn field=\"ProductName\" title=\"Product Name\" width=\"240px\" />\n                    <TableColumn\n                        field=\"UnitPrice\"\n                        title=\"Unit Price\"\n                        columnMenu={CurrencyRangeColumnMenuFilter}\n                    />\n                </Table>\n            </Fragment>\n        );\n    })\n);\n"],"names":["Fragment","observer","provide","useDependencies","Table","TableColumn","DateRangeColumnMenuFilter","NumericRangeColumnMenuFilter","CurrencyRangeColumnMenuFilter","TableStore","Banner","RangeSelectDateExample","singletons","tableState","title","className","field","editable","width","columnMenu","RangeSelectNumberExample","RangeSelectCurrencyExample"],"mappings":";AAAA,SAAaA,QAAQ,QAAQ,QAAQ;AACrC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,OAAO,EAAEC,eAAe,QAAQ,0BAA0B;AAEnE,SACIC,KAAK,EACLC,WAAW,EACXC,yBAAyB,EACzBC,4BAA4B,EAC5BC,6BAA6B,QAC1B,QAAQ;AACf,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,MAAM,QAAQ,8BAA8B;AAErD,OAAO,MAAMC,yBAA6BT,QAAQ;IAC9CU,YAAY;QAACH;KAAW;AAC5B,GACIR,SAAS;IACL,MAAM,CAAC,EAAEY,UAAU,EAAE,CAAC,GAAGV,gBAAgBM;IAEzC,qBACI,MAACT;;0BACG,KAACU;gBAAOI,OAAM;gBAAoBC,WAAU;0BAAQ;;0BAGpD,MAACX;gBAAMS,YAAYA;;kCACf,KAACR;wBAAYW,OAAM;wBAAYF,OAAM;wBAAKG,UAAU;wBAAOC,OAAM;;kCACjE,KAACb;wBAAYW,OAAM;wBAAcF,OAAM;wBAAeI,OAAM;;kCAC5D,KAACb;wBACGW,OAAM;wBACNF,OAAM;wBACNK,YAAYb;;;;;;AAKhC,IACF;AAEF,OAAO,MAAMc,2BAA+BlB,QAAQ;IAChDU,YAAY;QAACH;KAAW;AAC5B,GACIR,SAAS;IACL,MAAM,CAAC,EAAEY,UAAU,EAAE,CAAC,GAAGV,gBAAgBM;IAEzC,qBACI,MAACT;;0BACG,KAACU;gBAAOI,OAAM;gBAAuBC,WAAU;0BAAQ;;0BAGvD,MAACX;gBAAMS,YAAYA;;kCACf,KAACR;wBAAYW,OAAM;wBAAYF,OAAM;wBAAKG,UAAU;wBAAOC,OAAM;;kCACjE,KAACb;wBAAYW,OAAM;wBAAcF,OAAM;wBAAeI,OAAM;;kCAC5D,KAACb;wBACGW,OAAM;wBACNF,OAAM;wBACNK,YAAYZ;;;;;;AAKhC,IACF;AAEF,OAAO,MAAMc,6BAAiCnB,QAAQ;IAClDU,YAAY;QAACH;KAAW;AAC5B,GACIR,SAAS;IACL,MAAM,CAAC,EAAEY,UAAU,EAAE,CAAC,GAAGV,gBAAgBM;IAEzC,qBACI,MAACT;;0BACG,KAACU;gBAAOI,OAAM;gBAAwBC,WAAU;0BAAQ;;0BAGxD,MAACX;gBAAMS,YAAYA;;kCACf,KAACR;wBAAYW,OAAM;wBAAYF,OAAM;wBAAKG,UAAU;wBAAOC,OAAM;;kCACjE,KAACb;wBAAYW,OAAM;wBAAcF,OAAM;wBAAeI,OAAM;;kCAC5D,KAACb;wBACGW,OAAM;wBACNF,OAAM;wBACNK,YAAYX;;;;;;AAKhC,IACF"}

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

@@ -6,52 +6,150 @@ import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { Table, TableColumn, selectColumnMenuFilter } from '../..';
 import { TableStore } from './table.store';
 import { categories, CategoryCell } from './categories';
-export const PackageCell = ({ dataItem, tdProps }) => {
-    var _a;
-    return (_jsx("td", { ...tdProps, children: (_a = dataItem === null || dataItem === void 0 ? void 0 : dataItem.Package) === null || _a === void 0 ? void 0 : _a.PackageName }));
+export const PackageCell = ({ dataItem, tdProps })=>{
+    var _dataItem_Package;
+    return /*#__PURE__*/ _jsx("td", {
+        ...tdProps,
+        children: dataItem === null || dataItem === void 0 ? void 0 : (_dataItem_Package = dataItem.Package) === null || _dataItem_Package === void 0 ? void 0 : _dataItem_Package.PackageName
+    });
 };
 export const SelectAsyncExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    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 (_jsxs(Fragment, { children: [_jsxs(Banner, { title: "Default filter with async select", className: "m-b-2", children: ["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.", _jsx("br", {}), "Use it when there can be greater than 20 possible 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", width: "240px" }), _jsx(TableColumn, { field: "MadeIn", title: "Made In (async single-select filter)", columnMenu: madeInColumnMenu }), _jsx(TableColumn, { field: "CategoryID", title: "Category (async multi-select filter)", columnMenu: categoryColumnMenu, cell: CategoryCell })] })] }));
+    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 /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Banner, {
+                title: "Default filter with async select",
+                className: "m-b-2",
+                children: [
+                    "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.",
+                    /*#__PURE__*/ _jsx("br", {}),
+                    "Use it when there can be greater than 20 possible 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",
+                        width: "240px"
+                    }),
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "MadeIn",
+                        title: "Made In (async single-select filter)",
+                        columnMenu: madeInColumnMenu
+                    }),
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "CategoryID",
+                        title: "Category (async multi-select filter)",
+                        columnMenu: categoryColumnMenu,
+                        cell: CategoryCell
+                    })
+                ]
+            })
+        ]
+    });
 }));
 export const SelectSyncExample = provide({
-    singletons: [TableStore],
-})(observer(() => {
+    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) => item === null || item === void 0 ? void 0 : item.PackageId,
-    }), [packageOptions]);
-    return (_jsxs(Fragment, { children: [_jsx(Banner, { title: "Default filter with sync select", className: "m-b-2", children: "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" }), _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 (sync single-select filter)", columnMenu: madeInColumnMenu }), _jsx(TableColumn, { field: "CategoryID", title: "Category (sync multi-select filter)", columnMenu: categoryColumnMenu, cell: CategoryCell }), _jsx(TableColumn, { field: "Package", title: "Package (sync single-select filter)", columnMenu: packageColumnMenu, cell: PackageCell })] })] }));
+    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)=>item === null || item === void 0 ? void 0 : item.PackageId
+        }), [
+        packageOptions
+    ]);
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Banner, {
+                title: "Default filter with sync select",
+                className: "m-b-2",
+                children: "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"
+            }),
+            /*#__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 (sync single-select filter)",
+                        columnMenu: madeInColumnMenu
+                    }),
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "CategoryID",
+                        title: "Category (sync multi-select filter)",
+                        columnMenu: categoryColumnMenu,
+                        cell: CategoryCell
+                    }),
+                    /*#__PURE__*/ _jsx(TableColumn, {
+                        field: "Package",
+                        title: "Package (sync single-select filter)",
+                        columnMenu: packageColumnMenu,
+                        cell: PackageCell
+                    })
+                ]
+            })
+        ]
+    });
 }));
+
 //# sourceMappingURL=select-filter.js.map

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

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