@wix/patterns 1.324.0 → 1.325.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow2489859390";
+var _namespace_ = "NestedTablePlaceholderStatesRow634506500";
 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":"NestedTablePlaceholderStatesRow2489859390__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow634506500__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_ = "NestedTableRow3970235073";
+var _namespace_ = "NestedTableRow3595325079";
 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":"NestedTableRow3970235073__root","firstLevel":"NestedTableRow3970235073__firstLevel","placeholder":"NestedTableRow3970235073__placeholder","parentHovered":"NestedTableRow3970235073__parentHovered"};
+export var classes = {"root":"NestedTableRow3595325079__root","firstLevel":"NestedTableRow3595325079__firstLevel","placeholder":"NestedTableRow3595325079__placeholder","parentHovered":"NestedTableRow3595325079__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_ = "MultipleDragOverlayEffect2349309335";
+var _namespace_ = "MultipleDragOverlayEffect3760073984";
 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":"MultipleDragOverlayEffect2349309335__root"};
+export var classes = {"root":"MultipleDragOverlayEffect3760073984__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_ = "NestedTableDragAndDropRow737617853";
+var _namespace_ = "NestedTableDragAndDropRow2976497727";
 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":"NestedTableDragAndDropRow737617853__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2976497727__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent2017000944";
+var _namespace_ = "PickerContent3108120277";
 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":"PickerContent2017000944__root"};
+export var classes = {"root":"PickerContent3108120277__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_ = "PickerContentAdditionalStep21172298";
+var _namespace_ = "PickerContentAdditionalStep4199282124";
 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":"PickerContentAdditionalStep21172298__root","titles":"PickerContentAdditionalStep21172298__titles","suffix":"PickerContentAdditionalStep21172298__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep4199282124__root","titles":"PickerContentAdditionalStep4199282124__titles","suffix":"PickerContentAdditionalStep4199282124__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_ = "PickerTableListItem3587473997";
+var _namespace_ = "PickerTableListItem2983769481";
 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":"PickerTableListItem3587473997__root"};
+export var classes = {"root":"PickerTableListItem2983769481__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_ = "ScrollableContent585524193";
+var _namespace_ = "ScrollableContent980648129";
 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":"ScrollableContent585524193__root"};
+export var classes = {"root":"ScrollableContent980648129__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_ = "SkeletonCard2899189437";
+var _namespace_ = "SkeletonCard1226407146";
 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":"SkeletonCard2899189437__root","headerLoading":"SkeletonCard2899189437__headerLoading"};
+export var classes = {"root":"SkeletonCard1226407146__root","headerLoading":"SkeletonCard1226407146__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_ = "SlidingModal2850069453";
+var _namespace_ = "SlidingModal3040154923";
 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":"SlidingModal2850069453__root"};
+export var classes = {"root":"SlidingModal3040154923__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Suggestions/DESIGN_BI_REPORTING.md

@@ -0,0 +1,73 @@
+# Suggestions BI Reporting - Design Doc
+
+## Overview
+
+Implement BI (Business Intelligence) reporting for the Suggestions component to track user interactions and component lifecycle events.
+
+## Events to Report
+
+| Event | Description |
+|-------|-------------|
+| **LOAD** | Offers successfully fetched from dealer service |
+| **VIEW** | Offer card becomes visible to the user |
+| **CLICK** | User clicks on an offer card CTA |
+
+## Reporting Targets
+
+1. **Cairo BI** - Standard internal analytics via `reportBi`
+2. **Dealer API** - External package for dealer-specific tracking (TBD)
+
+## Key Requirements
+
+- [ ] VIEW events should fire only once per offer (not on every scroll)
+- [ ] Infrastructure should be extensible for future event types
+- [ ] Must include unit tests
+- [ ] Performance validation required
+
+## Technical Approach
+
+- Use `IntersectionObserver` for VIEW event detection (see existing `IntersectionObserverState`)
+- Follow existing BIReporter patterns (e.g., `ToolbarBIReporter`, `KanbanStateBIReporter`)
+
+---
+
+## Progress:
+ - [X] Implemented basic IntersectionObsever for view events 
+ - [X] Decide how to report viw events: callback for each card, general callback + additional array that saves data (hook becomes very spesific) - Descidion is callback
+ - [X] Finalize dealer view rportings 
+ - [X] Finalize cairo reporting
+ - [X] add tests
+ - [X] understand if dealer has bi testtkit (It does not)
+ - [] mock IntersectionObserver properly for dealer BI
+ - [] add more dealer events (main cta clicked)
+
+## Notes & Findings
+
+- For BI, should create a new BIlogger class and use it inside the state.
+state should expose different handlers for actions in UI (onView, onCtaClick, onLoad...) and I just call it in UI. the state class handles the bi logging with the BI logger, I should not expose it outside to the compoennts or users themselves.
+
+### Dealer API Research
+- Package name: TBD
+- Available methods: TBD
+- Required payload structure: TBD
+
+### IntersectionObserver Investigation
+- it is the way, we can set the suggestions container as observer
+- we can use unobserve once an element was "viewed" and the event fired.
+
+
+### Performance Considerations
+- 
+
+### Open Questions
+- What specific data fields are required for each event?
+- What is the exact dealer reporting package to use?
+- Should VIEW tracking be opt-in or opt-out?
+
+---
+
+## References
+
+- `packages/cairo/src/state/IntersectionObserverState.ts`
+- `packages/cairo/src/state/ToolbarBIReporter.ts`
+- `packages/cairo/src/state/Suggestions/SuggestionsState.ts`

package/src/components/Suggestions/MarketingCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import {
   Box,
   MarketingLayout,
@@ -58,10 +58,10 @@ interface MarketingCardInternalProps {
   totalOffers: number;
 }
 
-const MarketingCardInternal: React.FC<MarketingCardInternalProps> = ({
-  schema,
-  totalOffers,
-}) => {
+const MarketingCardInternal = forwardRef<
+  HTMLDivElement,
+  MarketingCardInternalProps
+>(({ schema, totalOffers }, ref) => {
   const {
     title,
     description: descriptionData,
@@ -134,7 +134,11 @@ const MarketingCardInternal: React.FC<MarketingCardInternalProps> = ({
   );
 
   return (
-    <Box dataHook="suggestions-card" width={getCardWidth(totalOffers)}>
+    <Box
+      dataHook="suggestions-card"
+      width={getCardWidth(totalOffers)}
+      ref={ref}
+    >
       <Card stretchVertically>
         <MarketingLayout
           title={title}
@@ -147,7 +151,7 @@ const MarketingCardInternal: React.FC<MarketingCardInternalProps> = ({
       </Card>
     </Box>
   );
-};
+});
 
 /**
  * Creates a render function for marketing cards.
@@ -157,7 +161,7 @@ const MarketingCardInternal: React.FC<MarketingCardInternalProps> = ({
  */
 export const renderMarketingCard =
   (translateOffer?: (offer: Offer) => MarketingCardSchema | null) =>
-  (props: SuggestionsCardProps): React.ReactNode | null => {
+  (props: SuggestionsCardProps): React.ReactElement | null => {
     const schema = translateOffer
       ? translateOffer(props.offer)
       : (props.offer?.asset?.creative as MarketingCardSchema | null);
@@ -166,8 +170,13 @@ export const renderMarketingCard =
       schema?.title && schema?.imageUrl && schema?.description?.text;
 
     if (!requiredFieldsExist) {
+      console.error(
+        `Can't render MarketingCard for offer ${props.offer.offerGuid} - missing required fields (title, imageUrl, description.text) in schema:`,
+        schema,
+      );
       return null;
     }
+
     return (
       <MarketingCardInternal schema={schema} totalOffers={props.totalOffers} />
     );

package/src/components/Suggestions/Suggestions.tsx

@@ -10,6 +10,7 @@ import { observer } from 'mobx-react-lite';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { MarketingCardSkeleton } from './MarketingCard';
 import { SuggestionsProps } from './types';
+import { VisibilityTrackedCard } from './VisibilityTrackedCard';
 
 const defaultCarouselProps: CarouselWIPProps = {
   hideDots: true,
@@ -30,6 +31,17 @@ interface SuggestionsContainerProps {
   maxInlineItems: number;
 }
 
+export interface SuggestionItemProps {
+  children: React.ReactNode;
+  dataId?: string;
+}
+
+export interface NonNullableElementCard<T> {
+  key: string;
+  offerGuid: string | undefined;
+  element: T;
+}
+
 const SuggestionsContainer: React.FC<SuggestionsContainerProps> = ({
   count,
   children,
@@ -65,6 +77,19 @@ const SuggestionsContainer: React.FC<SuggestionsContainerProps> = ({
   );
 };
 
+export const SuggestionItem: React.FC<SuggestionItemProps> = ({
+  children,
+  dataId,
+}) => (
+  <div
+    data-hook="suggestion-item"
+    data-id={dataId}
+    style={{ display: 'contents' }}
+  >
+    {children}
+  </div>
+);
+
 export const Suggestions: React.FC<SuggestionsProps> = observer(
   ({
     placementId,
@@ -75,10 +100,10 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
     dataHook = 'suggestions',
     maxInlineItems = 2,
   }) => {
-    const { httpClient } = useWixPatternsContainer();
+    const container = useWixPatternsContainer();
 
     const [state] = useState(
-      () => new SuggestionsState({ placementId, httpClient }),
+      () => new SuggestionsState({ placementId, container }),
     );
 
     useEffect(() => {
@@ -88,15 +113,22 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
     if (state.hasOffers) {
       const cardCount = state.offers.length;
       const cards = state.offers
-        .map((offer, index) => ({
-          key: offer.offerGuid || `suggestion-${index}`,
-          element: renderCard({
-            offer,
-            index,
-            totalOffers: state.offers.length,
-          }),
-        }))
-        .filter(({ element }) => element !== null);
+        .map((offer, index) => {
+          const key = offer.offerGuid || `suggestion-${index}`;
+          return {
+            key,
+            offerGuid: offer.offerGuid,
+            element: renderCard({
+              offer,
+              index,
+              totalOffers: state.offers.length,
+            }),
+          };
+        })
+        .filter(
+          (card): card is NonNullableElementCard<React.ReactElement> =>
+            card.element != null,
+        );
 
       // Return null if all cards filtered out
       if (cards.length === 0) {
@@ -112,8 +144,14 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
           dataState="idle"
           maxInlineItems={maxInlineItems}
         >
-          {cards.map(({ key, element }) => (
-            <React.Fragment key={key}>{element}</React.Fragment>
+          {cards.map(({ key, offerGuid, element }) => (
+            <SuggestionItem key={key} dataId={key}>
+              <VisibilityTrackedCard
+                itemKey={key}
+                element={element}
+                onObserved={() => offerGuid && state.onOfferViewed(offerGuid)}
+              />
+            </SuggestionItem>
           ))}
         </SuggestionsContainer>
       );
@@ -122,11 +160,9 @@ export const Suggestions: React.FC<SuggestionsProps> = observer(
     if (state.isFetching) {
       const skeletons = Array.from({ length: skeletonsNumber }).map(
         (_, index) => (
-          <CardSkeleton
-            index={index}
-            totalOffers={skeletonsNumber}
-            key={index}
-          />
+          <SuggestionItem key={index}>
+            <CardSkeleton index={index} totalOffers={skeletonsNumber} />
+          </SuggestionItem>
         ),
       );
 

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

@@ -4,20 +4,8 @@ import {
   UniDriver,
 } from '@wix/wix-ui-test-utils/unidriver';
 
-export interface SuggestionsUniDriverOptions {
-  /** Data hook for the Suggestions component (default: 'suggestions') */
-  dataHook?: string;
-  /** Data hook for individual cards (default: 'suggestions-card' for MarketingCard) */
-  cardDataHook?: string;
-}
-
-export const SuggestionsUniDriver = (
-  base: UniDriver,
-  body: UniDriver,
-  options: SuggestionsUniDriverOptions = {},
-) => {
-  const dataHook = options.dataHook ?? 'suggestions';
-  const cardDataHook = options.cardDataHook ?? 'suggestions-card';
+export const SuggestionsUniDriver = (base: UniDriver, body: UniDriver) => {
+  const dataHook = 'suggestions';
 
   const carouselIdle = CarouselWIPUniDriver(
     base.$(`[data-hook="${dataHook}-carousel-idle"]`),
@@ -45,10 +33,10 @@ export const SuggestionsUniDriver = (
 
   const getContainerChildren = async () => {
     if (await containerIdle.exists()) {
-      return containerIdle.$$(`[data-hook="${cardDataHook}"]`);
+      return containerIdle.$$(`[data-hook="suggestion-item"]`);
     }
     if (await containerLoading.exists()) {
-      return containerLoading.$$(`[data-hook="${cardDataHook}"]`);
+      return containerLoading.$$(`[data-hook="suggestion-item"]`);
     }
     return null;
   };

package/src/components/Suggestions/VisibilityTrackedCard.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+
+export interface VisibilityTrackedCardProps {
+  itemKey: string;
+  element: React.ReactElement;
+  onObserved: () => void;
+}
+
+export const VisibilityTrackedCard: React.FC<VisibilityTrackedCardProps> = ({
+  itemKey,
+  element,
+  onObserved,
+}) => {
+  const { elementRef } = useIntersectionObserver(onObserved);
+  return React.cloneElement(element, {
+    key: itemKey,
+    ref: elementRef,
+  });
+};

package/src/components/Suggestions/types.ts

@@ -30,8 +30,11 @@ export interface SuggestionsProps {
   placementId: string;
   /** Props to pass to the carousel component */
   carouselProps?: CarouselWIPProps;
-  /** Render function for each offer card */
-  renderCard: (props: SuggestionsCardProps) => React.ReactNode | null;
+  /**
+   * Render function for each offer card.
+   * The returned element must be a forwardRef component.
+   */
+  renderCard: (props: SuggestionsCardProps) => React.ReactElement | null;
   /** Skeleton component to render when loading */
   CardSkeleton?: React.ComponentType<BaseCardComponentProps>;
   /** Number of skeletons to render when loading */

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1535445293";
+var _namespace_ = "TabsFilter494994749";
 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":"TabsFilter1535445293__root","title":"TabsFilter1535445293__title"};
+export var classes = {"root":"TabsFilter494994749__root","title":"TabsFilter494994749__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_ = "ManageTagsModal3898350931";
+var _namespace_ = "ManageTagsModal2750172858";
 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":"ManageTagsModal3898350931__root"};
+export var classes = {"root":"ManageTagsModal2750172858__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common1732706577";
+var _namespace_ = "common1210614291";
 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":"common1732706577__root","column":"common1732706577__column","fullHeight":"common1732706577__fullHeight"};
+export var classes = {"root":"common1210614291__root","column":"common1210614291__column","fullHeight":"common1210614291__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/testkit/unidriver.ts

@@ -27,8 +27,5 @@ export { default as RequestIdUniDriver } from '../../components/RequestId/Reques
 export { SearchableCollectionContentUniDriver } from '../../components/SearchableCollectionContent/SearchableCollectionContent.uni.driver';
 export { MoreActionsUniDriver } from '../../components/MoreActions/MoreActions.uni.driver';
 export { CollectionDropdownFilterUniDriver } from '../../components/DropdownFilter/CollectionDropdownFilter.uni.driver';
-export {
-  SuggestionsUniDriver,
-  SuggestionsUniDriverOptions,
-} from '../../components/Suggestions/Suggestions.uni.driver';
+export { SuggestionsUniDriver } from '../../components/Suggestions/Suggestions.uni.driver';
 export { MarketingCardUniDriver } from '../../components/Suggestions/MarketingCard.uni.driver';

package/src/hooks/useCollectionTableResize.ts

@@ -8,11 +8,13 @@ export function useCollectionTableResize({
   horizontalScroll,
   userResizeProps,
   columnSizesState,
+  isVirtualized,
 }: {
   columns: TableColumn[];
   horizontalScroll: boolean | undefined;
   userResizeProps?: TableProps['resizeProps'];
   columnSizesState: ColumnSizesState | null;
+  isVirtualized?: boolean;
 }) {
   const experimentEnabled =
     columnSizesState?.isResizeExperimentEnabled ?? false;
@@ -26,6 +28,7 @@ export function useCollectionTableResize({
   const isResizable =
     experimentEnabled &&
     !isMobile &&
+    !isVirtualized &&
     !!horizontalScroll &&
     areAllColumnsPixelWidth;