@wix/patterns 1.404.0 → 1.407.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2998906804";
+var _namespace_ = "Collapse3009257275";
 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":"Collapse2998906804__root","exit":"Collapse2998906804__exit"};
+export var classes = {"root":"Collapse3009257275__root","exit":"Collapse3009257275__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader2393348524";
+var _namespace_ = "CollectionSectionHeader1580615331";
 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":"CollectionSectionHeader2393348524__root","summaryIcon":"CollectionSectionHeader2393348524__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1580615331__root","summaryIcon":"CollectionSectionHeader1580615331__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3319757686";
+var _namespace_ = "CollectionToolbar596944470";
 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":"CollectionToolbar3319757686__root","left":"CollectionToolbar3319757686__left","right":"CollectionToolbar3319757686__right","fullWidth":"CollectionToolbar3319757686__fullWidth"};
+export var classes = {"root":"CollectionToolbar596944470__root","left":"CollectionToolbar596944470__left","right":"CollectionToolbar596944470__right","fullWidth":"CollectionToolbar596944470__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter170958799";
+var _namespace_ = "SearchOrCustomFilter1252279095";
 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":"SearchOrCustomFilter170958799__root","search":"SearchOrCustomFilter170958799__search","searchMobile":"SearchOrCustomFilter170958799__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1252279095__root","search":"SearchOrCustomFilter1252279095__search","searchMobile":"SearchOrCustomFilter1252279095__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

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

@@ -1,7 +1,35 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
-import { baseUniDriverFactory } from '../../unidriver';
+import { baseUniDriverFactory, isSled2, isSled3 } from '../../unidriver';
 import { SledPage } from '../../sledPage';
 
+// Playwright Locator shape we depend on for sled-3 dispatch. Typed locally to
+// avoid pulling Playwright types into cairo's runtime surface.
+type PlaywrightLocatorLike = {
+  boundingBox: () => Promise<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>;
+  page: () => PlaywrightPageLike;
+};
+
+type PlaywrightPageLike = {
+  mouse: {
+    move: (
+      x: number,
+      y: number,
+      options?: { steps?: number },
+    ) => Promise<void>;
+    down: () => Promise<void>;
+    up: () => Promise<void>;
+  };
+};
+
+// Both sled-2 (Puppeteer) and sled-3 (Playwright) Page objects expose `.mouse`
+// with `.move/down/up`. The cairo DnD driver only needs that shape.
+type AnyDriverPage = SledPage['page'] | PlaywrightPageLike;
+
 const { fireEvent = null } =
   process.env.NODE_ENV === 'test'
     ? (() => {
@@ -75,13 +103,13 @@ export function DragAndDropUniDriver(base: UniDriver) {
     },
     dragStart: async (
       source: UniDriver,
-      options: { page?: SledPage['page']; x?: number; y?: number } = {},
+      options: { page?: AnyDriverPage; x?: number; y?: number } = {},
     ) => {
       const sourceNative = await source.getNative();
 
-      const page: SledPage['page'] | null = options.page ?? sourceNative.page;
-
-      if (page?.evaluate) {
+      if (isSled2(sourceNative)) {
+        const page: SledPage['page'] =
+          (options.page as SledPage['page']) ?? sourceNative.page;
         const sourceBox = await sourceNative.element.boundingBox();
 
         await page.mouse.move(
@@ -89,6 +117,23 @@ export function DragAndDropUniDriver(base: UniDriver) {
           options.y ?? sourceBox.y + sourceBox.height / 2,
         );
 
+        await page.mouse.down();
+      } else if (isSled3(sourceNative)) {
+        const locator = sourceNative as PlaywrightLocatorLike;
+        const page: PlaywrightPageLike =
+          (options.page as PlaywrightPageLike) ?? locator.page();
+        const sourceBox = await locator.boundingBox();
+        if (!sourceBox) {
+          throw new Error(
+            'DragAndDropUniDriver.dragStart: source.boundingBox() returned null (element detached, zero-size, or off-screen). Drag cannot start.',
+          );
+        }
+
+        await page.mouse.move(
+          options.x ?? sourceBox.x + sourceBox.width / 2,
+          options.y ?? sourceBox.y + sourceBox.height / 2,
+        );
+
         await page.mouse.down();
       } else if (fireEvent) {
         fireEvent.pointerDown(sourceNative);
@@ -99,13 +144,19 @@ export function DragAndDropUniDriver(base: UniDriver) {
     },
     dragEnd: async (
       target: UniDriver,
-      options: { page?: SledPage['page'] } = {},
+      options: { page?: AnyDriverPage } = {},
     ) => {
       const targetNative = await target.getNative();
-      const page: SledPage['page'] | null = options.page ?? targetNative.page;
 
-      if (page?.evaluate) {
-        await page?.mouse.up();
+      if (isSled2(targetNative)) {
+        const page: SledPage['page'] =
+          (options.page as SledPage['page']) ?? targetNative.page;
+        await page.mouse.up();
+      } else if (isSled3(targetNative)) {
+        const locator = targetNative as PlaywrightLocatorLike;
+        const page: PlaywrightPageLike =
+          (options.page as PlaywrightPageLike) ?? locator.page();
+        await page.mouse.up();
       } else if (fireEvent) {
         fireEvent.pointerUp(targetNative);
         await document.dispatchEvent(new Event('mouseup'));
@@ -127,7 +178,7 @@ export function DragAndDropUniDriver(base: UniDriver) {
       const sourceRow = await source.getNative();
       const targetRow = await target.getNative();
 
-      if (source.type === 'puppeteer') {
+      if (isSled2(sourceRow)) {
         const { page } = sourceRow as { page: SledPage['page'] };
 
         await source.hover();
@@ -152,6 +203,38 @@ export function DragAndDropUniDriver(base: UniDriver) {
         await new Promise((resolve) => setTimeout(resolve, 100));
         await page.mouse.up();
         await new Promise((resolve) => setTimeout(resolve, 100)); // wait for drop animation to complete
+      } else if (isSled3(sourceRow)) {
+        const sourceLocator = sourceRow as PlaywrightLocatorLike;
+        const targetLocator = targetRow as PlaywrightLocatorLike;
+        const page = sourceLocator.page();
+
+        await source.hover();
+
+        const sourceBox = await sourceLocator.boundingBox();
+        const targetBox = await targetLocator.boundingBox();
+        if (!sourceBox || !targetBox) {
+          throw new Error(
+            `DragAndDropUniDriver.dragOver: ${!sourceBox ? 'source' : 'target'}.boundingBox() returned null (element detached, zero-size, or off-screen). Drag cannot proceed.`,
+          );
+        }
+
+        await page.mouse.move(
+          sourceBox.x + sourceBox.width / dragPointRatio.x,
+          sourceBox.y + sourceBox.height / dragPointRatio.y,
+        );
+
+        await page.mouse.down();
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        await page.mouse.move(
+          targetBox.x + targetBox.width / dropPointRatio.x,
+          targetBox.y + targetBox.height / dropPointRatio.y,
+          { steps },
+        );
+
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        await page.mouse.up();
+        await new Promise((resolve) => setTimeout(resolve, 100));
       } else if (fireEvent) {
         fireEvent.pointerDown(sourceRow);
         document.dispatchEvent(new Event('mousemove'));
@@ -161,20 +244,36 @@ export function DragAndDropUniDriver(base: UniDriver) {
     moveOver: async (
       target: UniDriver,
       options: {
-        page?: SledPage['page'];
+        page?: AnyDriverPage;
         pixels?: number;
         delta?: { x?: number };
       } = {},
     ) => {
       const targetRow = await target.getNative();
-
-      const page = options.page ?? targetRow.page;
-
       const pixels = options.pixels ?? 0;
 
-      if (page?.evaluate) {
+      if (isSled2(targetRow)) {
+        const page: SledPage['page'] =
+          (options.page as SledPage['page']) ?? targetRow.page;
         const targetBox = await targetRow.element.boundingBox();
 
+        for (let i = 0; i < 2; i++) {
+          await page.mouse.move(
+            Math.max(options.delta?.x ?? targetBox.x - pixels, 0),
+            Math.max(targetBox.y + targetBox.height - pixels, 0),
+          );
+        }
+      } else if (isSled3(targetRow)) {
+        const locator = targetRow as PlaywrightLocatorLike;
+        const page: PlaywrightPageLike =
+          (options.page as PlaywrightPageLike) ?? locator.page();
+        const targetBox = await locator.boundingBox();
+        if (!targetBox) {
+          throw new Error(
+            'DragAndDropUniDriver.moveOver: target.boundingBox() returned null (element detached, zero-size, or off-screen).',
+          );
+        }
+
         for (let i = 0; i < 2; i++) {
           await page.mouse.move(
             Math.max(options.delta?.x ?? targetBox.x - pixels, 0),
@@ -191,7 +290,7 @@ export function DragAndDropUniDriver(base: UniDriver) {
     moveAny: async (
       source: UniDriver,
       options?: {
-        page?: SledPage['page'];
+        page?: AnyDriverPage;
         x?: number;
         y?: number;
         steps?: number;
@@ -201,10 +300,9 @@ export function DragAndDropUniDriver(base: UniDriver) {
     ) => {
       const sourceNative = await source.getNative();
 
-      const page: SledPage['page'] | undefined =
-        options?.page ?? sourceNative.page;
-
-      if (page?.evaluate) {
+      if (isSled2(sourceNative)) {
+        const page: SledPage['page'] =
+          (options?.page as SledPage['page']) ?? sourceNative.page;
         const sourceBox = await sourceNative.element.boundingBox();
         const steps = options?.steps ?? 3;
         for (let i = steps; i >= 0; i--) {
@@ -217,6 +315,27 @@ export function DragAndDropUniDriver(base: UniDriver) {
             setTimeout(resolve, options?.delay ?? 2000),
           );
         }
+      } else if (isSled3(sourceNative)) {
+        const locator = sourceNative as PlaywrightLocatorLike;
+        const page: PlaywrightPageLike =
+          (options?.page as PlaywrightPageLike) ?? locator.page();
+        const sourceBox = await locator.boundingBox();
+        if (!sourceBox) {
+          throw new Error(
+            'DragAndDropUniDriver.moveAny: source.boundingBox() returned null (element detached, zero-size, or off-screen).',
+          );
+        }
+        const steps = options?.steps ?? 3;
+        for (let i = steps; i >= 0; i--) {
+          await page.mouse.move(
+            (options?.x ?? sourceBox.x + sourceBox.width / 2) - i * 10,
+            (options?.y ?? sourceBox.y + sourceBox.height / 2) -
+              (options?.vertical ? i * 10 : 0),
+          );
+          await new Promise((resolve) =>
+            setTimeout(resolve, options?.delay ?? 2000),
+          );
+        }
       }
     },
   };

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

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

package/src/components/DropdownFilter/CollectionDropdownFilter.uni.driver.ts

@@ -2,6 +2,7 @@ import { TextUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 import { InputWithOptionsUniDriver } from '@wix/design-system/dist/types/InputWithOptions/InputWithOptions.uni.driver';
 import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
 import shuffle from 'lodash/shuffle';
+import { isSled2, isSled3 } from '../../unidriver/nativeEnv';
 
 export const CollectionDropdownFilterUniDriver = <
   T extends Omit<InputWithOptionsUniDriver, 'driver'>,
@@ -179,8 +180,6 @@ export const CollectionDropdownFilterUniDriver = <
     scrollDown: async () => {
       const element = await base.getNative();
 
-      const { page } = element;
-
       const contentHook = await base.attr('data-content-hook');
       const baseDataHook = await base.attr('data-hook');
       const contentSelector = contentHook
@@ -188,7 +187,8 @@ export const CollectionDropdownFilterUniDriver = <
         : `[data-hook="${baseDataHook}-content"]`;
 
       // puppeteer
-      if (page?.evaluate) {
+      if (isSled2(element)) {
+        const { page } = element as { page: { evaluate: Function } };
         await page.evaluate(
           (_dataHook: string, _contentSelector: string) => {
             const e = document.querySelector(
@@ -200,6 +200,17 @@ export const CollectionDropdownFilterUniDriver = <
           contentSelector,
         );
       }
+      // playwright
+      else if (isSled3(element)) {
+        const baseLocator = (await base.unwrap()) as {
+          locator: (selector: string) => {
+            evaluate: (fn: (el: HTMLElement) => void) => Promise<void>;
+          };
+        };
+        await baseLocator.locator(contentSelector).evaluate((el) => {
+          el.scrollBy({ behavior: 'smooth', top: el.scrollHeight });
+        });
+      }
       // jsdom
       else {
         await (

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell891778293";
+var _namespace_ = "EditableCell1444546552";
 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":"EditableCell891778293__root","validationIndicator":"EditableCell891778293__validationIndicator"};
+export var classes = {"root":"EditableCell1444546552__root","validationIndicator":"EditableCell1444546552__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.uni.driver.ts

@@ -1,11 +1,12 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
-import { baseUniDriverFactory } from '../../unidriver';
+import { baseUniDriverFactory, isSled2, isSled3 } from '../../unidriver';
 import { TextEditUniDriver } from './cellTypes/text/Edit.uni.driver';
 import { NumberEditUniDriver } from './cellTypes/number/Edit.uni.driver';
 import { UrlEditUniDriver } from './cellTypes/url/Edit.uni.driver';
 import { BooleanEditUniDriver } from './cellTypes/boolean/Edit.uni.driver';
 import { SpecificValuesEditUniDriver } from './cellTypes/text/SpecificValuesEdit.uni.driver';
 import { DateEditUniDriver } from './cellTypes/date/Edit.uni.driver';
+import { ReferenceEditUniDriver } from './cellTypes/reference/Edit.uni.driver';
 
 export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
   return {
@@ -17,9 +18,12 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Double-click the cell (starts editing). UniDriver has no doubleClick, so dispatch native event. */
     doubleClick: async () => {
       const el = await base.getNative();
-      if (el.page?.evaluate) {
+      if (isSled2(el)) {
         const elementHandle = await base.unwrap();
         await elementHandle.click({ clickCount: 2 });
+      } else if (isSled3(el)) {
+        const locator = await base.unwrap();
+        await locator.dblclick();
       } else {
         el.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
       }
@@ -71,13 +75,19 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
     /** Get the date cell edit driver (for date columns) */
     getDateEdit: () => DateEditUniDriver(base, body),
 
+    /** Get the reference cell edit driver (for reference columns) */
+    getReferenceEdit: () => ReferenceEditUniDriver(base, body),
+
     /** Right-click the cell (opens context menu) */
     rightClick: async () => {
       const el = await base.getNative();
-      if (el.page?.evaluate) {
+      if (isSled2(el)) {
         // Puppeteer — unwrap to get the actual ElementHandle
         const elementHandle = await base.unwrap();
         await elementHandle.click({ button: 'right' });
+      } else if (isSled3(el)) {
+        const locator = await base.unwrap();
+        await locator.click({ button: 'right' });
       } else {
         // jsdom HTMLElement
         const rect = el.getBoundingClientRect();
@@ -91,22 +101,34 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
       }
     },
 
-    /** Get the bounding box of the cell — returns {x, y, width, height} in both Puppeteer and jsdom */
+    /** Get the bounding box of the cell — returns {x, y, width, height} across all envs */
     getBoundingBox: async () => {
       const el = await base.getNative();
-      if (el.page?.evaluate) {
+      if (isSled2(el)) {
         const elementHandle = await base.unwrap();
         return elementHandle.boundingBox();
       }
+      if (isSled3(el)) {
+        const locator = await base.unwrap();
+        return locator.boundingBox();
+      }
       return el.getBoundingClientRect();
     },
 
     /** Press a key on the cell (native dispatch — useCellFocusAndEditing uses native addEventListener) */
     pressKey: async (key: string, opts?: Partial<KeyboardEventInit>) => {
       const el = await base.getNative();
-      el.dispatchEvent(
-        new KeyboardEvent('keydown', { key, bubbles: true, ...opts }),
-      );
+      if (isSled2(el)) {
+        const elementHandle = await base.unwrap();
+        await elementHandle.press(key);
+      } else if (isSled3(el)) {
+        const locator = await base.unwrap();
+        await locator.press(key);
+      } else {
+        el.dispatchEvent(
+          new KeyboardEvent('keydown', { key, bubbles: true, ...opts }),
+        );
+      }
     },
   };
 }

package/src/components/EditableTable/HeaderActionsPopover.st.css.ts

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

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3432418028";
+var _namespace_ = "Edit1987376397";
 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":"Edit3432418028__root","booleanEdit":"Edit3432418028__booleanEdit"};
+export var classes = {"root":"Edit1987376397__root","booleanEdit":"Edit1987376397__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3758605198";
+var _namespace_ = "View916549261";
 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":"View3758605198__root","booleanView":"View3758605198__booleanView"};
+export var classes = {"root":"View916549261__root","booleanView":"View916549261__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};