@wix/patterns 1.357.0 → 1.358.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly4060538635";
+var _namespace_ = "AutoCompleteReadonly3763682685";
 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":"AutoCompleteReadonly4060538635__root"};
+export var classes = {"root":"AutoCompleteReadonly3763682685__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_ = "ViewsDropdown65557832";
+var _namespace_ = "ViewsDropdown3132423709";
 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":"ViewsDropdown65557832__root"};
+export var classes = {"root":"ViewsDropdown3132423709__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldsTransforms/transformOperatorFilterToWQL.tsx

@@ -117,38 +117,13 @@ export const transformOperatorFilterToWQL = <T,>(
         },
       ];
 
-    case FilterOperator.LESS_THAN:
+    case FilterOperator.NOT_EXISTS:
       return [
         {
-          [filterName]: {
-            $lt: value,
-          },
-        },
-      ];
-
-    case FilterOperator.LESS_THAN_OR_EQUAL:
-      return [
-        {
-          [filterName]: {
-            $lte: value,
-          },
-        },
-      ];
-
-    case FilterOperator.GREATER_THAN:
-      return [
-        {
-          [filterName]: {
-            $gt: value,
-          },
-        },
-      ];
-
-    case FilterOperator.GREATER_THAN_OR_EQUAL:
-      return [
-        {
-          [filterName]: {
-            $gte: value,
+          $not: {
+            [filterName]: {
+              $exists: true,
+            },
           },
         },
       ];

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3778857946";
+var _namespace_ = "DragHandle3887572879";
 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":"DragHandle3778857946__root"};
+export var classes = {"root":"DragHandle3887572879__root"};
 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_ = "EntityPagePlain1610818731";
+var _namespace_ = "EntityPagePlain673223306";
 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":"EntityPagePlain1610818731__root"};
+export var classes = {"root":"EntityPagePlain673223306__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading888883112";
+var _namespace_ = "Heading2155534684";
 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":"Heading888883112__root"};
+export var classes = {"root":"Heading2155534684__root"};
 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_ = "InputOverflow959630330";
+var _namespace_ = "InputOverflow549173886";
 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":"InputOverflow959630330__root"};
+export var classes = {"root":"InputOverflow549173886__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3996135550";
+var _namespace_ = "LoadingRow715355924";
 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":"LoadingRow3996135550__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3996135550__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow715355924__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow715355924__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_ = "MaxHeightText1555679920";
+var _namespace_ = "MaxHeightText2159478735";
 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":"MaxHeightText1555679920__root"};
+export var classes = {"root":"MaxHeightText2159478735__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_ = "MaxLines3184399640";
+var _namespace_ = "MaxLines2795738033";
 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":"MaxLines3184399640__root"};
+export var classes = {"root":"MaxLines2795738033__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_ = "MultiBulkActionToolbar3816017489";
+var _namespace_ = "MultiBulkActionToolbar1326572443";
 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":"MultiBulkActionToolbar3816017489__root","leftGroupWrapper":"MultiBulkActionToolbar3816017489__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3816017489__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3816017489__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1326572443__root","leftGroupWrapper":"MultiBulkActionToolbar1326572443__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1326572443__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1326572443__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow708142473";
+var _namespace_ = "NestedTablePlaceholderStatesRow300385774";
 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":"NestedTablePlaceholderStatesRow708142473__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow300385774__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_ = "NestedTableRow1442655286";
+var _namespace_ = "NestedTableRow1027691268";
 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":"NestedTableRow1442655286__root","firstLevel":"NestedTableRow1442655286__firstLevel","placeholder":"NestedTableRow1442655286__placeholder","parentHovered":"NestedTableRow1442655286__parentHovered"};
+export var classes = {"root":"NestedTableRow1027691268__root","firstLevel":"NestedTableRow1027691268__firstLevel","placeholder":"NestedTableRow1027691268__placeholder","parentHovered":"NestedTableRow1027691268__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_ = "MultipleDragOverlayEffect1040243224";
+var _namespace_ = "MultipleDragOverlayEffect1844988275";
 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":"MultipleDragOverlayEffect1040243224__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1844988275__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_ = "NestedTableDragAndDropRow1144129987";
+var _namespace_ = "NestedTableDragAndDropRow2212520299";
 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":"NestedTableDragAndDropRow1144129987__root"};
+export var classes = {"root":"NestedTableDragAndDropRow2212520299__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/OperatorFilterPicker/OperatorFilterPicker.tsx

@@ -73,6 +73,10 @@ function _OperatorFilterPicker<T>(props: OperatorPickerProps<T>) {
           selectedId={state.operator}
           onSelect={(option) => state.setOperator(option.id as FilterOperator)}
           dataHook="operator-picker-operator-dropdown"
+          appendTo="window"
+          flip
+          fixed
+          placement="bottom-start"
         >
           {({ toggle }) => (
             <TextButton

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent1823450895";
+var _namespace_ = "PickerContent103951023";
 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":"PickerContent1823450895__root"};
+export var classes = {"root":"PickerContent103951023__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_ = "PickerContentAdditionalStep3632134261";
+var _namespace_ = "PickerContentAdditionalStep1773642125";
 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":"PickerContentAdditionalStep3632134261__root","titles":"PickerContentAdditionalStep3632134261__titles","suffix":"PickerContentAdditionalStep3632134261__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1773642125__root","titles":"PickerContentAdditionalStep1773642125__titles","suffix":"PickerContentAdditionalStep1773642125__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_ = "PickerTableListItem4115973826";
+var _namespace_ = "PickerTableListItem4187040111";
 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":"PickerTableListItem4115973826__root"};
+export var classes = {"root":"PickerTableListItem4187040111__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_ = "ScrollableContent102279133";
+var _namespace_ = "ScrollableContent4163581334";
 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":"ScrollableContent102279133__root"};
+export var classes = {"root":"ScrollableContent4163581334__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_ = "SkeletonCard753207785";
+var _namespace_ = "SkeletonCard916187800";
 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":"SkeletonCard753207785__root","headerLoading":"SkeletonCard753207785__headerLoading"};
+export var classes = {"root":"SkeletonCard916187800__root","headerLoading":"SkeletonCard916187800__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_ = "SlidingModal2858094398";
+var _namespace_ = "SlidingModal1944906977";
 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":"SlidingModal2858094398__root"};
+export var classes = {"root":"SlidingModal1944906977__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TableGridSwitchButton/TableGridSwitchButton.tsx

@@ -1,48 +1,129 @@
 import { observer } from 'mobx-react-lite';
-import React from 'react';
-import { SegmentedToggle } from '@wix/design-system';
-import { LayoutGallery, LayoutList } from '@wix/wix-ui-icons-common';
+import React, { useMemo } from 'react';
+import {
+  DropdownBase,
+  IconButton,
+  listItemSelectBuilder,
+  SegmentedToggle,
+  Tooltip,
+} from '@wix/design-system';
+import {
+  LayoutGallery,
+  LayoutList,
+  LayoutSplit,
+} from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { TranslationsKeys } from '@wix/bex-core';
+import { ViewType, ViewTypeState } from '../../state/ViewTypeState';
+
+const layoutOptions: ViewType[] = ['table', 'grid'];
 
 export interface TableGridSwitchButtonProps {
-  state: {
-    viewType: 'table' | 'grid';
-    changeViewType: (viewType: string) => void;
-  };
+  state: ViewTypeState;
 }
 
+const layoutConfig: Record<
+  ViewType,
+  { icon: React.ReactNode; translationKey: TranslationsKeys }
+> = {
+  table: {
+    icon: <LayoutSplit />,
+    translationKey: 'cairo.table.layout.table' as TranslationsKeys,
+  },
+  grid: {
+    icon: <LayoutGallery />,
+    translationKey: 'cairo.table.layout.grid' as TranslationsKeys,
+  },
+};
+
 function _TableGridSwitchButton(props: TableGridSwitchButtonProps) {
-  const { translate: t } = useWixPatternsContainer();
+  const { translate: t, experiments } = useWixPatternsContainer();
   const { state } = props;
   const { viewType } = state;
 
+  const isLayoutToggleRedesignEnabled = experiments.enabled(
+    'specs.cairo.layout-toggle.redesign',
+  );
+
+  const options = useMemo(
+    () =>
+      layoutOptions.map((option) =>
+        listItemSelectBuilder({
+          id: option,
+          title: t(layoutConfig[option].translationKey),
+          prefix: layoutConfig[option].icon,
+          dataHook: `layout-option-${option}`,
+        }),
+      ),
+    [t],
+  );
+
+  if (!isLayoutToggleRedesignEnabled) {
+    return (
+      <SegmentedToggle
+        size="small"
+        dataHook="table-grid-switch-toggle-button"
+        selected={viewType}
+        onClick={(_, value) => {
+          if (state.viewType === value) {
+            return;
+          }
+          state.changeViewType(value as ViewType);
+        }}
+      >
+        <SegmentedToggle.Icon
+          value="grid"
+          dataHook="toggle-option-grid"
+          tooltipText={t('cairo.table.gridView' as TranslationsKeys)}
+        >
+          <LayoutGallery />
+        </SegmentedToggle.Icon>
+        <SegmentedToggle.Icon
+          value="table"
+          dataHook="toggle-option-table"
+          tooltipText={t('cairo.table.listView' as TranslationsKeys)}
+        >
+          <LayoutList />
+        </SegmentedToggle.Icon>
+      </SegmentedToggle>
+    );
+  }
+
   return (
-    <SegmentedToggle
-      size="small"
-      dataHook="table-grid-switch-toggle-button"
-      selected={viewType}
-      onClick={(_, value) => {
-        if (state.viewType === value) {
-          return;
+    <DropdownBase
+      dataHook="layout-switch-popover"
+      options={options}
+      selectedId={viewType}
+      showArrow
+      onSelect={(option) => {
+        const selectedOption = option.id as ViewType;
+        const index = layoutOptions.indexOf(selectedOption);
+        state.reportLayoutOptionClicked(selectedOption, index);
+        if (viewType !== selectedOption) {
+          state.changeViewType(selectedOption);
         }
-        state.changeViewType(value);
       }}
     >
-      <SegmentedToggle.Icon
-        value="grid"
-        dataHook="toggle-option-grid"
-        tooltipText={t('cairo.table.gridView')}
-      >
-        <LayoutGallery />
-      </SegmentedToggle.Icon>
-      <SegmentedToggle.Icon
-        value="table"
-        dataHook="toggle-option-table"
-        tooltipText={t('cairo.table.listView')}
-      >
-        <LayoutList />
-      </SegmentedToggle.Icon>
-    </SegmentedToggle>
+      {({ toggle }) => (
+        <Tooltip
+          content={t('cairo.table.layout.switchLayout' as TranslationsKeys)}
+          size="medium"
+        >
+          <IconButton
+            dataHook="layout-switch-button"
+            size="small"
+            priority="secondary"
+            aria-haspopup="menu"
+            onClick={() => {
+              state.reportLayoutSwitch();
+              toggle();
+            }}
+          >
+            {layoutConfig[viewType].icon}
+          </IconButton>
+        </Tooltip>
+      )}
+    </DropdownBase>
   );
 }
 

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

@@ -1,4 +1,7 @@
-import { SegmentedToggleUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import {
+  DropdownBaseUniDriver,
+  SegmentedToggleUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 
 export function TableGridSwitchButtonUniDriver(
@@ -7,10 +10,29 @@ export function TableGridSwitchButtonUniDriver(
 ) {
   const getSegmented = () => SegmentedToggleUniDriver(base, body);
 
+  // New DropdownBase driver (experiment enabled)
+  const getDropdown = () =>
+    DropdownBaseUniDriver(body.$('[data-hook="layout-switch-popover"]'), body);
+
+  const getLayoutSwitchButton = () =>
+    body.$('[data-hook="layout-switch-button"]');
+
   return {
     ...getSegmented(),
+    /** Check if the SegmentedToggle (old UI) exists */
+    exists: () => base.exists(),
+    /** Click table button in SegmentedToggle (old UI) */
     clickTableButton: () => base.$$(`[data-hook="toggle-icon"]`).get(1).click(),
+    /** Click grid button in SegmentedToggle (old UI) */
     clickGridButton: () => base.$$(`[data-hook="toggle-icon"]`).get(0).click(),
+
+    popoverExists: () => getDropdown().exists(),
+    layoutSwitchButtonExists: () => getLayoutSwitchButton().exists(),
+    openPopover: () => getLayoutSwitchButton().click(),
+    isPopoverOpen: () => getDropdown().isDropdownShown(),
+    clickLayoutOption: (option: 'table' | 'grid') =>
+      getDropdown().selectOptionByDataHook(`layout-option-${option}`),
+    getLayoutOptionsCount: () => getDropdown().optionsCount(),
   };
 }