@servicetitan/table 24.3.0 → 24.3.2

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

@@ -1,3 +1,4 @@
 import { FC } from 'react';
 export declare const SingleSelectDefaultExample: FC;
+export declare const SingleSelectCustomFilterExample: 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,EAAY,MAAM,OAAO,CAAC;AAY9C,eAAO,MAAM,0BAA0B,EAAE,EAmDxC,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;AAEF,eAAO,MAAM,+BAA+B,EAAE,EAoC7C,CAAC"}

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

@@ -18,4 +18,18 @@ export const SingleSelectDefaultExample = provide({
     }), []);
     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 })] }))] }));
 }));
+export const SingleSelectCustomFilterExample = provide({
+    singletons: [TableStore],
+})(observer(() => {
+    const [{ tableState }] = useDependencies(TableStore);
+    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,
+        });
+    }, []);
+    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", {}), "Custom filter allows you to provide custom filtering 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 (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":";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"}
+{"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":"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"}

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

@@ -4,6 +4,7 @@ export interface SingleSelectColumnMenuOptions<TV, TO = TV> {
     options: TO[];
     valueSelector?: (item: TO) => TV;
     renderItem?: (item: TO) => ReactNode | string;
+    filterOperator?: (listItem: any, value: TV) => boolean;
 }
 export declare function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(props: SingleSelectColumnMenuOptions<TV, TO>): (props: import("@servicetitan/design-system").TableColumnMenuProps) => JSX.Element;
 //# sourceMappingURL=single-select-filter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"single-select-filter.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAM,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AA8BlD,MAAM,WAAW,6BAA6B,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE;IACtD,OAAO,EAAE,EAAE,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,SAAS,GAAG,MAAM,CAAC;CACjD;AAED,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,MAAM,EAAE,EAAE,GAAG,EAAE,EACnE,KAAK,EAAE,6BAA6B,CAAC,EAAE,EAAE,EAAE,CAAC,sFAuB/C"}
+{"version":3,"file":"single-select-filter.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAM,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAiClD,MAAM,WAAW,6BAA6B,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE;IACtD,OAAO,EAAE,EAAE,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,SAAS,GAAG,MAAM,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,OAAO,CAAC;CAC1D;AAED,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,MAAM,EAAE,EAAE,GAAG,EAAE,EACnE,KAAK,EAAE,6BAA6B,CAAC,EAAE,EAAE,EAAE,CAAC,sFA8B/C"}

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

@@ -17,11 +17,14 @@ export function singleSelectColumnMenuFilter(props) {
     const FilterCell = ({ value, onChange }) => {
         var _a;
         const handleChange = (value, event) => {
-            onChange({
-                value: value !== null && value !== void 0 ? value : '',
-                operator: value ? 'equals' : '',
-                syntheticEvent: event,
-            });
+            var _a;
+            const filter = value === undefined
+                ? { value: '', operator: '' }
+                : {
+                    value,
+                    operator: (_a = props.filterOperator) !== null && _a !== void 0 ? _a : 'equals',
+                };
+            onChange(Object.assign(Object.assign({}, filter), { syntheticEvent: event }));
         };
         return (_jsx(SelectorRadio, { options: props.options, value: value === '' ? undefined : value, onChange: handleChange, renderer: props.renderItem, valueSelector: (_a = props.valueSelector) !== null && _a !== void 0 ? _a : (option => option) }));
     };

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

@@ -1 +1 @@
-{"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAwB,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAWtE,MAAM,aAAsB,SAAQ,SAAgC;IAChE,MAAM;QACF,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEhD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACrD,OAAO;YACH,oDAAoD;YACpD,6BAAkB,SAAS,EAAC,sBAAsB,gBAC9C,KAAC,KAAK,IACF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,EAChD,OAAO,EAAE,KAAK,KAAK,WAAW,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,GACjE,KALK,KAAK,CAMT,CACV,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;CACJ;AAQD,MAAM,UAAU,4BAA4B,CACxC,KAA4C;IAE5C,MAAM,UAAU,GAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;QACjE,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAE,KAAuC,EAAE,EAAE;YACpF,QAAQ,CAAC;gBACL,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;gBAClB,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gBAC/B,cAAc,EAAE,KAAK;aACxB,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,OAAO,CACH,KAAC,aAAa,IACV,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACvC,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,aAAa,EAAE,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,GAC1D,CACL,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,4BAA4B,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC"}
+{"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAwB,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAUtE,MAAM,aAAsB,SAAQ,SAAgC;IAChE,MAAM;QACF,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEhD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACrD,OAAO;YACH,oDAAoD;YACpD,6BAAkB,SAAS,EAAC,sBAAsB,gBAC9C,KAAC,KAAK,IACF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,EAChD,OAAO,EAAE,KAAK,KAAK,WAAW,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,GACjE,KALK,KAAK,CAMT,CACV,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;CACJ;AASD,MAAM,UAAU,4BAA4B,CACxC,KAA4C;IAE5C,MAAM,UAAU,GAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;QACjE,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAE,KAAuC,EAAE,EAAE;;YACpF,MAAM,MAAM,GACR,KAAK,KAAK,SAAS;gBACf,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;gBAC7B,CAAC,CAAC;oBACI,KAAK;oBACL,QAAQ,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,QAAQ;iBAC7C,CAAC;YAEZ,QAAQ,iCACD,MAAM,KACT,cAAc,EAAE,KAAK,IACvB,CAAC;QACP,CAAC,CAAC;QAEF,OAAO,CACH,KAAC,aAAa,IACV,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACvC,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,aAAa,EAAE,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,GAC1D,CACL,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,4BAA4B,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC"}

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

@@ -3,5 +3,6 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const SingleSelect: () => JSX.Element;
+export declare const DefaultSingleSelect: () => JSX.Element;
+export declare const CustomFilterSingleSelect: () => JSX.Element;
 //# sourceMappingURL=single-select-filter.stories.d.ts.map

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,mBAAuC,CAAC"}
+{"version":3,"file":"single-select-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";;;;AAKA,wBAEE;AAEF,eAAO,MAAM,mBAAmB,mBAAuC,CAAC;AACxE,eAAO,MAAM,wBAAwB,mBAA4C,CAAC"}

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SingleSelectDefaultExample } from '../../demo/filters/single-select-filter';
+import { SingleSelectDefaultExample, SingleSelectCustomFilterExample, } from '../../demo/filters/single-select-filter';
 export default {
     title: 'Table/Filters/SingleSelect',
 };
-export const SingleSelect = () => _jsx(SingleSelectDefaultExample, {});
+export const DefaultSingleSelect = () => _jsx(SingleSelectDefaultExample, {});
+export const CustomFilterSingleSelect = () => _jsx(SingleSelectCustomFilterExample, {});
 //# 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,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"}
+{"version":3,"file":"single-select-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,0BAA0B,EAC1B,+BAA+B,GAClC,MAAM,yCAAyC,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,4BAA4B;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,KAAC,0BAA0B,KAAG,CAAC;AACxE,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAAC,KAAC,+BAA+B,KAAG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/table",
-    "version": "24.3.0",
+    "version": "24.3.2",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/table",
     "repository": {
@@ -37,9 +37,9 @@
         "memoize-one": "~6.0.0"
     },
     "devDependencies": {
-        "@servicetitan/data-query": "^24.3.0",
+        "@servicetitan/data-query": "^24.3.2",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^24.3.0",
+        "@servicetitan/form": "^24.3.2",
         "@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.3.0",
+        "@servicetitan/data-query": "^24.3.2",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^24.3.0",
+        "@servicetitan/form": "^24.3.2",
         "@servicetitan/react-ioc": ">21.0.0",
         "@servicetitan/suppress-warnings": ">21.0.0",
         "accounting": "~0.4.1",
@@ -72,5 +72,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "561a1b732af3c94e3ae57fb92e90e99396b30c15"
+    "gitHead": "c1b59595282a50978b190693924a2c5fdad68c09"
 }

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

@@ -62,3 +62,41 @@ export const SingleSelectDefaultExample: FC = provide({
         );
     })
 );
+
+export const SingleSelectCustomFilterExample: FC = provide({
+    singletons: [TableStore],
+})(
+    observer(() => {
+        const [{ tableState }] = useDependencies(TableStore);
+
+        const productNameCustomFilter = useMemo(() => {
+            const isVowel = (str: string) => /[aeiou]/i.test(str[0]);
+
+            return singleSelectColumnMenuFilter({
+                options: [0, 1],
+                renderItem: item => (item ? 'Start with Vowel' : 'Start with Consonants'),
+                filterOperator: (madeIn: string, value: number) =>
+                    madeIn ? (value ? isVowel(madeIn) : !isVowel(madeIn)) : false,
+            });
+        }, []);
+
+        return (
+            <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 />
+                    Custom filter allows you to provide custom filtering options
+                </Banner>
+                <Table tableState={tableState} striped={false}>
+                    <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
+                    <TableColumn
+                        field="ProductName"
+                        title="Product Name (custom single-select filter)"
+                        columnMenu={productNameCustomFilter}
+                    />
+                </Table>
+            </Fragment>
+        );
+    })
+);

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

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

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

@@ -1,9 +1,9 @@
 import { Component, SyntheticEvent, ReactNode, FC } from 'react';
 
+import { IdType } from '@servicetitan/data-query';
 import { TableFilterCellProps, Radio } from '@servicetitan/design-system';
 
 import { renderCustomColumnMenuFilter } from '../column-menu-filters';
-import { IdType } from '@servicetitan/data-query';
 
 interface SelectorProps<TV, TO> {
     options: TO[];
@@ -37,6 +37,7 @@ export interface SingleSelectColumnMenuOptions<TV, TO = TV> {
     options: TO[];
     valueSelector?: (item: TO) => TV;
     renderItem?: (item: TO) => ReactNode | string;
+    filterOperator?: (listItem: any, value: TV) => boolean;
 }
 
 export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
@@ -44,9 +45,16 @@ export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
 ) {
     const FilterCell: FC<TableFilterCellProps> = ({ value, onChange }) => {
         const handleChange = (value: TV | undefined, event: SyntheticEvent<HTMLInputElement>) => {
+            const filter =
+                value === undefined
+                    ? { value: '', operator: '' }
+                    : {
+                          value,
+                          operator: props.filterOperator ?? 'equals',
+                      };
+
             onChange({
-                value: value ?? '',
-                operator: value ? 'equals' : '',
+                ...filter,
                 syntheticEvent: event,
             });
         };