@servicetitan/table 24.2.0 → 24.3.0

package/dist/demo/filters/async-select-filter.d.ts

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-export declare const TableExample: FC;
+export declare const AsyncSelectDefaultExample: FC;
 //# sourceMappingURL=async-select-filter.d.ts.map

package/dist/demo/filters/async-select-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"async-select-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/async-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AASpC,eAAO,MAAM,YAAY,EAAE,EA2C1B,CAAC"}
+{"version":3,"file":"async-select-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/async-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAY,MAAM,OAAO,CAAC;AAU9C,eAAO,MAAM,yBAAyB,EAAE,EAoDvC,CAAC"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useMemo, Fragment } from 'react';
 import { observer } from 'mobx-react';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { Table, TableColumn, asyncSelectColumnMenuFilter } from '../..';
 import { TableStore } from './table.store';
 import { CategoryCell } from './categories';
-export const TableExample = provide({
+import { Banner } from '@servicetitan/design-system';
+export const AsyncSelectDefaultExample = provide({
     singletons: [TableStore],
 })(observer(() => {
     const [{ categoryFetcher, madeInFetcher, tableState }] = useDependencies(TableStore);
@@ -18,6 +19,6 @@ export const TableExample = provide({
         placeholder: 'Search for Categories',
         multiple: true,
     }), [categoryFetcher]);
-    return (_jsxs(Table, Object.assign({ 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 })] })));
+    return (_jsxs(Fragment, { children: [_jsxs(Banner, Object.assign({ 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, Object.assign({ 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 })] }))] }));
 }));
 //# sourceMappingURL=async-select-filter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"async-select-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/async-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAM,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,2BAA2B,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAO,OAAO,CAAC;IACpC,UAAU,EAAE,CAAC,UAAU,CAAC;CAC3B,CAAC,CACE,QAAQ,CAAC,GAAG,EAAE;IACV,MAAM,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAErF,MAAM,gBAAgB,GAAG,OAAO,CAC5B,GAAG,EAAE,CACD,2BAA2B,CAAC;QACxB,WAAW,EAAE,aAAa;QAC1B,WAAW,EAAE,qBAAqB;KACrC,CAAC,EACN,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACD,2BAA2B,CAAC;QACxB,WAAW,EAAE,eAAe;QAC5B,WAAW,EAAE,uBAAuB;QACpC,QAAQ,EAAE,IAAI;KACjB,CAAC,EACN,CAAC,eAAe,CAAC,CACpB,CAAC;IAEF,OAAO,CACH,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,iBACzC,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAC3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EACtE,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,KAAK,EAAC,sCAAsC,EAC5C,UAAU,EAAE,gBAAgB,GAC9B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,sCAAsC,EAC5C,UAAU,EAAE,kBAAkB,EAC9B,IAAI,EAAE,YAAY,GACpB,KACE,CACX,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}
+{"version":3,"file":"async-select-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/async-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,2BAA2B,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,MAAM,CAAC,MAAM,yBAAyB,GAAO,OAAO,CAAC;IACjD,UAAU,EAAE,CAAC,UAAU,CAAC;CAC3B,CAAC,CACE,QAAQ,CAAC,GAAG,EAAE;IACV,MAAM,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAErF,MAAM,gBAAgB,GAAG,OAAO,CAC5B,GAAG,EAAE,CACD,2BAA2B,CAAC;QACxB,WAAW,EAAE,aAAa;QAC1B,WAAW,EAAE,qBAAqB;KACrC,CAAC,EACN,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACD,2BAA2B,CAAC;QACxB,WAAW,EAAE,eAAe;QAC5B,WAAW,EAAE,uBAAuB;QACpC,QAAQ,EAAE,IAAI;KACjB,CAAC,EACN,CAAC,eAAe,CAAC,CACpB,CAAC;IAEF,OAAO,CACH,MAAC,QAAQ,eACL,MAAC,MAAM,kBAAC,KAAK,EAAC,kCAAkC,EAAC,SAAS,EAAC,OAAO,4MAI9D,cAAM,kEAED,EACT,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,iBACzC,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAC3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EACtE,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,KAAK,EAAC,sCAAsC,EAC5C,UAAU,EAAE,gBAAgB,GAC9B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,sCAAsC,EAC5C,UAAU,EAAE,kBAAkB,EAC9B,IAAI,EAAE,YAAY,GACpB,KACE,IACD,CACd,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}

package/dist/demo/filters/multiselect-filter.d.ts

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-export declare const TableExampleSimple: FC;
+export declare const MultiSelectDefaultExample: FC;
 //# sourceMappingURL=multiselect-filter.d.ts.map

package/dist/demo/filters/multiselect-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/multiselect-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAUpC,eAAO,MAAM,kBAAkB,EAAE,EAqBhC,CAAC"}
+{"version":3,"file":"multiselect-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/multiselect-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAUpC,eAAO,MAAM,yBAAyB,EAAE,EAqBvC,CAAC"}

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

@@ -4,7 +4,7 @@ import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { observer } from 'mobx-react';
 import { Table, TableColumn, multiSelectColumnMenuFilter } from '../..';
 import { TableStore } from './table.store';
-export const TableExampleSimple = provide({
+export const MultiSelectDefaultExample = provide({
     singletons: [TableStore],
 })(observer(() => {
     const [{ tableState, madeInOptions }] = useDependencies(TableStore);

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,kBAAkB,GAAO,OAAO,CAAC;IAC1C,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,OAAO,CACH,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,iBACzB,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,KACxE,CACX,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}
+{"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,OAAO,CACH,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,iBACzB,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,KACxE,CACX,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}

package/dist/demo/filters/range-filter.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-export declare const TableExampleDate: FC;
-export declare const TableExampleNumber: FC;
-export declare const TableExampleCurrency: FC;
+export declare const RangeSelectDateExample: FC;
+export declare const RangeSelectNumberExample: FC;
+export declare const RangeSelectCurrencyExample: FC;
 //# sourceMappingURL=range-filter.d.ts.map

package/dist/demo/filters/range-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/range-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3B,eAAO,MAAM,gBAAgB,EAAE,EAkB9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAkBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,EAkBlC,CAAC"}
+{"version":3,"file":"range-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/range-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAcrC,eAAO,MAAM,sBAAsB,EAAE,EAuBpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,EAuBtC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAuBxC,CAAC"}

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

@@ -1,24 +1,26 @@
 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 { TableStore } from './table.store';
-export const TableExampleDate = provide({
+import { Banner } from '@servicetitan/design-system';
+export const RangeSelectDateExample = provide({
     singletons: [TableStore],
 })(observer(() => {
     const [{ tableState }] = useDependencies(TableStore);
-    return (_jsxs(Table, Object.assign({ 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 (_jsxs(Fragment, { children: [_jsx(Banner, Object.assign({ title: "Date range filter", className: "m-b-2" }, { children: "Allows to choose date range" })), _jsxs(Table, Object.assign({ 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 })] }))] }));
 }));
-export const TableExampleNumber = provide({
+export const RangeSelectNumberExample = provide({
     singletons: [TableStore],
 })(observer(() => {
     const [{ tableState }] = useDependencies(TableStore);
-    return (_jsxs(Table, Object.assign({ 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 (_jsxs(Fragment, { children: [_jsx(Banner, Object.assign({ title: "Numeric range filter", className: "m-b-2" }, { children: "Allows to choose numeric range" })), _jsxs(Table, Object.assign({ 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 })] }))] }));
 }));
-export const TableExampleCurrency = provide({
+export const RangeSelectCurrencyExample = provide({
     singletons: [TableStore],
 })(observer(() => {
     const [{ tableState }] = useDependencies(TableStore);
-    return (_jsxs(Table, Object.assign({ 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 (_jsxs(Fragment, { children: [_jsx(Banner, Object.assign({ title: "Currency range filter", className: "m-b-2" }, { children: "Allows to choose currency range" })), _jsxs(Table, Object.assign({ 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 })] }))] }));
 }));
 //# 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":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EACH,KAAK,EACL,WAAW,EACX,yBAAyB,EACzB,4BAA4B,EAC5B,6BAA6B,GAChC,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAO,OAAO,CAAC;IACxC,UAAU,EAAE,CAAC,UAAU,CAAC;CAC3B,CAAC,CACE,QAAQ,CAAC,GAAG,EAAE;IACV,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAErD,OAAO,CACH,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,iBACzB,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAC3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EACtE,KAAC,WAAW,IACR,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,gBAAgB,EACtB,UAAU,EAAE,yBAAyB,GACvC,KACE,CACX,CAAC;AACN,CAAC,CAAC,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAO,OAAO,CAAC;IAC1C,UAAU,EAAE,CAAC,UAAU,CAAC;CAC3B,CAAC,CACE,QAAQ,CAAC,GAAG,EAAE;IACV,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAErD,OAAO,CACH,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,iBACzB,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAC3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EACtE,KAAC,WAAW,IACR,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,gBAAgB,EACtB,UAAU,EAAE,4BAA4B,GAC1C,KACE,CACX,CAAC;AACN,CAAC,CAAC,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAO,OAAO,CAAC;IAC5C,UAAU,EAAE,CAAC,UAAU,CAAC;CAC3B,CAAC,CACE,QAAQ,CAAC,GAAG,EAAE;IACV,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAErD,OAAO,CACH,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,iBACzB,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAC3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EACtE,KAAC,WAAW,IACR,KAAK,EAAC,WAAW,EACjB,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE,6BAA6B,GAC3C,KACE,CACX,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}
+{"version":3,"file":"range-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/range-filter.tsx"],"names":[],"mappings":"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"}

package/dist/demo/filters/single-select-filter.d.ts

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-export declare const TableExample: FC;
+export declare const SingleSelectDefaultExample: FC;
 //# sourceMappingURL=single-select-filter.d.ts.map

package/dist/demo/filters/single-select-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"single-select-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAWpC,eAAO,MAAM,YAAY,EAAE,EAuC1B,CAAC"}
+{"version":3,"file":"single-select-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAY,MAAM,OAAO,CAAC;AAY9C,eAAO,MAAM,0BAA0B,EAAE,EAmDxC,CAAC"}

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

@@ -1,20 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useMemo, Fragment } from 'react';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { observer } from 'mobx-react';
 import { Table, TableColumn, singleSelectColumnMenuFilter } from '../..';
 import { TableStore } from './table.store';
 import { categories, CategoryCell } from './categories';
-export const TableExample = provide({
+import { Banner, BodyText } from '@servicetitan/design-system';
+export const SingleSelectDefaultExample = provide({
     singletons: [TableStore],
 })(observer(() => {
     const [{ tableState, madeInOptions }] = useDependencies(TableStore);
     const madeInColumnMenu = useMemo(() => singleSelectColumnMenuFilter({ options: madeInOptions }), [madeInOptions]);
     const categoryColumnMenu = useMemo(() => singleSelectColumnMenuFilter({
         options: categories,
-        renderItem: cat => cat.CategoryName,
+        renderItem: cat => (_jsxs(BodyText, { children: [_jsx("span", Object.assign({ className: "fw-bold" }, { children: "cat.CategoryName" })), " (#", cat.CategoryID, ")"] })),
         valueSelector: cat => cat.CategoryID,
     }), []);
-    return (_jsxs(Table, Object.assign({ 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 })] })));
+    return (_jsxs(Fragment, { children: [_jsxs(Banner, Object.assign({ 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, Object.assign({ 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 })] }))] }));
 }));
 //# 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":";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,4BAA4B,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAExD,MAAM,CAAC,MAAM,YAAY,GAAO,OAAO,CAAC;IACpC,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,4BAA4B,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAC9D,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACD,4BAA4B,CAAC;QACzB,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,YAAY;QACnC,aAAa,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU;KACvC,CAAC,EACN,EAAE,CACL,CAAC;IAEF,OAAO,CACH,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,iBACzC,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAC3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EACtE,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,KAAK,EAAC,uCAAuC,EAC7C,UAAU,EAAE,gBAAgB,GAC9B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,wCAAwC,EAC9C,UAAU,EAAE,kBAAkB,EAC9B,IAAI,EAAE,YAAY,GACpB,KACE,CACX,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}
+{"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,4BAA4B,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,CAAC,MAAM,0BAA0B,GAAO,OAAO,CAAC;IAClD,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,4BAA4B,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAC9D,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACD,4BAA4B,CAAC;QACzB,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,GAAG,CAAC,EAAE,CAAC,CACf,MAAC,QAAQ,eACL,6BAAM,SAAS,EAAC,SAAS,sCAAwB,SAAI,GAAG,CAAC,UAAU,SAC5D,CACd;QACD,aAAa,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU;KACvC,CAAC,EACN,EAAE,CACL,CAAC;IAEF,OAAO,CACH,MAAC,QAAQ,eACL,MAAC,MAAM,kBAAC,KAAK,EAAC,mCAAmC,EAAC,SAAS,EAAC,OAAO,+JAG/D,cAAM,iEAED,EACT,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,iBACzC,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAC3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EACtE,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,KAAK,EAAC,uCAAuC,EAC7C,UAAU,EAAE,gBAAgB,GAC9B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,wCAAwC,EAC9C,UAAU,EAAE,kBAAkB,EAC9B,IAAI,EAAE,YAAY,GACpB,KACE,IACD,CACd,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}

package/dist/filters/async-select/async-select-filter.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"async-select-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/async-select/async-select-filter.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AAEF,eAAO,MAAM,WAAW,mBAAyB,CAAC"}
+{"version":3,"file":"async-select-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/async-select/async-select-filter.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AAEF,eAAO,MAAM,WAAW,mBAAsC,CAAC"}

package/dist/filters/async-select/async-select-filter.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableExample } from '../../demo/filters/async-select-filter';
+import { AsyncSelectDefaultExample } from '../../demo/filters/async-select-filter';
 export default {
-    title: 'Table/Filters',
+    title: 'Table/Filters/AsyncSelect',
 };
-export const AsyncSelect = () => _jsx(TableExample, {});
+export const AsyncSelect = () => _jsx(AsyncSelectDefaultExample, {});
 //# sourceMappingURL=async-select-filter.stories.js.map

package/dist/filters/async-select/async-select-filter.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"async-select-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/async-select/async-select-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEtE,eAAe;IACX,KAAK,EAAE,eAAe;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,KAAC,YAAY,KAAG,CAAC"}
+{"version":3,"file":"async-select-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/async-select/async-select-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,eAAe;IACX,KAAK,EAAE,2BAA2B;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,KAAC,yBAAyB,KAAG,CAAC"}

package/dist/filters/multiselect-filter/multiselect-filter.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/multiselect-filter/multiselect-filter.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AAEF,eAAO,MAAM,kBAAkB,mBAA+B,CAAC"}
+{"version":3,"file":"multiselect-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/multiselect-filter/multiselect-filter.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AAEF,eAAO,MAAM,kBAAkB,mBAAsC,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableExampleSimple } from '../../demo/filters/multiselect-filter';
+import { MultiSelectDefaultExample } from '../../demo/filters/multiselect-filter';
 export default {
     title: 'Table/Filters/MultiSelect',
 };
-export const DefaultMultiSelect = () => _jsx(TableExampleSimple, {});
+export const DefaultMultiSelect = () => _jsx(MultiSelectDefaultExample, {});
 //# sourceMappingURL=multiselect-filter.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"multiselect-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/multiselect-filter/multiselect-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAE3E,eAAe;IACX,KAAK,EAAE,2BAA2B;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,KAAC,kBAAkB,KAAG,CAAC"}
+{"version":3,"file":"multiselect-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/multiselect-filter/multiselect-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAElF,eAAe;IACX,KAAK,EAAE,2BAA2B;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,KAAC,yBAAyB,KAAG,CAAC"}

package/dist/filters/range-filter/range-filter.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/range-filter/range-filter.stories.tsx"],"names":[],"mappings":";;;;AAMA,wBAEE;AAEF,eAAO,MAAM,SAAS,mBAA6B,CAAC;AACpD,eAAO,MAAM,YAAY,mBAA+B,CAAC;AACzD,eAAO,MAAM,aAAa,mBAAiC,CAAC"}
+{"version":3,"file":"range-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/range-filter/range-filter.stories.tsx"],"names":[],"mappings":";;;;AAMA,wBAEE;AAEF,eAAO,MAAM,SAAS,mBAAmC,CAAC;AAC1D,eAAO,MAAM,YAAY,mBAAqC,CAAC;AAC/D,eAAO,MAAM,aAAa,mBAAuC,CAAC"}

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableExampleCurrency, TableExampleDate, TableExampleNumber, } from '../../demo/filters/range-filter';
+import { RangeSelectCurrencyExample, RangeSelectDateExample, RangeSelectNumberExample, } from '../../demo/filters/range-filter';
 export default {
     title: 'Table/Filters/Range',
 };
-export const DateRange = () => _jsx(TableExampleDate, {});
-export const NumericRange = () => _jsx(TableExampleNumber, {});
-export const CurrencyRange = () => _jsx(TableExampleCurrency, {});
+export const DateRange = () => _jsx(RangeSelectDateExample, {});
+export const NumericRange = () => _jsx(RangeSelectNumberExample, {});
+export const CurrencyRange = () => _jsx(RangeSelectCurrencyExample, {});
 //# sourceMappingURL=range-filter.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"range-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/range-filter/range-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,GACrB,MAAM,iCAAiC,CAAC;AAEzC,eAAe;IACX,KAAK,EAAE,qBAAqB;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,KAAC,gBAAgB,KAAG,CAAC;AACpD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAC,kBAAkB,KAAG,CAAC;AACzD,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,KAAC,oBAAoB,KAAG,CAAC"}
+{"version":3,"file":"range-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/range-filter/range-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,0BAA0B,EAC1B,sBAAsB,EACtB,wBAAwB,GAC3B,MAAM,iCAAiC,CAAC;AAEzC,eAAe;IACX,KAAK,EAAE,qBAAqB;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,KAAC,sBAAsB,KAAG,CAAC;AAC1D,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAC,wBAAwB,KAAG,CAAC;AAC/D,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,KAAC,0BAA0B,KAAG,CAAC"}

package/dist/filters/single-select/single-select-filter.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"single-select-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AAEF,eAAO,MAAM,YAAY,mBAAyB,CAAC"}
+{"version":3,"file":"single-select-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AAEF,eAAO,MAAM,YAAY,mBAAuC,CAAC"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableExample } from '../../demo/filters/single-select-filter';
+import { SingleSelectDefaultExample } from '../../demo/filters/single-select-filter';
 export default {
-    title: 'Table/Filters',
+    title: 'Table/Filters/SingleSelect',
 };
-export const SingleSelect = () => _jsx(TableExample, {});
+export const SingleSelect = () => _jsx(SingleSelectDefaultExample, {});
 //# sourceMappingURL=single-select-filter.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"single-select-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAEvE,eAAe;IACX,KAAK,EAAE,eAAe;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAC,YAAY,KAAG,CAAC"}
+{"version":3,"file":"single-select-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,eAAe;IACX,KAAK,EAAE,4BAA4B;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAC,0BAA0B,KAAG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/table",
-    "version": "24.2.0",
+    "version": "24.3.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/table",
     "repository": {
@@ -37,9 +37,9 @@
         "memoize-one": "~6.0.0"
     },
     "devDependencies": {
-        "@servicetitan/data-query": "^24.2.0",
+        "@servicetitan/data-query": "^24.3.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^24.2.0",
+        "@servicetitan/form": "^24.3.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": "^24.2.0",
+        "@servicetitan/data-query": "^24.3.0",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^24.2.0",
+        "@servicetitan/form": "^24.3.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": "30e7e25285f3bfbc348473ebcb7f03edd088e64e"
+    "gitHead": "561a1b732af3c94e3ae57fb92e90e99396b30c15"
 }

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

@@ -1,4 +1,4 @@
-import { useMemo, FC } from 'react';
+import { useMemo, FC, Fragment } from 'react';
 import { observer } from 'mobx-react';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
 
@@ -6,8 +6,9 @@ import { Table, TableColumn, asyncSelectColumnMenuFilter } from '../..';
 
 import { TableStore } from './table.store';
 import { CategoryCell } from './categories';
+import { Banner } from '@servicetitan/design-system';
 
-export const TableExample: FC = provide({
+export const AsyncSelectDefaultExample: FC = provide({
     singletons: [TableStore],
 })(
     observer(() => {
@@ -33,21 +34,30 @@ export const TableExample: FC = provide({
         );
 
         return (
-            <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>
+                <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>
         );
     })
 );

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

@@ -8,7 +8,7 @@ import { Table, TableColumn, multiSelectColumnMenuFilter } from '../..';
 
 import { TableStore } from './table.store';
 
-export const TableExampleSimple: FC = provide({
+export const MultiSelectDefaultExample: FC = provide({
     singletons: [TableStore],
 })(
     observer(() => {

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, Fragment } from 'react';
 import { observer } from 'mobx-react';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
 
@@ -10,63 +10,79 @@ import {
     CurrencyRangeColumnMenuFilter,
 } from '../..';
 import { TableStore } from './table.store';
+import { Banner } from '@servicetitan/design-system';
 
-export const TableExampleDate: FC = provide({
+export const RangeSelectDateExample: FC = provide({
     singletons: [TableStore],
 })(
     observer(() => {
         const [{ tableState }] = useDependencies(TableStore);
 
         return (
-            <Table tableState={tableState}>
-                <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
-                <TableColumn field="ProductName" title="Product Name" width="240px" />
-                <TableColumn
-                    field="UnitsOnOrder"
-                    title="Units On Order"
-                    columnMenu={DateRangeColumnMenuFilter}
-                />
-            </Table>
+            <Fragment>
+                <Banner title="Date range filter" className="m-b-2">
+                    Allows to choose date range
+                </Banner>
+                <Table tableState={tableState}>
+                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                    <TableColumn field="ProductName" title="Product Name" width="240px" />
+                    <TableColumn
+                        field="UnitsOnOrder"
+                        title="Units On Order"
+                        columnMenu={DateRangeColumnMenuFilter}
+                    />
+                </Table>
+            </Fragment>
         );
     })
 );
 
-export const TableExampleNumber: FC = provide({
+export const RangeSelectNumberExample: FC = provide({
     singletons: [TableStore],
 })(
     observer(() => {
         const [{ tableState }] = useDependencies(TableStore);
 
         return (
-            <Table tableState={tableState}>
-                <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
-                <TableColumn field="ProductName" title="Product Name" width="240px" />
-                <TableColumn
-                    field="UnitsInStock"
-                    title="Units In Stock"
-                    columnMenu={NumericRangeColumnMenuFilter}
-                />
-            </Table>
+            <Fragment>
+                <Banner title="Numeric range filter" className="m-b-2">
+                    Allows to choose numeric range
+                </Banner>
+                <Table tableState={tableState}>
+                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                    <TableColumn field="ProductName" title="Product Name" width="240px" />
+                    <TableColumn
+                        field="UnitsInStock"
+                        title="Units In Stock"
+                        columnMenu={NumericRangeColumnMenuFilter}
+                    />
+                </Table>
+            </Fragment>
         );
     })
 );
 
-export const TableExampleCurrency: FC = provide({
+export const RangeSelectCurrencyExample: FC = provide({
     singletons: [TableStore],
 })(
     observer(() => {
         const [{ tableState }] = useDependencies(TableStore);
 
         return (
-            <Table tableState={tableState}>
-                <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
-                <TableColumn field="ProductName" title="Product Name" width="240px" />
-                <TableColumn
-                    field="UnitPrice"
-                    title="Unit Price"
-                    columnMenu={CurrencyRangeColumnMenuFilter}
-                />
-            </Table>
+            <Fragment>
+                <Banner title="Currency range filter" className="m-b-2">
+                    Allows to choose currency range
+                </Banner>
+                <Table tableState={tableState}>
+                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                    <TableColumn field="ProductName" title="Product Name" width="240px" />
+                    <TableColumn
+                        field="UnitPrice"
+                        title="Unit Price"
+                        columnMenu={CurrencyRangeColumnMenuFilter}
+                    />
+                </Table>
+            </Fragment>
         );
     })
 );

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

@@ -1,4 +1,4 @@
-import { useMemo, FC } from 'react';
+import { useMemo, FC, Fragment } from 'react';
 
 import { provide, useDependencies } from '@servicetitan/react-ioc';
 
@@ -8,8 +8,9 @@ import { Table, TableColumn, singleSelectColumnMenuFilter } from '../..';
 
 import { TableStore } from './table.store';
 import { categories, CategoryCell } from './categories';
+import { Banner, BodyText } from '@servicetitan/design-system';
 
-export const TableExample: FC = provide({
+export const SingleSelectDefaultExample: FC = provide({
     singletons: [TableStore],
 })(
     observer(() => {
@@ -24,28 +25,40 @@ export const TableExample: FC = provide({
             () =>
                 singleSelectColumnMenuFilter({
                     options: categories,
-                    renderItem: cat => cat.CategoryName,
+                    renderItem: cat => (
+                        <BodyText>
+                            <span className="fw-bold">cat.CategoryName</span> (#{cat.CategoryID})
+                        </BodyText>
+                    ),
                     valueSelector: cat => cat.CategoryID,
                 }),
             []
         );
 
         return (
-            <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 (simple single-select filter)"
-                    columnMenu={madeInColumnMenu}
-                />
-                <TableColumn
-                    field="CategoryID"
-                    title="Category (simple single-select filter)"
-                    columnMenu={categoryColumnMenu}
-                    cell={CategoryCell}
-                />
-            </Table>
+            <Fragment>
+                <Banner title="Default filter with single select" className="m-b-2">
+                    Single select filter allows to choose one option from the provided list. You can
+                    pass simple options (string or number) or complex objects
+                    <br />
+                    Use it when options list is fixed and less than 20 items
+                </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 (simple single-select filter)"
+                        columnMenu={madeInColumnMenu}
+                    />
+                    <TableColumn
+                        field="CategoryID"
+                        title="Category (simple single-select filter)"
+                        columnMenu={categoryColumnMenu}
+                        cell={CategoryCell}
+                    />
+                </Table>
+            </Fragment>
         );
     })
 );

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

@@ -1,7 +1,7 @@
-import { TableExample } from '../../demo/filters/async-select-filter';
+import { AsyncSelectDefaultExample } from '../../demo/filters/async-select-filter';
 
 export default {
-    title: 'Table/Filters',
+    title: 'Table/Filters/AsyncSelect',
 };
 
-export const AsyncSelect = () => <TableExample />;
+export const AsyncSelect = () => <AsyncSelectDefaultExample />;

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

@@ -1,7 +1,7 @@
-import { TableExampleSimple } from '../../demo/filters/multiselect-filter';
+import { MultiSelectDefaultExample } from '../../demo/filters/multiselect-filter';
 
 export default {
     title: 'Table/Filters/MultiSelect',
 };
 
-export const DefaultMultiSelect = () => <TableExampleSimple />;
+export const DefaultMultiSelect = () => <MultiSelectDefaultExample />;

package/src/filters/range-filter/range-filter.stories.tsx

@@ -1,13 +1,13 @@
 import {
-    TableExampleCurrency,
-    TableExampleDate,
-    TableExampleNumber,
+    RangeSelectCurrencyExample,
+    RangeSelectDateExample,
+    RangeSelectNumberExample,
 } from '../../demo/filters/range-filter';
 
 export default {
     title: 'Table/Filters/Range',
 };
 
-export const DateRange = () => <TableExampleDate />;
-export const NumericRange = () => <TableExampleNumber />;
-export const CurrencyRange = () => <TableExampleCurrency />;
+export const DateRange = () => <RangeSelectDateExample />;
+export const NumericRange = () => <RangeSelectNumberExample />;
+export const CurrencyRange = () => <RangeSelectCurrencyExample />;

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

@@ -1,7 +1,7 @@
-import { TableExample } from '../../demo/filters/single-select-filter';
+import { SingleSelectDefaultExample } from '../../demo/filters/single-select-filter';
 
 export default {
-    title: 'Table/Filters',
+    title: 'Table/Filters/SingleSelect',
 };
 
-export const SingleSelect = () => <TableExample />;
+export const SingleSelect = () => <SingleSelectDefaultExample />;