@wix/patterns 1.356.0 → 1.358.0

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(),
   };
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2323202498";
+var _namespace_ = "TabsFilter568602178";
 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":"TabsFilter2323202498__root","title":"TabsFilter2323202498__title"};
+export var classes = {"root":"TabsFilter568602178__root","title":"TabsFilter568602178__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/BulkAssignTagsPopover/BulkAssignTagsPopover.tsx

@@ -120,6 +120,7 @@ export const _BulkAssignTagsPopover = <T, F extends FiltersMap>({
                     <CreateTagButton state={state} searchValue={searchValue} />
                   </Box>
                 )}
+                searchMaxLength={TAG_MAX_LENGTH}
                 multiple
                 onSelect={handleItemSelect}
                 height="216px"

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1851264423";
+var _namespace_ = "ToolbarItem2073112881";
 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":"ToolbarItem1851264423__root"};
+export var classes = {"root":"ToolbarItem2073112881__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_ = "ToolbarItemBox1574808205";
+var _namespace_ = "ToolbarItemBox2290301766";
 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":"ToolbarItemBox1574808205__root"};
+export var classes = {"root":"ToolbarItemBox2290301766__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_ = "common362520394";
+var _namespace_ = "common1880788563";
 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":"common362520394__root","column":"common362520394__column","fullHeight":"common362520394__fullHeight"};
+export var classes = {"root":"common1880788563__root","column":"common1880788563__column","fullHeight":"common1880788563__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/exports/bi.ts

@@ -1,3 +1 @@
 export * from '@wix/bex-utils/@wix/bi-logger-os-data/v2';
-export * from '@wix/bex-utils/@wix/bi-logger-os-data/testkit/client';
-export { default as biTestkit } from '@wix/bex-utils/@wix/bi-logger-os-data/testkit/client';

package/src/exports/testkit/bi.ts

@@ -0,0 +1,2 @@
+export * from '@wix/bex-utils/@wix/bi-logger-os-data/testkit/client';
+export { default as biTestkit } from '@wix/bex-utils/@wix/bi-logger-os-data/testkit/client';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader1261547672";
+var _namespace_ = "CollectionPageHeader626711544";
 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":"CollectionPageHeader1261547672__root"};
+export var classes = {"root":"CollectionPageHeader626711544__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_ = "FormPageHeader544963084";
+var _namespace_ = "FormPageHeader2618187567";
 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":"FormPageHeader544963084__root"};
+export var classes = {"root":"FormPageHeader2618187567__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/TableGridSwitchFoldersState.ts

@@ -10,7 +10,7 @@ import { TableFoldersState } from './TableFoldersState';
 import { runInAction, makeObservable, computed } from 'mobx';
 import { ToolbarCollectionState } from './ToolbarCollectionState';
 import { PartialAllFilters } from './FoldersAndItemsCollectionsState';
-import { ViewTypeState } from './ViewTypeState';
+import { ViewTypeState, ViewType } from './ViewTypeState';
 import { ICollectionComponentState } from './ICollectionComponentState';
 
 export interface TableGridSwitchStateFoldersParams<
@@ -24,7 +24,6 @@ export interface TableGridSwitchStateFoldersParams<
   readonly container: WixPatternsContainer;
   readonly containerOverrides: Partial<WixPatternsContainerParams>;
 }
-type ViewType = 'table' | 'grid';
 export class TableGridSwitchFoldersState<
   T1,
   F1 extends FiltersMap,

package/src/state/TableGridSwitchState.ts

@@ -9,7 +9,7 @@ import { TableState } from './TableState';
 import { GridState } from './GridState';
 import { computed, makeObservable, runInAction } from 'mobx';
 import { ToolbarCollectionState } from './ToolbarCollectionState';
-import { ViewTypeState } from './ViewTypeState';
+import { ViewTypeState, ViewType } from './ViewTypeState';
 import { ICollectionComponentState } from './ICollectionComponentState';
 
 export interface TableGridSwitchStateParams<T, F extends FiltersMap> {
@@ -17,7 +17,6 @@ export interface TableGridSwitchStateParams<T, F extends FiltersMap> {
   readonly container: WixPatternsContainer;
   readonly containerOverrides: Partial<WixPatternsContainerParams>;
 }
-type ViewType = 'table' | 'grid';
 const componentType = 'TableGridSwitch';
 export class TableGridSwitchState<T, F extends FiltersMap>
   implements ICollectionComponentState

package/src/state/Toolbar/ToolbarLeftGroupState.ts

@@ -19,13 +19,11 @@ export class ToolbarLeftGroupState<T, F extends FiltersMap> {
     | undefined;
 
   private _element: HTMLElement | null = null;
-  private _prevWidth = 0;
+  private _tabsWidthTimeout: ReturnType<typeof setTimeout> | null = null;
 
   readonly mode: ToolbarMode;
   readonly minWidth: number;
 
-  private readonly EXPANSION_THRESHOLD = 20;
-
   constructor(params: ToolbarLeftGroupStateParams<T, F>) {
     this._responsive = params.responsive;
     this.mode = params.mode;
@@ -33,9 +31,15 @@ export class ToolbarLeftGroupState<T, F extends FiltersMap> {
     this._getTabsState = params.getTabsState;
   }
 
+  getExcessWidth(): number {
+    if (!this._element) {
+      return 0;
+    }
+    return Math.max(0, this._element.clientWidth - this.minWidth);
+  }
+
   init(element: HTMLElement | null | undefined): () => void {
     this._element = null;
-    this._prevWidth = 0;
 
     if (!element) {
       return () => {};
@@ -43,12 +47,14 @@ export class ToolbarLeftGroupState<T, F extends FiltersMap> {
 
     this._element = element;
     const disposer = addResizeObserver(element, this._handleResize);
-    this._handleResize();
 
     return () => {
       disposer?.();
+      if (this._tabsWidthTimeout) {
+        clearTimeout(this._tabsWidthTimeout);
+        this._tabsWidthTimeout = null;
+      }
       this._element = null;
-      this._prevWidth = 0;
     };
   }
 
@@ -58,29 +64,18 @@ export class ToolbarLeftGroupState<T, F extends FiltersMap> {
       return;
     }
 
-    const width = element.clientWidth;
-    const prevWidth = this._prevWidth;
-    const isAtMinWidth = width <= this.minWidth + 2; // 2px tolerance
-    const isGrowing = width > prevWidth;
-    const hasSpaceToExpand = width > this.minWidth + this.EXPANSION_THRESHOLD;
-
-    if (isAtMinWidth) {
-      this._responsive.overflow._scrollWidth =
-        this._responsive.overflow._clientWidth + 1;
-      this._responsive._nextToShrink._shrinkIfNeeded();
-    } else if (isGrowing && hasSpaceToExpand) {
-      const availableSpace = width - this.minWidth;
-
-      this._responsive._nextToExpand._expandIfNeeded({
-        preCalculatedAvailableSpace: availableSpace,
-      });
-    }
-
     if (this.mode === 'tabs') {
-      const tabsState = this._getTabsState?.();
-      tabsState?.responsive.setAvailableWidth(width);
+      if (this._tabsWidthTimeout) {
+        clearTimeout(this._tabsWidthTimeout);
+      }
+      this._tabsWidthTimeout = setTimeout(() => {
+        this._tabsWidthTimeout = null;
+        if (!this._element) return;
+        const tabsState = this._getTabsState?.();
+        tabsState?.responsive.setAvailableWidth(this._element.clientWidth);
+      }, 300);
     }
 
-    this._prevWidth = width;
+    this._responsive._scheduleRecompute();
   };
 }

package/src/state/Toolbar/ToolbarResponsivePriorityState.ts

@@ -3,41 +3,29 @@ import { action, makeObservable, observable } from 'mobx';
 
 export interface ToolbarResponsivePriorityStateParams {
   responsive: ToolbarResponsiveState;
-  getNextToShrink: () => ToolbarResponsivePriorityState;
-  getNextToExpand: () => ToolbarResponsivePriorityState;
-  count: number;
-  minWidth?: number;
+  expandedWidth?: number;
+  collapsedWidth?: number;
 }
 
 export class ToolbarResponsivePriorityState {
   readonly responsive: ToolbarResponsiveState;
-  getNextToShrink: () => ToolbarResponsivePriorityState;
-  getNextToExpand: () => ToolbarResponsivePriorityState;
-  readonly _count: number;
 
-  _minWidth: number;
-  _collapsedWidth: number;
+  expandedWidth: number;
+  collapsedWidth: number;
 
   _shouldShrink = false;
 
   _groupElement: HTMLElement | null = null;
 
   constructor(params: ToolbarResponsivePriorityStateParams) {
-    this._count = params.count;
-
-    this._minWidth = params.minWidth ?? 0;
-    this._collapsedWidth = params.minWidth ?? 0;
+    this.expandedWidth = params.expandedWidth ?? 0;
+    this.collapsedWidth = params.collapsedWidth ?? 0;
 
     this.responsive = params.responsive;
-    this.getNextToShrink = params.getNextToShrink;
-    this.getNextToExpand = params.getNextToExpand;
 
     makeObservable(this, {
-      _minWidth: observable.ref,
       _shouldShrink: observable.ref,
       _syncWidth: action,
-      _expandIfNeeded: action,
-      _shrinkIfNeeded: action,
     });
   }
 
@@ -49,79 +37,12 @@ export class ToolbarResponsivePriorityState {
     if (!_groupElement) {
       return;
     }
+    const measured = _groupElement.scrollWidth;
     if (_shouldShrink) {
-      this._collapsedWidth = _groupElement.scrollWidth;
+      this.collapsedWidth = measured;
     } else {
-      this._minWidth = _groupElement.scrollWidth;
-    }
-  }
-
-  _expandIfNeeded({
-    preCalculatedAvailableSpace,
-  }: {
-    preCalculatedAvailableSpace?: number;
-  } = {}) {
-    const { responsive, _collapsedWidth } = this;
-
-    const {
-      _nextToExpand,
-      actionsAvailableSpace: { available },
-    } = responsive;
-
-    if (responsive._expandCooldown) {
-      return;
-    }
-
-    if (
-      _nextToExpand !== this ||
-      (preCalculatedAvailableSpace ?? available) + _collapsedWidth <=
-        this._minWidth ||
-      !this._shouldShrink
-    ) {
-      return;
+      this.expandedWidth = measured;
     }
-
-    this._shouldShrink = false;
-    responsive._nextToExpand = _nextToExpand.getNextToExpand();
-    responsive._nextToShrink = this;
-    responsive.actionsAvailableSpace._syncThrottled();
-
-    const spaceUsed = this._minWidth - _collapsedWidth;
-    const availableAfterExpand =
-      (preCalculatedAvailableSpace ?? available) - spaceUsed;
-    if (availableAfterExpand > 0) {
-      responsive._nextToExpand._expandIfNeeded({
-        preCalculatedAvailableSpace: availableAfterExpand,
-      });
-    }
-  }
-
-  _shrinkIfNeeded() {
-    const { responsive } = this;
-
-    const { _nextToShrink, overflow } = responsive;
-
-    if (
-      _nextToShrink !== this ||
-      !overflow._isOverflowing ||
-      this._shouldShrink
-    ) {
-      return;
-    }
-
-    this._shouldShrink = true;
-    responsive._nextToShrink = _nextToShrink.getNextToShrink();
-    responsive._nextToExpand = this;
-
-    // Double rAF ensures the shrink is fully painted before allowing expansion.
-    // Single rAF can cause flickering because layout may not be settled yet.
-    responsive._expandCooldown = true;
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => {
-        responsive._expandCooldown = false;
-      });
-    });
-
-    responsive.overflow._syncThrottled();
+    responsive._scheduleRecompute();
   }
 }