@wix/patterns 1.338.0 → 1.340.0

package/src/state/Toolbar/ToolbarResponsivePriorityState.ts

@@ -10,17 +10,17 @@ export interface ToolbarResponsivePriorityStateParams {
 }
 
 export class ToolbarResponsivePriorityState {
-  readonly responsive;
-  readonly getNextToShrink;
-  readonly getNextToExpand;
-  readonly _count;
+  readonly responsive: ToolbarResponsiveState;
+  getNextToShrink: () => ToolbarResponsivePriorityState;
+  getNextToExpand: () => ToolbarResponsivePriorityState;
+  readonly _count: number;
 
-  _minWidth;
-  _collapsedWidth;
+  _minWidth: number;
+  _collapsedWidth: number;
 
   _shouldShrink = false;
 
-  _groupElement?: HTMLElement | null | undefined;
+  _groupElement: HTMLElement | null = null;
 
   constructor(params: ToolbarResponsivePriorityStateParams) {
     this._count = params.count;
@@ -68,6 +68,10 @@ export class ToolbarResponsivePriorityState {
       actionsAvailableSpace: { available },
     } = responsive;
 
+    if (responsive._expandCooldown) {
+      return;
+    }
+
     if (
       _nextToExpand !== this ||
       (preCalculatedAvailableSpace ?? available) + _collapsedWidth <=
@@ -82,11 +86,14 @@ export class ToolbarResponsivePriorityState {
     responsive._nextToShrink = this;
     responsive.actionsAvailableSpace._syncThrottled();
 
-    // experimental - expanding the next item without waiting for the layout tick
-    // const availableAfterExpand = available + _collapsedWidth - this._minWidth;
-    // responsive._nextToExpand._expandIfNeeded({
-    //   preCalculatedAvailableSpace: availableAfterExpand,
-    // });
+    const spaceUsed = this._minWidth - _collapsedWidth;
+    const availableAfterExpand =
+      (preCalculatedAvailableSpace ?? available) - spaceUsed;
+    if (availableAfterExpand > 0) {
+      responsive._nextToExpand._expandIfNeeded({
+        preCalculatedAvailableSpace: availableAfterExpand,
+      });
+    }
   }
 
   _shrinkIfNeeded() {
@@ -105,6 +112,16 @@ export class ToolbarResponsivePriorityState {
     this._shouldShrink = true;
     responsive._nextToShrink = _nextToShrink.getNextToShrink();
     responsive._nextToExpand = this;
+
+    // Double rAF ensures the shrink is fully painted before allowing expansion.
+    // Single rAF can cause flickering because layout may not be settled yet.
+    responsive._expandCooldown = true;
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        responsive._expandCooldown = false;
+      });
+    });
+
     responsive.overflow._syncThrottled();
   }
 }

package/src/state/Toolbar/ToolbarResponsiveState.ts

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

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer2270987594__root.CardContainer2270987594--mobile{border-radius:0}.Collapse3580489356__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3580489356__exit{height:0}.CollectionPage760750956__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage760750956__root.CollectionPage760750956--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage760750956__root.CollectionPage760750956--panel{overflow:hidden;position:relative}.CollectionTable2088375065__root td{vertical-align:middle}.CollectionTable2088375065__root.CollectionTable2088375065--mobile td:first-child{padding-left:18px}.CollectionTable2088375065__root.CollectionTable2088375065--mobile td:last-child{padding-right:18px}.CollectionToolbar2950418002__left{min-width:0}.CollectionToolbar2950418002__root.CollectionToolbar2950418002--views .CollectionToolbar2950418002__left{flex-shrink:1;flex-grow:0}.CollectionToolbar2950418002__left.CollectionToolbar2950418002--expandable{flex:auto}.CollectionToolbar2950418002__root .CollectionToolbar2950418002__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar2950418002__root.CollectionToolbar2950418002--views .CollectionToolbar2950418002__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar2950418002__root .CollectionToolbar2950418002__right.CollectionToolbar2950418002__fullWidth{margin-inline-start:0!important}.CollectionToolbar2950418002__root.CollectionToolbar2950418002--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter3532595144__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter3532595144__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter3532595144__searchMobile:not(.SearchOrCustomFilter3532595144--expandable){left:18px}.SearchOrCustomFilter3532595144__searchMobile.SearchOrCustomFilter3532595144--expandable.SearchOrCustomFilter3532595144--expanded{left:18px}.AutoCompleteReadonly572573198__root.AutoCompleteReadonly572573198--disableEditing{cursor:pointer}.AutoCompleteReadonly572573198__root.AutoCompleteReadonly572573198--disableEditing input{cursor:pointer}.ViewsDropdown1422484904__root{width:200px}.DragHandle4255276052__root{display:flex;align-items:center}.DragHandle4255276052__root:not(.DragHandle4255276052--disabled){cursor:grab;color:#a8caff}.DragHandle4255276052__root.DragHandle4255276052--disabled{color:#acafc4}.DragHandle4255276052__root:focus-visible:not(.DragHandle4255276052--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle4255276052__root.DragHandle4255276052--disabled{pointer-events:none}.DragHandle4255276052__root.DragHandle4255276052--dragging:not(.DragHandle4255276052--disabled){cursor:grabbing}.EntityPagePlain190709969__root.EntityPagePlain190709969--mobile{--wds-page-header-padding-horizontal:0}.Fade1345945596__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade1345945596__root.Fade1345945596--exit{opacity:0}.Heading3281401398__root{visibility:visible}.Heading3281401398__root.Heading3281401398--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1183490160__root.InputOverflow1183490160--selected:not(.InputOverflow1183490160--focused) input::placeholder{color:#000624}@keyframes LoadingRow3008612773__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%}}.LoadingRow3008612773__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:LoadingRow3008612773__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1142318275__root{opacity:1}.MaxHeightText1142318275__root.MaxHeightText1142318275--height24{line-height:24px}.MaxLines3027755952__root{overflow:hidden}.MaxLines3027755952__root.MaxLines3027755952--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3793364616__root{min-width:0}.MultiBulkActionToolbar3793364616__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar3793364616__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar3793364616__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow2366685358__root td{padding:0!important;width:100%}.NestedTableRow4012245422__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow4012245422__root:hover{background-color:#e7f0ff!important}.NestedTableRow4012245422__root.NestedTableRow4012245422--expandable{cursor:pointer}.NestedTableRow4012245422__placeholder td{padding:0!important;width:100%}.NestedTableRow4012245422__root:hover td:first-of-type::before,.NestedTableRow4012245422__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2461601858__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)}.NestedTableDragAndDropRow2017963387__root.NestedTableDragAndDropRow2017963387--draggingInto td{background-color:#e7f0ff!important}.PickerContent620018214__root{display:flex}.PickerContentAdditionalStep3476680796__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3476680796__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1676516431__root{box-sizing:border-box}.ScrollableContent2930045273__root.ScrollableContent2930045273--overflowY{overflow-y:auto}.ScrollableContent2930045273__root.ScrollableContent2930045273--overflowX{overflow-x:auto}.ScrollableContent2930045273__root.ScrollableContent2930045273--smooth{scroll-behavior:smooth}.SkeletonCard1345182747__headerLoading{display:block!important}.SlidingModal692356518__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal692356518__root.SlidingModal692356518--overlay{transition:transform 0s ease 0s}.SlidingModal692356518__root.SlidingModal692356518---appendTo-6-parent{position:absolute}.SlidingModal692356518__root:not(.SlidingModal692356518--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2423008515__root .TabsFilter2423008515__title{color:inherit!important}.ManageTagsModal3936625449__root{display:flex}.ToolbarItem1352350803__root{min-width:0}.ToolbarItemBox2099455071__root{min-width:0}.ToolbarItemBox2099455071__root.ToolbarItemBox2099455071--removeStartPadding{margin-left:-24px}.ToolbarItemBox2099455071__root.ToolbarItemBox2099455071--expandable{flex:1 0}.common3366408934__column{display:flex;flex-direction:column}.common3366408934__fullHeight{height:100%;min-height:0}.CollectionPageHeader630394202__root.CollectionPageHeader630394202--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader630394202__root.CollectionPageHeader630394202--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3500407043__root.FormPageHeader3500407043--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3500407043__root.FormPageHeader3500407043--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer3207824262__root.CardContainer3207824262--mobile{border-radius:0}.Collapse332668825__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse332668825__exit{height:0}.CollectionPage1211647002__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage1211647002__root.CollectionPage1211647002--mobile{--wds-page-header-padding-horizontal:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage1211647002__root.CollectionPage1211647002--panel{overflow:hidden;position:relative}.CollectionTable806703847__root td{vertical-align:middle}.CollectionTable806703847__root.CollectionTable806703847--mobile td:first-child{padding-left:18px}.CollectionTable806703847__root.CollectionTable806703847--mobile td:last-child{padding-right:18px}.CollectionToolbar549189182__left{min-width:0}.CollectionToolbar549189182__left.CollectionToolbar549189182--expandable{flex:auto}.CollectionToolbar549189182__left.CollectionToolbar549189182--title>*{width:100%}.CollectionToolbar549189182__root.CollectionToolbar549189182---responsiveMode-5-title .CollectionToolbar549189182__left{flex:1 100;min-width:50px}.CollectionToolbar549189182__root.CollectionToolbar549189182---responsiveMode-4-tabs .CollectionToolbar549189182__left,.CollectionToolbar549189182__root.CollectionToolbar549189182---responsiveMode-4-tabs .CollectionToolbar549189182__left.CollectionToolbar549189182--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar549189182__root.CollectionToolbar549189182---responsiveMode-4-tabs .CollectionToolbar549189182__left>*{flex-shrink:1;min-width:0}.CollectionToolbar549189182__root .CollectionToolbar549189182__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar549189182__root.CollectionToolbar549189182--views .CollectionToolbar549189182__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar549189182__root.CollectionToolbar549189182---responsiveMode-4-tabs .CollectionToolbar549189182__right,.CollectionToolbar549189182__root.CollectionToolbar549189182---responsiveMode-5-title .CollectionToolbar549189182__right{flex:0 1 auto;min-width:0}.CollectionToolbar549189182__root .CollectionToolbar549189182__right.CollectionToolbar549189182__fullWidth{margin-inline-start:0!important}.CollectionToolbar549189182__root.CollectionToolbar549189182--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1540080530__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1540080530__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1540080530__searchMobile:not(.SearchOrCustomFilter1540080530--expandable){left:18px}.SearchOrCustomFilter1540080530__searchMobile.SearchOrCustomFilter1540080530--expandable.SearchOrCustomFilter1540080530--expanded{left:18px}.AutoCompleteReadonly3648565176__root.AutoCompleteReadonly3648565176--disableEditing{cursor:pointer}.AutoCompleteReadonly3648565176__root.AutoCompleteReadonly3648565176--disableEditing input{cursor:pointer}.ViewsDropdown4092561865__root{width:200px}.DragHandle4120713385__root{display:flex;align-items:center}.DragHandle4120713385__root:not(.DragHandle4120713385--disabled){cursor:grab;color:#a8caff}.DragHandle4120713385__root.DragHandle4120713385--disabled{color:#acafc4}.DragHandle4120713385__root:focus-visible:not(.DragHandle4120713385--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle4120713385__root.DragHandle4120713385--disabled{pointer-events:none}.DragHandle4120713385__root.DragHandle4120713385--dragging:not(.DragHandle4120713385--disabled){cursor:grabbing}.EntityPagePlain3932748279__root.EntityPagePlain3932748279--mobile{--wds-page-header-padding-horizontal:0}.Fade573848876__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade573848876__root.Fade573848876--exit{opacity:0}.Heading3595635433__root{visibility:visible}.Heading3595635433__root.Heading3595635433--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow3652821244__root.InputOverflow3652821244--selected:not(.InputOverflow3652821244--focused) input::placeholder{color:#000624}@keyframes LoadingRow924286068__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%}}.LoadingRow924286068__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:LoadingRow924286068__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1816593975__root{opacity:1}.MaxHeightText1816593975__root.MaxHeightText1816593975--height24{line-height:24px}.MaxLines1060528546__root{overflow:hidden}.MaxLines1060528546__root.MaxLines1060528546--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar700079480__root{min-width:0}.MultiBulkActionToolbar700079480__leftGroupWrapper{overflow:hidden;padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar700079480__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar700079480__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow2058755747__root td{padding:0!important;width:100%}.NestedTableRow775390359__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow775390359__root:hover{background-color:#e7f0ff!important}.NestedTableRow775390359__root.NestedTableRow775390359--expandable{cursor:pointer}.NestedTableRow775390359__placeholder td{padding:0!important;width:100%}.NestedTableRow775390359__root:hover td:first-of-type::before,.NestedTableRow775390359__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2543702656__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)}.NestedTableDragAndDropRow423738662__root.NestedTableDragAndDropRow423738662--draggingInto td{background-color:#e7f0ff!important}.PickerContent2698439836__root{display:flex}.PickerContentAdditionalStep403582428__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep403582428__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem593804783__root{box-sizing:border-box}.ScrollableContent822548921__root.ScrollableContent822548921--overflowY{overflow-y:auto}.ScrollableContent822548921__root.ScrollableContent822548921--overflowX{overflow-x:auto}.ScrollableContent822548921__root.ScrollableContent822548921--smooth{scroll-behavior:smooth}.SkeletonCard1546452599__headerLoading{display:block!important}.SlidingModal756205276__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal756205276__root.SlidingModal756205276--overlay{transition:transform 0s ease 0s}.SlidingModal756205276__root.SlidingModal756205276---appendTo-6-parent{position:absolute}.SlidingModal756205276__root:not(.SlidingModal756205276--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2971966923__root .TabsFilter2971966923__title{color:inherit!important}.ManageTagsModal2860881838__root{display:flex}.ToolbarItem2847693431__root{min-width:0}.ToolbarItemBox404627416__root{min-width:0}.ToolbarItemBox404627416__root.ToolbarItemBox404627416--removeStartPadding{margin-left:-24px}.ToolbarItemBox404627416__root.ToolbarItemBox404627416--expandable{flex:1 0}.common3570722167__column{display:flex;flex-direction:column}.common3570722167__fullHeight{height:100%;min-height:0}.CollectionPageHeader1007594454__root.CollectionPageHeader1007594454--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader1007594454__root.CollectionPageHeader1007594454--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3322132341__root.FormPageHeader3322132341--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3322132341__root.FormPageHeader3322132341--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.338.0';
+export const version = 'patterns@1.340.0';