@wix/patterns 1.366.0 → 1.369.0

package/src/state/Toolbar/ToolbarResponsiveState.ts

@@ -1,10 +1,17 @@
 import { addResizeObserver } from '@wix/bex-core';
-import { action, computed, makeObservable, runInAction } from 'mobx';
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
 import { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';
 import { ToolbarState } from '../../components/CollectionToolbars/ToolbarState';
 import { ToolbarLeftGroupState } from './ToolbarLeftGroupState';
 import { computeResponsiveTargetState } from './computeResponsiveTargetState';
 import {
+  OVERFLOW_BUTTON_WIDTH,
   SEARCH_COLLAPSED_WIDTH,
   SEARCH_EXPANDED_WIDTH,
 } from './toolbarResponsiveConstants';
@@ -26,9 +33,16 @@ export class ToolbarResponsiveState {
 
   private readonly _groups: ToolbarResponsivePriorityState[];
 
+  _shouldOverflow = false;
+
   _measurementElement: Element | null = null;
   _contentElement: Element | null = null;
 
+  // Width of non-group content that is removed from the DOM during overflow
+  // (e.g., tableGridSwitchButton). Must be accounted for in the exit-overflow
+  // calculation to prevent flicker.
+  _overflowHiddenContentWidth = 0;
+
   readonly toolbar: ToolbarState<any, any>;
 
   leftGroupState: ToolbarLeftGroupState<any, any> | null = null;
@@ -57,6 +71,8 @@ export class ToolbarResponsiveState {
     this._groups = [this.actions, this.filters, this.search];
 
     makeObservable(this, {
+      _shouldOverflow: observable.ref,
+      _overflowHiddenContentWidth: observable.ref,
       responsiveDisabled: computed,
       _applyTargetState: action,
     });
@@ -103,17 +119,49 @@ export class ToolbarResponsiveState {
       currentlyShrunk: g._shouldShrink,
     }));
 
-    const groupsTotal = groups.reduce(
-      (sum, g) => sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth),
-      0,
-    );
+    // When overflowing, the overflowable groups are removed from the DOM and
+    // replaced by the overflow button. Compute groupsTotal to reflect what the
+    // algorithm expects (all groups at their current widths) so that
+    // availableWidth = containerWidth - nonGroupContent is accurate.
+    let groupsTotal: number;
+    if (this._shouldOverflow) {
+      // contentWidth includes the overflow button but not the overflowable groups.
+      // groupsTotal must match: only non-overflowed groups + overflow button.
+      const overflowableIndices =
+        ToolbarResponsiveState._overflowableGroupIndices;
+      const nonOverflowedTotal = groups.reduce(
+        (sum, g, i) =>
+          overflowableIndices.includes(i)
+            ? sum
+            : sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth),
+        0,
+      );
+      groupsTotal = nonOverflowedTotal + OVERFLOW_BUTTON_WIDTH;
+    } else {
+      groupsTotal = groups.reduce(
+        (sum, g) =>
+          sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth),
+        0,
+      );
+    }
+
+    // nonGroupContent that is hidden during overflow but would reappear on exit.
+    // Must be added back so the algorithm doesn't overestimate available space.
+    const hiddenContentAdjustment = this._shouldOverflow
+      ? this._overflowHiddenContentWidth
+      : 0;
 
     return {
-      availableWidth: containerWidth - (contentWidth - groupsTotal),
+      availableWidth:
+        containerWidth - (contentWidth - groupsTotal) - hiddenContentAdjustment,
       groups,
     };
   }
 
+  // Indices of groups that can be absorbed into the overflow menu.
+  // actions = 0, filters = 1 (search = 2 stays visible).
+  private static readonly _overflowableGroupIndices = [0, 1];
+
   _applyTargetState() {
     const input = this._computeResponsiveInput();
     if (!input) {
@@ -123,14 +171,21 @@ export class ToolbarResponsiveState {
     const result = computeResponsiveTargetState({
       ...input,
       expandThresholdBuffer: EXPAND_THRESHOLD_BUFFER,
+      currentlyOverflowing: this._shouldOverflow,
+      overflowButtonWidth: OVERFLOW_BUTTON_WIDTH,
+      overflowableGroupIndices:
+        ToolbarResponsiveState._overflowableGroupIndices,
     });
 
     this._groups.forEach((g, i) => {
-      g._shouldShrink = result[i].shouldShrink;
+      g._shouldShrink = result.groups[i].shouldShrink;
     });
+    this._shouldOverflow = result.shouldOverflow;
   }
 
-  private _recomputeThrottled?: ReturnType<typeof this.container.lodash.throttle>;
+  private _recomputeThrottled?: ReturnType<
+    typeof this.container.lodash.throttle
+  >;
   private _rafId = 0;
 
   init() {
@@ -146,8 +201,7 @@ export class ToolbarResponsiveState {
       });
     }, 200);
 
-    const containerEl =
-      this.toolbar.toolbar.toolbarRect.element;
+    const containerEl = this.toolbar.toolbar.toolbarRect.element;
     if (!containerEl) {
       return () => {
         this._recomputeThrottled?.cancel();

package/src/state/Toolbar/computeResponsiveTargetState.ts

@@ -8,19 +8,34 @@ export interface ComputeResponsiveTargetStateParams {
   availableWidth: number;
   groups: ResponsiveGroupInput[];
   expandThresholdBuffer: number;
+  currentlyOverflowing?: boolean;
+  overflowButtonWidth?: number;
+  overflowableGroupIndices?: number[];
 }
 
 export interface ResponsiveGroupOutput {
   shouldShrink: boolean;
 }
 
+export interface ComputeResponsiveTargetStateResult {
+  groups: ResponsiveGroupOutput[];
+  shouldOverflow: boolean;
+}
+
 export function computeResponsiveTargetState(
   params: ComputeResponsiveTargetStateParams,
-): ResponsiveGroupOutput[] {
-  const { availableWidth, groups, expandThresholdBuffer } = params;
+): ComputeResponsiveTargetStateResult {
+  const {
+    availableWidth,
+    groups,
+    expandThresholdBuffer,
+    currentlyOverflowing = false,
+    overflowButtonWidth = 0,
+    overflowableGroupIndices = [],
+  } = params;
 
   if (groups.length === 0) {
-    return [];
+    return { groups: [], shouldOverflow: false };
   }
 
   const result: ResponsiveGroupOutput[] = groups.map((g) => ({
@@ -32,6 +47,7 @@ export function computeResponsiveTargetState(
 
   let total = groups.reduce((sum, g, i) => sum + widthOf(g, i), 0);
 
+  // Shrink pass
   for (let i = 0; i < groups.length; i++) {
     if (total <= availableWidth) {
       break;
@@ -43,25 +59,59 @@ export function computeResponsiveTargetState(
     }
   }
 
-  for (let i = groups.length - 1; i >= 0; i--) {
-    if (!result[i].shouldShrink) {
-      continue;
-    }
+  // Overflow detection: the "More" button is the step AFTER all groups have
+  // shrunk to their collapsed widths and it still doesn't fit.
+  // Flow: actions shrink → filters shrink → search shrinks → overflow.
+  const allShrunk = result.every((r) => r.shouldShrink);
+  const hasOverflowConfig =
+    overflowableGroupIndices.length > 0 && overflowButtonWidth > 0;
+
+  let shouldOverflow = false;
 
-    const expandCost = groups[i].expandedWidth - groups[i].collapsedWidth;
-    if (expandCost === 0) {
-      continue;
+  if (hasOverflowConfig && allShrunk && total > availableWidth) {
+    shouldOverflow = true;
+  } else if (hasOverflowConfig && currentlyOverflowing) {
+    // Hysteresis: stay in overflow until collapsed total + buffer fits,
+    // preventing flicker at the boundary.
+    const collapsedTotal = groups.reduce((sum, g) => sum + g.collapsedWidth, 0);
+    if (collapsedTotal + expandThresholdBuffer > availableWidth) {
+      shouldOverflow = true;
     }
+  }
 
-    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;
+  if (shouldOverflow) {
+    // Replace overflowable groups' widths with the single overflow button width
+    const overflowableTotal = overflowableGroupIndices.reduce(
+      (sum, idx) => sum + groups[idx].collapsedWidth,
+      0,
+    );
+    total = total - overflowableTotal + overflowButtonWidth;
+  }
+
+  // Expand pass — skip entirely while in overflow; everything stays collapsed
+  // until the container is wide enough to exit overflow, then groups expand
+  // in priority order (search last).
+  if (!shouldOverflow) {
+    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;
+  return { groups: result, shouldOverflow };
 }

package/src/state/Toolbar/toolbarResponsiveConstants.ts

@@ -1,2 +1,6 @@
 export const SEARCH_EXPANDED_WIDTH = 240;
 export const SEARCH_COLLAPSED_WIDTH = 140;
+export const OVERFLOW_BUTTON_WIDTH = 36;
+// Width of the layout switch IconButton (size="small") + SP2 gap (12px).
+// Used to account for hidden content during overflow exit calculation.
+export const LAYOUT_SWITCH_BUTTON_WIDTH = 48;

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer2295250283__root.CardContainer2295250283--mobile{border-radius:0}.Collapse269535241__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse269535241__exit{height:0}.CollectionPage3573774927__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage3573774927__root.CollectionPage3573774927--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage3573774927__root.CollectionPage3573774927--panel{overflow:hidden;position:relative}.CollectionSectionHeader3937441446__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable2673478244__root td{vertical-align:middle}.CollectionTable2673478244__root.CollectionTable2673478244--mobile td:first-child{padding-left:18px}.CollectionTable2673478244__root.CollectionTable2673478244--mobile td:last-child{padding-right:18px}.CollectionToolbar1478562778__left{min-width:0}.CollectionToolbar1478562778__left.CollectionToolbar1478562778--expandable{flex:auto}.CollectionToolbar1478562778__left.CollectionToolbar1478562778--title>*{width:100%}.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-5-title .CollectionToolbar1478562778__left{flex:1 100;min-width:50px}.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-4-tabs .CollectionToolbar1478562778__left,.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-4-tabs .CollectionToolbar1478562778__left.CollectionToolbar1478562778--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-4-tabs .CollectionToolbar1478562778__left>*{flex-shrink:1;min-width:0}.CollectionToolbar1478562778__root .CollectionToolbar1478562778__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1478562778__root.CollectionToolbar1478562778--views .CollectionToolbar1478562778__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-4-tabs .CollectionToolbar1478562778__right,.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-5-title .CollectionToolbar1478562778__right{flex:0 1 auto;min-width:0}.CollectionToolbar1478562778__root .CollectionToolbar1478562778__right.CollectionToolbar1478562778__fullWidth{margin-inline-start:0!important}.CollectionToolbar1478562778__root.CollectionToolbar1478562778--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter281901088__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter281901088__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter281901088__searchMobile:not(.SearchOrCustomFilter281901088--expandable){left:18px}.SearchOrCustomFilter281901088__searchMobile.SearchOrCustomFilter281901088--expandable.SearchOrCustomFilter281901088--expanded{left:18px}.AutoCompleteReadonly3238632147__root.AutoCompleteReadonly3238632147--disableEditing{cursor:pointer}.AutoCompleteReadonly3238632147__root.AutoCompleteReadonly3238632147--disableEditing input{cursor:pointer}.ViewsDropdown767838626__root{width:200px}.DragHandle1649945225__root{display:flex;align-items:center}.DragHandle1649945225__root:not(.DragHandle1649945225--disabled){cursor:grab;color:#a8caff}.DragHandle1649945225__root.DragHandle1649945225--disabled{color:#acafc4}.DragHandle1649945225__root:focus-visible:not(.DragHandle1649945225--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1649945225__root.DragHandle1649945225--disabled{pointer-events:none}.DragHandle1649945225__root.DragHandle1649945225--dragging:not(.DragHandle1649945225--disabled){cursor:grabbing}td:has(>.EditableCell3084944771__root){position:relative;min-height:24px}.EditableCell3084944771__root{display:flex;align-items:center;padding:0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;box-sizing:border-box;outline:0;cursor:default;user-select:none;background:var(--wsr-color-D80);border:1px solid var(--wsr-color-B40)}.EditableCell3084944771__root.EditableCell3084944771--selected{background:rgba(56,153,236,.08)}.EditableCell3084944771__root.EditableCell3084944771--focused:not(.EditableCell3084944771--selected){box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:2}.EditableCell3084944771__root.EditableCell3084944771--editing{background:var(--wsr-color-D80);box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:3;user-select:auto;overflow:visible}.EditableCell3084944771__root.EditableCell3084944771--selectionTop{border-top:2px solid var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--selectionBottom{border-bottom:2px solid var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--selectionLeft{border-left:2px solid var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--selectionRight{border-right:2px solid var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--invalid:not(.EditableCell3084944771--editing){background:rgba(229,0,77,.06)}.EditableCell3084944771__root.EditableCell3084944771--copiedTop:not(.EditableCell3084944771--selectionTop){border-top:2px dashed var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--copiedBottom:not(.EditableCell3084944771--selectionBottom){border-bottom:2px dashed var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--copiedLeft:not(.EditableCell3084944771--selectionLeft){border-left:2px dashed var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--copiedRight:not(.EditableCell3084944771--selectionRight){border-right:2px dashed var(--wsr-color-B10)}.EditableCell3084944771__validationIndicator{flex-shrink:0;margin-left:12px;margin-right:6px;color:var(--wsr-color-Y10)}.Edit2756468535__booleanEdit{display:flex;align-items:center;margin-left:12px}.View1734812011__booleanView{display:flex;align-items:center;margin-left:9px;pointer-events:none}.Edit2954194738__dateInput{width:100%;margin-left:-1px}.View3496179537__textView{width:100%;padding:9px 12px}.Edit1086718486__numberInput{width:100%;margin-right:2px}.Edit1086718486__numberInput input{text-align:right;direction:ltr}.View489596864__textView{width:100%;padding:9px 12px;text-align:right}.Edit2171501204__selectInput{width:100%}.View2274296977__textView{width:100%;padding:9px 12px}.Edit659033210__editWrapper{width:100%}.Edit659033210__inputArea{background-color:transparent;width:100%}.Edit659033210__inputArea>div{border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0!important}.Edit659033210__inputArea textarea{padding:9px 12px 8px!important;outline:0!important;border:0!important}.Edit659033210__inputArea:not(.Edit659033210--isFocused) textarea{resize:none;overflow:hidden}.Edit659033210__inputArea:not(.Edit659033210--isFocused) textarea::-webkit-scrollbar{display:none}.View985561481__textView{width:100%;padding:9px 12px}.Edit4061833648__urlInput{width:100%;margin-left:-1px}.View793386274__textView{width:100%;padding:9px 12px;display:flex;align-items:center;justify-content:space-between}.View793386274__urlText{flex:1;min-width:0}.View793386274__suffix{flex-shrink:0;margin-left:10px}.View793386274__textView.View793386274--suffixOnHover:not(:hover) .View793386274__suffix{display:none}.EntityPagePlain1681091989__root.EntityPagePlain1681091989--mobile{--wds-page-header-padding-horizontal:0}.Fade817618918__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade817618918__root.Fade817618918--exit{opacity:0}.Heading2420093600__root{visibility:visible}.Heading2420093600__root.Heading2420093600--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload972892750__fileUpload{width:100%}.InputOverflow2859286953__root.InputOverflow2859286953--selected:not(.InputOverflow2859286953--focused) input::placeholder{color:#000624}@keyframes LoadingRow641118317__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%}}.LoadingRow641118317__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:LoadingRow641118317__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText222894855__root{opacity:1}.MaxHeightText222894855__root.MaxHeightText222894855--height24{line-height:24px}.MaxLines3413711216__root{overflow:hidden}.MaxLines3413711216__root.MaxLines3413711216--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar2017077380__root{min-width:0}.MultiBulkActionToolbar2017077380__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar2017077380__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar2017077380__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow3998706015__root td{padding:0!important;width:100%}.NestedTableRow1007766577__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1007766577__root:hover{background-color:#e7f0ff!important}.NestedTableRow1007766577__root.NestedTableRow1007766577--expandable{cursor:pointer}.NestedTableRow1007766577__placeholder td{padding:0!important;width:100%}.NestedTableRow1007766577__root:hover td:first-of-type::before,.NestedTableRow1007766577__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2755059664__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)}.NestedTableDragAndDropRow1618883091__root.NestedTableDragAndDropRow1618883091--draggingInto td{background-color:#e7f0ff!important}.PickerContent3783271928__root{display:flex}.PickerContentAdditionalStep769599043__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep769599043__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1878736355__root{box-sizing:border-box}.ScrollableContent3878505752__root.ScrollableContent3878505752--overflowY{overflow-y:auto}.ScrollableContent3878505752__root.ScrollableContent3878505752--overflowX{overflow-x:auto}.ScrollableContent3878505752__root.ScrollableContent3878505752--smooth{scroll-behavior:smooth}.SkeletonCard3453398691__headerLoading{display:block!important}.SlidingModal823534629__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal823534629__root.SlidingModal823534629--overlay{transition:transform 0s ease 0s}.SlidingModal823534629__root.SlidingModal823534629---appendTo-6-parent{position:absolute}.SlidingModal823534629__root:not(.SlidingModal823534629--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter4088703764__root .TabsFilter4088703764__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter4088703764__root.TabsFilter4088703764--selected .TabsFilter4088703764__title,.TabsFilter4088703764__root:hover .TabsFilter4088703764__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal1570584659__root{display:flex}.ToolbarItem3734550434__root{min-width:0}.ToolbarItemBox1032297372__root{min-width:0}.ToolbarItemBox1032297372__root.ToolbarItemBox1032297372--removeStartPadding{margin-left:-24px}.ToolbarItemBox1032297372__root.ToolbarItemBox1032297372--expandable{flex:1 0}.common2705747369__column{display:flex;flex-direction:column}.common2705747369__fullHeight{height:100%;min-height:0}.CollectionPageHeader2247944408__root:not(.CollectionPageHeader2247944408--mobile){gap:12px}.CollectionPageHeader2247944408__root.CollectionPageHeader2247944408--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2247944408__root.CollectionPageHeader2247944408--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader1910830305__root.FormPageHeader1910830305--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader1910830305__root.FormPageHeader1910830305--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer2168501202__root.CardContainer2168501202--mobile{border-radius:0}.Collapse4048424257__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse4048424257__exit{height:0}.CollectionPage276279459__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage276279459__root.CollectionPage276279459--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage276279459__root.CollectionPage276279459--panel{overflow:hidden;position:relative}.CollectionSectionHeader1447244304__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable4289411793__root td{vertical-align:middle}.CollectionTable4289411793__root.CollectionTable4289411793--mobile td:first-child{padding-left:18px}.CollectionTable4289411793__root.CollectionTable4289411793--mobile td:last-child{padding-right:18px}.CollectionToolbar3017975653__left{min-width:0}.CollectionToolbar3017975653__left.CollectionToolbar3017975653--expandable{flex:auto}.CollectionToolbar3017975653__left.CollectionToolbar3017975653--title>*{width:100%}.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-5-title .CollectionToolbar3017975653__left{flex:1 100;min-width:50px}.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-4-tabs .CollectionToolbar3017975653__left,.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-4-tabs .CollectionToolbar3017975653__left.CollectionToolbar3017975653--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-4-tabs .CollectionToolbar3017975653__left>*{flex-shrink:1;min-width:0}.CollectionToolbar3017975653__root .CollectionToolbar3017975653__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar3017975653__root.CollectionToolbar3017975653--views .CollectionToolbar3017975653__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-4-tabs .CollectionToolbar3017975653__right,.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-5-title .CollectionToolbar3017975653__right{flex:0 1 auto;min-width:0}.CollectionToolbar3017975653__root .CollectionToolbar3017975653__right.CollectionToolbar3017975653__fullWidth{margin-inline-start:0!important}.CollectionToolbar3017975653__root.CollectionToolbar3017975653--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1183156895__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1183156895__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1183156895__searchMobile:not(.SearchOrCustomFilter1183156895--expandable){left:18px}.SearchOrCustomFilter1183156895__searchMobile.SearchOrCustomFilter1183156895--expandable.SearchOrCustomFilter1183156895--expanded{left:18px}.AutoCompleteReadonly1590410434__root.AutoCompleteReadonly1590410434--disableEditing{cursor:pointer}.AutoCompleteReadonly1590410434__root.AutoCompleteReadonly1590410434--disableEditing input{cursor:pointer}.ViewsDropdown2299579084__root{width:200px}.DragHandle2706796462__root{display:flex;align-items:center}.DragHandle2706796462__root:not(.DragHandle2706796462--disabled){cursor:grab;color:#a8caff}.DragHandle2706796462__root.DragHandle2706796462--disabled{color:#acafc4}.DragHandle2706796462__root:focus-visible:not(.DragHandle2706796462--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle2706796462__root.DragHandle2706796462--disabled{pointer-events:none}.DragHandle2706796462__root.DragHandle2706796462--dragging:not(.DragHandle2706796462--disabled){cursor:grabbing}td:has(>.EditableCell4007055773__root){position:relative;min-height:24px}.EditableCell4007055773__root{display:flex;align-items:center;padding:0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;box-sizing:border-box;outline:0;cursor:default;user-select:none;background:var(--wsr-color-D80);border:1px solid var(--wsr-color-B40)}.EditableCell4007055773__root.EditableCell4007055773--selected{background:rgba(56,153,236,.08)}.EditableCell4007055773__root.EditableCell4007055773--focused:not(.EditableCell4007055773--selected){box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:2}.EditableCell4007055773__root.EditableCell4007055773--editing{background:var(--wsr-color-D80);box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:3;user-select:auto;overflow:visible}.EditableCell4007055773__root.EditableCell4007055773--selectionTop{border-top:2px solid var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--selectionBottom{border-bottom:2px solid var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--selectionLeft{border-left:2px solid var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--selectionRight{border-right:2px solid var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--invalid:not(.EditableCell4007055773--editing){background:rgba(229,0,77,.06)}.EditableCell4007055773__root.EditableCell4007055773--copiedTop:not(.EditableCell4007055773--selectionTop){border-top:2px dashed var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--copiedBottom:not(.EditableCell4007055773--selectionBottom){border-bottom:2px dashed var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--copiedLeft:not(.EditableCell4007055773--selectionLeft){border-left:2px dashed var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--copiedRight:not(.EditableCell4007055773--selectionRight){border-right:2px dashed var(--wsr-color-B10)}.EditableCell4007055773__validationIndicator{flex-shrink:0;margin-left:12px;margin-right:6px;color:var(--wsr-color-Y10)}.Edit3240722367__booleanEdit{display:flex;align-items:center;margin-left:12px}.View3426461177__booleanView{display:flex;align-items:center;margin-left:9px;pointer-events:none}.Edit3386202237__dateInput{width:100%;margin-left:-1px}.View292028254__textView{width:100%;padding:9px 12px}.Edit3860369112__emailInput{width:100%;margin-left:-1px}.View150901042__textView{width:100%;padding:9px 12px}.Edit1803646036__numberInput{width:100%;margin-right:2px}.Edit1803646036__numberInput input{text-align:right;direction:ltr}.View2720415983__textView{width:100%;padding:9px 12px;text-align:right}.Edit136607306__jsonInput{width:100%;margin-left:-1px}.View2058179119__textView{width:100%;padding:9px 12px}.Edit2518330657__selectInput{width:100%}.View2299310086__textView{width:100%;padding:9px 12px}.Edit3813731711__editWrapper{width:100%}.Edit3813731711__inputArea{background-color:transparent;width:100%}.Edit3813731711__inputArea>div{border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0!important}.Edit3813731711__inputArea textarea{padding:9px 12px 8px!important;outline:0!important;border:0!important}.Edit3813731711__inputArea:not(.Edit3813731711--isFocused) textarea{resize:none;overflow:hidden}.Edit3813731711__inputArea:not(.Edit3813731711--isFocused) textarea::-webkit-scrollbar{display:none}.View3275766842__textView{width:100%;padding:9px 12px}.Edit1324021997__urlInput{width:100%;margin-left:-1px}.View567257960__textView{width:100%;padding:9px 12px;display:flex;align-items:center;justify-content:space-between}.View567257960__urlText{flex:1;min-width:0}.View567257960__suffix{flex-shrink:0;margin-left:10px}.View567257960__textView.View567257960--suffixOnHover:not(:hover) .View567257960__suffix{display:none}.EntityPagePlain2605367659__root.EntityPagePlain2605367659--mobile{--wds-page-header-padding-horizontal:0}.Fade3987565292__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade3987565292__root.Fade3987565292--exit{opacity:0}.Heading1326594153__root{visibility:visible}.Heading1326594153__root.Heading1326594153--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload2527291098__fileUpload{width:100%}.InputOverflow2955188721__root.InputOverflow2955188721--selected:not(.InputOverflow2955188721--focused) input::placeholder{color:#000624}@keyframes LoadingRow488784554__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%}}.LoadingRow488784554__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:LoadingRow488784554__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2696233809__root{opacity:1}.MaxHeightText2696233809__root.MaxHeightText2696233809--height24{line-height:24px}.MaxLines3057111191__root{overflow:hidden}.MaxLines3057111191__root.MaxLines3057111191--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar821506402__root{min-width:0}.MultiBulkActionToolbar821506402__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar821506402__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar821506402__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow3678363266__root td{padding:0!important;width:100%}.NestedTableRow3906551943__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3906551943__root:hover{background-color:#e7f0ff!important}.NestedTableRow3906551943__root.NestedTableRow3906551943--expandable{cursor:pointer}.NestedTableRow3906551943__placeholder td{padding:0!important;width:100%}.NestedTableRow3906551943__root:hover td:first-of-type::before,.NestedTableRow3906551943__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1706234059__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)}.NestedTableDragAndDropRow963030393__root.NestedTableDragAndDropRow963030393--draggingInto td{background-color:#e7f0ff!important}.PickerContent4004721251__root{display:flex}.PickerContentAdditionalStep3378583378__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3378583378__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem3045741371__root{box-sizing:border-box}.ScrollableContent1159900848__root.ScrollableContent1159900848--overflowY{overflow-y:auto}.ScrollableContent1159900848__root.ScrollableContent1159900848--overflowX{overflow-x:auto}.ScrollableContent1159900848__root.ScrollableContent1159900848--smooth{scroll-behavior:smooth}.SkeletonCard2332620532__headerLoading{display:block!important}.SlidingModal2730405760__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2730405760__root.SlidingModal2730405760--overlay{transition:transform 0s ease 0s}.SlidingModal2730405760__root.SlidingModal2730405760---appendTo-6-parent{position:absolute}.SlidingModal2730405760__root:not(.SlidingModal2730405760--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter409906628__root .TabsFilter409906628__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter409906628__root.TabsFilter409906628--selected .TabsFilter409906628__title,.TabsFilter409906628__root:hover .TabsFilter409906628__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal3917873617__root{display:flex}.ToolbarItem15520440__root{min-width:0}.ToolbarItemBox939755603__root{min-width:0}.ToolbarItemBox939755603__root.ToolbarItemBox939755603--removeStartPadding{margin-left:-24px}.ToolbarItemBox939755603__root.ToolbarItemBox939755603--expandable{flex:1 0}.common1802833007__column{display:flex;flex-direction:column}.common1802833007__fullHeight{height:100%;min-height:0}.CollectionPageHeader2854830172__root:not(.CollectionPageHeader2854830172--mobile){gap:12px}.CollectionPageHeader2854830172__root.CollectionPageHeader2854830172--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2854830172__root.CollectionPageHeader2854830172--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2449721271__root.FormPageHeader2449721271--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2449721271__root.FormPageHeader2449721271--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.366.0';
+export const version = 'patterns@1.369.0';