@wix/patterns 1.331.0 → 1.332.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3827809647";
+var _namespace_ = "MultiBulkActionToolbar3671766982";
 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":"MultiBulkActionToolbar3827809647__root","leftGroupWrapper":"MultiBulkActionToolbar3827809647__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3827809647__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3827809647__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar3671766982__root","leftGroupWrapper":"MultiBulkActionToolbar3671766982__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3671766982__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3671766982__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_ = "NestedTablePlaceholderStatesRow3366154610";
+var _namespace_ = "NestedTablePlaceholderStatesRow3628483870";
 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":"NestedTablePlaceholderStatesRow3366154610__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3628483870__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_ = "NestedTableRow2392165746";
+var _namespace_ = "NestedTableRow3295565450";
 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":"NestedTableRow2392165746__root","firstLevel":"NestedTableRow2392165746__firstLevel","placeholder":"NestedTableRow2392165746__placeholder","parentHovered":"NestedTableRow2392165746__parentHovered"};
+export var classes = {"root":"NestedTableRow3295565450__root","firstLevel":"NestedTableRow3295565450__firstLevel","placeholder":"NestedTableRow3295565450__placeholder","parentHovered":"NestedTableRow3295565450__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_ = "MultipleDragOverlayEffect3846689240";
+var _namespace_ = "MultipleDragOverlayEffect512304699";
 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":"MultipleDragOverlayEffect3846689240__root"};
+export var classes = {"root":"MultipleDragOverlayEffect512304699__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_ = "NestedTableDragAndDropRow1252405115";
+var _namespace_ = "NestedTableDragAndDropRow1845819645";
 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":"NestedTableDragAndDropRow1252405115__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1845819645__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/OperatorFilterPicker/OperatorFilterPicker.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Box,
+  DropdownBase,
+  Input,
+  FormField,
+  listItemSelectBuilder,
+  TextButton,
+} from '@wix/design-system';
+import {
+  FilterOperator,
+  OperatorFilterValue,
+  getOperatorLabel,
+} 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';
+
+export interface OperatorPickerProps<T>
+  extends FilterProps<OperatorFilterValue<T>> {
+  /**
+   * List of allowed operators for this filter
+   * @external
+   */
+  allowedOperators: FilterOperator[];
+}
+
+function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
+  const { filter, allowedOperators } = props;
+  const { translate: t } = useWixPatternsContainer();
+
+  const state = useOperatorFilterState<T>({
+    filter,
+    allowedOperators,
+  });
+
+  useEffect(() => state.init(), [state]);
+
+  const operatorOptions = allowedOperators.map((op) =>
+    listItemSelectBuilder({
+      id: op,
+      title: t(getOperatorLabel(op)),
+      label: t(getOperatorLabel(op)),
+    }),
+  );
+
+  const showValueInput = state.operatorNeedsValue();
+
+  return (
+    <Box
+      dataHook={`operator-picker-${filter.name}`}
+      direction="vertical"
+      gap="12px"
+    >
+      <FormField>
+        <DropdownBase
+          options={operatorOptions}
+          selectedId={state.operator}
+          onSelect={(option) => state.setOperator(option.id as FilterOperator)}
+          dataHook="operator-picker-operator-dropdown"
+        >
+          {({ toggle }) => (
+            <TextButton
+              skin="dark"
+              onClick={toggle}
+              suffixIcon={<ChevronDown />}
+              size="small"
+              dataHook="operator-picker-trigger"
+            >
+              {t(getOperatorLabel(state.operator))}
+            </TextButton>
+          )}
+        </DropdownBase>
+      </FormField>
+
+      {showValueInput && (
+        <FormField>
+          <Input
+            border={'round'}
+            value={state.value?.toString() || ''}
+            placeholder={t('cairo.filterOperator.valuePlaceholder')}
+            onChange={(e) => state.setValue(e.target.value as T)}
+            onBlur={() => state.applyImmediately()}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                state.applyImmediately();
+              }
+            }}
+            dataHook="operator-picker-value-input"
+          />
+        </FormField>
+      )}
+    </Box>
+  );
+}
+
+export const OperatorFilterPicker = observer(_OperatorFilterPicker);

package/src/components/OperatorFilterPicker/index.ts

@@ -0,0 +1,4 @@
+export {
+  OperatorFilterPicker,
+  type OperatorPickerProps,
+} from './OperatorFilterPicker';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent471041620";
+var _namespace_ = "PickerContent2079061321";
 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":"PickerContent471041620__root"};
+export var classes = {"root":"PickerContent2079061321__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_ = "PickerContentAdditionalStep551212376";
+var _namespace_ = "PickerContentAdditionalStep3028514075";
 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":"PickerContentAdditionalStep551212376__root","titles":"PickerContentAdditionalStep551212376__titles","suffix":"PickerContentAdditionalStep551212376__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3028514075__root","titles":"PickerContentAdditionalStep3028514075__titles","suffix":"PickerContentAdditionalStep3028514075__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_ = "PickerTableListItem3915532904";
+var _namespace_ = "PickerTableListItem3373986971";
 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":"PickerTableListItem3915532904__root"};
+export var classes = {"root":"PickerTableListItem3373986971__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3572056859";
+var _namespace_ = "SkeletonCard4133525042";
 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":"SkeletonCard3572056859__root","headerLoading":"SkeletonCard3572056859__headerLoading"};
+export var classes = {"root":"SkeletonCard4133525042__root","headerLoading":"SkeletonCard4133525042__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/Suggestions/MarketingCard.tsx

@@ -16,6 +16,7 @@ import {
 } from '@wix/design-system';
 import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';
 import { BaseCardComponentProps, SuggestionsCardProps } from './types';
+import { SuggestionCtaWrapper } from './SuggestionCtaWrapper';
 
 /**
  * Schema for marketing card content.
@@ -56,12 +57,13 @@ const getCardWidth = (totalOffers: number) => {
 interface MarketingCardInternalProps {
   schema: MarketingCardSchema;
   totalOffers: number;
+  offerId: string;
 }
 
 const MarketingCardInternal = forwardRef<
   HTMLDivElement,
   MarketingCardInternalProps
->(({ schema, totalOffers }, ref) => {
+>(({ schema, totalOffers, offerId }, ref) => {
   const {
     title,
     description: descriptionData,
@@ -101,15 +103,17 @@ const MarketingCardInternal = forwardRef<
   );
 
   const ctaButton = ctaButtonData ? (
-    <Button
-      size="small"
-      skin={ctaButtonData.skin || 'standard'}
-      priority={ctaButtonData.priority || 'secondary'}
-      dataHook="suggestions-card-button"
-      onClick={handleCtaClick}
-    >
-      {ctaButtonData.text}
-    </Button>
+    <SuggestionCtaWrapper offerId={offerId} referredUrl={ctaButtonData.link}>
+      <Button
+        size="small"
+        skin={ctaButtonData.skin || 'standard'}
+        priority={ctaButtonData.priority || 'secondary'}
+        dataHook="suggestions-card-button"
+        onClick={handleCtaClick}
+      >
+        {ctaButtonData.text}
+      </Button>
+    </SuggestionCtaWrapper>
   ) : null;
 
   const badge = badgeData ? (
@@ -178,7 +182,11 @@ export const renderMarketingCard =
     }
 
     return (
-      <MarketingCardInternal schema={schema} totalOffers={props.totalOffers} />
+      <MarketingCardInternal
+        schema={schema}
+        totalOffers={props.totalOffers}
+        offerId={props.offer.offerGuid ?? ''}
+      />
     );
   };
 

package/src/components/Suggestions/SuggestionCtaWrapper.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement, cloneElement, MouseEvent } from 'react';
+import { useSuggestionsContext } from './SuggestionsContext';
+
+export interface SuggestionCtaWrapperProps {
+  /** The offer ID to report when CTA is clicked */
+  offerId: string;
+  /** The target URL to report when CTA is clicked */
+  referredUrl: string;
+  /** A single clickable element (must accept onClick prop) */
+  children: ReactElement<{ onClick?: (e: MouseEvent) => void }>;
+}
+
+/**
+ * Wrapper component that adds automatic CTA click reporting to the dealer BI service.
+ *
+ * Note: The child component must be clickable (accept an onClick prop).
+ */
+export const SuggestionCtaWrapper: React.FC<SuggestionCtaWrapperProps> = ({
+  offerId,
+  referredUrl,
+  children,
+}) => {
+  const { onOfferClicked } = useSuggestionsContext();
+
+  return cloneElement(children, {
+    onClick: (e: MouseEvent) => {
+      onOfferClicked(offerId, referredUrl);
+      children.props.onClick?.(e);
+    },
+  });
+};

package/src/components/Suggestions/Suggestions.tsx

@@ -11,6 +11,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { MarketingCardSkeleton } from './MarketingCard';
 import { SuggestionsProps } from './types';
 import { VisibilityTrackedCard } from './VisibilityTrackedCard';
+import { SuggestionsProvider } from './SuggestionsContext';
 
 const defaultCarouselProps: CarouselWIPProps = {
   hideDots: true,
@@ -111,6 +112,7 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
     }, [state]);
 
     if (state.hasOffers) {
+      // use initial cards count for container, to match the count the cards get rendered with
       const cardCount = state.offers.length;
       const cards = state.offers
         .map((offer, index) => {
@@ -121,7 +123,7 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
             element: renderCard({
               offer,
               index,
-              totalOffers: state.offers.length,
+              totalOffers: cardCount,
             }),
           };
         })
@@ -130,30 +132,30 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
             card.element != null,
         );
 
-      // Return null if all cards filtered out
       if (cards.length === 0) {
         return null;
       }
 
       return (
-        <SuggestionsContainer
-          // use initial cards count for container, to match the count the cards get rendered with
-          count={cardCount}
-          carouselProps={carouselProps}
-          dataHook={dataHook}
-          dataState="idle"
-          maxInlineItems={maxInlineItems}
-        >
-          {cards.map(({ key, offerGuid, element }) => (
-            <SuggestionItem key={key} dataId={key}>
-              <VisibilityTrackedCard
-                itemKey={key}
-                element={element}
-                onObserved={() => offerGuid && state.onOfferViewed(offerGuid)}
-              />
-            </SuggestionItem>
-          ))}
-        </SuggestionsContainer>
+        <SuggestionsProvider onOfferClicked={state.onOfferClicked}>
+          <SuggestionsContainer
+            count={cardCount}
+            carouselProps={carouselProps}
+            dataHook={dataHook}
+            dataState="idle"
+            maxInlineItems={maxInlineItems}
+          >
+            {cards.map(({ key, offerGuid, element }) => (
+              <SuggestionItem key={key} dataId={key}>
+                <VisibilityTrackedCard
+                  itemKey={key}
+                  element={element}
+                  onObserved={() => offerGuid && state.onOfferViewed(offerGuid)}
+                />
+              </SuggestionItem>
+            ))}
+          </SuggestionsContainer>
+        </SuggestionsProvider>
       );
     }
 
@@ -167,15 +169,17 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
       );
 
       return (
-        <SuggestionsContainer
-          count={skeletonsNumber}
-          carouselProps={{ ...carouselProps, controlsPosition: 'none' }}
-          dataHook={dataHook}
-          dataState="loading"
-          maxInlineItems={maxInlineItems}
-        >
-          {skeletons}
-        </SuggestionsContainer>
+        <SuggestionsProvider onOfferClicked={state.onOfferClicked}>
+          <SuggestionsContainer
+            count={skeletonsNumber}
+            carouselProps={{ ...carouselProps, controlsPosition: 'none' }}
+            dataHook={dataHook}
+            dataState="loading"
+            maxInlineItems={maxInlineItems}
+          >
+            {skeletons}
+          </SuggestionsContainer>
+        </SuggestionsProvider>
       );
     }
 

package/src/components/Suggestions/SuggestionsContext.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+
+export interface SuggestionsContextValue {
+  onOfferClicked: (offerId: string, targetUrl?: string) => void;
+}
+
+const SuggestionsContext = createContext<SuggestionsContextValue | null>(null);
+
+export interface SuggestionsProviderProps {
+  children: ReactNode;
+  onOfferClicked: (offerId: string, targetUrl?: string) => void;
+}
+
+export const SuggestionsProvider: React.FC<SuggestionsProviderProps> = ({
+  children,
+  onOfferClicked,
+}) => {
+  return (
+    <SuggestionsContext.Provider value={{ onOfferClicked }}>
+      {children}
+    </SuggestionsContext.Provider>
+  );
+};
+
+export const useSuggestionsContext = (): SuggestionsContextValue => {
+  const context = useContext(SuggestionsContext);
+  if (!context) {
+    throw new Error(
+      'useSuggestionsContext must be used within a SuggestionsProvider. ' +
+        'Make sure SuggestionCtaWrapper is used inside the Suggestions component.',
+    );
+  }
+  return context;
+};

package/src/components/Suggestions/index.ts

@@ -1,7 +1,10 @@
-// Main component
 export { Suggestions } from './Suggestions';
 
-// Types
+export {
+  type SuggestionCtaWrapperProps,
+  SuggestionCtaWrapper,
+} from './SuggestionCtaWrapper';
+
 export type {
   SuggestionsProps,
   SuggestionsCardProps,
@@ -9,6 +12,8 @@ export type {
   Offer,
 } from './types';
 
-// MarketingCard - pre-built card component
-export { renderMarketingCard, MarketingCardSkeleton } from './MarketingCard';
-export type { MarketingCardSchema } from './MarketingCard';
+export {
+  type MarketingCardSchema,
+  renderMarketingCard,
+  MarketingCardSkeleton,
+} from './MarketingCard';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter161614526";
+var _namespace_ = "TabsFilter1787234641";
 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":"TabsFilter161614526__root","title":"TabsFilter161614526__title"};
+export var classes = {"root":"TabsFilter1787234641__root","title":"TabsFilter1787234641__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3683190222";
+var _namespace_ = "ManageTagsModal4215666322";
 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":"ManageTagsModal3683190222__root"};
+export var classes = {"root":"ManageTagsModal4215666322__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};