@wix/patterns 1.405.0 → 1.407.0

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3799192925";
+var _namespace_ = "Edit2631968375";
 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":"Edit3799192925__root","dateInput":"Edit3799192925__dateInput"};
+export var classes = {"root":"Edit2631968375__root","dateInput":"Edit2631968375__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2172448964";
+var _namespace_ = "Edit4086073852";
 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":"Edit2172448964__root","emailInput":"Edit2172448964__emailInput"};
+export var classes = {"root":"Edit4086073852__root","emailInput":"Edit4086073852__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1168266867";
+var _namespace_ = "Edit2967145902";
 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":"Edit1168266867__root","numberInput":"Edit1168266867__numberInput"};
+export var classes = {"root":"Edit2967145902__root","numberInput":"Edit2967145902__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2617773352";
+var _namespace_ = "View1184216687";
 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":"View2617773352__root","textView":"View2617773352__textView"};
+export var classes = {"root":"View1184216687__root","textView":"View1184216687__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3005416867";
+var _namespace_ = "Edit1926283062";
 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":"Edit3005416867__root","jsonInput":"Edit3005416867__jsonInput"};
+export var classes = {"root":"Edit1926283062__root","jsonInput":"Edit1926283062__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/reference/Edit.uni.driver.ts

@@ -1,16 +1,38 @@
-import { fireEvent } from '@testing-library/react';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../../../unidriver';
+import { AutoCompleteUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+const { fireEvent = null } =
+  process.env.NODE_ENV === 'test'
+    ? (() => {
+        try {
+          return require('@testing-library/react');
+        } catch {}
+        return {};
+      })()
+    : {};
 
 export function ReferenceEditUniDriver(base: UniDriver, body: UniDriver) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getNativeInput = () =>
     (base.$('input') as any).getNative() as Promise<HTMLInputElement>;
 
+  const getAutoCompleteBase = () =>
+    base.$('[data-hook="reference-input-autocomplete"]');
+
+  const getAutoComplete = () =>
+    AutoCompleteUniDriver(getAutoCompleteBase(), body);
+
+  const getDropdownLayoutBase = () =>
+    body.$('[data-hook="reference-input-autocomplete-content"]');
+
   return {
     ...baseUniDriverFactory(base),
     hasInput: () => base.$('input').exists(),
     getInputValue: () => base.$('input').value(),
+    getAutoComplete,
+    getLoader: async () =>
+      getDropdownLayoutBase().$('[data-hook="initial-loader"]'),
     typeInInput: async (value: string) => {
       fireEvent.change(await getNativeInput(), { target: { value } });
     },

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1769719397";
+var _namespace_ = "Edit2623857855";
 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":"Edit1769719397__root","selectInput":"Edit1769719397__selectInput"};
+export var classes = {"root":"Edit2623857855__root","selectInput":"Edit2623857855__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit154176232";
+var _namespace_ = "Edit2585579382";
 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":"Edit154176232__root","editWrapper":"Edit154176232__editWrapper","inputArea":"Edit154176232__inputArea"};
+export var classes = {"root":"Edit2585579382__root","editWrapper":"Edit2585579382__editWrapper","inputArea":"Edit2585579382__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2474952644";
+var _namespace_ = "Edit2323644004";
 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":"Edit2474952644__root","urlInput":"Edit2474952644__urlInput"};
+export var classes = {"root":"Edit2323644004__root","urlInput":"Edit2323644004__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View394586849";
+var _namespace_ = "View283583614";
 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":"View394586849__root","textView":"View394586849__textView","urlText":"View394586849__urlText","suffix":"View394586849__suffix"};
+export var classes = {"root":"View283583614__root","textView":"View283583614__textView","urlText":"View283583614__urlText","suffix":"View283583614__suffix"};
 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_ = "EntityPagePlain3151035666";
+var _namespace_ = "EntityPagePlain1101727593";
 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":"EntityPagePlain3151035666__root"};
+export var classes = {"root":"EntityPagePlain1101727593__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ExportButton/ExportModal.uni.driver.ts

@@ -1,6 +1,7 @@
 import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
 import { baseUniDriverFactory } from '../../unidriver';
 import {
+  ButtonUniDriver,
   CustomModalLayoutUniDriver,
   HeadingUniDriver,
   ModalUniDriver,
@@ -37,8 +38,13 @@ export function ExportModalUniDriver(base: UniDriver, body: UniDriver) {
 
   const getModal = () => ModalUniDriver(modalBase(), modalBase());
 
-  const getModalLayout = () =>
-    CustomModalLayoutUniDriver(modalLayoutBase(), body);
+  const getModalLayout = () => ({
+    ...CustomModalLayoutUniDriver(modalLayoutBase(), body),
+    getPrimaryButtonDriver: () => ButtonUniDriver(
+      modalLayoutBase().$('[data-hook="baseModalLayout-primary-button"]'),
+      body,
+    ),
+  });
 
   const getFooterText = async () =>
     (await TextUniDriver(footerBase(), body)).getText();

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

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

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

@@ -16,7 +16,7 @@ import { SledPage } from '../../sledPage';
 import { ExportButtonUniDriver } from '../ExportButton/ExportButton.uni.driver';
 import { ExportModalUniDriver } from '../ExportButton/ExportModal.uni.driver';
 import { SkeletonGridUniDriver } from './SkeletonGrid.uni.driver';
-import { baseUniDriverFactory } from '../../unidriver';
+import { baseUniDriverFactory, isSled2, isSled3 } from '../../unidriver';
 import { SummaryBarUniDriver } from '../SummaryBar/SummaryBar.uni.driver';
 import { CollectionPremiumEmptyStateUniDriver } from '../EmptyState/CollectionPremiumEmptyState.uni.driver';
 import { CollectionNoResultsStateUniDriver } from '../EmptyState/CollectionNoResultsState.uni.driver';
@@ -75,10 +75,14 @@ export function GridUniDriver(base: UniDriver, body: UniDriver) {
       getCardGalleryItemByIndexBase(index),
       body,
     );
+
+    const getPrimaryAction = () =>
+      getCardGalleryItemByIndexBase(index).$('[data-hook="primary-action"]');
+
     return {
       ...itemDriver,
-      isPrimaryActionExists: () =>
-        base.$('[data-hook="primary-action"]').exists(),
+      hoverPrimaryAction: () => getPrimaryAction().hover(),
+      isPrimaryActionExists: () => getPrimaryAction().exists(),
     };
   };
 
@@ -93,7 +97,9 @@ export function GridUniDriver(base: UniDriver, body: UniDriver) {
 
     const popoverMenu = PopoverMenuUniDriver(popoverBase, body);
 
-    const trigger = popoverBase.$$('[data-hook="popover-icon-button-trigger"]').get(0);
+    const trigger = popoverBase
+      .$$('[data-hook="popover-icon-button-trigger"]')
+      .get(0);
     const iconButton = IconButtonUniDriver(trigger, base);
 
     return {
@@ -117,13 +123,13 @@ export function GridUniDriver(base: UniDriver, body: UniDriver) {
   const scrollDown = async (
     scrollableElementDataHook = 'page-scrollable-content',
   ) => {
-    const { page } = (await body
-      .$(`[data-hook="${scrollableElementDataHook}"]`)
-      .getNative()) as {
-      page?: SledPage['page'];
-    };
+    const scrollableDriver = body.$(
+      `[data-hook="${scrollableElementDataHook}"]`,
+    );
+    const native = await scrollableDriver.getNative();
     // puppeteer
-    if (page?.evaluate) {
+    if (isSled2(native)) {
+      const { page } = native as { page: SledPage['page'] };
       await page.evaluate((_dataHook: string) => {
         const scrollableElement = document.querySelector(
           `[data-hook="${_dataHook}"]`,
@@ -135,16 +141,24 @@ export function GridUniDriver(base: UniDriver, body: UniDriver) {
       }, scrollableElementDataHook);
       await page.waitForTimeout(1000); // delay scroll resolve by 1 sec
     }
+    // playwright
+    else if (isSled3(native)) {
+      const locator = (await scrollableDriver.unwrap()) as {
+        evaluate: (fn: (el: HTMLElement) => void) => Promise<void>;
+        page: () => { waitForTimeout: (ms: number) => Promise<void> };
+      };
+      await locator.evaluate((scrollableElement) => {
+        scrollableElement.scrollBy({
+          behavior: 'smooth',
+          top: scrollableElement.scrollHeight,
+        });
+      });
+      await locator.page().waitForTimeout(1000);
+    }
     // jsdom
     else {
-      const pageScrollContent = body.$(
-        `[data-hook="${scrollableElementDataHook}"]`,
-      );
-
-      if (await pageScrollContent.exists()) {
-        await (
-          await pageScrollContent.getNative()
-        ).dispatchEvent(new Event('scroll'));
+      if (await scrollableDriver.exists()) {
+        await native.dispatchEvent(new Event('scroll'));
       }
     }
   };

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload812605259";
+var _namespace_ = "ImportStepUpload406100697";
 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":"ImportStepUpload812605259__root","fileUpload":"ImportStepUpload812605259__fileUpload"};
+export var classes = {"root":"ImportStepUpload406100697__root","fileUpload":"ImportStepUpload406100697__fileUpload"};
 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_ = "InputOverflow2094063048";
+var _namespace_ = "InputOverflow1320026071";
 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":"InputOverflow2094063048__root"};
+export var classes = {"root":"InputOverflow1320026071__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/InputOverflow/InputOverflow.tsx

@@ -14,7 +14,7 @@ export interface InputOverflowProps extends InputProps {
 export const InputOverflow = observer(
   forwardRef((props: InputOverflowProps, ref) => {
     const { state, selected, focused, text, ...inputProps } = props;
-    const helperNodeRef = useRef<HTMLInputElement>();
+    const helperNodeRef = useRef<HTMLInputElement | null>();
 
     useEffect(() => {
       if (!helperNodeRef.current) {

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

@@ -1,6 +1,7 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';
 import { baseUniDriverFactory } from '../../unidriver/baseUniDriverFactory';
+import { isSled2, isSled3 } from '../../unidriver/nativeEnv';
 import { SledPage } from '@wix/sled-test-runner';
 import {
   AddItemUniDriver,
@@ -102,14 +103,14 @@ export function KanbanUniDriver(base: UniDriver, body: UniDriver) {
       },
       scrollToEndOfStageCardsContainer: async (stageKey: string) => {
         const scrollableElementDataHook = `kanban-stage-cards-container-${stageKey}`;
+        const scrollableDriver = body.$(
+          `[data-hook="${scrollableElementDataHook}"]`,
+        );
+        const native = await scrollableDriver.getNative();
 
-        const { page } = (await body
-          .$(`[data-hook="${scrollableElementDataHook}"]`)
-          .getNative()) as {
-          page?: SledPage['page'];
-        };
         // puppeteer
-        if (page?.evaluate) {
+        if (isSled2(native)) {
+          const { page } = native as { page: SledPage['page'] };
           await page.evaluate((_dataHook: string) => {
             const scrollableElement = document.querySelector(
               `[data-hook="${_dataHook}"]`,
@@ -121,18 +122,25 @@ export function KanbanUniDriver(base: UniDriver, body: UniDriver) {
           }, scrollableElementDataHook);
           await page.waitForTimeout(1000); // delay scroll resolve by 1 sec
         }
+        // playwright
+        else if (isSled3(native)) {
+          const locator = (await scrollableDriver.unwrap()) as {
+            evaluate: (fn: (el: HTMLElement) => void) => Promise<void>;
+            page: () => { waitForTimeout: (ms: number) => Promise<void> };
+          };
+          await locator.evaluate((scrollableElement) => {
+            scrollableElement.scrollBy({
+              behavior: 'smooth',
+              top: scrollableElement.scrollHeight,
+            });
+          });
+          await locator.page().waitForTimeout(1000);
+        }
         // jsdom
-        else {
-          const pageScrollContent = body.$(
-            `[data-hook="${scrollableElementDataHook}"]`,
-          );
-
-          if (await pageScrollContent.exists()) {
-            // Scroll to the end of pageScrollContent by setting scrollTop to (scrollHeight - clientHeight)
-            const nativeEl = await pageScrollContent.getNative();
-            nativeEl.scrollTop = nativeEl.scrollHeight - nativeEl.clientHeight;
-            await nativeEl.dispatchEvent(new Event('scroll'));
-          }
+        else if (await scrollableDriver.exists()) {
+          // Scroll to the end by setting scrollTop to (scrollHeight - clientHeight)
+          native.scrollTop = native.scrollHeight - native.clientHeight;
+          await native.dispatchEvent(new Event('scroll'));
         }
       },
       stageSummaryBadge: (stageId: string) => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2619804950";
+var _namespace_ = "LoadingRow1508922526";
 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":"LoadingRow2619804950__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2619804950__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1508922526__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1508922526__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_ = "MaxHeightText609817997";
+var _namespace_ = "MaxHeightText2585741034";
 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":"MaxHeightText609817997__root"};
+export var classes = {"root":"MaxHeightText2585741034__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_ = "MaxLines3315284511";
+var _namespace_ = "MaxLines2916279677";
 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":"MaxLines3315284511__root"};
+export var classes = {"root":"MaxLines2916279677__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_ = "MultiBulkActionToolbar2440460362";
+var _namespace_ = "MultiBulkActionToolbar945964";
 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":"MultiBulkActionToolbar2440460362__root","leftGroupWrapper":"MultiBulkActionToolbar2440460362__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2440460362__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2440460362__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar945964__root","leftGroupWrapper":"MultiBulkActionToolbar945964__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar945964__selectedCountItem","selectedCountText":"MultiBulkActionToolbar945964__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};