@wix/patterns 1.349.0 → 1.351.0

package/src/components/CustomFieldFilters/buildCustomFieldFilterElement.tsx

@@ -1,9 +1,4 @@
-import {
-  CustomField,
-  CustomFieldType,
-  FiltersMap,
-  STRING_OPERATORS,
-} from '@wix/bex-core';
+import { CustomField, CustomFieldType, FiltersMap } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../../state';
 import React from 'react';
 import { DateCustomFieldFilter } from './DateCustomFieldFilter';
@@ -11,7 +6,7 @@ import { DateTimeCustomFieldFilter } from './DateTimeCustomFieldFilter';
 import { FilterProps } from '../../model';
 import { CheckboxCustomFieldFilter } from './CheckboxCustomFieldFilter';
 import { NumberRangeFilter } from '../NumberRangeFilter';
-import { OperatorFilterPicker } from '../OperatorFilterPicker';
+import { OperatorFilterCustomFieldFilter } from './OperatorFilterCustomFieldFilter';
 
 export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
   state: ToolbarCollectionState<T, F>,
@@ -25,24 +20,9 @@ export const buildCustomFieldFilterElement = <T, F extends FiltersMap>(
     checkbox: CheckboxCustomFieldFilter,
     integer: NumberRangeFilter,
     decimal: (props) => <NumberRangeFilter {...props} decimal />,
-    shortText: (props) => (
-      <OperatorFilterPicker
-        {...props}
-        allowedOperators={STRING_OPERATORS}
-      />
-    ),
-    url: (props) => (
-      <OperatorFilterPicker
-        {...props}
-        allowedOperators={STRING_OPERATORS}
-      />
-    ),
-    longText: (props) => (
-      <OperatorFilterPicker
-        {...props}
-        allowedOperators={STRING_OPERATORS}
-      />
-    ),
+    shortText: OperatorFilterCustomFieldFilter,
+    url: OperatorFilterCustomFieldFilter,
+    longText: OperatorFilterCustomFieldFilter,
   };
 
   const CustomFieldFilterComponent =

package/src/components/CustomFieldsPanel/ManageFieldsPopoverMenu.tsx

@@ -1,6 +1,6 @@
 import { IconButton, PopoverMenu, Tooltip } from '@wix/design-system';
 import React from 'react';
-import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useWixPatternsContainer, usePageContext } from '@wix/bex-core/react';
 import { ArchiveSmall, EditSmall, MoreSmall } from '@wix/wix-ui-icons-common';
 import { CustomFieldOrigin, withoutDefaults } from '@wix/bex-core';
 import { cairoCtaClicked } from '@wix/bex-core/bi';
@@ -23,6 +23,7 @@ function _ManageFieldsPopoverMenu({
 }: ManageFieldsPopoverMenuProps) {
   const container = useWixPatternsContainer();
   const { translate: t } = container;
+  const { stackingRootRef } = usePageContext();
 
   if (!state.dataExtension.hasWritePermissions) {
     return (
@@ -72,6 +73,7 @@ function _ManageFieldsPopoverMenu({
     <PopoverMenu
       textSize="small"
       placement="bottom-end"
+      appendTo={stackingRootRef.current || 'parent'}
       dataHook="custom-field-options"
       onShow={onTriggerMenu}
       triggerElement={

package/src/components/CustomFieldsWidget/CustomFieldsWidgetCommonComponents.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { usePageContext } from '@wix/bex-core/react';
+import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldsWidgetState } from '../../state';
 import { DeleteFieldModal } from '../ArchivedItemsPanel/DeleteFieldModal';
 
@@ -12,6 +12,7 @@ const _CustomFieldsWidgetCommonComponents = ({
   state,
 }: CustomFieldsWidgetCommonComponentsProps) => {
   const page = usePageContext();
+  const { useRelativeSidePanel } = useWixPatternsContainer();
 
   const { modalsContainerRef, stackingRootRef } = page;
 
@@ -27,7 +28,9 @@ const _CustomFieldsWidgetCommonComponents = ({
       {WixPatternsModalsContainer && (
         <WixPatternsModalsContainer
           rootRef={stackingRootRef}
-          anchorRef={modalsContainerRef}
+          anchorRef={
+            useRelativeSidePanel ? stackingRootRef : modalsContainerRef
+          }
           state={state.panels}
         />
       )}

package/src/components/DataExtension/CollectionDataExtensionState.ts

@@ -130,8 +130,6 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
   }
 
   _addCustomFieldFilters() {
-    const { translate } = this.dataExtension.container;
-
     const customFieldFilter: {
       [key in CustomFieldType]?: (
         params: Partial<FilterStateBaseParams<any>>,
@@ -142,9 +140,9 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
       checkbox: idNameArrayFilter,
       decimal: numberRangeFilter,
       integer: numberRangeFilter,
-      shortText: (params) => stringOperatorFilter({ ...params, translate }),
-      url: (params) => stringOperatorFilter({ ...params, translate }),
-      longText: (params) => stringOperatorFilter({ ...params, translate }),
+      shortText: stringOperatorFilter,
+      url: stringOperatorFilter,
+      longText: stringOperatorFilter,
     };
 
     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_ = "DragHandle1390618320";
+var _namespace_ = "DragHandle159753572";
 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":"DragHandle1390618320__root"};
+export var classes = {"root":"DragHandle159753572__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_ = "EntityPagePlain885077018";
+var _namespace_ = "EntityPagePlain51217001";
 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":"EntityPagePlain885077018__root"};
+export var classes = {"root":"EntityPagePlain51217001__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_ = "Fade3283116330";
+var _namespace_ = "Fade2264954586";
 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":"Fade3283116330__root"};
+export var classes = {"root":"Fade2264954586__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_ = "Heading1206694024";
+var _namespace_ = "Heading187758573";
 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":"Heading1206694024__root"};
+export var classes = {"root":"Heading187758573__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_ = "InputOverflow3746903394";
+var _namespace_ = "InputOverflow3433287593";
 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":"InputOverflow3746903394__root"};
+export var classes = {"root":"InputOverflow3433287593__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Kanban/Card.tsx

@@ -6,6 +6,7 @@ import { KanbanBaseProps } from './KanbanProps';
 import { ItemActionsState } from '../../state';
 import { CardActions } from './CardActions';
 import { KanbanState } from '../../state/KanbanState';
+import { KanbanCardTags } from './KanbanCardTags';
 
 export interface KanbanCardProps<T, S, F extends FiltersMap> {
   keyedItem: KeyedItem<T>;
@@ -36,6 +37,7 @@ function _CardComponent<T, S, F extends FiltersMap>({
   itemActionsState,
   isDragging,
   state,
+  tags,
 }: KanbanCardProps<T, S, F>) {
   const { title, subtitle, additionalInfo, badge } = item;
 
@@ -56,6 +58,7 @@ function _CardComponent<T, S, F extends FiltersMap>({
           dataHook={`kanban-card-${stageKey}-${item.key}`}
           direction="vertical"
         >
+          <Box marginBottom="3px">{badge}</Box>
           {typeof title === 'string' ? (
             <Box paddingBottom="3px">
               <Text
@@ -79,7 +82,12 @@ function _CardComponent<T, S, F extends FiltersMap>({
           )}
 
           <Box direction="vertical" gap="1px">
-            <Box>{badge}</Box>
+            {tags && (
+              <KanbanCardTags
+                item={originalItem}
+                dataHook={`kanban-card-tags-${stageKey}-${item.key}`}
+              />
+            )}
             <Box>{subtitle}</Box>
             <Box>{additionalInfo}</Box>
           </Box>

package/src/components/Kanban/Kanban.uni.driver.ts

@@ -10,6 +10,8 @@ import {
   IconButtonUniDriver,
   MessageModalLayoutUniDriver,
   PopoverMenuUniDriver,
+  TagListUniDriver,
+  TagUniDriver,
   TextUniDriver,
   TooltipUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
@@ -169,6 +171,23 @@ export function KanbanUniDriver(base: UniDriver, body: UniDriver) {
           body.$('[data-hook="collection-action-modal"]'),
           body,
         ),
+      tagList: (stageKey: string, itemId: string) =>
+        TagListUniDriver(
+          base.$(`[data-hook="kanban-card-tags-${stageKey}-${itemId}"]`),
+          body,
+        ),
+      tagInList: (stageKey: string, itemId: string, tagId: string) =>
+        TagUniDriver(
+          base.$(
+            `[data-hook="kanban-card-tags-${stageKey}-${itemId}-${tagId}"]`,
+          ),
+          body,
+        ),
+      toggleHiddenTagsCounter: (stageKey: string, itemId: string) =>
+        TagUniDriver(
+          base.$(`[data-hook="kanban-card-tags-${stageKey}-${itemId}-toggle"]`),
+          body,
+        ),
       stagesSkeleton: () =>
         BoxUniDriver(base.$('[data-hook="kanban-stages-skeleton"]'), body),
       noResultsBox: (stageKey: string) =>

package/src/components/Kanban/KanbanCardTags.tsx

@@ -0,0 +1,94 @@
+import { Box, Tag as TagComponent } from '@wix/design-system';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import React, { useState } from 'react';
+import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
+import { observer } from 'mobx-react-lite';
+import { Tags } from '@wix/bex-core';
+
+const MAX_VISIBLE_TAGS = 3;
+
+export interface KanbanCardTagsProps<T> {
+  item: T;
+  /**
+   * Data hook for the tags container
+   */
+  dataHook?: string;
+  /**
+   * Maximum number of tags to show before collapsing
+   * @default 3
+   */
+  maxVisibleTags?: number;
+}
+
+function _KanbanCardTags<T>({
+  item,
+  dataHook,
+  maxVisibleTags = MAX_VISIBLE_TAGS,
+}: KanbanCardTagsProps<T>) {
+  const { tagsCollectionState } = useToolbarCollectionContext();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (!tagsCollectionState?.tagsManagementState) {
+    return null;
+  }
+
+  const tags: Tags | undefined =
+    tagsCollectionState._getTags?.(item) ?? (item as { tags?: Tags }).tags;
+
+  if (!tags?.privateTags?.tagIds?.length) {
+    return null;
+  }
+
+  const tagItems = tags.privateTags.tagIds
+    .map((tagId: string) =>
+      tagsCollectionState.tagsManagementState.items.find(
+        (tag: Tag) => tag.id === tagId,
+      ),
+    )
+    .filter(Boolean) as Tag[];
+
+  if (tagItems.length === 0) {
+    return null;
+  }
+
+  const visibleTags = isExpanded ? tagItems : tagItems.slice(0, maxVisibleTags);
+  const hiddenCount = tagItems.length - maxVisibleTags;
+  const hasMoreTags = hiddenCount > 0;
+
+  return (
+    <Box
+      dataHook={dataHook}
+      direction="horizontal"
+      gap="tiny"
+      verticalAlign="middle"
+      flexWrap="wrap"
+      marginTop="6px"
+    >
+      {visibleTags.map((tag) => (
+        <TagComponent
+          key={tag.id}
+          id={tag.id!}
+          dataHook={`${dataHook}-${tag.id}`}
+          size="tiny"
+          removable={false}
+        >
+          {tag.name}
+        </TagComponent>
+      ))}
+      {hasMoreTags && !isExpanded && (
+        <TagComponent
+          id={`${dataHook}-toggle`}
+          dataHook={`${dataHook}-toggle`}
+          size="tiny"
+          removable={false}
+          onClick={() => setIsExpanded(!isExpanded)}
+          skin="lightOutlined"
+        >
+          {`+${hiddenCount}`}
+        </TagComponent>
+      )}
+    </Box>
+  );
+}
+
+export const KanbanCardTags = observer(_KanbanCardTags);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2291814844";
+var _namespace_ = "LoadingRow2602476114";
 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":"LoadingRow2291814844__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2291814844__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2602476114__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2602476114__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_ = "MaxHeightText1421655495";
+var _namespace_ = "MaxHeightText2651815921";
 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":"MaxHeightText1421655495__root"};
+export var classes = {"root":"MaxHeightText2651815921__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_ = "MaxLines1361859029";
+var _namespace_ = "MaxLines572981836";
 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":"MaxLines1361859029__root"};
+export var classes = {"root":"MaxLines572981836__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_ = "MultiBulkActionToolbar1531832909";
+var _namespace_ = "MultiBulkActionToolbar2622755640";
 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":"MultiBulkActionToolbar1531832909__root","leftGroupWrapper":"MultiBulkActionToolbar1531832909__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1531832909__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1531832909__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2622755640__root","leftGroupWrapper":"MultiBulkActionToolbar2622755640__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2622755640__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2622755640__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_ = "NestedTablePlaceholderStatesRow647433253";
+var _namespace_ = "NestedTablePlaceholderStatesRow3260667355";
 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":"NestedTablePlaceholderStatesRow647433253__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3260667355__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_ = "NestedTableRow708190955";
+var _namespace_ = "NestedTableRow427753520";
 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":"NestedTableRow708190955__root","firstLevel":"NestedTableRow708190955__firstLevel","placeholder":"NestedTableRow708190955__placeholder","parentHovered":"NestedTableRow708190955__parentHovered"};
+export var classes = {"root":"NestedTableRow427753520__root","firstLevel":"NestedTableRow427753520__firstLevel","placeholder":"NestedTableRow427753520__placeholder","parentHovered":"NestedTableRow427753520__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_ = "MultipleDragOverlayEffect2165751233";
+var _namespace_ = "MultipleDragOverlayEffect2455567331";
 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":"MultipleDragOverlayEffect2165751233__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2455567331__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_ = "NestedTableDragAndDropRow559033372";
+var _namespace_ = "NestedTableDragAndDropRow164554285";
 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":"NestedTableDragAndDropRow559033372__root"};
+export var classes = {"root":"NestedTableDragAndDropRow164554285__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/OperatorFilterPicker/OperatorFilterPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   Box,
@@ -12,11 +12,13 @@ import {
   FilterOperator,
   OperatorFilterValue,
   getOperatorLabel,
+  operatorNeedsValue,
 } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useOperatorFilterState } from '../../hooks/useOperatorFilterState';
 import { FilterProps } from '../../model';
 import { ChevronDown } from '@wix/wix-ui-icons-common';
+import { renderOperatorFilterToolbarTag } from './renderOperatorFilterToolbarTag';
 
 export interface OperatorPickerProps<T>
   extends FilterProps<OperatorFilterValue<T>> {
@@ -31,14 +33,53 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
   const { filter, allowedOperators } = 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 hasOperatorWithValue = useMemo(
+    () => allowedOperators.some((op) => operatorNeedsValue(op)),
+    [allowedOperators],
+  );
+
+  if (!hasOperatorWithValue) {
+    throw new Error(
+      `[OperatorFilterPicker] Invalid configuration for filter "${filter.name}": ` +
+        `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,
+    allowedOperators: orderedOperators,
   });
 
   useEffect(() => state.init(), [state]);
 
-  const operatorOptions = allowedOperators.map((op) =>
+  const operatorOptions = orderedOperators.map((op) =>
     listItemSelectBuilder({
       id: op,
       title: t(getOperatorLabel(op)),
@@ -96,4 +137,10 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
   );
 }
 
-export const OperatorFilterPicker = observer(_OperatorFilterPicker);
+export const OperatorFilterPicker = observer(_OperatorFilterPicker) as typeof _OperatorFilterPicker & {
+  displayName?: string;
+  renderPresetToolbarTag?: typeof renderOperatorFilterToolbarTag;
+};
+
+OperatorFilterPicker.displayName = 'OperatorFilterPicker';
+OperatorFilterPicker.renderPresetToolbarTag = renderOperatorFilterToolbarTag;

package/src/components/OperatorFilterPicker/renderOperatorFilterToolbarTag.ts

@@ -0,0 +1,32 @@
+import {
+  FilterItem,
+  OperatorFilterValue,
+  getOperatorLabel,
+  Translate,
+} from '@wix/bex-core';
+import { createElement } from 'react';
+import { FilterProps } from '../../model';
+import { FilterTagContent } from '../AppliedFiltersTagList/FilterTagContent';
+
+export const renderOperatorFilterToolbarTag = (
+  container: { translate: Translate },
+  params: { filterProps: FilterProps<any> },
+) => {
+  return <T>(item: FilterItem<OperatorFilterValue<T>>) => {
+    const { filterProps } = params;
+    const { translate: t } = container;
+    const { operator, value } = item as FilterItem<OperatorFilterValue<T>>;
+
+    const operatorLabel = t(getOperatorLabel(operator));
+    const displayValue =
+      value !== null && value !== '' ? `  ${value}` : '';
+
+    return {
+      children: createElement(
+        FilterTagContent,
+        { filterProps },
+        `${operatorLabel}${displayValue}`,
+      ),
+    };
+  };
+};