@wix/patterns 1.350.0 → 1.352.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/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,7 +131,11 @@ export class CollectionDataExtensionState<T, F extends FiltersMap> {
   }
 
   _addCustomFieldFilters() {
-    const { translate } = this.dataExtension.container;
+    const createStringFilter = (params: Partial<FilterStateBaseParams<any>>) =>
+      stringOperatorFilter({
+        ...params,
+        allowedOperators: STRING_OPERATORS,
+      });
 
     const customFieldFilter: {
       [key in CustomFieldType]?: (
@@ -142,9 +147,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: 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_ = "DragHandle3028207720";
+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":"DragHandle3028207720__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_ = "EntityPagePlain2668659888";
+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":"EntityPagePlain2668659888__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_ = "Fade3563359266";
+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":"Fade3563359266__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_ = "Heading766337662";
+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":"Heading766337662__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_ = "InputOverflow1779509954";
+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":"InputOverflow1779509954__root"};
+export var classes = {"root":"InputOverflow259513846__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_ = "LoadingRow553533932";
+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":"LoadingRow553533932__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow553533932__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_ = "MaxHeightText2504789387";
+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":"MaxHeightText2504789387__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_ = "MaxLines3028305029";
+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":"MaxLines3028305029__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_ = "MultiBulkActionToolbar2688608817";
+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":"MultiBulkActionToolbar2688608817__root","leftGroupWrapper":"MultiBulkActionToolbar2688608817__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2688608817__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2688608817__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_ = "NestedTablePlaceholderStatesRow1937939244";
+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":"NestedTablePlaceholderStatesRow1937939244__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_ = "NestedTableRow3689359283";
+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":"NestedTableRow3689359283__root","firstLevel":"NestedTableRow3689359283__firstLevel","placeholder":"NestedTableRow3689359283__placeholder","parentHovered":"NestedTableRow3689359283__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_ = "MultipleDragOverlayEffect3206783830";
+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":"MultipleDragOverlayEffect3206783830__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_ = "NestedTableDragAndDropRow744388253";
+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":"NestedTableDragAndDropRow744388253__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2229560427__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,29 +12,42 @@ import {
   FilterOperator,
   OperatorFilterValue,
   getOperatorLabel,
+  operatorNeedsValue,
+  OperatorFilterState,
 } 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>> {
-  /**
-   * 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();
 
-  const state = useOperatorFilterState<T>({
-    filter,
-    allowedOperators,
-  });
+  const filterState = filter as OperatorFilterState<T>;
+  const allowedOperators = filterState.allowedOperators;
+  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 state = useOperatorFilterState<T>({ filter });
 
   useEffect(() => state.init(), [state]);
 
@@ -96,4 +109,12 @@ 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,31 @@
+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}`,
+      ),
+    };
+  };
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3963351279";
+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":"PickerContent3963351279__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_ = "PickerContentAdditionalStep264967915";
+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":"PickerContentAdditionalStep264967915__root","titles":"PickerContentAdditionalStep264967915__titles","suffix":"PickerContentAdditionalStep264967915__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep505382893__root","titles":"PickerContentAdditionalStep505382893__titles","suffix":"PickerContentAdditionalStep505382893__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem3022048392";
+var _namespace_ = "PickerTableListItem3274383082";
 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":"PickerTableListItem3022048392__root"};
+export var classes = {"root":"PickerTableListItem3274383082__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};