@wix/patterns 1.356.0 → 1.357.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow435395777";
+var _namespace_ = "NestedTableRow1442655286";
 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":"NestedTableRow435395777__root","firstLevel":"NestedTableRow435395777__firstLevel","placeholder":"NestedTableRow435395777__placeholder","parentHovered":"NestedTableRow435395777__parentHovered"};
+export var classes = {"root":"NestedTableRow1442655286__root","firstLevel":"NestedTableRow1442655286__firstLevel","placeholder":"NestedTableRow1442655286__placeholder","parentHovered":"NestedTableRow1442655286__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow536739820";
+var _namespace_ = "NestedTableDragAndDropRow1144129987";
 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":"NestedTableDragAndDropRow536739820__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1144129987__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_ = "PickerContent1483133467";
+var _namespace_ = "PickerContent1823450895";
 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":"PickerContent1483133467__root"};
+export var classes = {"root":"PickerContent1823450895__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_ = "PickerContentAdditionalStep2350456131";
+var _namespace_ = "PickerContentAdditionalStep3632134261";
 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":"PickerContentAdditionalStep2350456131__root","titles":"PickerContentAdditionalStep2350456131__titles","suffix":"PickerContentAdditionalStep2350456131__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep3632134261__root","titles":"PickerContentAdditionalStep3632134261__titles","suffix":"PickerContentAdditionalStep3632134261__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_ = "PickerTableListItem1352494786";
+var _namespace_ = "PickerTableListItem4115973826";
 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":"PickerTableListItem1352494786__root"};
+export var classes = {"root":"PickerTableListItem4115973826__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2750337770";
+var _namespace_ = "ScrollableContent102279133";
 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":"ScrollableContent2750337770__root"};
+export var classes = {"root":"ScrollableContent102279133__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_ = "SkeletonCard706388614";
+var _namespace_ = "SkeletonCard753207785";
 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":"SkeletonCard706388614__root","headerLoading":"SkeletonCard706388614__headerLoading"};
+export var classes = {"root":"SkeletonCard753207785__root","headerLoading":"SkeletonCard753207785__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_ = "SlidingModal1582328146";
+var _namespace_ = "SlidingModal2858094398";
 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":"SlidingModal1582328146__root"};
+export var classes = {"root":"SlidingModal2858094398__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_ = "TabsFilter2323202498";
+var _namespace_ = "TabsFilter2131627215";
 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":"TabsFilter2131627215__root","title":"TabsFilter2131627215__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_ = "ManageTagsModal1153576203";
 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":"ManageTagsModal1153576203__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_ = "ToolbarItem1217629815";
 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":"ToolbarItem1217629815__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_ = "ToolbarItemBox2033015283";
 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":"ToolbarItemBox2033015283__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_ = "common1299980458";
 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":"common1299980458__root","column":"common1299980458__column","fullHeight":"common1299980458__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_ = "CollectionPageHeader1261547672";
+var _namespace_ = "CollectionPageHeader3858757992";
 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":"CollectionPageHeader3858757992__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_ = "FormPageHeader2044109156";
 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":"FormPageHeader2044109156__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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