@wix/patterns 1.351.0 → 1.352.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.351.0";
+export declare const version = "patterns@1.352.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.351.0",
+  "version": "1.352.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -205,7 +205,7 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.270.0",
+    "@wix/bex-core": "2.271.0",
     "@wix/bex-utils": "2.82.0",
     "@wix/essentials": "^0.1.26",
     "@wix/sdk": "^1.15.22",
@@ -423,5 +423,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "c05e4dad58a5cff1fb33d46190d4b05978acde95765e5e3b0a7f40e6"
+  "falconPackageHash": "3c8e346c7f43c7cf149334b483188a870823fffb325b80117d8f2abc"
 }

package/src/components/CardContainer/CardContainer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer2036947062";
+var _namespace_ = "CardContainer788456778";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CardContainer2036947062__root"};
+export var classes = {"root":"CardContainer788456778__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2497789504";
+var _namespace_ = "Collapse801451134";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse2497789504__root","exit":"Collapse2497789504__exit"};
+export var classes = {"root":"Collapse801451134__root","exit":"Collapse801451134__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage232444772";
+var _namespace_ = "CollectionPage309807280";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage232444772__root"};
+export var classes = {"root":"CollectionPage309807280__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSectionHeader/CollectionSectionHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3936456788";
+var _namespace_ = "CollectionSectionHeader4064214935";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader3936456788__root","summaryIcon":"CollectionSectionHeader3936456788__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader4064214935__root","summaryIcon":"CollectionSectionHeader4064214935__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable1727045852";
+var _namespace_ = "CollectionTable3426326144";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable1727045852__root"};
+export var classes = {"root":"CollectionTable3426326144__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2983473631";
+var _namespace_ = "CollectionToolbar159339193";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar2983473631__root","left":"CollectionToolbar2983473631__left","right":"CollectionToolbar2983473631__right","fullWidth":"CollectionToolbar2983473631__fullWidth"};
+export var classes = {"root":"CollectionToolbar159339193__root","left":"CollectionToolbar159339193__left","right":"CollectionToolbar159339193__right","fullWidth":"CollectionToolbar159339193__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1332492063";
+var _namespace_ = "SearchOrCustomFilter3975397441";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter1332492063__root","search":"SearchOrCustomFilter1332492063__search","searchMobile":"SearchOrCustomFilter1332492063__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3975397441__root","search":"SearchOrCustomFilter3975397441__search","searchMobile":"SearchOrCustomFilter3975397441__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly1171540302";
+var _namespace_ = "AutoCompleteReadonly511008955";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly1171540302__root"};
+export var classes = {"root":"AutoCompleteReadonly511008955__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown2778398368";
+var _namespace_ = "ViewsDropdown2975714284";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown2778398368__root"};
+export var classes = {"root":"ViewsDropdown2975714284__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldFilters/OperatorFilterCustomFieldFilter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { OperatorFilterValue, STRING_OPERATORS } from '@wix/bex-core';
+import { OperatorFilterValue } from '@wix/bex-core';
 import { FilterProps } from '../../model';
 import { OperatorFilterPicker } from '../OperatorFilterPicker';
 
@@ -9,7 +9,7 @@ interface OperatorFilterCustomFieldFilterProps
 export const OperatorFilterCustomFieldFilter = (
   props: OperatorFilterCustomFieldFilterProps,
 ) => {
-  return <OperatorFilterPicker {...props} allowedOperators={STRING_OPERATORS} />;
+  return <OperatorFilterPicker {...props} />;
 };
 
 OperatorFilterCustomFieldFilter.displayName = 'OperatorFilterCustomFieldFilter';

package/src/components/DataExtension/CollectionDataExtensionState.ts

@@ -15,6 +15,7 @@ import {
   CustomFieldType,
   numberRangeFilter,
   stringOperatorFilter,
+  STRING_OPERATORS,
 } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../../state';
 import { DataExtensionProps, DataExtensionType } from './DataExtension';
@@ -130,6 +131,12 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
   }
 
   _addCustomFieldFilters() {
+    const createStringFilter = (params: Partial<FilterStateBaseParams<any>>) =>
+      stringOperatorFilter({
+        ...params,
+        allowedOperators: STRING_OPERATORS,
+      });
+
     const customFieldFilter: {
       [key in CustomFieldType]?: (
         params: Partial<FilterStateBaseParams<any>>,
@@ -140,9 +147,9 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
       checkbox: idNameArrayFilter,
       decimal: numberRangeFilter,
       integer: numberRangeFilter,
-      shortText: stringOperatorFilter,
-      url: stringOperatorFilter,
-      longText: stringOperatorFilter,
+      shortText: createStringFilter,
+      url: createStringFilter,
+      longText: createStringFilter,
     };
 
     this.dataExtension.filterableCustomFields.forEach(

package/src/components/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle159753572";
+var _namespace_ = "DragHandle1719636738";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle159753572__root"};
+export var classes = {"root":"DragHandle1719636738__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain51217001";
+var _namespace_ = "EntityPagePlain2454018564";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EntityPagePlain51217001__root"};
+export var classes = {"root":"EntityPagePlain2454018564__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Fade/Fade.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade2264954586";
+var _namespace_ = "Fade4100073960";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Fade2264954586__root"};
+export var classes = {"root":"Fade4100073960__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Heading/Heading.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading187758573";
+var _namespace_ = "Heading1810640181";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Heading187758573__root"};
+export var classes = {"root":"Heading1810640181__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow3433287593";
+var _namespace_ = "InputOverflow259513846";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow3433287593__root"};
+export var classes = {"root":"InputOverflow259513846__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2602476114";
+var _namespace_ = "LoadingRow1962776937";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2602476114__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2602476114__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1962776937__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1962776937__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText2651815921";
+var _namespace_ = "MaxHeightText3996867344";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText2651815921__root"};
+export var classes = {"root":"MaxHeightText3996867344__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines572981836";
+var _namespace_ = "MaxLines4229375414";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines572981836__root"};
+export var classes = {"root":"MaxLines4229375414__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2622755640";
+var _namespace_ = "MultiBulkActionToolbar1760143859";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar2622755640__root","leftGroupWrapper":"MultiBulkActionToolbar2622755640__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2622755640__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2622755640__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1760143859__root","leftGroupWrapper":"MultiBulkActionToolbar1760143859__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1760143859__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1760143859__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow3260667355";
+var _namespace_ = "NestedTablePlaceholderStatesRow218800380";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow3260667355__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow218800380__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow427753520";
+var _namespace_ = "NestedTableRow3140066734";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow427753520__root","firstLevel":"NestedTableRow427753520__firstLevel","placeholder":"NestedTableRow427753520__placeholder","parentHovered":"NestedTableRow427753520__parentHovered"};
+export var classes = {"root":"NestedTableRow3140066734__root","firstLevel":"NestedTableRow3140066734__firstLevel","placeholder":"NestedTableRow3140066734__placeholder","parentHovered":"NestedTableRow3140066734__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect2455567331";
+var _namespace_ = "MultipleDragOverlayEffect2746358990";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect2455567331__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2746358990__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow164554285";
+var _namespace_ = "NestedTableDragAndDropRow2229560427";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow164554285__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2229560427__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/OperatorFilterPicker/OperatorFilterPicker.tsx

@@ -13,6 +13,7 @@ import {
   OperatorFilterValue,
   getOperatorLabel,
   operatorNeedsValue,
+  OperatorFilterState,
 } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useOperatorFilterState } from '../../hooks/useOperatorFilterState';
@@ -21,21 +22,14 @@ import { ChevronDown } from '@wix/wix-ui-icons-common';
 import { renderOperatorFilterToolbarTag } from './renderOperatorFilterToolbarTag';
 
 export interface OperatorPickerProps<T>
-  extends FilterProps<OperatorFilterValue<T>> {
-  /**
-   * List of allowed operators for this filter
-   * @external
-   */
-  allowedOperators: FilterOperator[];
-}
+  extends FilterProps<OperatorFilterValue<T>> {}
 
 function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
-  const { filter, allowedOperators } = props;
+  const { filter } = props;
   const { translate: t } = useWixPatternsContainer();
 
-  // Validate that at least one operator requires a value
-  // If all operators don't need values (EXISTS, IS_EMPTY, NOT_EXISTS),
-  // the developer should use a Checkbox filter instead
+  const filterState = filter as OperatorFilterState<T>;
+  const allowedOperators = filterState.allowedOperators;
   const hasOperatorWithValue = useMemo(
     () => allowedOperators.some((op) => operatorNeedsValue(op)),
     [allowedOperators],
@@ -44,42 +38,20 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
   if (!hasOperatorWithValue) {
     throw new Error(
       `[OperatorFilterPicker] Invalid configuration for filter "${filter.name}": ` +
-        `All operators in allowedOperators [${allowedOperators.join(', ')}] don't require a value. ` +
+        `All operators in allowedOperators [${allowedOperators.join(
+          ', ',
+        )}] don't require a value. ` +
         `When using only value-less operators like EXISTS, IS_EMPTY, or NOT_EXISTS, ` +
         `you should use a Checkbox filter component instead of OperatorFilterPicker. ` +
         `OperatorFilterPicker is designed for operators that require user input (e.g., EQUALS, CONTAINS, STARTS_WITH).`,
     );
   }
 
-  const orderedOperators = useMemo(() => {
-    const operatorOrder: FilterOperator[] = [
-      FilterOperator.EQUALS,
-      FilterOperator.NOT_EQUALS,
-      FilterOperator.IN,
-      FilterOperator.NOT_IN,
-      FilterOperator.CONTAINS,
-      FilterOperator.NOT_CONTAINS,
-      FilterOperator.STARTS_WITH,
-      FilterOperator.GREATER_THAN,
-      FilterOperator.GREATER_THAN_OR_EQUAL,
-      FilterOperator.LESS_THAN,
-      FilterOperator.LESS_THAN_OR_EQUAL,
-      FilterOperator.IS_EMPTY,
-      FilterOperator.EXISTS,
-      FilterOperator.NOT_EXISTS,
-    ];
-
-    return operatorOrder.filter((op) => allowedOperators.includes(op));
-  }, [allowedOperators]);
-
-  const state = useOperatorFilterState<T>({
-    filter,
-    allowedOperators: orderedOperators,
-  });
+  const state = useOperatorFilterState<T>({ filter });
 
   useEffect(() => state.init(), [state]);
 
-  const operatorOptions = orderedOperators.map((op) =>
+  const operatorOptions = allowedOperators.map((op) =>
     listItemSelectBuilder({
       id: op,
       title: t(getOperatorLabel(op)),
@@ -137,7 +109,9 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
   );
 }
 
-export const OperatorFilterPicker = observer(_OperatorFilterPicker) as typeof _OperatorFilterPicker & {
+export const OperatorFilterPicker = observer(
+  _OperatorFilterPicker,
+) as typeof _OperatorFilterPicker & {
   displayName?: string;
   renderPresetToolbarTag?: typeof renderOperatorFilterToolbarTag;
 };

package/src/components/OperatorFilterPicker/renderOperatorFilterToolbarTag.ts

@@ -18,8 +18,7 @@ export const renderOperatorFilterToolbarTag = (
     const { operator, value } = item as FilterItem<OperatorFilterValue<T>>;
 
     const operatorLabel = t(getOperatorLabel(operator));
-    const displayValue =
-      value !== null && value !== '' ? `  ${value}` : '';
+    const displayValue = value != null && value !== '' ? `  ${value}` : '';
 
     return {
       children: createElement(

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3984652993";
+var _namespace_ = "PickerContent3852751846";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent3984652993__root"};
+export var classes = {"root":"PickerContent3852751846__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep3306084158";
+var _namespace_ = "PickerContentAdditionalStep505382893";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep3306084158__root","titles":"PickerContentAdditionalStep3306084158__titles","suffix":"PickerContentAdditionalStep3306084158__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep505382893__root","titles":"PickerContentAdditionalStep505382893__titles","suffix":"PickerContentAdditionalStep505382893__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};