@wix/patterns 1.356.0 → 1.358.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/state/ViewTypeState.ts

@@ -2,8 +2,13 @@ import {
   WixPatternsContainer,
   TaskState,
   CollectionState,
+  withoutDefaults,
 } from '@wix/bex-core';
-import { cairoSectionCtaClicked } from '@wix/bex-core/bi';
+import {
+  cairoSectionCtaClicked,
+  cairoFiltersPanelUsed,
+  cairoCtaClicked,
+} from '@wix/bex-core/bi';
 import type { Essentials } from '@wix/fe-essentials/core';
 import { action, makeObservable, observable, runInAction } from 'mobx';
 
@@ -13,7 +18,7 @@ export interface ViewTypeStateParams {
   readonly componentType: string;
   readonly collection?: CollectionState<any, any>;
 }
-type ViewType = 'table' | 'grid';
+export type ViewType = 'table' | 'grid';
 
 export class ViewTypeState {
   viewType: ViewType = 'table';
@@ -51,20 +56,47 @@ export class ViewTypeState {
     }
   }
 
-  changeViewType(newViewType: string) {
+  changeViewType(newViewType: ViewType) {
+    const isLayoutToggleRedesignEnabled = this.container.experiments.enabled(
+      'specs.cairo.layout-toggle.redesign',
+    );
+
+    if (!isLayoutToggleRedesignEnabled) {
+      this.container.reportBi(
+        cairoSectionCtaClicked({
+          ctaType: 'More actions',
+          loaction: 'Collection Toolbar',
+          location: 'Collection Toolbar',
+          componentType: this.componentType,
+          sectionType: this.viewType,
+          ctaName: `layout switch to ${newViewType}`,
+          ...this.collection?._commonDynamicBiParams(),
+        }),
+      );
+    }
+
+    this.viewType = newViewType === 'grid' ? 'grid' : 'table';
+    this.dataCapsule.setItem('view-type', newViewType);
+  }
+
+  reportLayoutSwitch() {
     this.container.reportBi(
-      cairoSectionCtaClicked({
-        ctaType: 'More actions',
-        loaction: 'Collection Toolbar',
-        location: 'Collection Toolbar',
-        componentType: this.componentType,
-        sectionType: this.viewType,
-        ctaName: `layout switch to ${newViewType}`,
+      withoutDefaults(cairoFiltersPanelUsed)({
         ...this.collection?._commonDynamicBiParams(),
+        feature: 'Switch Layout',
       }),
     );
+  }
 
-    this.viewType = newViewType === 'grid' ? 'grid' : 'table';
-    this.dataCapsule.setItem('view-type', newViewType);
+  reportLayoutOptionClicked(option: ViewType, index: number) {
+    this.container.reportBi(
+      withoutDefaults(cairoCtaClicked)({
+        ...this.collection?._commonDynamicBiParams(),
+        ctaName: option,
+        location: 'switch_layout_dropdown',
+        itemId: option,
+        itemIndex: index,
+      }),
+    );
   }
 }

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}
+.CardContainer1161272757__root.CardContainer1161272757--mobile{border-radius:0}.Collapse3023920277__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3023920277__exit{height:0}.CollectionPage2442226077__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage2442226077__root.CollectionPage2442226077--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage2442226077__root.CollectionPage2442226077--panel{overflow:hidden;position:relative}.CollectionSectionHeader2684017084__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable1274338003__root td{vertical-align:middle}.CollectionTable1274338003__root.CollectionTable1274338003--mobile td:first-child{padding-left:18px}.CollectionTable1274338003__root.CollectionTable1274338003--mobile td:last-child{padding-right:18px}.CollectionToolbar839971193__left{min-width:0}.CollectionToolbar839971193__left.CollectionToolbar839971193--expandable{flex:auto}.CollectionToolbar839971193__left.CollectionToolbar839971193--title>*{width:100%}.CollectionToolbar839971193__root.CollectionToolbar839971193---responsiveMode-5-title .CollectionToolbar839971193__left{flex:1 100;min-width:50px}.CollectionToolbar839971193__root.CollectionToolbar839971193---responsiveMode-4-tabs .CollectionToolbar839971193__left,.CollectionToolbar839971193__root.CollectionToolbar839971193---responsiveMode-4-tabs .CollectionToolbar839971193__left.CollectionToolbar839971193--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar839971193__root.CollectionToolbar839971193---responsiveMode-4-tabs .CollectionToolbar839971193__left>*{flex-shrink:1;min-width:0}.CollectionToolbar839971193__root .CollectionToolbar839971193__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar839971193__root.CollectionToolbar839971193--views .CollectionToolbar839971193__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar839971193__root.CollectionToolbar839971193---responsiveMode-4-tabs .CollectionToolbar839971193__right,.CollectionToolbar839971193__root.CollectionToolbar839971193---responsiveMode-5-title .CollectionToolbar839971193__right{flex:0 1 auto;min-width:0}.CollectionToolbar839971193__root .CollectionToolbar839971193__right.CollectionToolbar839971193__fullWidth{margin-inline-start:0!important}.CollectionToolbar839971193__root.CollectionToolbar839971193--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter2095154025__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter2095154025__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter2095154025__searchMobile:not(.SearchOrCustomFilter2095154025--expandable){left:18px}.SearchOrCustomFilter2095154025__searchMobile.SearchOrCustomFilter2095154025--expandable.SearchOrCustomFilter2095154025--expanded{left:18px}.AutoCompleteReadonly3763682685__root.AutoCompleteReadonly3763682685--disableEditing{cursor:pointer}.AutoCompleteReadonly3763682685__root.AutoCompleteReadonly3763682685--disableEditing input{cursor:pointer}.ViewsDropdown3132423709__root{width:200px}.DragHandle3887572879__root{display:flex;align-items:center}.DragHandle3887572879__root:not(.DragHandle3887572879--disabled){cursor:grab;color:#a8caff}.DragHandle3887572879__root.DragHandle3887572879--disabled{color:#acafc4}.DragHandle3887572879__root:focus-visible:not(.DragHandle3887572879--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle3887572879__root.DragHandle3887572879--disabled{pointer-events:none}.DragHandle3887572879__root.DragHandle3887572879--dragging:not(.DragHandle3887572879--disabled){cursor:grabbing}.EntityPagePlain673223306__root.EntityPagePlain673223306--mobile{--wds-page-header-padding-horizontal:0}.Fade4075889701__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade4075889701__root.Fade4075889701--exit{opacity:0}.Heading2155534684__root{visibility:visible}.Heading2155534684__root.Heading2155534684--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow549173886__root.InputOverflow549173886--selected:not(.InputOverflow549173886--focused) input::placeholder{color:#000624}@keyframes LoadingRow715355924__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%}}.LoadingRow715355924__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:LoadingRow715355924__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2159478735__root{opacity:1}.MaxHeightText2159478735__root.MaxHeightText2159478735--height24{line-height:24px}.MaxLines2795738033__root{overflow:hidden}.MaxLines2795738033__root.MaxLines2795738033--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar1326572443__root{min-width:0}.MultiBulkActionToolbar1326572443__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar1326572443__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar1326572443__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow300385774__root td{padding:0!important;width:100%}.NestedTableRow1027691268__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1027691268__root:hover{background-color:#e7f0ff!important}.NestedTableRow1027691268__root.NestedTableRow1027691268--expandable{cursor:pointer}.NestedTableRow1027691268__placeholder td{padding:0!important;width:100%}.NestedTableRow1027691268__root:hover td:first-of-type::before,.NestedTableRow1027691268__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1844988275__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)}.NestedTableDragAndDropRow2212520299__root.NestedTableDragAndDropRow2212520299--draggingInto td{background-color:#e7f0ff!important}.PickerContent103951023__root{display:flex}.PickerContentAdditionalStep1773642125__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1773642125__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem4187040111__root{box-sizing:border-box}.ScrollableContent4163581334__root.ScrollableContent4163581334--overflowY{overflow-y:auto}.ScrollableContent4163581334__root.ScrollableContent4163581334--overflowX{overflow-x:auto}.ScrollableContent4163581334__root.ScrollableContent4163581334--smooth{scroll-behavior:smooth}.SkeletonCard916187800__headerLoading{display:block!important}.SlidingModal1944906977__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal1944906977__root.SlidingModal1944906977--overlay{transition:transform 0s ease 0s}.SlidingModal1944906977__root.SlidingModal1944906977---appendTo-6-parent{position:absolute}.SlidingModal1944906977__root:not(.SlidingModal1944906977--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter568602178__root .TabsFilter568602178__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter568602178__root.TabsFilter568602178--selected .TabsFilter568602178__title,.TabsFilter568602178__root:hover .TabsFilter568602178__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal2840713721__root{display:flex}.ToolbarItem2073112881__root{min-width:0}.ToolbarItemBox2290301766__root{min-width:0}.ToolbarItemBox2290301766__root.ToolbarItemBox2290301766--removeStartPadding{margin-left:-24px}.ToolbarItemBox2290301766__root.ToolbarItemBox2290301766--expandable{flex:1 0}.common1880788563__column{display:flex;flex-direction:column}.common1880788563__fullHeight{height:100%;min-height:0}.CollectionPageHeader626711544__root:not(.CollectionPageHeader626711544--mobile){gap:12px}.CollectionPageHeader626711544__root.CollectionPageHeader626711544--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader626711544__root.CollectionPageHeader626711544--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2618187567__root.FormPageHeader2618187567--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2618187567__root.FormPageHeader2618187567--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.358.0';

package/testkit/bi/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../dist/cjs/exports/testkit/bi.js",
+  "module": "../../dist/esm/exports/testkit/bi.js",
+  "types": "../../dist/types/exports/testkit/bi.d.ts",
+  "sideEffects": false
+}

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":[]}