@wix/patterns 1.405.0 → 1.407.0

package/src/components/MultiLevelSortingPanel/MultiLevelSortingColumnSelect.tsx

@@ -14,7 +14,7 @@ export function _MultiLevelSortingColumnSelect<T, F extends FiltersMap>(
   props: MultiLevelSortingColumnSelectProps<T, F>,
 ) {
   const { sortableColumn, state, index } = props;
-  const ref = useRef<HTMLInputElement>();
+  const ref = useRef<HTMLInputElement | null>();
 
   const options = state.getAvailableOptions(sortableColumn.columnId);
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow83750984";
+var _namespace_ = "NestedTablePlaceholderStatesRow350372232";
 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":"NestedTablePlaceholderStatesRow83750984__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow350372232__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_ = "NestedTableRow3108322232";
+var _namespace_ = "NestedTableRow933144787";
 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":"NestedTableRow3108322232__root","firstLevel":"NestedTableRow3108322232__firstLevel","placeholder":"NestedTableRow3108322232__placeholder","parentHovered":"NestedTableRow3108322232__parentHovered"};
+export var classes = {"root":"NestedTableRow933144787__root","firstLevel":"NestedTableRow933144787__firstLevel","placeholder":"NestedTableRow933144787__placeholder","parentHovered":"NestedTableRow933144787__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_ = "MultipleDragOverlayEffect2436778673";
+var _namespace_ = "MultipleDragOverlayEffect2356101716";
 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":"MultipleDragOverlayEffect2436778673__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2356101716__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_ = "NestedTableDragAndDropRow2523726184";
+var _namespace_ = "NestedTableDragAndDropRow766116763";
 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":"NestedTableDragAndDropRow2523726184__root"};
+export var classes = {"root":"NestedTableDragAndDropRow766116763__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,5 +1,5 @@
 import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
-import { baseUniDriverFactory } from '../../unidriver';
+import { baseUniDriverFactory, isSled2, isSled3 } from '../../unidriver';
 import {
   EmptyStateUniDriver,
   FloatingNotificationUniDriver,
@@ -49,17 +49,30 @@ export function PickerUniDriver(base: UniDriver, body: UniDriver) {
     scrollDown: async () => {
       const element = await base.getNative();
 
-      const { page } = element;
-
       // puppeteer
-      if (page?.evaluate) {
+      if (isSled2(element)) {
+        const { page } = element as { page: { evaluate: (fn: () => void) => Promise<void> } };
         await page.evaluate(() => {
           const e = document.querySelector(
             '[data-hook="selector-list-content"]',
           )!;
           e.scrollBy({ behavior: 'smooth', top: e.scrollHeight });
         });
-      } else {
+      }
+      // playwright — run the same browser-side scroll via the locator's page
+      else if (isSled3(element)) {
+        const locator = element as {
+          page: () => { evaluate: (fn: () => void) => Promise<void> };
+        };
+        await locator.page().evaluate(() => {
+          const e = document.querySelector(
+            '[data-hook="selector-list-content"]',
+          )!;
+          e.scrollBy({ behavior: 'smooth', top: e.scrollHeight });
+        });
+      }
+      // jsdom
+      else {
         await selectorList.scrollDown();
       }
     },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3817675012";
+var _namespace_ = "PickerContent166815625";
 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":"PickerContent3817675012__root"};
+export var classes = {"root":"PickerContent166815625__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_ = "PickerContentAdditionalStep1890255988";
+var _namespace_ = "PickerContentAdditionalStep2241802214";
 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":"PickerContentAdditionalStep1890255988__root","titles":"PickerContentAdditionalStep1890255988__titles","suffix":"PickerContentAdditionalStep1890255988__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2241802214__root","titles":"PickerContentAdditionalStep2241802214__titles","suffix":"PickerContentAdditionalStep2241802214__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerStandaloneLayout/PickerStandaloneLayoutHeader.tsx

@@ -30,7 +30,7 @@ function _PickerStandaloneLayoutHeader<T, F extends FiltersMap = FiltersMap>(
 
   const { collection, isScrollTop } = picker;
 
-  const searchRef = useRef<HTMLInputElement>();
+  const searchRef = useRef<HTMLInputElement | null>();
 
   const onSearchFocus = () => {
     state.setIsDuringSearch(true);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem4197270761";
+var _namespace_ = "PickerTableListItem187048861";
 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":"PickerTableListItem4197270761__root"};
+export var classes = {"root":"PickerTableListItem187048861__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_ = "ScrollableContent4133506963";
+var _namespace_ = "ScrollableContent2216011140";
 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":"ScrollableContent4133506963__root"};
+export var classes = {"root":"ScrollableContent2216011140__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_ = "SkeletonCard2788239419";
+var _namespace_ = "SkeletonCard2920634239";
 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":"SkeletonCard2788239419__root","headerLoading":"SkeletonCard2788239419__headerLoading"};
+export var classes = {"root":"SkeletonCard2920634239__root","headerLoading":"SkeletonCard2920634239__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_ = "SlidingModal2113609410";
+var _namespace_ = "SlidingModal506629060";
 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":"SlidingModal2113609410__root"};
+export var classes = {"root":"SlidingModal506629060__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -10,7 +10,7 @@ import { ToolbarCollectionErrorStateUniDriver } from '../ErrorState/ToolbarColle
 import type { Page } from 'puppeteer';
 import { CustomFieldModalUniDriver } from '../CustomFieldModal/CustomFieldModal.uni.driver';
 import { ArchiveFieldModalUniDriver } from '../CustomFieldsPanel/ArchiveFieldModal.uni.driver';
-import { baseUniDriverFactory } from '../../unidriver';
+import { baseUniDriverFactory, isSled2, isSled3 } from '../../unidriver';
 import { ManageTagsModalUniDriver } from '../Tags/ManageTags/ManageTagsModal/ManageTagsModal.uni.driver';
 import TagsAssignButtonUniDriver from '../TagsAssignButton/TagsAssignButton.uni.driver';
 import { CollectionEmptyStateUniDriver } from '../EmptyState/CollectionEmptyState.uni.driver';
@@ -67,10 +67,9 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
     const tableContent = base.$('[data-hook="table-content"]');
     const tableContentElement = await tableContent.getNative();
 
-    const { page } = tableContentElement;
-
     // puppeteer
-    if (page?.evaluate) {
+    if (isSled2(tableContentElement)) {
+      const { page } = tableContentElement;
       let up;
 
       // if table is virtual by default we scroll down to the not rendered items, if `options.top` not passed
@@ -98,6 +97,44 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
       );
       await page.waitForTimeout(1000); // delay scroll resolve by 1 sec
     }
+    // playwright
+    else if (isSled3(tableContentElement)) {
+      let up;
+      if (await isTableVirtualized()) {
+        const rowsCount = await getRenderedRowsCount();
+        const avgRowHeight = +((await getAverageRowHeight()) ?? 0);
+        up = rowsCount * avgRowHeight;
+      }
+      const locator = tableContentElement as {
+        page: () => {
+          evaluate: (
+            fn: (args: { dataHook: string; top?: number; up: number }) => void,
+            args: { dataHook: string; top?: number; up: number },
+          ) => Promise<void>;
+          waitForTimeout: (ms: number) => Promise<void>;
+        };
+      };
+      const pwPage = locator.page();
+      await pwPage.evaluate(
+        ({ dataHook, top: targetTop, up: upDist }) => {
+          const scrollableElement = document.querySelector(
+            `[data-hook="${dataHook}"]`,
+          )!;
+          const optionsTopVal =
+            targetTop === 0 ? -scrollableElement.scrollTop : targetTop;
+          scrollableElement.scrollBy({
+            behavior: 'smooth',
+            top: optionsTopVal ?? upDist,
+          });
+        },
+        {
+          dataHook: scrollableElementDataHook,
+          top: options.top,
+          up: -(up ?? 0),
+        },
+      );
+      await pwPage.waitForTimeout(1000);
+    }
     // jsdom
     else {
       const pageScrollContent = body.$(
@@ -122,10 +159,9 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
     const tableContent = base.$('[data-hook="table-content"]');
     const tableContentElement = await tableContent.getNative();
 
-    const { page } = tableContentElement;
-
     // puppeteer
-    if (page?.evaluate) {
+    if (isSled2(tableContentElement)) {
+      const { page } = tableContentElement;
       let top;
 
       // if table is virtual by default we scroll down to the not rendered items, if `options.top` not passed
@@ -151,6 +187,41 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
       );
       await page.waitForTimeout(1_000); // delay scroll resolve by 1 sec
     }
+    // playwright
+    else if (isSled3(tableContentElement)) {
+      let top;
+      if (await isTableVirtualized()) {
+        const rowsCount = await getRenderedRowsCount();
+        const avgRowHeight = +((await getAverageRowHeight()) ?? 0);
+        top = rowsCount * avgRowHeight;
+      }
+      const locator = tableContentElement as {
+        page: () => {
+          evaluate: (
+            fn: (args: { dataHook: string; top?: number }) => void,
+            args: { dataHook: string; top?: number },
+          ) => Promise<void>;
+          waitForTimeout: (ms: number) => Promise<void>;
+        };
+      };
+      const pwPage = locator.page();
+      await pwPage.evaluate(
+        ({ dataHook, top: targetTop }) => {
+          const scrollableElement = document.querySelector(
+            `[data-hook="${dataHook}"]`,
+          )!;
+          scrollableElement.scrollBy({
+            behavior: 'smooth',
+            top: targetTop ?? scrollableElement.scrollHeight,
+          });
+        },
+        {
+          dataHook: scrollableElementDataHook,
+          top: options.top ?? top ?? undefined,
+        },
+      );
+      await pwPage.waitForTimeout(1_000);
+    }
     // jsdom
     else {
       const pageScrollContent = body.$(
@@ -418,10 +489,9 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
       const tableContent = base.$('[data-hook="table-content"]');
       const tableContentElement = await tableContent.getNative();
 
-      const page = options.page ?? tableContentElement.page;
-
       // puppeteer
-      if (page?.evaluate) {
+      if (isSled2(tableContentElement)) {
+        const page = options.page ?? tableContentElement.page;
         page.evaluate((_dataHook: string) => {
           const scrollableElement = document.querySelector(
             `[data-hook="${_dataHook}"]`,
@@ -431,6 +501,25 @@ export function TableUniDriver(base: UniDriver, body: UniDriver) {
           });
         }, 'table-content');
       }
+      // playwright
+      else if (isSled3(tableContentElement)) {
+        const locator = tableContentElement as {
+          page: () => {
+            evaluate: (
+              fn: (dataHook: string) => void,
+              dataHook: string,
+            ) => Promise<void>;
+          };
+        };
+        await locator.page().evaluate((dataHook) => {
+          const scrollableElement = document.querySelector(
+            `[data-hook="${dataHook}"]`,
+          )!;
+          scrollableElement.scrollBy({
+            left: scrollableElement.scrollWidth,
+          });
+        }, 'table-content');
+      }
     },
 
     /**

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2528402878";
+var _namespace_ = "TabsFilter818514116";
 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":"TabsFilter2528402878__root","title":"TabsFilter2528402878__title"};
+export var classes = {"root":"TabsFilter818514116__root","title":"TabsFilter818514116__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_ = "ManageTagsModal2915031667";
+var _namespace_ = "ManageTagsModal1815513124";
 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":"ManageTagsModal2915031667__root"};
+export var classes = {"root":"ManageTagsModal1815513124__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TagsWidget/TagsWidgetContent.tsx

@@ -110,6 +110,13 @@ const _TagsWidgetContent = ({
     };
   }, []);
 
+  const initialTagIdsKey = (initialTags?.privateTags?.tagIds ?? []).join(',');
+  useEffect(() => {
+    formState.tagsAssignmentState.replaceAssigned(
+      initialTags?.privateTags?.tagIds ?? [],
+    );
+  }, [initialTagIdsKey]);
+
   const { shouldAllowTagsPagination } = formState.tagsManagementState;
 
   const tagsOptions = useMemo(() => {
@@ -185,11 +192,13 @@ const _TagsWidgetContent = ({
     <>
       <MultiSelect
         popoverProps={popoverProps}
-        {...(shouldAllowTagsPagination ? {
-          infiniteScroll: true,
-          hasMore: formState.tagsManagementState.hasMore,
-          loadMore: () => formState.tagsManagementState.loadMore(),
-        } : {})}
+        {...(shouldAllowTagsPagination
+          ? {
+              infiniteScroll: true,
+              hasMore: formState.tagsManagementState.hasMore,
+              loadMore: () => formState.tagsManagementState.loadMore(),
+            }
+          : {})}
         value={formState.searchValue}
         onChange={handleSearchChange}
         options={tagsOptions}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem953647861";
+var _namespace_ = "ToolbarItem1802518651";
 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":"ToolbarItem953647861__root"};
+export var classes = {"root":"ToolbarItem1802518651__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_ = "ToolbarItemBox3732580153";
+var _namespace_ = "ToolbarItemBox3235981517";
 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":"ToolbarItemBox3732580153__root"};
+export var classes = {"root":"ToolbarItemBox3235981517__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_ = "common768278463";
+var _namespace_ = "common2262432115";
 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":"common768278463__root","column":"common768278463__column","fullHeight":"common768278463__fullHeight"};
+export var classes = {"root":"common2262432115__root","column":"common2262432115__column","fullHeight":"common2262432115__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/fields/Field/Field.uni.driver.ts

@@ -1,5 +1,5 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
-import { baseUniDriverFactory } from '../../unidriver';
+import { baseUniDriverFactory, isSled2, isSled3 } from '../../unidriver';
 import { CustomFieldType } from '@wix/bex-core';
 import {
   CheckboxUniDriver,
@@ -140,9 +140,10 @@ export default (base: UniDriver, body: UniDriver) => {
         case 'url':
           const inputDriver = InputUniDriver(inputBase(), body);
           await inputDriver.enterText(value);
-          const { page } = await inputBase().getNative();
-          // jsdom
-          if (!page?.evaluate) {
+          const urlNative = await inputBase().getNative();
+          // jsdom-only: enterText doesn't dispatch blur, so we do it manually.
+          // Skip for sled-2 / sled-3 (real browsers handle blur natively).
+          if (!isSled2(urlNative) && !isSled3(urlNative)) {
             await inputDriver.blur();
           }
           return;
@@ -158,9 +159,9 @@ export default (base: UniDriver, body: UniDriver) => {
               ? value
               : `${Intl.DateTimeFormat().format(value)}`,
           );
-          const { page: pageWithDate } = await inputBase().getNative();
-          // jsdom
-          if (!pageWithDate?.evaluate) {
+          const dateNative = await inputBase().getNative();
+          // jsdom-only blur (see url case above).
+          if (!isSled2(dateNative) && !isSled3(dateNative)) {
             await datePickerUniDriver.inputDriver.blur();
           }
           return;
@@ -184,21 +185,23 @@ export default (base: UniDriver, body: UniDriver) => {
             body,
           );
           await datetimePickerUniDriver.inputDriver.enterText(dateValue);
-          const { page: pageWithDatetime } = await inputBase(
-            '-date',
-          ).getNative();
-          // jsdom
-          if (!pageWithDatetime?.evaluate) {
-            // We do it twice because we have a bug when removing the value in first time
+          const datetimeDateNative = await inputBase('-date').getNative();
+          // jsdom-only: we do it twice because of a bug when removing the
+          // value in the first time, then blur to commit. Real browsers
+          // (sled-2 / sled-3) don't have either issue.
+          if (
+            !isSled2(datetimeDateNative) &&
+            !isSled3(datetimeDateNative)
+          ) {
             await datetimePickerUniDriver.inputDriver.enterText(dateValue);
             await datetimePickerUniDriver.inputDriver.blur();
           }
           const timeInput = TimeInputUniDriver(inputBase('-time'), body);
 
           await timeInput.setValue(timeValue);
-          const element = await inputBase('-time').getNative();
+          const datetimeTimeNative = await inputBase('-time').getNative();
 
-          if (!element.page?.evaluate) {
+          if (!isSled2(datetimeTimeNative) && !isSled3(datetimeTimeNative)) {
             await timeInput.confirmValue();
           }
           return;

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/FormPage/FormPageHeader.st.css.ts

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