@wix/patterns 1.338.0 → 1.339.0

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent620018214";
+var _namespace_ = "PickerContent1626301124";
 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":"PickerContent620018214__root"};
+export var classes = {"root":"PickerContent1626301124__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_ = "PickerContentAdditionalStep3476680796";
+var _namespace_ = "PickerContentAdditionalStep1762375108";
 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":"PickerContentAdditionalStep3476680796__root","titles":"PickerContentAdditionalStep3476680796__titles","suffix":"PickerContentAdditionalStep3476680796__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1762375108__root","titles":"PickerContentAdditionalStep1762375108__titles","suffix":"PickerContentAdditionalStep1762375108__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_ = "PickerTableListItem1676516431";
+var _namespace_ = "PickerTableListItem2364026151";
 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":"PickerTableListItem1676516431__root"};
+export var classes = {"root":"PickerTableListItem2364026151__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ResponsiveButton/ResponsiveButton.tsx

@@ -40,11 +40,11 @@ const _ResponsiveButton = forwardRef<Button, ResponsiveButtonProps>(
       toolbar: { responsive },
     } = useToolbarCollectionContext();
 
-    const { _nextToShrink, responsiveDisabled } = responsive;
+    const { responsiveDisabled } = responsive;
 
     const shouldShrink = responsiveDisabled
       ? shouldShrinkProp
-      : _nextToShrink._count >= state._count && state._shouldShrink;
+      : state._shouldShrink;
 
     return shouldShrink ? (
       <Tooltip

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2930045273";
+var _namespace_ = "ScrollableContent287701298";
 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":"ScrollableContent2930045273__root"};
+export var classes = {"root":"ScrollableContent287701298__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_ = "SkeletonCard1345182747";
+var _namespace_ = "SkeletonCard1509158132";
 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":"SkeletonCard1345182747__root","headerLoading":"SkeletonCard1345182747__headerLoading"};
+export var classes = {"root":"SkeletonCard1509158132__root","headerLoading":"SkeletonCard1509158132__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_ = "SlidingModal692356518";
+var _namespace_ = "SlidingModal2058154665";
 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":"SlidingModal692356518__root"};
+export var classes = {"root":"SlidingModal2058154665__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2423008515";
+var _namespace_ = "TabsFilter1340887134";
 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":"TabsFilter2423008515__root","title":"TabsFilter2423008515__title"};
+export var classes = {"root":"TabsFilter1340887134__root","title":"TabsFilter1340887134__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/TabsFilter/TabsFilter.tsx

@@ -189,7 +189,7 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
         container: container.current,
         itemsCount: items.length,
       }),
-    [],
+    [container, state],
   );
 
   const selectedId = filter.isEmpty
@@ -199,6 +199,11 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
   return (
     <FilterContextProvider value={filter}>
       <Box
+        ref={(node) => {
+          if (node) {
+            container.current = node;
+          }
+        }}
         dataHook="collection-tabs-filter"
         className={st(classes.root)}
         width="100%"
@@ -207,34 +212,26 @@ function _TabsFilter<V>(props: TabsFilterProps<V>) {
         verticalAlign="middle"
         flexGrow={1}
       >
-        <div
-          ref={(node) => {
-            if (node) {
-              container.current = node;
-            }
-          }}
-        >
-          {responsive.mode === 'tabs' ? (
-            <TabsDefault
-              items={items}
-              data={dataProp}
-              filter={filter}
-              selectedId={selectedId}
-              state={state}
-              onChange={onChange}
-              type={type}
-              all={all}
-            />
-          ) : (
-            <TabsDropdown
-              filter={filter}
-              data={dataProp}
-              items={items}
-              selectedId={selectedId}
-              popoverProps={mobilePopoverProps}
-            />
-          )}
-        </div>
+        {responsive.mode === 'tabs' ? (
+          <TabsDefault
+            items={items}
+            data={dataProp}
+            filter={filter}
+            selectedId={selectedId}
+            state={state}
+            onChange={onChange}
+            type={type}
+            all={all}
+          />
+        ) : (
+          <TabsDropdown
+            filter={filter}
+            data={dataProp}
+            items={items}
+            selectedId={selectedId}
+            popoverProps={mobilePopoverProps}
+          />
+        )}
       </Box>
     </FilterContextProvider>
   );

package/src/components/TabsFilter/TabsResponsiveState.ts

@@ -66,17 +66,25 @@ export class TabsResponsiveState {
     return itemsCount * itemMinWidth + badgesWidth;
   }
 
+  _externalAvailableWidth: number | null = null;
+
+  setAvailableWidth(width: number) {
+    this._externalAvailableWidth = width;
+    this._onResize();
+  }
+
   _onResize = action(() => {
     const { container } = this;
+    const availableWidth =
+      this._externalAvailableWidth ?? container?.clientWidth ?? 0;
+
     if (process.env.NODE_ENV === 'test') {
       return;
     }
-
     if (!container) {
       return;
     }
 
-    // Force dropdown mode on mobile
     if (this.isMobile) {
       this.mode = 'dropdown';
       return;
@@ -84,28 +92,12 @@ export class TabsResponsiveState {
 
     const nextPanelWidth = this.getPanelMinWidth();
 
-    // If the measurements show 0, this means that not all elements have loaded yet,
-    // so we skip such events.
     if (nextPanelWidth !== 0 && nextPanelWidth > this.panelMinWidth) {
       this.itemsMinWidths = this.getItemsMinWidth();
       this.panelMinWidth = nextPanelWidth;
     }
 
-    // The "container" is a node that wraps both Tabs and Dropdown components (but only
-    // one of them is rendered). It expands for as much space as all its elements
-    // inside need and shrinks down to the smallest possible state of the elements inside.
-    // Basically max-width and min-width with complications.
-    //
-    // Complications here are badges — they don't shrink, only tabs titles shrink.
-    //
-    // The state is switched when the certain container width (aka panelMinWidth) is reached.
-    // It is defined as: itemsCount * (itemMinWidth + itemPadding) + all badges widths.
-    // Tabs is shown when the container width is more or equal than panelMinWidth.
-    // Dropdown is shown when the container width is less than panelMinWidth.
-    if (
-      this.panelMinWidth !== 0 &&
-      container.clientWidth < this.panelMinWidth
-    ) {
+    if (this.panelMinWidth !== 0 && availableWidth < this.panelMinWidth) {
       this.mode = 'dropdown';
     } else {
       this.mode = 'tabs';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal3936625449";
+var _namespace_ = "ManageTagsModal2191591010";
 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":"ManageTagsModal3936625449__root"};
+export var classes = {"root":"ManageTagsModal2191591010__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_ = "ToolbarItem1352350803";
+var _namespace_ = "ToolbarItem679348093";
 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":"ToolbarItem1352350803__root"};
+export var classes = {"root":"ToolbarItem679348093__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_ = "ToolbarItemBox2099455071";
+var _namespace_ = "ToolbarItemBox4136043548";
 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":"ToolbarItemBox2099455071__root"};
+export var classes = {"root":"ToolbarItemBox4136043548__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_ = "common3366408934";
+var _namespace_ = "common547183010";
 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":"common3366408934__root","column":"common3366408934__column","fullHeight":"common3366408934__fullHeight"};
+export var classes = {"root":"common547183010__root","column":"common547183010__column","fullHeight":"common547183010__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader630394202";
+var _namespace_ = "CollectionPageHeader731162558";
 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":"CollectionPageHeader630394202__root"};
+export var classes = {"root":"CollectionPageHeader731162558__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_ = "FormPageHeader3500407043";
+var _namespace_ = "FormPageHeader99460919";
 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":"FormPageHeader3500407043__root"};
+export var classes = {"root":"FormPageHeader99460919__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/Toolbar/ToolbarLeftGroupState.ts

@@ -0,0 +1,86 @@
+import { addResizeObserver } from '@wix/bex-core';
+import type { ToolbarResponsiveState } from './ToolbarResponsiveState';
+import type { TabsFilterState } from '../../components/TabsFilter/TabsFilterState';
+import type { FiltersMap } from '@wix/bex-core';
+import { ToolbarMode } from '../../components/CollectionToolbar/toolbarModeUtils';
+
+export interface ToolbarLeftGroupStateParams<T, F extends FiltersMap> {
+  readonly responsive: ToolbarResponsiveState;
+  readonly mode: ToolbarMode;
+  readonly minWidth: number;
+  readonly getTabsState?: () => TabsFilterState<T, F> | null | undefined;
+}
+
+export class ToolbarLeftGroupState<T, F extends FiltersMap> {
+  private readonly _responsive: ToolbarResponsiveState;
+  private readonly _getTabsState?: () =>
+    | TabsFilterState<T, F>
+    | null
+    | undefined;
+
+  private _element: HTMLElement | null = null;
+  private _prevWidth = 0;
+
+  readonly mode: ToolbarMode;
+  readonly minWidth: number;
+
+  private readonly EXPANSION_THRESHOLD = 20;
+
+  constructor(params: ToolbarLeftGroupStateParams<T, F>) {
+    this._responsive = params.responsive;
+    this.mode = params.mode;
+    this.minWidth = params.minWidth;
+    this._getTabsState = params.getTabsState;
+  }
+
+  init(element: HTMLElement | null | undefined): () => void {
+    this._element = null;
+    this._prevWidth = 0;
+
+    if (!element) {
+      return () => {};
+    }
+
+    this._element = element;
+    const disposer = addResizeObserver(element, this._handleResize);
+    this._handleResize();
+
+    return () => {
+      disposer?.();
+      this._element = null;
+      this._prevWidth = 0;
+    };
+  }
+
+  private _handleResize = () => {
+    const element = this._element;
+    if (!element) {
+      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);
+    }
+
+    this._prevWidth = width;
+  };
+}

package/src/state/Toolbar/ToolbarResponsivePriorityState.ts

@@ -10,17 +10,17 @@ export interface ToolbarResponsivePriorityStateParams {
 }
 
 export class ToolbarResponsivePriorityState {
-  readonly responsive;
-  readonly getNextToShrink;
-  readonly getNextToExpand;
-  readonly _count;
+  readonly responsive: ToolbarResponsiveState;
+  getNextToShrink: () => ToolbarResponsivePriorityState;
+  getNextToExpand: () => ToolbarResponsivePriorityState;
+  readonly _count: number;
 
-  _minWidth;
-  _collapsedWidth;
+  _minWidth: number;
+  _collapsedWidth: number;
 
   _shouldShrink = false;
 
-  _groupElement?: HTMLElement | null | undefined;
+  _groupElement: HTMLElement | null = null;
 
   constructor(params: ToolbarResponsivePriorityStateParams) {
     this._count = params.count;
@@ -68,6 +68,10 @@ export class ToolbarResponsivePriorityState {
       actionsAvailableSpace: { available },
     } = responsive;
 
+    if (responsive._expandCooldown) {
+      return;
+    }
+
     if (
       _nextToExpand !== this ||
       (preCalculatedAvailableSpace ?? available) + _collapsedWidth <=
@@ -82,11 +86,14 @@ export class ToolbarResponsivePriorityState {
     responsive._nextToShrink = this;
     responsive.actionsAvailableSpace._syncThrottled();
 
-    // experimental - expanding the next item without waiting for the layout tick
-    // const availableAfterExpand = available + _collapsedWidth - this._minWidth;
-    // responsive._nextToExpand._expandIfNeeded({
-    //   preCalculatedAvailableSpace: availableAfterExpand,
-    // });
+    const spaceUsed = this._minWidth - _collapsedWidth;
+    const availableAfterExpand =
+      (preCalculatedAvailableSpace ?? available) - spaceUsed;
+    if (availableAfterExpand > 0) {
+      responsive._nextToExpand._expandIfNeeded({
+        preCalculatedAvailableSpace: availableAfterExpand,
+      });
+    }
   }
 
   _shrinkIfNeeded() {
@@ -105,6 +112,16 @@ export class ToolbarResponsivePriorityState {
     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();
   }
 }

package/src/state/Toolbar/ToolbarResponsiveState.ts

@@ -4,6 +4,7 @@ import { HorizontalSpaceAvailableState } from '../Responsive/HorizontalSpaceAvai
 import { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';
 import { HorizontalOverflowState } from '../Responsive/HorizontalOverflowState';
 import { ToolbarState } from '../../components/CollectionToolbars/ToolbarState';
+import { ToolbarLeftGroupState } from './ToolbarLeftGroupState';
 
 export interface ToolbarResponsiveStateParams {
   readonly toolbar: ToolbarState<any, any>;
@@ -14,13 +15,17 @@ export class ToolbarResponsiveState {
   readonly search: ToolbarResponsivePriorityState;
   readonly filters: ToolbarResponsivePriorityState;
 
-  _nextToShrink;
-  _nextToExpand;
+  _nextToShrink: ToolbarResponsivePriorityState;
+  _nextToExpand: ToolbarResponsivePriorityState;
 
-  readonly actionsAvailableSpace;
-  readonly overflow;
+  _expandCooldown = false;
 
-  readonly toolbar;
+  readonly actionsAvailableSpace: HorizontalSpaceAvailableState;
+  readonly overflow: HorizontalOverflowState;
+
+  readonly toolbar: ToolbarState<any, any>;
+
+  leftGroupState: ToolbarLeftGroupState<any, any> | null = null;
 
   get container() {
     return this.toolbar.toolbar.container;
@@ -33,30 +38,30 @@ export class ToolbarResponsiveState {
       state: this,
     });
 
-    this.search = new ToolbarResponsivePriorityState({
+    this.actions = new ToolbarResponsivePriorityState({
       responsive: this,
-      getNextToShrink: () => this.actions,
-      getNextToExpand: () => this.search,
+      getNextToShrink: () => this.filters,
+      getNextToExpand: () => this.actions,
       count: 1,
-      minWidth: 140,
     });
 
-    this.actions = new ToolbarResponsivePriorityState({
+    this.filters = new ToolbarResponsivePriorityState({
       responsive: this,
-      getNextToShrink: () => this.filters,
-      getNextToExpand: () => this.search,
+      getNextToShrink: () => this.search,
+      getNextToExpand: () => this.actions,
       count: 2,
     });
 
-    this.filters = new ToolbarResponsivePriorityState({
+    this.search = new ToolbarResponsivePriorityState({
       responsive: this,
-      getNextToShrink: () => this.filters,
-      getNextToExpand: () => this.actions,
+      getNextToShrink: () => this.search,
+      getNextToExpand: () => this.filters,
       count: 3,
+      minWidth: 140,
     });
 
-    this._nextToShrink = this.search;
-    this._nextToExpand = this.search;
+    this._nextToShrink = this.actions;
+    this._nextToExpand = this.actions;
 
     this.actionsAvailableSpace = new HorizontalSpaceAvailableState({
       state: this,