@wix/patterns 1.356.0 → 1.357.0

package/dist/cjs/state/Toolbar/ToolbarResponsivePriorityState.js

@@ -8,25 +8,16 @@ var _mobx = require("mobx");
 class ToolbarResponsivePriorityState {
   constructor(params) {
     (0, _defineProperty2.default)(this, "responsive", void 0);
-    (0, _defineProperty2.default)(this, "getNextToShrink", void 0);
-    (0, _defineProperty2.default)(this, "getNextToExpand", void 0);
-    (0, _defineProperty2.default)(this, "_count", void 0);
-    (0, _defineProperty2.default)(this, "_minWidth", void 0);
-    (0, _defineProperty2.default)(this, "_collapsedWidth", void 0);
+    (0, _defineProperty2.default)(this, "expandedWidth", void 0);
+    (0, _defineProperty2.default)(this, "collapsedWidth", void 0);
     (0, _defineProperty2.default)(this, "_shouldShrink", false);
     (0, _defineProperty2.default)(this, "_groupElement", null);
-    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;
     (0, _mobx.makeObservable)(this, {
-      _minWidth: _mobx.observable.ref,
       _shouldShrink: _mobx.observable.ref,
-      _syncWidth: _mobx.action,
-      _expandIfNeeded: _mobx.action,
-      _shrinkIfNeeded: _mobx.action
+      _syncWidth: _mobx.action
     });
   }
   _syncWidth() {
@@ -41,67 +32,13 @@ class ToolbarResponsivePriorityState {
     if (!_groupElement) {
       return;
     }
+    const measured = _groupElement.scrollWidth;
     if (_shouldShrink) {
-      this._collapsedWidth = _groupElement.scrollWidth;
+      this.collapsedWidth = measured;
     } else {
-      this._minWidth = _groupElement.scrollWidth;
+      this.expandedWidth = measured;
     }
-  }
-  _expandIfNeeded({
-    preCalculatedAvailableSpace
-  } = {}) {
-    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._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();
   }
 }
 exports.ToolbarResponsivePriorityState = ToolbarResponsivePriorityState;

package/dist/cjs/state/Toolbar/ToolbarResponsivePriorityState.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobx","require","ToolbarResponsivePriorityState","constructor","params","_defineProperty2","default","_count","count","_minWidth","minWidth","_collapsedWidth","responsive","getNextToShrink","getNextToExpand","makeObservable","observable","ref","_shouldShrink","_syncWidth","action","_expandIfNeeded","_shrinkIfNeeded","_groupElement","responsiveDisabled","scrollWidth","preCalculatedAvailableSpace","_nextToExpand","actionsAvailableSpace","available","_expandCooldown","_nextToShrink","_syncThrottled","spaceUsed","availableAfterExpand","overflow","_isOverflowing","window","requestAnimationFrame","exports"],"sources":["../../../../src/state/Toolbar/ToolbarResponsivePriorityState.ts"],"sourcesContent":["import { ToolbarResponsiveState } from './ToolbarResponsiveState';\nimport { action, makeObservable, observable } from 'mobx';\n\nexport interface ToolbarResponsivePriorityStateParams {\n  responsive: ToolbarResponsiveState;\n  getNextToShrink: () => ToolbarResponsivePriorityState;\n  getNextToExpand: () => ToolbarResponsivePriorityState;\n  count: number;\n  minWidth?: number;\n}\n\nexport class ToolbarResponsivePriorityState {\n  readonly responsive: ToolbarResponsiveState;\n  getNextToShrink: () => ToolbarResponsivePriorityState;\n  getNextToExpand: () => ToolbarResponsivePriorityState;\n  readonly _count: number;\n\n  _minWidth: number;\n  _collapsedWidth: number;\n\n  _shouldShrink = false;\n\n  _groupElement: HTMLElement | null = null;\n\n  constructor(params: ToolbarResponsivePriorityStateParams) {\n    this._count = params.count;\n\n    this._minWidth = params.minWidth ?? 0;\n    this._collapsedWidth = params.minWidth ?? 0;\n\n    this.responsive = params.responsive;\n    this.getNextToShrink = params.getNextToShrink;\n    this.getNextToExpand = params.getNextToExpand;\n\n    makeObservable(this, {\n      _minWidth: observable.ref,\n      _shouldShrink: observable.ref,\n      _syncWidth: action,\n      _expandIfNeeded: action,\n      _shrinkIfNeeded: action,\n    });\n  }\n\n  _syncWidth() {\n    const { _groupElement, _shouldShrink, responsive } = this;\n    if (responsive.responsiveDisabled) {\n      return;\n    }\n    if (!_groupElement) {\n      return;\n    }\n    if (_shouldShrink) {\n      this._collapsedWidth = _groupElement.scrollWidth;\n    } else {\n      this._minWidth = _groupElement.scrollWidth;\n    }\n  }\n\n  _expandIfNeeded({\n    preCalculatedAvailableSpace,\n  }: {\n    preCalculatedAvailableSpace?: number;\n  } = {}) {\n    const { responsive, _collapsedWidth } = this;\n\n    const {\n      _nextToExpand,\n      actionsAvailableSpace: { available },\n    } = responsive;\n\n    if (responsive._expandCooldown) {\n      return;\n    }\n\n    if (\n      _nextToExpand !== this ||\n      (preCalculatedAvailableSpace ?? available) + _collapsedWidth <=\n        this._minWidth ||\n      !this._shouldShrink\n    ) {\n      return;\n    }\n\n    this._shouldShrink = false;\n    responsive._nextToExpand = _nextToExpand.getNextToExpand();\n    responsive._nextToShrink = this;\n    responsive.actionsAvailableSpace._syncThrottled();\n\n    const spaceUsed = this._minWidth - _collapsedWidth;\n    const availableAfterExpand =\n      (preCalculatedAvailableSpace ?? available) - spaceUsed;\n    if (availableAfterExpand > 0) {\n      responsive._nextToExpand._expandIfNeeded({\n        preCalculatedAvailableSpace: availableAfterExpand,\n      });\n    }\n  }\n\n  _shrinkIfNeeded() {\n    const { responsive } = this;\n\n    const { _nextToShrink, overflow } = responsive;\n\n    if (\n      _nextToShrink !== this ||\n      !overflow._isOverflowing ||\n      this._shouldShrink\n    ) {\n      return;\n    }\n\n    this._shouldShrink = true;\n    responsive._nextToShrink = _nextToShrink.getNextToShrink();\n    responsive._nextToExpand = this;\n\n    // Double rAF ensures the shrink is fully painted before allowing expansion.\n    // Single rAF can cause flickering because layout may not be settled yet.\n    responsive._expandCooldown = true;\n    window.requestAnimationFrame(() => {\n      window.requestAnimationFrame(() => {\n        responsive._expandCooldown = false;\n      });\n    });\n\n    responsive.overflow._syncThrottled();\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_mobx","require","ToolbarResponsivePriorityState","constructor","params","_defineProperty2","default","expandedWidth","collapsedWidth","responsive","makeObservable","_shouldShrink","observable","ref","_syncWidth","action","_groupElement","responsiveDisabled","measured","scrollWidth","_scheduleRecompute","exports"],"sources":["../../../../src/state/Toolbar/ToolbarResponsivePriorityState.ts"],"sourcesContent":["import { ToolbarResponsiveState } from './ToolbarResponsiveState';\nimport { action, makeObservable, observable } from 'mobx';\n\nexport interface ToolbarResponsivePriorityStateParams {\n  responsive: ToolbarResponsiveState;\n  expandedWidth?: number;\n  collapsedWidth?: number;\n}\n\nexport class ToolbarResponsivePriorityState {\n  readonly responsive: ToolbarResponsiveState;\n\n  expandedWidth: number;\n  collapsedWidth: number;\n\n  _shouldShrink = false;\n\n  _groupElement: HTMLElement | null = null;\n\n  constructor(params: ToolbarResponsivePriorityStateParams) {\n    this.expandedWidth = params.expandedWidth ?? 0;\n    this.collapsedWidth = params.collapsedWidth ?? 0;\n\n    this.responsive = params.responsive;\n\n    makeObservable(this, {\n      _shouldShrink: observable.ref,\n      _syncWidth: action,\n    });\n  }\n\n  _syncWidth() {\n    const { _groupElement, _shouldShrink, responsive } = this;\n    if (responsive.responsiveDisabled) {\n      return;\n    }\n    if (!_groupElement) {\n      return;\n    }\n    const measured = _groupElement.scrollWidth;\n    if (_shouldShrink) {\n      this.collapsedWidth = measured;\n    } else {\n      this.expandedWidth = measured;\n    }\n    responsive._scheduleRecompute();\n  }\n}\n"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAQO,MAAMC,8BAA8B,CAAC;EAU1CC,WAAWA,CAACC,MAA4C,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,yBAJ1C,KAAK;IAAA,IAAAD,gBAAA,CAAAC,OAAA,yBAEe,IAAI;IAGtC,IAAI,CAACC,aAAa,GAAGH,MAAM,CAACG,aAAa,IAAI,CAAC;IAC9C,IAAI,CAACC,cAAc,GAAGJ,MAAM,CAACI,cAAc,IAAI,CAAC;IAEhD,IAAI,CAACC,UAAU,GAAGL,MAAM,CAACK,UAAU;IAEnC,IAAAC,oBAAc,EAAC,IAAI,EAAE;MACnBC,aAAa,EAAEC,gBAAU,CAACC,GAAG;MAC7BC,UAAU,EAAEC;IACd,CAAC,CAAC;EACJ;EAEAD,UAAUA,CAAA,EAAG;IACX,MAAM;MAAEE,aAAa;MAAEL,aAAa;MAAEF;IAAW,CAAC,GAAG,IAAI;IACzD,IAAIA,UAAU,CAACQ,kBAAkB,EAAE;MACjC;IACF;IACA,IAAI,CAACD,aAAa,EAAE;MAClB;IACF;IACA,MAAME,QAAQ,GAAGF,aAAa,CAACG,WAAW;IAC1C,IAAIR,aAAa,EAAE;MACjB,IAAI,CAACH,cAAc,GAAGU,QAAQ;IAChC,CAAC,MAAM;MACL,IAAI,CAACX,aAAa,GAAGW,QAAQ;IAC/B;IACAT,UAAU,CAACW,kBAAkB,CAAC,CAAC;EACjC;AACF;AAACC,OAAA,CAAAnB,8BAAA,GAAAA,8BAAA","ignoreList":[]}

package/dist/cjs/state/Toolbar/ToolbarResponsiveState.js

@@ -6,9 +6,14 @@ exports.ToolbarResponsiveState = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _bexCore = require("@wix/bex-core");
 var _mobx = require("mobx");
-var _HorizontalSpaceAvailableState = require("../Responsive/HorizontalSpaceAvailableState");
 var _ToolbarResponsivePriorityState = require("./ToolbarResponsivePriorityState");
-var _HorizontalOverflowState = require("../Responsive/HorizontalOverflowState");
+var _computeResponsiveTargetState = require("./computeResponsiveTargetState");
+var _toolbarResponsiveConstants = require("./toolbarResponsiveConstants");
+// Buffer (in px) added to the expand threshold to prevent flickering near the
+// expand/collapse boundary. Tuned to ~2-3x the inter-element gap (SP2 = 12px) --
+// large enough to absorb measurement rounding and flex reflow, small enough that
+// the dead zone per group isn't visually noticeable during gradual resizing.
+const EXPAND_THRESHOLD_BUFFER = 30;
 class ToolbarResponsiveState {
   get container() {
     return this.toolbar.toolbar.container;
@@ -17,45 +22,29 @@ class ToolbarResponsiveState {
     (0, _defineProperty2.default)(this, "actions", void 0);
     (0, _defineProperty2.default)(this, "search", void 0);
     (0, _defineProperty2.default)(this, "filters", void 0);
-    (0, _defineProperty2.default)(this, "_nextToShrink", void 0);
-    (0, _defineProperty2.default)(this, "_nextToExpand", void 0);
-    (0, _defineProperty2.default)(this, "_expandCooldown", false);
-    (0, _defineProperty2.default)(this, "actionsAvailableSpace", void 0);
-    (0, _defineProperty2.default)(this, "overflow", void 0);
+    (0, _defineProperty2.default)(this, "_groups", void 0);
+    (0, _defineProperty2.default)(this, "_measurementElement", null);
+    (0, _defineProperty2.default)(this, "_contentElement", null);
     (0, _defineProperty2.default)(this, "toolbar", void 0);
     (0, _defineProperty2.default)(this, "leftGroupState", null);
+    (0, _defineProperty2.default)(this, "_recomputeThrottled", void 0);
+    (0, _defineProperty2.default)(this, "_rafId", 0);
     this.toolbar = params.toolbar;
-    this.overflow = new _HorizontalOverflowState.HorizontalOverflowState({
-      state: this
-    });
     this.actions = new _ToolbarResponsivePriorityState.ToolbarResponsivePriorityState({
-      responsive: this,
-      getNextToShrink: () => this.filters,
-      getNextToExpand: () => this.actions,
-      count: 1
+      responsive: this
     });
     this.filters = new _ToolbarResponsivePriorityState.ToolbarResponsivePriorityState({
-      responsive: this,
-      getNextToShrink: () => this.search,
-      getNextToExpand: () => this.actions,
-      count: 2
+      responsive: this
     });
     this.search = new _ToolbarResponsivePriorityState.ToolbarResponsivePriorityState({
       responsive: this,
-      getNextToShrink: () => this.search,
-      getNextToExpand: () => this.filters,
-      count: 3,
-      minWidth: 140
-    });
-    this._nextToShrink = this.actions;
-    this._nextToExpand = this.actions;
-    this.actionsAvailableSpace = new _HorizontalSpaceAvailableState.HorizontalSpaceAvailableState({
-      state: this
+      expandedWidth: _toolbarResponsiveConstants.SEARCH_EXPANDED_WIDTH,
+      collapsedWidth: _toolbarResponsiveConstants.SEARCH_COLLAPSED_WIDTH
     });
+    this._groups = [this.actions, this.filters, this.search];
     (0, _mobx.makeObservable)(this, {
-      _nextToShrink: _mobx.observable.ref,
-      _nextToExpand: _mobx.observable.ref,
-      responsiveDisabled: _mobx.computed
+      responsiveDisabled: _mobx.computed,
+      _applyTargetState: _mobx.action
     });
   }
   get responsiveDisabled() {
@@ -71,33 +60,76 @@ class ToolbarResponsiveState {
     } = this;
     return !(_syncedProps != null && _syncedProps.useResponsiveLayout) || !(internalExperiments != null && internalExperiments.enabled('specs.cairo.EnableResponsiveToolbar11420'));
   }
+  _scheduleRecompute() {
+    var _this$_recomputeThrot;
+    if (this.responsiveDisabled) {
+      return;
+    }
+    (_this$_recomputeThrot = this._recomputeThrottled) == null || _this$_recomputeThrot.call(this);
+  }
+  _computeResponsiveInput() {
+    var _this$leftGroupState;
+    const el = this._measurementElement;
+    const contentEl = this._contentElement;
+    if (!el || !contentEl) {
+      return null;
+    }
+
+    // The left group (title/tabs/views) has flex:1 and absorbs freed space when
+    // right-side items shrink. Account for its excess width so the algorithm sees
+    // the true available space and can expand items back when the container grows.
+    const leftGroupExcess = ((_this$leftGroupState = this.leftGroupState) == null ? void 0 : _this$leftGroupState.getExcessWidth()) ?? 0;
+    const containerWidth = el.clientWidth + leftGroupExcess;
+    const contentWidth = contentEl.scrollWidth;
+    const groups = this._groups.map(g => ({
+      expandedWidth: g.expandedWidth,
+      collapsedWidth: g.collapsedWidth,
+      currentlyShrunk: g._shouldShrink
+    }));
+    const groupsTotal = groups.reduce((sum, g) => sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth), 0);
+    return {
+      availableWidth: containerWidth - (contentWidth - groupsTotal),
+      groups
+    };
+  }
+  _applyTargetState() {
+    const input = this._computeResponsiveInput();
+    if (!input) {
+      return;
+    }
+    const result = (0, _computeResponsiveTargetState.computeResponsiveTargetState)({
+      ...input,
+      expandThresholdBuffer: EXPAND_THRESHOLD_BUFFER
+    });
+    this._groups.forEach((g, i) => {
+      g._shouldShrink = result[i].shouldShrink;
+    });
+  }
   init() {
     const {
-      toolbar: {
-        toolbar
-      },
-      overflow,
-      actionsAvailableSpace,
       responsiveDisabled
     } = this;
     if (responsiveDisabled) {
-      return;
+      return () => {};
+    }
+    this._recomputeThrottled = this.container.lodash.throttle(() => {
+      this._rafId = window.requestAnimationFrame(() => {
+        (0, _mobx.runInAction)(() => this._applyTargetState());
+      });
+    }, 200);
+    const containerEl = this.toolbar.toolbar.toolbarRect.element;
+    if (!containerEl) {
+      return () => {
+        var _this$_recomputeThrot2;
+        (_this$_recomputeThrot2 = this._recomputeThrottled) == null || _this$_recomputeThrot2.cancel();
+      };
     }
-    const disposers = [(0, _bexCore.addResizeObserver)(toolbar.toolbarRect.element, actionsAvailableSpace._syncThrottled), (0, _mobx.reaction)(() => ({
-      _isOverflowing: overflow._isOverflowing,
-      _scrollWidth: overflow._scrollWidth,
-      _clientWidth: overflow._clientWidth
-    }), () => {
-      this._nextToShrink._shrinkIfNeeded();
-    }, {
-      fireImmediately: true
-    }), (0, _mobx.reaction)(() => actionsAvailableSpace.available, () => {
-      this._nextToExpand._expandIfNeeded();
-    }, {
-      fireImmediately: true
-    })];
+    const disposers = [(0, _bexCore.addResizeObserver)(containerEl, this._recomputeThrottled)];
     return () => {
+      var _this$_recomputeThrot3;
       disposers.forEach(d => d == null ? void 0 : d());
+      (_this$_recomputeThrot3 = this._recomputeThrottled) == null || _this$_recomputeThrot3.cancel();
+      cancelAnimationFrame(this._rafId);
     };
   }
 }

package/dist/cjs/state/Toolbar/ToolbarResponsiveState.js.map

@@ -1 +1 @@
-{"version":3,"names":["_bexCore","require","_mobx","_HorizontalSpaceAvailableState","_ToolbarResponsivePriorityState","_HorizontalOverflowState","ToolbarResponsiveState","container","toolbar","constructor","params","_defineProperty2","default","overflow","HorizontalOverflowState","state","actions","ToolbarResponsivePriorityState","responsive","getNextToShrink","filters","getNextToExpand","count","search","minWidth","_nextToShrink","_nextToExpand","actionsAvailableSpace","HorizontalSpaceAvailableState","makeObservable","observable","ref","responsiveDisabled","computed","_syncedProps","internalExperiments","useResponsiveLayout","enabled","init","disposers","addResizeObserver","toolbarRect","element","_syncThrottled","reaction","_isOverflowing","_scrollWidth","_clientWidth","_shrinkIfNeeded","fireImmediately","available","_expandIfNeeded","forEach","d","exports"],"sources":["../../../../src/state/Toolbar/ToolbarResponsiveState.ts"],"sourcesContent":["import { addResizeObserver } from '@wix/bex-core';\nimport { computed, makeObservable, observable, reaction } from 'mobx';\nimport { HorizontalSpaceAvailableState } from '../Responsive/HorizontalSpaceAvailableState';\nimport { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';\nimport { HorizontalOverflowState } from '../Responsive/HorizontalOverflowState';\nimport { ToolbarState } from '../../components/CollectionToolbars/ToolbarState';\nimport { ToolbarLeftGroupState } from './ToolbarLeftGroupState';\n\nexport interface ToolbarResponsiveStateParams {\n  readonly toolbar: ToolbarState<any, any>;\n}\n\nexport class ToolbarResponsiveState {\n  readonly actions: ToolbarResponsivePriorityState;\n  readonly search: ToolbarResponsivePriorityState;\n  readonly filters: ToolbarResponsivePriorityState;\n\n  _nextToShrink: ToolbarResponsivePriorityState;\n  _nextToExpand: ToolbarResponsivePriorityState;\n\n  _expandCooldown = false;\n\n  readonly actionsAvailableSpace: HorizontalSpaceAvailableState;\n  readonly overflow: HorizontalOverflowState;\n\n  readonly toolbar: ToolbarState<any, any>;\n\n  leftGroupState: ToolbarLeftGroupState<any, any> | null = null;\n\n  get container() {\n    return this.toolbar.toolbar.container;\n  }\n\n  constructor(params: ToolbarResponsiveStateParams) {\n    this.toolbar = params.toolbar;\n\n    this.overflow = new HorizontalOverflowState({\n      state: this,\n    });\n\n    this.actions = new ToolbarResponsivePriorityState({\n      responsive: this,\n      getNextToShrink: () => this.filters,\n      getNextToExpand: () => this.actions,\n      count: 1,\n    });\n\n    this.filters = new ToolbarResponsivePriorityState({\n      responsive: this,\n      getNextToShrink: () => this.search,\n      getNextToExpand: () => this.actions,\n      count: 2,\n    });\n\n    this.search = new ToolbarResponsivePriorityState({\n      responsive: this,\n      getNextToShrink: () => this.search,\n      getNextToExpand: () => this.filters,\n      count: 3,\n      minWidth: 140,\n    });\n\n    this._nextToShrink = this.actions;\n    this._nextToExpand = this.actions;\n\n    this.actionsAvailableSpace = new HorizontalSpaceAvailableState({\n      state: this,\n    });\n\n    makeObservable(this, {\n      _nextToShrink: observable.ref,\n      _nextToExpand: observable.ref,\n      responsiveDisabled: computed,\n    });\n  }\n\n  get responsiveDisabled() {\n    const {\n      toolbar: {\n        toolbar: { _syncedProps },\n      },\n      container: { internalExperiments },\n    } = this;\n\n    return (\n      !_syncedProps?.useResponsiveLayout ||\n      !internalExperiments?.enabled('specs.cairo.EnableResponsiveToolbar11420')\n    );\n  }\n\n  init() {\n    const {\n      toolbar: { toolbar },\n      overflow,\n      actionsAvailableSpace,\n      responsiveDisabled,\n    } = this;\n\n    if (responsiveDisabled) {\n      return;\n    }\n\n    const disposers = [\n      addResizeObserver(\n        toolbar.toolbarRect.element,\n        actionsAvailableSpace._syncThrottled,\n      ),\n      reaction(\n        () => ({\n          _isOverflowing: overflow._isOverflowing,\n          _scrollWidth: overflow._scrollWidth,\n          _clientWidth: overflow._clientWidth,\n        }),\n        () => {\n          this._nextToShrink._shrinkIfNeeded();\n        },\n        {\n          fireImmediately: true,\n        },\n      ),\n      reaction(\n        () => actionsAvailableSpace.available,\n        () => {\n          this._nextToExpand._expandIfNeeded();\n        },\n        {\n          fireImmediately: true,\n        },\n      ),\n    ];\n\n    return () => {\n      disposers.forEach((d) => d?.());\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_bexCore","require","_mobx","_ToolbarResponsivePriorityState","_computeResponsiveTargetState","_toolbarResponsiveConstants","EXPAND_THRESHOLD_BUFFER","ToolbarResponsiveState","container","toolbar","constructor","params","_defineProperty2","default","actions","ToolbarResponsivePriorityState","responsive","filters","search","expandedWidth","SEARCH_EXPANDED_WIDTH","collapsedWidth","SEARCH_COLLAPSED_WIDTH","_groups","makeObservable","responsiveDisabled","computed","_applyTargetState","action","_syncedProps","internalExperiments","useResponsiveLayout","enabled","_scheduleRecompute","_this$_recomputeThrot","_recomputeThrottled","call","_computeResponsiveInput","_this$leftGroupState","el","_measurementElement","contentEl","_contentElement","leftGroupExcess","leftGroupState","getExcessWidth","containerWidth","clientWidth","contentWidth","scrollWidth","groups","map","g","currentlyShrunk","_shouldShrink","groupsTotal","reduce","sum","availableWidth","input","result","computeResponsiveTargetState","expandThresholdBuffer","forEach","i","shouldShrink","init","lodash","throttle","_rafId","window","requestAnimationFrame","runInAction","containerEl","toolbarRect","element","_this$_recomputeThrot2","cancel","disposers","addResizeObserver","_this$_recomputeThrot3","d","cancelAnimationFrame","exports"],"sources":["../../../../src/state/Toolbar/ToolbarResponsiveState.ts"],"sourcesContent":["import { addResizeObserver } from '@wix/bex-core';\nimport { action, computed, makeObservable, runInAction } from 'mobx';\nimport { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';\nimport { ToolbarState } from '../../components/CollectionToolbars/ToolbarState';\nimport { ToolbarLeftGroupState } from './ToolbarLeftGroupState';\nimport { computeResponsiveTargetState } from './computeResponsiveTargetState';\nimport {\n  SEARCH_COLLAPSED_WIDTH,\n  SEARCH_EXPANDED_WIDTH,\n} from './toolbarResponsiveConstants';\n\nexport interface ToolbarResponsiveStateParams {\n  readonly toolbar: ToolbarState<any, any>;\n}\n\n// Buffer (in px) added to the expand threshold to prevent flickering near the\n// expand/collapse boundary. Tuned to ~2-3x the inter-element gap (SP2 = 12px) --\n// large enough to absorb measurement rounding and flex reflow, small enough that\n// the dead zone per group isn't visually noticeable during gradual resizing.\nconst EXPAND_THRESHOLD_BUFFER = 30;\n\nexport class ToolbarResponsiveState {\n  readonly actions: ToolbarResponsivePriorityState;\n  readonly search: ToolbarResponsivePriorityState;\n  readonly filters: ToolbarResponsivePriorityState;\n\n  private readonly _groups: ToolbarResponsivePriorityState[];\n\n  _measurementElement: Element | null = null;\n  _contentElement: Element | null = null;\n\n  readonly toolbar: ToolbarState<any, any>;\n\n  leftGroupState: ToolbarLeftGroupState<any, any> | null = null;\n\n  get container() {\n    return this.toolbar.toolbar.container;\n  }\n\n  constructor(params: ToolbarResponsiveStateParams) {\n    this.toolbar = params.toolbar;\n\n    this.actions = new ToolbarResponsivePriorityState({\n      responsive: this,\n    });\n\n    this.filters = new ToolbarResponsivePriorityState({\n      responsive: this,\n    });\n\n    this.search = new ToolbarResponsivePriorityState({\n      responsive: this,\n      expandedWidth: SEARCH_EXPANDED_WIDTH,\n      collapsedWidth: SEARCH_COLLAPSED_WIDTH,\n    });\n\n    this._groups = [this.actions, this.filters, this.search];\n\n    makeObservable(this, {\n      responsiveDisabled: computed,\n      _applyTargetState: action,\n    });\n  }\n\n  get responsiveDisabled() {\n    const {\n      toolbar: {\n        toolbar: { _syncedProps },\n      },\n      container: { internalExperiments },\n    } = this;\n\n    return (\n      !_syncedProps?.useResponsiveLayout ||\n      !internalExperiments?.enabled('specs.cairo.EnableResponsiveToolbar11420')\n    );\n  }\n\n  _scheduleRecompute() {\n    if (this.responsiveDisabled) {\n      return;\n    }\n    this._recomputeThrottled?.();\n  }\n\n  private _computeResponsiveInput() {\n    const el = this._measurementElement;\n    const contentEl = this._contentElement;\n    if (!el || !contentEl) {\n      return null;\n    }\n\n    // The left group (title/tabs/views) has flex:1 and absorbs freed space when\n    // right-side items shrink. Account for its excess width so the algorithm sees\n    // the true available space and can expand items back when the container grows.\n    const leftGroupExcess = this.leftGroupState?.getExcessWidth() ?? 0;\n    const containerWidth = el.clientWidth + leftGroupExcess;\n    const contentWidth = contentEl.scrollWidth;\n\n    const groups = this._groups.map((g) => ({\n      expandedWidth: g.expandedWidth,\n      collapsedWidth: g.collapsedWidth,\n      currentlyShrunk: g._shouldShrink,\n    }));\n\n    const groupsTotal = groups.reduce(\n      (sum, g) => sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth),\n      0,\n    );\n\n    return {\n      availableWidth: containerWidth - (contentWidth - groupsTotal),\n      groups,\n    };\n  }\n\n  _applyTargetState() {\n    const input = this._computeResponsiveInput();\n    if (!input) {\n      return;\n    }\n\n    const result = computeResponsiveTargetState({\n      ...input,\n      expandThresholdBuffer: EXPAND_THRESHOLD_BUFFER,\n    });\n\n    this._groups.forEach((g, i) => {\n      g._shouldShrink = result[i].shouldShrink;\n    });\n  }\n\n  private _recomputeThrottled?: ReturnType<typeof this.container.lodash.throttle>;\n  private _rafId = 0;\n\n  init() {\n    const { responsiveDisabled } = this;\n\n    if (responsiveDisabled) {\n      return () => {};\n    }\n\n    this._recomputeThrottled = this.container.lodash.throttle(() => {\n      this._rafId = window.requestAnimationFrame(() => {\n        runInAction(() => this._applyTargetState());\n      });\n    }, 200);\n\n    const containerEl =\n      this.toolbar.toolbar.toolbarRect.element;\n    if (!containerEl) {\n      return () => {\n        this._recomputeThrottled?.cancel();\n      };\n    }\n\n    const disposers = [\n      addResizeObserver(containerEl, this._recomputeThrottled),\n    ];\n\n    return () => {\n      disposers.forEach((d) => d?.());\n      this._recomputeThrottled?.cancel();\n      cancelAnimationFrame(this._rafId);\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/state/Toolbar/computeResponsiveTargetState.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.computeResponsiveTargetState = computeResponsiveTargetState;
+function computeResponsiveTargetState(params) {
+  const {
+    availableWidth,
+    groups,
+    expandThresholdBuffer
+  } = params;
+  if (groups.length === 0) {
+    return [];
+  }
+  const result = groups.map(g => ({
+    shouldShrink: g.currentlyShrunk
+  }));
+  const widthOf = (group, index) => result[index].shouldShrink ? group.collapsedWidth : group.expandedWidth;
+  let total = groups.reduce((sum, g, i) => sum + widthOf(g, i), 0);
+  for (let i = 0; i < groups.length; i++) {
+    if (total <= availableWidth) {
+      break;
+    }
+    if (!result[i].shouldShrink) {
+      const savings = groups[i].expandedWidth - groups[i].collapsedWidth;
+      result[i].shouldShrink = true;
+      total -= savings;
+    }
+  }
+  for (let i = groups.length - 1; i >= 0; i--) {
+    if (!result[i].shouldShrink) {
+      continue;
+    }
+    const expandCost = groups[i].expandedWidth - groups[i].collapsedWidth;
+    if (expandCost === 0) {
+      continue;
+    }
+    if (total + expandCost + expandThresholdBuffer <= availableWidth) {
+      result[i].shouldShrink = false;
+      total += expandCost;
+    } else {
+      // Strict priority: if a higher-priority group (lower index) cannot expand,
+      // no lower-priority groups should expand either to avoid visual inconsistency.
+      break;
+    }
+  }
+  return result;
+}
+//# sourceMappingURL=computeResponsiveTargetState.js.map

package/dist/cjs/state/Toolbar/computeResponsiveTargetState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["computeResponsiveTargetState","params","availableWidth","groups","expandThresholdBuffer","length","result","map","g","shouldShrink","currentlyShrunk","widthOf","group","index","collapsedWidth","expandedWidth","total","reduce","sum","i","savings","expandCost"],"sources":["../../../../src/state/Toolbar/computeResponsiveTargetState.ts"],"sourcesContent":["export interface ResponsiveGroupInput {\n  expandedWidth: number;\n  collapsedWidth: number;\n  currentlyShrunk: boolean;\n}\n\nexport interface ComputeResponsiveTargetStateParams {\n  availableWidth: number;\n  groups: ResponsiveGroupInput[];\n  expandThresholdBuffer: number;\n}\n\nexport interface ResponsiveGroupOutput {\n  shouldShrink: boolean;\n}\n\nexport function computeResponsiveTargetState(\n  params: ComputeResponsiveTargetStateParams,\n): ResponsiveGroupOutput[] {\n  const { availableWidth, groups, expandThresholdBuffer } = params;\n\n  if (groups.length === 0) {\n    return [];\n  }\n\n  const result: ResponsiveGroupOutput[] = groups.map((g) => ({\n    shouldShrink: g.currentlyShrunk,\n  }));\n\n  const widthOf = (group: ResponsiveGroupInput, index: number) =>\n    result[index].shouldShrink ? group.collapsedWidth : group.expandedWidth;\n\n  let total = groups.reduce((sum, g, i) => sum + widthOf(g, i), 0);\n\n  for (let i = 0; i < groups.length; i++) {\n    if (total <= availableWidth) {\n      break;\n    }\n    if (!result[i].shouldShrink) {\n      const savings = groups[i].expandedWidth - groups[i].collapsedWidth;\n      result[i].shouldShrink = true;\n      total -= savings;\n    }\n  }\n\n  for (let i = groups.length - 1; i >= 0; i--) {\n    if (!result[i].shouldShrink) {\n      continue;\n    }\n\n    const expandCost = groups[i].expandedWidth - groups[i].collapsedWidth;\n    if (expandCost === 0) {\n      continue;\n    }\n\n    if (total + expandCost + expandThresholdBuffer <= availableWidth) {\n      result[i].shouldShrink = false;\n      total += expandCost;\n    } else {\n      // Strict priority: if a higher-priority group (lower index) cannot expand,\n      // no lower-priority groups should expand either to avoid visual inconsistency.\n      break;\n    }\n  }\n\n  return result;\n}\n"],"mappings":";;;;AAgBO,SAASA,4BAA4BA,CAC1CC,MAA0C,EACjB;EACzB,MAAM;IAAEC,cAAc;IAAEC,MAAM;IAAEC;EAAsB,CAAC,GAAGH,MAAM;EAEhE,IAAIE,MAAM,CAACE,MAAM,KAAK,CAAC,EAAE;IACvB,OAAO,EAAE;EACX;EAEA,MAAMC,MAA+B,GAAGH,MAAM,CAACI,GAAG,CAAEC,CAAC,KAAM;IACzDC,YAAY,EAAED,CAAC,CAACE;EAClB,CAAC,CAAC,CAAC;EAEH,MAAMC,OAAO,GAAGA,CAACC,KAA2B,EAAEC,KAAa,KACzDP,MAAM,CAACO,KAAK,CAAC,CAACJ,YAAY,GAAGG,KAAK,CAACE,cAAc,GAAGF,KAAK,CAACG,aAAa;EAEzE,IAAIC,KAAK,GAAGb,MAAM,CAACc,MAAM,CAAC,CAACC,GAAG,EAAEV,CAAC,EAAEW,CAAC,KAAKD,GAAG,GAAGP,OAAO,CAACH,CAAC,EAAEW,CAAC,CAAC,EAAE,CAAC,CAAC;EAEhE,KAAK,IAAIA,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGhB,MAAM,CAACE,MAAM,EAAEc,CAAC,EAAE,EAAE;IACtC,IAAIH,KAAK,IAAId,cAAc,EAAE;MAC3B;IACF;IACA,IAAI,CAACI,MAAM,CAACa,CAAC,CAAC,CAACV,YAAY,EAAE;MAC3B,MAAMW,OAAO,GAAGjB,MAAM,CAACgB,CAAC,CAAC,CAACJ,aAAa,GAAGZ,MAAM,CAACgB,CAAC,CAAC,CAACL,cAAc;MAClER,MAAM,CAACa,CAAC,CAAC,CAACV,YAAY,GAAG,IAAI;MAC7BO,KAAK,IAAII,OAAO;IAClB;EACF;EAEA,KAAK,IAAID,CAAC,GAAGhB,MAAM,CAACE,MAAM,GAAG,CAAC,EAAEc,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;IAC3C,IAAI,CAACb,MAAM,CAACa,CAAC,CAAC,CAACV,YAAY,EAAE;MAC3B;IACF;IAEA,MAAMY,UAAU,GAAGlB,MAAM,CAACgB,CAAC,CAAC,CAACJ,aAAa,GAAGZ,MAAM,CAACgB,CAAC,CAAC,CAACL,cAAc;IACrE,IAAIO,UAAU,KAAK,CAAC,EAAE;MACpB;IACF;IAEA,IAAIL,KAAK,GAAGK,UAAU,GAAGjB,qBAAqB,IAAIF,cAAc,EAAE;MAChEI,MAAM,CAACa,CAAC,CAAC,CAACV,YAAY,GAAG,KAAK;MAC9BO,KAAK,IAAIK,UAAU;IACrB,CAAC,MAAM;MACL;MACA;MACA;IACF;EACF;EAEA,OAAOf,MAAM;AACf","ignoreList":[]}

package/dist/cjs/state/Toolbar/toolbarResponsiveConstants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SEARCH_EXPANDED_WIDTH = exports.SEARCH_COLLAPSED_WIDTH = void 0;
+const SEARCH_EXPANDED_WIDTH = exports.SEARCH_EXPANDED_WIDTH = 240;
+const SEARCH_COLLAPSED_WIDTH = exports.SEARCH_COLLAPSED_WIDTH = 140;
+//# sourceMappingURL=toolbarResponsiveConstants.js.map

package/dist/cjs/state/Toolbar/toolbarResponsiveConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SEARCH_EXPANDED_WIDTH","exports","SEARCH_COLLAPSED_WIDTH"],"sources":["../../../../src/state/Toolbar/toolbarResponsiveConstants.ts"],"sourcesContent":["export const SEARCH_EXPANDED_WIDTH = 240;\nexport const SEARCH_COLLAPSED_WIDTH = 140;\n"],"mappings":";;;;AAAO,MAAMA,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,GAAG;AACjC,MAAME,sBAAsB,GAAAD,OAAA,CAAAC,sBAAA,GAAG,GAAG","ignoreList":[]}

package/dist/cjs/styles.global.css

@@ -1 +1 @@
-.CardContainer3428059756__root.CardContainer3428059756--mobile{border-radius:0}.Collapse2409255273__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse2409255273__exit{height:0}.CollectionPage2964530824__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage2964530824__root.CollectionPage2964530824--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage2964530824__root.CollectionPage2964530824--panel{overflow:hidden;position:relative}.CollectionSectionHeader2296962899__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable2155725631__root td{vertical-align:middle}.CollectionTable2155725631__root.CollectionTable2155725631--mobile td:first-child{padding-left:18px}.CollectionTable2155725631__root.CollectionTable2155725631--mobile td:last-child{padding-right:18px}.CollectionToolbar2528422971__left{min-width:0}.CollectionToolbar2528422971__left.CollectionToolbar2528422971--expandable{flex:auto}.CollectionToolbar2528422971__left.CollectionToolbar2528422971--title>*{width:100%}.CollectionToolbar2528422971__root.CollectionToolbar2528422971---responsiveMode-5-title .CollectionToolbar2528422971__left{flex:1 100;min-width:50px}.CollectionToolbar2528422971__root.CollectionToolbar2528422971---responsiveMode-4-tabs .CollectionToolbar2528422971__left,.CollectionToolbar2528422971__root.CollectionToolbar2528422971---responsiveMode-4-tabs .CollectionToolbar2528422971__left.CollectionToolbar2528422971--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar2528422971__root.CollectionToolbar2528422971---responsiveMode-4-tabs .CollectionToolbar2528422971__left>*{flex-shrink:1;min-width:0}.CollectionToolbar2528422971__root .CollectionToolbar2528422971__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar2528422971__root.CollectionToolbar2528422971--views .CollectionToolbar2528422971__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar2528422971__root.CollectionToolbar2528422971---responsiveMode-4-tabs .CollectionToolbar2528422971__right,.CollectionToolbar2528422971__root.CollectionToolbar2528422971---responsiveMode-5-title .CollectionToolbar2528422971__right{flex:0 1 auto;min-width:0}.CollectionToolbar2528422971__root .CollectionToolbar2528422971__right.CollectionToolbar2528422971__fullWidth{margin-inline-start:0!important}.CollectionToolbar2528422971__root.CollectionToolbar2528422971--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter2160477628__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter2160477628__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter2160477628__searchMobile:not(.SearchOrCustomFilter2160477628--expandable){left:18px}.SearchOrCustomFilter2160477628__searchMobile.SearchOrCustomFilter2160477628--expandable.SearchOrCustomFilter2160477628--expanded{left:18px}.AutoCompleteReadonly1513506310__root.AutoCompleteReadonly1513506310--disableEditing{cursor:pointer}.AutoCompleteReadonly1513506310__root.AutoCompleteReadonly1513506310--disableEditing input{cursor:pointer}.ViewsDropdown2961856319__root{width:200px}.DragHandle4277933372__root{display:flex;align-items:center}.DragHandle4277933372__root:not(.DragHandle4277933372--disabled){cursor:grab;color:#a8caff}.DragHandle4277933372__root.DragHandle4277933372--disabled{color:#acafc4}.DragHandle4277933372__root:focus-visible:not(.DragHandle4277933372--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle4277933372__root.DragHandle4277933372--disabled{pointer-events:none}.DragHandle4277933372__root.DragHandle4277933372--dragging:not(.DragHandle4277933372--disabled){cursor:grabbing}.EntityPagePlain1591347465__root.EntityPagePlain1591347465--mobile{--wds-page-header-padding-horizontal:0}.Fade1764712389__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade1764712389__root.Fade1764712389--exit{opacity:0}.Heading847109370__root{visibility:visible}.Heading847109370__root.Heading847109370--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow2088092077__root.InputOverflow2088092077--selected:not(.InputOverflow2088092077--focused) input::placeholder{color:#000624}@keyframes LoadingRow1000755167__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow1000755167__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow1000755167__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText127484102__root{opacity:1}.MaxHeightText127484102__root.MaxHeightText127484102--height24{line-height:24px}.MaxLines4185833091__root{overflow:hidden}.MaxLines4185833091__root.MaxLines4185833091--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3485840595__root{min-width:0}.MultiBulkActionToolbar3485840595__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar3485840595__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar3485840595__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow3102582073__root td{padding:0!important;width:100%}.NestedTableRow435395777__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow435395777__root:hover{background-color:#e7f0ff!important}.NestedTableRow435395777__root.NestedTableRow435395777--expandable{cursor:pointer}.NestedTableRow435395777__placeholder td{padding:0!important;width:100%}.NestedTableRow435395777__root:hover td:first-of-type::before,.NestedTableRow435395777__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1798748667__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow536739820__root.NestedTableDragAndDropRow536739820--draggingInto td{background-color:#e7f0ff!important}.PickerContent1483133467__root{display:flex}.PickerContentAdditionalStep2350456131__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep2350456131__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1352494786__root{box-sizing:border-box}.ScrollableContent2750337770__root.ScrollableContent2750337770--overflowY{overflow-y:auto}.ScrollableContent2750337770__root.ScrollableContent2750337770--overflowX{overflow-x:auto}.ScrollableContent2750337770__root.ScrollableContent2750337770--smooth{scroll-behavior:smooth}.SkeletonCard706388614__headerLoading{display:block!important}.SlidingModal1582328146__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal1582328146__root.SlidingModal1582328146--overlay{transition:transform 0s ease 0s}.SlidingModal1582328146__root.SlidingModal1582328146---appendTo-6-parent{position:absolute}.SlidingModal1582328146__root:not(.SlidingModal1582328146--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2323202498__root .TabsFilter2323202498__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter2323202498__root.TabsFilter2323202498--selected .TabsFilter2323202498__title,.TabsFilter2323202498__root:hover .TabsFilter2323202498__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal2071453217__root{display:flex}.ToolbarItem1851264423__root{min-width:0}.ToolbarItemBox1574808205__root{min-width:0}.ToolbarItemBox1574808205__root.ToolbarItemBox1574808205--removeStartPadding{margin-left:-24px}.ToolbarItemBox1574808205__root.ToolbarItemBox1574808205--expandable{flex:1 0}.common362520394__column{display:flex;flex-direction:column}.common362520394__fullHeight{height:100%;min-height:0}.CollectionPageHeader1261547672__root:not(.CollectionPageHeader1261547672--mobile){gap:12px}.CollectionPageHeader1261547672__root.CollectionPageHeader1261547672--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader1261547672__root.CollectionPageHeader1261547672--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader544963084__root.FormPageHeader544963084--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader544963084__root.FormPageHeader544963084--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer3159177067__root.CardContainer3159177067--mobile{border-radius:0}.Collapse349658766__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse349658766__exit{height:0}.CollectionPage2970541410__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage2970541410__root.CollectionPage2970541410--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage2970541410__root.CollectionPage2970541410--panel{overflow:hidden;position:relative}.CollectionSectionHeader2855512574__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable1473924420__root td{vertical-align:middle}.CollectionTable1473924420__root.CollectionTable1473924420--mobile td:first-child{padding-left:18px}.CollectionTable1473924420__root.CollectionTable1473924420--mobile td:last-child{padding-right:18px}.CollectionToolbar269385832__left{min-width:0}.CollectionToolbar269385832__left.CollectionToolbar269385832--expandable{flex:auto}.CollectionToolbar269385832__left.CollectionToolbar269385832--title>*{width:100%}.CollectionToolbar269385832__root.CollectionToolbar269385832---responsiveMode-5-title .CollectionToolbar269385832__left{flex:1 100;min-width:50px}.CollectionToolbar269385832__root.CollectionToolbar269385832---responsiveMode-4-tabs .CollectionToolbar269385832__left,.CollectionToolbar269385832__root.CollectionToolbar269385832---responsiveMode-4-tabs .CollectionToolbar269385832__left.CollectionToolbar269385832--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar269385832__root.CollectionToolbar269385832---responsiveMode-4-tabs .CollectionToolbar269385832__left>*{flex-shrink:1;min-width:0}.CollectionToolbar269385832__root .CollectionToolbar269385832__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar269385832__root.CollectionToolbar269385832--views .CollectionToolbar269385832__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar269385832__root.CollectionToolbar269385832---responsiveMode-4-tabs .CollectionToolbar269385832__right,.CollectionToolbar269385832__root.CollectionToolbar269385832---responsiveMode-5-title .CollectionToolbar269385832__right{flex:0 1 auto;min-width:0}.CollectionToolbar269385832__root .CollectionToolbar269385832__right.CollectionToolbar269385832__fullWidth{margin-inline-start:0!important}.CollectionToolbar269385832__root.CollectionToolbar269385832--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter2632176424__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter2632176424__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter2632176424__searchMobile:not(.SearchOrCustomFilter2632176424--expandable){left:18px}.SearchOrCustomFilter2632176424__searchMobile.SearchOrCustomFilter2632176424--expandable.SearchOrCustomFilter2632176424--expanded{left:18px}.AutoCompleteReadonly4060538635__root.AutoCompleteReadonly4060538635--disableEditing{cursor:pointer}.AutoCompleteReadonly4060538635__root.AutoCompleteReadonly4060538635--disableEditing input{cursor:pointer}.ViewsDropdown65557832__root{width:200px}.DragHandle3778857946__root{display:flex;align-items:center}.DragHandle3778857946__root:not(.DragHandle3778857946--disabled){cursor:grab;color:#a8caff}.DragHandle3778857946__root.DragHandle3778857946--disabled{color:#acafc4}.DragHandle3778857946__root:focus-visible:not(.DragHandle3778857946--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle3778857946__root.DragHandle3778857946--disabled{pointer-events:none}.DragHandle3778857946__root.DragHandle3778857946--dragging:not(.DragHandle3778857946--disabled){cursor:grabbing}.EntityPagePlain1610818731__root.EntityPagePlain1610818731--mobile{--wds-page-header-padding-horizontal:0}.Fade3639909523__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade3639909523__root.Fade3639909523--exit{opacity:0}.Heading888883112__root{visibility:visible}.Heading888883112__root.Heading888883112--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow959630330__root.InputOverflow959630330--selected:not(.InputOverflow959630330--focused) input::placeholder{color:#000624}@keyframes LoadingRow3996135550__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow3996135550__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow3996135550__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1555679920__root{opacity:1}.MaxHeightText1555679920__root.MaxHeightText1555679920--height24{line-height:24px}.MaxLines3184399640__root{overflow:hidden}.MaxLines3184399640__root.MaxLines3184399640--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3816017489__root{min-width:0}.MultiBulkActionToolbar3816017489__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar3816017489__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar3816017489__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow708142473__root td{padding:0!important;width:100%}.NestedTableRow1442655286__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1442655286__root:hover{background-color:#e7f0ff!important}.NestedTableRow1442655286__root.NestedTableRow1442655286--expandable{cursor:pointer}.NestedTableRow1442655286__placeholder td{padding:0!important;width:100%}.NestedTableRow1442655286__root:hover td:first-of-type::before,.NestedTableRow1442655286__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1040243224__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow1144129987__root.NestedTableDragAndDropRow1144129987--draggingInto td{background-color:#e7f0ff!important}.PickerContent1823450895__root{display:flex}.PickerContentAdditionalStep3632134261__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3632134261__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem4115973826__root{box-sizing:border-box}.ScrollableContent102279133__root.ScrollableContent102279133--overflowY{overflow-y:auto}.ScrollableContent102279133__root.ScrollableContent102279133--overflowX{overflow-x:auto}.ScrollableContent102279133__root.ScrollableContent102279133--smooth{scroll-behavior:smooth}.SkeletonCard753207785__headerLoading{display:block!important}.SlidingModal2858094398__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2858094398__root.SlidingModal2858094398--overlay{transition:transform 0s ease 0s}.SlidingModal2858094398__root.SlidingModal2858094398---appendTo-6-parent{position:absolute}.SlidingModal2858094398__root:not(.SlidingModal2858094398--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2131627215__root .TabsFilter2131627215__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter2131627215__root.TabsFilter2131627215--selected .TabsFilter2131627215__title,.TabsFilter2131627215__root:hover .TabsFilter2131627215__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal1153576203__root{display:flex}.ToolbarItem1217629815__root{min-width:0}.ToolbarItemBox2033015283__root{min-width:0}.ToolbarItemBox2033015283__root.ToolbarItemBox2033015283--removeStartPadding{margin-left:-24px}.ToolbarItemBox2033015283__root.ToolbarItemBox2033015283--expandable{flex:1 0}.common1299980458__column{display:flex;flex-direction:column}.common1299980458__fullHeight{height:100%;min-height:0}.CollectionPageHeader3858757992__root:not(.CollectionPageHeader3858757992--mobile){gap:12px}.CollectionPageHeader3858757992__root.CollectionPageHeader3858757992--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader3858757992__root.CollectionPageHeader3858757992--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2044109156__root.FormPageHeader2044109156--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2044109156__root.FormPageHeader2044109156--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/dist/cjs/version.js

@@ -2,5 +2,5 @@
 
 exports.__esModule = true;
 exports.version = void 0;
-const version = exports.version = 'patterns@1.356.0';
+const version = exports.version = 'patterns@1.357.0';
 //# sourceMappingURL=version.js.map

package/dist/cjs/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["version","exports"],"sources":["../../src/version.ts"],"sourcesContent":["export const version = 'patterns@1.356.0';\n"],"mappings":";;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["version","exports"],"sources":["../../src/version.ts"],"sourcesContent":["export const version = 'patterns@1.357.0';\n"],"mappings":";;;;AAAO,MAAMA,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,kBAAkB","ignoreList":[]}

package/dist/esm/components/CardContainer/CardContainer.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CardContainer3428059756";
+var _namespace_ = "CardContainer3159177067";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CardContainer3428059756__root" };
+export var classes = { "root": "CardContainer3159177067__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/Collapse/Collapse.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "Collapse2409255273";
+var _namespace_ = "Collapse349658766";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "Collapse2409255273__root", "exit": "Collapse2409255273__exit" };
+export var classes = { "root": "Collapse349658766__root", "exit": "Collapse349658766__exit" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/Collapse/Collapse.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.st.css.js","sourceRoot":"","sources":["../../../../src/components/Collapse/Collapse.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,oBAAoB,CAAC;AACvC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,0BAA0B,EAAC,MAAM,EAAC,0BAA0B,EAAC,CAAC;AAC3F,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Collapse.st.css.js","sourceRoot":"","sources":["../../../../src/components/Collapse/Collapse.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,mBAAmB,CAAC;AACtC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,yBAAyB,EAAC,MAAM,EAAC,yBAAyB,EAAC,CAAC;AACzF,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionPageNew/CollectionPage.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionPage2964530824";
+var _namespace_ = "CollectionPage2970541410";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionPage2964530824__root" };
+export var classes = { "root": "CollectionPage2970541410__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionSectionHeader/CollectionSectionHeader.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionSectionHeader2296962899";
+var _namespace_ = "CollectionSectionHeader2855512574";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionSectionHeader2296962899__root", "summaryIcon": "CollectionSectionHeader2296962899__summaryIcon" };
+export var classes = { "root": "CollectionSectionHeader2855512574__root", "summaryIcon": "CollectionSectionHeader2855512574__summaryIcon" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionTable/CollectionTable.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionTable2155725631";
+var _namespace_ = "CollectionTable1473924420";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionTable2155725631__root" };
+export var classes = { "root": "CollectionTable1473924420__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionToolbar/CollectionToolbar.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "CollectionToolbar2528422971";
+var _namespace_ = "CollectionToolbar269385832";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "CollectionToolbar2528422971__root", "left": "CollectionToolbar2528422971__left", "right": "CollectionToolbar2528422971__right", "fullWidth": "CollectionToolbar2528422971__fullWidth" };
+export var classes = { "root": "CollectionToolbar269385832__root", "left": "CollectionToolbar269385832__left", "right": "CollectionToolbar269385832__right", "fullWidth": "CollectionToolbar269385832__fullWidth" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/CollectionToolbar/CollectionToolbar.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionToolbar.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/CollectionToolbar.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,6BAA6B,CAAC;AAChD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,mCAAmC,EAAC,MAAM,EAAC,mCAAmC,EAAC,OAAO,EAAC,oCAAoC,EAAC,WAAW,EAAC,wCAAwC,EAAC,CAAC;AAC/M,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"CollectionToolbar.st.css.js","sourceRoot":"","sources":["../../../../src/components/CollectionToolbar/CollectionToolbar.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,4BAA4B,CAAC;AAC/C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,kCAAkC,EAAC,MAAM,EAAC,kCAAkC,EAAC,OAAO,EAAC,mCAAmC,EAAC,WAAW,EAAC,uCAAuC,EAAC,CAAC;AAC3M,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/CollectionToolbar/CollectionToolbarActionsGroupResponsiveLayout.js

@@ -1,7 +1,6 @@
 import React, { cloneElement, Fragment } from 'react';
-import { HorizontalAvailableSpaceBox } from '../Responsive/HorizontalAvailableSpaceBox';
+import { Box } from '@wix/design-system';
 import { ToolbarItem } from '../ToolbarItem/ToolbarItem';
-import { HorizontalOverflowBox } from '../Responsive/HorizontalOverflowBox';
 import { ToolbarGroupScrollWidthBox } from './ToolbarGroupScrollWidthBox';
 import { SearchOrCustomFilter } from './SearchOrCustomFilter';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
@@ -26,9 +25,13 @@ export function CollectionToolbarActionsGroupResponsiveLayout(props) {
                 }),
             customColumns && !showCustomColumnsOnTheLeft && customColumns),
         search && React.createElement(SearchOrCustomFilter, { state: state, search: search })));
-    child = (React.createElement(HorizontalOverflowBox, { state: responsive.overflow, gap: "SP2" }, child));
+    child = (React.createElement(Box, { ref: (element) => {
+            responsive._contentElement = element;
+        }, dataHook: "horizontal-overflow-box", minWidth: 0, direction: "horizontal", gap: "SP2" }, child));
     child = React.createElement(ToolbarItem, null, child);
-    child = (React.createElement(HorizontalAvailableSpaceBox, { state: responsive.actionsAvailableSpace }, child));
+    child = (React.createElement(Box, { ref: (element) => {
+            responsive._measurementElement = element;
+        }, minWidth: 0, flex: 1, align: "right", direction: "horizontal" }, child));
     return child;
 }
 //# sourceMappingURL=CollectionToolbarActionsGroupResponsiveLayout.js.map