@wix/patterns 1.356.0 → 1.357.0

package/src/state/Toolbar/ToolbarResponsiveState.ts

@@ -1,27 +1,33 @@
 import { addResizeObserver } from '@wix/bex-core';
-import { computed, makeObservable, observable, reaction } from 'mobx';
-import { HorizontalSpaceAvailableState } from '../Responsive/HorizontalSpaceAvailableState';
+import { action, computed, makeObservable, runInAction } from 'mobx';
 import { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';
-import { HorizontalOverflowState } from '../Responsive/HorizontalOverflowState';
 import { ToolbarState } from '../../components/CollectionToolbars/ToolbarState';
 import { ToolbarLeftGroupState } from './ToolbarLeftGroupState';
+import { computeResponsiveTargetState } from './computeResponsiveTargetState';
+import {
+  SEARCH_COLLAPSED_WIDTH,
+  SEARCH_EXPANDED_WIDTH,
+} from './toolbarResponsiveConstants';
 
 export interface ToolbarResponsiveStateParams {
   readonly toolbar: ToolbarState<any, any>;
 }
 
+// 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;
+
 export class ToolbarResponsiveState {
   readonly actions: ToolbarResponsivePriorityState;
   readonly search: ToolbarResponsivePriorityState;
   readonly filters: ToolbarResponsivePriorityState;
 
-  _nextToShrink: ToolbarResponsivePriorityState;
-  _nextToExpand: ToolbarResponsivePriorityState;
-
-  _expandCooldown = false;
+  private readonly _groups: ToolbarResponsivePriorityState[];
 
-  readonly actionsAvailableSpace: HorizontalSpaceAvailableState;
-  readonly overflow: HorizontalOverflowState;
+  _measurementElement: Element | null = null;
+  _contentElement: Element | null = null;
 
   readonly toolbar: ToolbarState<any, any>;
 
@@ -34,43 +40,25 @@ export class ToolbarResponsiveState {
   constructor(params: ToolbarResponsiveStateParams) {
     this.toolbar = params.toolbar;
 
-    this.overflow = new HorizontalOverflowState({
-      state: this,
-    });
-
     this.actions = new ToolbarResponsivePriorityState({
       responsive: this,
-      getNextToShrink: () => this.filters,
-      getNextToExpand: () => this.actions,
-      count: 1,
     });
 
     this.filters = new ToolbarResponsivePriorityState({
       responsive: this,
-      getNextToShrink: () => this.search,
-      getNextToExpand: () => this.actions,
-      count: 2,
     });
 
     this.search = new ToolbarResponsivePriorityState({
       responsive: this,
-      getNextToShrink: () => this.search,
-      getNextToExpand: () => this.filters,
-      count: 3,
-      minWidth: 140,
+      expandedWidth: SEARCH_EXPANDED_WIDTH,
+      collapsedWidth: SEARCH_COLLAPSED_WIDTH,
     });
 
-    this._nextToShrink = this.actions;
-    this._nextToExpand = this.actions;
-
-    this.actionsAvailableSpace = new HorizontalSpaceAvailableState({
-      state: this,
-    });
+    this._groups = [this.actions, this.filters, this.search];
 
     makeObservable(this, {
-      _nextToShrink: observable.ref,
-      _nextToExpand: observable.ref,
       responsiveDisabled: computed,
+      _applyTargetState: action,
     });
   }
 
@@ -88,49 +76,92 @@ export class ToolbarResponsiveState {
     );
   }
 
+  _scheduleRecompute() {
+    if (this.responsiveDisabled) {
+      return;
+    }
+    this._recomputeThrottled?.();
+  }
+
+  private _computeResponsiveInput() {
+    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?.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 = computeResponsiveTargetState({
+      ...input,
+      expandThresholdBuffer: EXPAND_THRESHOLD_BUFFER,
+    });
+
+    this._groups.forEach((g, i) => {
+      g._shouldShrink = result[i].shouldShrink;
+    });
+  }
+
+  private _recomputeThrottled?: ReturnType<typeof this.container.lodash.throttle>;
+  private _rafId = 0;
+
   init() {
-    const {
-      toolbar: { toolbar },
-      overflow,
-      actionsAvailableSpace,
-      responsiveDisabled,
-    } = this;
+    const { responsiveDisabled } = this;
 
     if (responsiveDisabled) {
-      return;
+      return () => {};
+    }
+
+    this._recomputeThrottled = this.container.lodash.throttle(() => {
+      this._rafId = window.requestAnimationFrame(() => {
+        runInAction(() => this._applyTargetState());
+      });
+    }, 200);
+
+    const containerEl =
+      this.toolbar.toolbar.toolbarRect.element;
+    if (!containerEl) {
+      return () => {
+        this._recomputeThrottled?.cancel();
+      };
     }
 
     const disposers = [
-      addResizeObserver(
-        toolbar.toolbarRect.element,
-        actionsAvailableSpace._syncThrottled,
-      ),
-      reaction(
-        () => ({
-          _isOverflowing: overflow._isOverflowing,
-          _scrollWidth: overflow._scrollWidth,
-          _clientWidth: overflow._clientWidth,
-        }),
-        () => {
-          this._nextToShrink._shrinkIfNeeded();
-        },
-        {
-          fireImmediately: true,
-        },
-      ),
-      reaction(
-        () => actionsAvailableSpace.available,
-        () => {
-          this._nextToExpand._expandIfNeeded();
-        },
-        {
-          fireImmediately: true,
-        },
-      ),
+      addResizeObserver(containerEl, this._recomputeThrottled),
     ];
 
     return () => {
       disposers.forEach((d) => d?.());
+      this._recomputeThrottled?.cancel();
+      cancelAnimationFrame(this._rafId);
     };
   }
 }

package/src/state/Toolbar/computeResponsiveTargetState.ts

@@ -0,0 +1,67 @@
+export interface ResponsiveGroupInput {
+  expandedWidth: number;
+  collapsedWidth: number;
+  currentlyShrunk: boolean;
+}
+
+export interface ComputeResponsiveTargetStateParams {
+  availableWidth: number;
+  groups: ResponsiveGroupInput[];
+  expandThresholdBuffer: number;
+}
+
+export interface ResponsiveGroupOutput {
+  shouldShrink: boolean;
+}
+
+export function computeResponsiveTargetState(
+  params: ComputeResponsiveTargetStateParams,
+): ResponsiveGroupOutput[] {
+  const { availableWidth, groups, expandThresholdBuffer } = params;
+
+  if (groups.length === 0) {
+    return [];
+  }
+
+  const result: ResponsiveGroupOutput[] = groups.map((g) => ({
+    shouldShrink: g.currentlyShrunk,
+  }));
+
+  const widthOf = (group: ResponsiveGroupInput, index: number) =>
+    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;
+}

package/src/state/Toolbar/toolbarResponsiveConstants.ts

@@ -0,0 +1,2 @@
+export const SEARCH_EXPANDED_WIDTH = 240;
+export const SEARCH_COLLAPSED_WIDTH = 140;

package/src/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/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.356.0';
+export const version = 'patterns@1.357.0';

package/dist/cjs/components/Responsive/HorizontalAvailableSpaceBox.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.HorizontalAvailableSpaceBox = HorizontalAvailableSpaceBox;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _designSystem = require("@wix/design-system");
-var _react = _interopRequireWildcard(require("react"));
-var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Responsive/HorizontalAvailableSpaceBox.tsx";
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function HorizontalAvailableSpaceBox(props) {
-  const {
-    state,
-    children,
-    ...rest
-  } = props;
-  (0, _react.useLayoutEffect)(() => state.initLayout(), []);
-  (0, _react.useEffect)(() => state.init(), []);
-  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, (0, _extends2.default)({
-    ref: element => {
-      state._element = element;
-      state._child = element == null ? void 0 : element.firstElementChild;
-    },
-    minWidth: 0,
-    flex: 1,
-    align: "right",
-    direction: "horizontal"
-  }, rest, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 18,
-      columnNumber: 5
-    }
-  }), children);
-}
-//# sourceMappingURL=HorizontalAvailableSpaceBox.js.map

package/dist/cjs/components/Responsive/HorizontalAvailableSpaceBox.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_designSystem","require","_react","_interopRequireWildcard","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","HorizontalAvailableSpaceBox","props","state","children","rest","useLayoutEffect","initLayout","useEffect","init","createElement","Box","_extends2","ref","element","_element","_child","firstElementChild","minWidth","flex","align","direction","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../../src/components/Responsive/HorizontalAvailableSpaceBox.tsx"],"sourcesContent":["import { Box, BoxProps } from '@wix/design-system';\nimport React, { useEffect, useLayoutEffect } from 'react';\nimport { HorizontalSpaceAvailableState } from '../../state/Responsive/HorizontalSpaceAvailableState';\n\nexport interface HorizontalAvailableSpaceBoxProps extends Partial<BoxProps> {\n  state: HorizontalSpaceAvailableState;\n}\n\nexport function HorizontalAvailableSpaceBox(\n  props: HorizontalAvailableSpaceBoxProps,\n) {\n  const { state, children, ...rest } = props;\n\n  useLayoutEffect(() => state.initLayout(), []);\n  useEffect(() => state.init(), []);\n\n  return (\n    <Box\n      ref={(element) => {\n        state._element = element;\n        state._child = element?.firstElementChild as Element | null;\n      }}\n      minWidth={0}\n      flex={1}\n      align=\"right\"\n      direction=\"horizontal\"\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAA0D,IAAAG,YAAA;AAAA,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOnD,SAASkB,2BAA2BA,CACzCC,KAAuC,EACvC;EACA,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAE1C,IAAAI,sBAAe,EAAC,MAAMH,KAAK,CAACI,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC;EAC7C,IAAAC,gBAAS,EAAC,MAAML,KAAK,CAACM,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC;EAEjC,oBACE9B,MAAA,CAAAa,OAAA,CAAAkB,aAAA,CAACjC,aAAA,CAAAkC,GAAG,MAAAC,SAAA,CAAApB,OAAA;IACFqB,GAAG,EAAGC,OAAO,IAAK;MAChBX,KAAK,CAACY,QAAQ,GAAGD,OAAO;MACxBX,KAAK,CAACa,MAAM,GAAGF,OAAO,oBAAPA,OAAO,CAAEG,iBAAmC;IAC7D,CAAE;IACFC,QAAQ,EAAE,CAAE;IACZC,IAAI,EAAE,CAAE;IACRC,KAAK,EAAC,OAAO;IACbC,SAAS,EAAC;EAAY,GAClBhB,IAAI;IAAAiB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA3C,YAAA;MAAA4C,UAAA;MAAAC,YAAA;IAAA;EAAA,IAEPtB,QACE,CAAC;AAEV","ignoreList":[]}

package/dist/cjs/components/Responsive/HorizontalOverflowBox.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.HorizontalOverflowBox = HorizontalOverflowBox;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _designSystem = require("@wix/design-system");
-var _react = _interopRequireWildcard(require("react"));
-var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Responsive/HorizontalOverflowBox.tsx";
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function HorizontalOverflowBox(props) {
-  const {
-    state,
-    ...rest
-  } = props;
-  (0, _react.useLayoutEffect)(() => state.initLayout(), []);
-  (0, _react.useEffect)(() => state.init(), []);
-  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, (0, _extends2.default)({
-    dataHook: "horizontal-overflow-box",
-    ref: element => {
-      state._element = element;
-    },
-    minWidth: 0,
-    direction: "horizontal"
-  }, rest, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 16,
-      columnNumber: 5
-    }
-  }));
-}
-//# sourceMappingURL=HorizontalOverflowBox.js.map

package/dist/cjs/components/Responsive/HorizontalOverflowBox.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_designSystem","require","_react","_interopRequireWildcard","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","HorizontalOverflowBox","props","state","rest","useLayoutEffect","initLayout","useEffect","init","createElement","Box","_extends2","dataHook","ref","element","_element","minWidth","direction","__self","__source","fileName","lineNumber","columnNumber"],"sources":["../../../../src/components/Responsive/HorizontalOverflowBox.tsx"],"sourcesContent":["import { Box, BoxProps } from '@wix/design-system';\nimport { HorizontalOverflowState } from '../../state/Responsive/HorizontalOverflowState';\nimport React, { useEffect, useLayoutEffect } from 'react';\n\nexport interface HorizontalOverflowBoxProps extends Partial<BoxProps> {\n  state: HorizontalOverflowState;\n}\n\nexport function HorizontalOverflowBox(props: HorizontalOverflowBoxProps) {\n  const { state, ...rest } = props;\n\n  useLayoutEffect(() => state.initLayout(), []);\n  useEffect(() => state.init(), []);\n\n  return (\n    <Box\n      dataHook=\"horizontal-overflow-box\"\n      ref={(element) => {\n        state._element = element;\n      }}\n      minWidth={0}\n      direction=\"horizontal\"\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAA0D,IAAAG,YAAA;AAAA,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAMnD,SAASkB,qBAAqBA,CAACC,KAAiC,EAAE;EACvE,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGF,KAAK;EAEhC,IAAAG,sBAAe,EAAC,MAAMF,KAAK,CAACG,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC;EAC7C,IAAAC,gBAAS,EAAC,MAAMJ,KAAK,CAACK,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC;EAEjC,oBACE7B,MAAA,CAAAa,OAAA,CAAAiB,aAAA,CAAChC,aAAA,CAAAiC,GAAG,MAAAC,SAAA,CAAAnB,OAAA;IACFoB,QAAQ,EAAC,yBAAyB;IAClCC,GAAG,EAAGC,OAAO,IAAK;MAChBX,KAAK,CAACY,QAAQ,GAAGD,OAAO;IAC1B,CAAE;IACFE,QAAQ,EAAE,CAAE;IACZC,SAAS,EAAC;EAAY,GAClBb,IAAI;IAAAc,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAvC,YAAA;MAAAwC,UAAA;MAAAC,YAAA;IAAA;EAAA,EACT,CAAC;AAEN","ignoreList":[]}

package/dist/cjs/state/Responsive/HorizontalOverflowState.js

@@ -1,76 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.HorizontalOverflowState = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _mobx = require("mobx");
-var _bexCore = require("@wix/bex-core");
-class HorizontalOverflowState {
-  constructor(params) {
-    (0, _defineProperty2.default)(this, "_syncThrottled", void 0);
-    (0, _defineProperty2.default)(this, "container", void 0);
-    (0, _defineProperty2.default)(this, "_state", void 0);
-    (0, _defineProperty2.default)(this, "_element", void 0);
-    (0, _defineProperty2.default)(this, "_scrollWidth", 0);
-    (0, _defineProperty2.default)(this, "_clientWidth", 0);
-    const {
-      state
-    } = params;
-    this.container = state.container;
-    this._state = state;
-    (0, _mobx.makeObservable)(this, {
-      _sync: _mobx.action.bound,
-      _scrollWidth: _mobx.observable.ref,
-      _clientWidth: _mobx.observable.ref,
-      _isOverflowing: _mobx.computed
-    });
-    this._syncThrottled = this.container.lodash.throttle(() => {
-      window.requestAnimationFrame(this._sync);
-    }, 200);
-  }
-  get _isOverflowing() {
-    return this._scrollWidth > this._clientWidth;
-  }
-  _sync() {
-    const {
-      _element
-    } = this;
-    if (!_element) {
-      return;
-    }
-    this._clientWidth = _element.clientWidth;
-    this._scrollWidth = _element.scrollWidth;
-  }
-  initLayout() {
-    const {
-      _element,
-      _state
-    } = this;
-    if (_state.responsiveDisabled) {
-      return;
-    }
-    if (!_element) {
-      return;
-    }
-    this._sync();
-  }
-  init() {
-    const {
-      _element,
-      _state
-    } = this;
-    if (_state.responsiveDisabled) {
-      return;
-    }
-    if (!_element) {
-      return;
-    }
-    const disposers = [(0, _bexCore.addResizeObserver)(_element, this._syncThrottled)];
-    return () => {
-      disposers.forEach(d => d == null ? void 0 : d());
-    };
-  }
-}
-exports.HorizontalOverflowState = HorizontalOverflowState;
-//# sourceMappingURL=HorizontalOverflowState.js.map

package/dist/cjs/state/Responsive/HorizontalOverflowState.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_mobx","require","_bexCore","HorizontalOverflowState","constructor","params","_defineProperty2","default","state","container","_state","makeObservable","_sync","action","bound","_scrollWidth","observable","ref","_clientWidth","_isOverflowing","computed","_syncThrottled","lodash","throttle","window","requestAnimationFrame","_element","clientWidth","scrollWidth","initLayout","responsiveDisabled","init","disposers","addResizeObserver","forEach","d","exports"],"sources":["../../../../src/state/Responsive/HorizontalOverflowState.ts"],"sourcesContent":["import { action, computed, makeObservable, observable } from 'mobx';\nimport { addResizeObserver, WixPatternsContainer } from '@wix/bex-core';\n\nexport interface HorizontalOverflowStateParams {\n  state: {\n    container: WixPatternsContainer;\n    responsiveDisabled: boolean | undefined;\n  };\n}\n\nexport class HorizontalOverflowState {\n  readonly _syncThrottled;\n\n  readonly container;\n  readonly _state;\n\n  _element?: Element | null | undefined;\n\n  _scrollWidth = 0;\n  _clientWidth = 0;\n\n  constructor(params: HorizontalOverflowStateParams) {\n    const { state } = params;\n    this.container = state.container;\n    this._state = state;\n\n    makeObservable(this, {\n      _sync: action.bound,\n      _scrollWidth: observable.ref,\n      _clientWidth: observable.ref,\n      _isOverflowing: computed,\n    });\n\n    this._syncThrottled = this.container.lodash.throttle(() => {\n      window.requestAnimationFrame(this._sync);\n    }, 200);\n  }\n\n  get _isOverflowing() {\n    return this._scrollWidth > this._clientWidth;\n  }\n\n  _sync() {\n    const { _element } = this;\n\n    if (!_element) {\n      return;\n    }\n\n    this._clientWidth = _element.clientWidth;\n    this._scrollWidth = _element.scrollWidth;\n  }\n\n  initLayout() {\n    const { _element, _state } = this;\n\n    if (_state.responsiveDisabled) {\n      return;\n    }\n\n    if (!_element) {\n      return;\n    }\n\n    this._sync();\n  }\n\n  init() {\n    const { _element, _state } = this;\n\n    if (_state.responsiveDisabled) {\n      return;\n    }\n\n    if (!_element) {\n      return;\n    }\n\n    const disposers = [addResizeObserver(_element, this._syncThrottled)];\n\n    return () => {\n      disposers.forEach((d) => d?.());\n    };\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AASO,MAAME,uBAAuB,CAAC;EAWnCC,WAAWA,CAACC,MAAqC,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,wBAHpC,CAAC;IAAA,IAAAD,gBAAA,CAAAC,OAAA,wBACD,CAAC;IAGd,MAAM;MAAEC;IAAM,CAAC,GAAGH,MAAM;IACxB,IAAI,CAACI,SAAS,GAAGD,KAAK,CAACC,SAAS;IAChC,IAAI,CAACC,MAAM,GAAGF,KAAK;IAEnB,IAAAG,oBAAc,EAAC,IAAI,EAAE;MACnBC,KAAK,EAAEC,YAAM,CAACC,KAAK;MACnBC,YAAY,EAAEC,gBAAU,CAACC,GAAG;MAC5BC,YAAY,EAAEF,gBAAU,CAACC,GAAG;MAC5BE,cAAc,EAAEC;IAClB,CAAC,CAAC;IAEF,IAAI,CAACC,cAAc,GAAG,IAAI,CAACZ,SAAS,CAACa,MAAM,CAACC,QAAQ,CAAC,MAAM;MACzDC,MAAM,CAACC,qBAAqB,CAAC,IAAI,CAACb,KAAK,CAAC;IAC1C,CAAC,EAAE,GAAG,CAAC;EACT;EAEA,IAAIO,cAAcA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACJ,YAAY,GAAG,IAAI,CAACG,YAAY;EAC9C;EAEAN,KAAKA,CAAA,EAAG;IACN,MAAM;MAAEc;IAAS,CAAC,GAAG,IAAI;IAEzB,IAAI,CAACA,QAAQ,EAAE;MACb;IACF;IAEA,IAAI,CAACR,YAAY,GAAGQ,QAAQ,CAACC,WAAW;IACxC,IAAI,CAACZ,YAAY,GAAGW,QAAQ,CAACE,WAAW;EAC1C;EAEAC,UAAUA,CAAA,EAAG;IACX,MAAM;MAAEH,QAAQ;MAAEhB;IAAO,CAAC,GAAG,IAAI;IAEjC,IAAIA,MAAM,CAACoB,kBAAkB,EAAE;MAC7B;IACF;IAEA,IAAI,CAACJ,QAAQ,EAAE;MACb;IACF;IAEA,IAAI,CAACd,KAAK,CAAC,CAAC;EACd;EAEAmB,IAAIA,CAAA,EAAG;IACL,MAAM;MAAEL,QAAQ;MAAEhB;IAAO,CAAC,GAAG,IAAI;IAEjC,IAAIA,MAAM,CAACoB,kBAAkB,EAAE;MAC7B;IACF;IAEA,IAAI,CAACJ,QAAQ,EAAE;MACb;IACF;IAEA,MAAMM,SAAS,GAAG,CAAC,IAAAC,0BAAiB,EAACP,QAAQ,EAAE,IAAI,CAACL,cAAc,CAAC,CAAC;IAEpE,OAAO,MAAM;MACXW,SAAS,CAACE,OAAO,CAAEC,CAAC,IAAKA,CAAC,oBAADA,CAAC,CAAG,CAAC,CAAC;IACjC,CAAC;EACH;AACF;AAACC,OAAA,CAAAjC,uBAAA,GAAAA,uBAAA","ignoreList":[]}

package/dist/cjs/state/Responsive/HorizontalSpaceAvailableState.js

@@ -1,80 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.HorizontalSpaceAvailableState = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _mobx = require("mobx");
-var _bexCore = require("@wix/bex-core");
-class HorizontalSpaceAvailableState {
-  constructor(params) {
-    (0, _defineProperty2.default)(this, "_syncThrottled", void 0);
-    (0, _defineProperty2.default)(this, "container", void 0);
-    (0, _defineProperty2.default)(this, "_state", void 0);
-    (0, _defineProperty2.default)(this, "_element", void 0);
-    (0, _defineProperty2.default)(this, "_child", void 0);
-    (0, _defineProperty2.default)(this, "_directChildClientWidth", 0);
-    (0, _defineProperty2.default)(this, "_clientWidth", 0);
-    const {
-      state
-    } = params;
-    this.container = state.container;
-    this._state = state;
-    (0, _mobx.makeObservable)(this, {
-      _sync: _mobx.action.bound,
-      _directChildClientWidth: _mobx.observable.ref,
-      _clientWidth: _mobx.observable.ref,
-      available: _mobx.computed
-    });
-    this._syncThrottled = this.container.lodash.throttle(() => {
-      window.requestAnimationFrame(this._sync);
-    }, 200);
-  }
-  _sync() {
-    const {
-      _element,
-      _child
-    } = this;
-    if (!_element || !_child) {
-      return;
-    }
-    this._clientWidth = _element.clientWidth;
-    this._directChildClientWidth = _child.scrollWidth;
-  }
-  get available() {
-    return this._clientWidth - this._directChildClientWidth;
-  }
-  initLayout() {
-    const {
-      _element,
-      _child,
-      _state
-    } = this;
-    if (_state.responsiveDisabled) {
-      return;
-    }
-    if (!_element || !_child) {
-      return;
-    }
-    this._sync();
-  }
-  init() {
-    const {
-      _element,
-      _child,
-      _state
-    } = this;
-    if (_state.responsiveDisabled) {
-      return;
-    }
-    if (!_element || !_child) {
-      return;
-    }
-    const disposers = [(0, _bexCore.addResizeObserver)(_child, this._syncThrottled)];
-    return () => {
-      disposers.forEach(d => d == null ? void 0 : d());
-    };
-  }
-}
-exports.HorizontalSpaceAvailableState = HorizontalSpaceAvailableState;
-//# sourceMappingURL=HorizontalSpaceAvailableState.js.map

package/dist/cjs/state/Responsive/HorizontalSpaceAvailableState.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_mobx","require","_bexCore","HorizontalSpaceAvailableState","constructor","params","_defineProperty2","default","state","container","_state","makeObservable","_sync","action","bound","_directChildClientWidth","observable","ref","_clientWidth","available","computed","_syncThrottled","lodash","throttle","window","requestAnimationFrame","_element","_child","clientWidth","scrollWidth","initLayout","responsiveDisabled","init","disposers","addResizeObserver","forEach","d","exports"],"sources":["../../../../src/state/Responsive/HorizontalSpaceAvailableState.ts"],"sourcesContent":["import { action, computed, makeObservable, observable } from 'mobx';\nimport { addResizeObserver, WixPatternsContainer } from '@wix/bex-core';\n\nexport interface HorizontalSpaceAvailableStateParams {\n  state: {\n    container: WixPatternsContainer;\n    responsiveDisabled: boolean | undefined;\n  };\n}\n\nexport class HorizontalSpaceAvailableState {\n  readonly _syncThrottled;\n\n  readonly container;\n  readonly _state;\n\n  _element?: Element | null | undefined;\n  _child?: Element | null | undefined;\n\n  _directChildClientWidth = 0;\n  _clientWidth = 0;\n\n  constructor(params: HorizontalSpaceAvailableStateParams) {\n    const { state } = params;\n    this.container = state.container;\n    this._state = state;\n\n    makeObservable(this, {\n      _sync: action.bound,\n      _directChildClientWidth: observable.ref,\n      _clientWidth: observable.ref,\n      available: computed,\n    });\n\n    this._syncThrottled = this.container.lodash.throttle(() => {\n      window.requestAnimationFrame(this._sync);\n    }, 200);\n  }\n\n  _sync() {\n    const { _element, _child } = this;\n\n    if (!_element || !_child) {\n      return;\n    }\n\n    this._clientWidth = _element.clientWidth;\n    this._directChildClientWidth = _child.scrollWidth;\n  }\n\n  get available() {\n    return this._clientWidth - this._directChildClientWidth;\n  }\n\n  initLayout() {\n    const { _element, _child, _state } = this;\n\n    if (_state.responsiveDisabled) {\n      return;\n    }\n\n    if (!_element || !_child) {\n      return;\n    }\n\n    this._sync();\n  }\n\n  init() {\n    const { _element, _child, _state } = this;\n\n    if (_state.responsiveDisabled) {\n      return;\n    }\n\n    if (!_element || !_child) {\n      return;\n    }\n\n    const disposers = [addResizeObserver(_child, this._syncThrottled)];\n\n    return () => {\n      disposers.forEach((d) => d?.());\n    };\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AASO,MAAME,6BAA6B,CAAC;EAYzCC,WAAWA,CAACC,MAA2C,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA;IAAA,IAAAD,gBAAA,CAAAC,OAAA,mCAH/B,CAAC;IAAA,IAAAD,gBAAA,CAAAC,OAAA,wBACZ,CAAC;IAGd,MAAM;MAAEC;IAAM,CAAC,GAAGH,MAAM;IACxB,IAAI,CAACI,SAAS,GAAGD,KAAK,CAACC,SAAS;IAChC,IAAI,CAACC,MAAM,GAAGF,KAAK;IAEnB,IAAAG,oBAAc,EAAC,IAAI,EAAE;MACnBC,KAAK,EAAEC,YAAM,CAACC,KAAK;MACnBC,uBAAuB,EAAEC,gBAAU,CAACC,GAAG;MACvCC,YAAY,EAAEF,gBAAU,CAACC,GAAG;MAC5BE,SAAS,EAAEC;IACb,CAAC,CAAC;IAEF,IAAI,CAACC,cAAc,GAAG,IAAI,CAACZ,SAAS,CAACa,MAAM,CAACC,QAAQ,CAAC,MAAM;MACzDC,MAAM,CAACC,qBAAqB,CAAC,IAAI,CAACb,KAAK,CAAC;IAC1C,CAAC,EAAE,GAAG,CAAC;EACT;EAEAA,KAAKA,CAAA,EAAG;IACN,MAAM;MAAEc,QAAQ;MAAEC;IAAO,CAAC,GAAG,IAAI;IAEjC,IAAI,CAACD,QAAQ,IAAI,CAACC,MAAM,EAAE;MACxB;IACF;IAEA,IAAI,CAACT,YAAY,GAAGQ,QAAQ,CAACE,WAAW;IACxC,IAAI,CAACb,uBAAuB,GAAGY,MAAM,CAACE,WAAW;EACnD;EAEA,IAAIV,SAASA,CAAA,EAAG;IACd,OAAO,IAAI,CAACD,YAAY,GAAG,IAAI,CAACH,uBAAuB;EACzD;EAEAe,UAAUA,CAAA,EAAG;IACX,MAAM;MAAEJ,QAAQ;MAAEC,MAAM;MAAEjB;IAAO,CAAC,GAAG,IAAI;IAEzC,IAAIA,MAAM,CAACqB,kBAAkB,EAAE;MAC7B;IACF;IAEA,IAAI,CAACL,QAAQ,IAAI,CAACC,MAAM,EAAE;MACxB;IACF;IAEA,IAAI,CAACf,KAAK,CAAC,CAAC;EACd;EAEAoB,IAAIA,CAAA,EAAG;IACL,MAAM;MAAEN,QAAQ;MAAEC,MAAM;MAAEjB;IAAO,CAAC,GAAG,IAAI;IAEzC,IAAIA,MAAM,CAACqB,kBAAkB,EAAE;MAC7B;IACF;IAEA,IAAI,CAACL,QAAQ,IAAI,CAACC,MAAM,EAAE;MACxB;IACF;IAEA,MAAMM,SAAS,GAAG,CAAC,IAAAC,0BAAiB,EAACP,MAAM,EAAE,IAAI,CAACN,cAAc,CAAC,CAAC;IAElE,OAAO,MAAM;MACXY,SAAS,CAACE,OAAO,CAAEC,CAAC,IAAKA,CAAC,oBAADA,CAAC,CAAG,CAAC,CAAC;IACjC,CAAC;EACH;AACF;AAACC,OAAA,CAAAlC,6BAAA,GAAAA,6BAAA","ignoreList":[]}

package/dist/esm/components/Responsive/HorizontalAvailableSpaceBox.js

@@ -1,12 +0,0 @@
-import { Box } from '@wix/design-system';
-import React, { useEffect, useLayoutEffect } from 'react';
-export function HorizontalAvailableSpaceBox(props) {
-    const { state, children, ...rest } = props;
-    useLayoutEffect(() => state.initLayout(), []);
-    useEffect(() => state.init(), []);
-    return (React.createElement(Box, { ref: (element) => {
-            state._element = element;
-            state._child = element?.firstElementChild;
-        }, minWidth: 0, flex: 1, align: "right", direction: "horizontal", ...rest }, children));
-}
-//# sourceMappingURL=HorizontalAvailableSpaceBox.js.map

package/dist/esm/components/Responsive/HorizontalAvailableSpaceBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HorizontalAvailableSpaceBox.js","sourceRoot":"","sources":["../../../../src/components/Responsive/HorizontalAvailableSpaceBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAY,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAO1D,MAAM,UAAU,2BAA2B,CACzC,KAAuC;IAEvC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE3C,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAElC,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;YACzB,KAAK,CAAC,MAAM,GAAG,OAAO,EAAE,iBAAmC,CAAC;QAC9D,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,CAAC,EACP,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,YAAY,KAClB,IAAI,IAEP,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/Responsive/HorizontalOverflowBox.js

@@ -1,11 +0,0 @@
-import { Box } from '@wix/design-system';
-import React, { useEffect, useLayoutEffect } from 'react';
-export function HorizontalOverflowBox(props) {
-    const { state, ...rest } = props;
-    useLayoutEffect(() => state.initLayout(), []);
-    useEffect(() => state.init(), []);
-    return (React.createElement(Box, { dataHook: "horizontal-overflow-box", ref: (element) => {
-            state._element = element;
-        }, minWidth: 0, direction: "horizontal", ...rest }));
-}
-//# sourceMappingURL=HorizontalOverflowBox.js.map

package/dist/esm/components/Responsive/HorizontalOverflowBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HorizontalOverflowBox.js","sourceRoot":"","sources":["../../../../src/components/Responsive/HorizontalOverflowBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAY,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAM1D,MAAM,UAAU,qBAAqB,CAAC,KAAiC;IACrE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAElC,OAAO,CACL,oBAAC,GAAG,IACF,QAAQ,EAAC,yBAAyB,EAClC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;QAC3B,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,YAAY,KAClB,IAAI,GACR,CACH,CAAC;AACJ,CAAC"}