@wix/patterns 1.277.0 → 1.278.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItemBox3007881056";
+var _namespace_ = "ToolbarItemBox249779595";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ToolbarItemBox3007881056__root"};
+export var classes = {"root":"ToolbarItemBox249779595__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common290980636";
+var _namespace_ = "common3727155085";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"common290980636__root","column":"common290980636__column","fullHeight":"common290980636__fullHeight"};
+export var classes = {"root":"common3727155085__root","column":"common3727155085__column","fullHeight":"common3727155085__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useCollectionTableResize.ts

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import { useIsMobile } from './useIsMobile';
+import { TableProps, TableColumn } from '@wix/design-system';
+import { ColumnSizesState } from '../state/ColumnSizesState';
+
+export function useCollectionTableResize({
+  columns,
+  horizontalScroll,
+  userResizeProps,
+  columnSizesState,
+}: {
+  columns: TableColumn[];
+  horizontalScroll: boolean | undefined;
+  userResizeProps?: TableProps['resizeProps'];
+  columnSizesState: ColumnSizesState | null;
+}) {
+  const experimentEnabled =
+    columnSizesState?.isResizeExperimentEnabled ?? false;
+  const isMobile = useIsMobile();
+
+  const areAllColumnsPixelWidth = useMemo(
+    () => columns.every((col) => col.width?.toString().match(/^\d+px$/)),
+    [columns],
+  );
+
+  const isResizable =
+    experimentEnabled &&
+    !isMobile &&
+    !!horizontalScroll &&
+    areAllColumnsPixelWidth;
+
+  const resizePlaceholderColumn = useMemo(
+    () => ({ title: '', width: '100%', render: () => null }),
+    [],
+  );
+
+  const tableResizeProps: TableProps['resizeProps'] | undefined = isResizable
+    ? {
+        ...userResizeProps,
+        minColumnWidth: userResizeProps?.minColumnWidth ?? 74,
+        onColumnResizeEnd(columnId, endWidth, event) {
+          columnSizesState?.updateColumnWidth(columnId, Number(endWidth));
+          userResizeProps?.onColumnResizeEnd?.(columnId, endWidth, event);
+        },
+      }
+    : undefined;
+
+  return {
+    isResizable,
+    tableResizeProps,
+    resizePlaceholderColumn,
+  };
+}

package/src/services/columnSizesService.ts

@@ -0,0 +1,45 @@
+import { DataCapsule, PatternsErrorHandler } from '@wix/bex-core';
+
+export interface ColumnSizesServiceParams {
+  readonly storage: DataCapsule;
+  readonly fqdn: string;
+  readonly errorHandler: PatternsErrorHandler;
+}
+
+export interface ColumnSizesSchema {
+  columnWidths?: Record<string, number>;
+}
+
+export class ColumnSizesService {
+  readonly storage;
+  readonly fqdn;
+  readonly errorHandler;
+  private storageKey: string;
+
+  constructor(params: ColumnSizesServiceParams) {
+    this.storage = params.storage;
+    this.fqdn = params.fqdn;
+    this.errorHandler = params.errorHandler;
+    this.storageKey = `cairo-column-sizes`;
+  }
+
+  async fetchColumnSizes(): Promise<ColumnSizesSchema | null> {
+    const { storage, storageKey } = this;
+    try {
+      const data = await storage.getItem<ColumnSizesSchema | null>(storageKey);
+
+      return data;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  async updateColumnWidths(
+    columnWidths: Record<string, number>,
+  ): Promise<void> {
+    const { storage, storageKey, errorHandler } = this;
+    await errorHandler.withErrorHandler(() => {
+      return storage.setItem(storageKey, { columnWidths });
+    }, {});
+  }
+}

package/src/services/index.ts

@@ -1 +1,2 @@
 export * from './viewsService';
+export * from './columnSizesService';

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader1787965736";
+var _namespace_ = "CollectionPageHeader2587369503";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPageHeader1787965736__root"};
+export var classes = {"root":"CollectionPageHeader2587369503__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/ColumnSizesState.ts

@@ -0,0 +1,90 @@
+import { DataCapsule, TaskState, WixPatternsContainer } from '@wix/bex-core';
+import { ColumnSizesService } from '../services';
+import { makeObservable, observable, runInAction } from 'mobx';
+import { Column } from '../model';
+
+export interface ColumnSizesStateParams {
+  dataCapsule: DataCapsule;
+  container: WixPatternsContainer;
+  fqdn: string;
+}
+
+export class ColumnSizesState {
+  private readonly columnSizeService: ColumnSizesService;
+  private readonly container: WixPatternsContainer;
+
+  readonly isResizeExperimentEnabled: boolean;
+  readonly initTask = new TaskState();
+  columnWidths: Record<string, number> | undefined = undefined;
+
+  constructor(params: ColumnSizesStateParams) {
+    this.container = params.container;
+    this.isResizeExperimentEnabled =
+      this.container.internalExperiments?.enabled(
+        'specs.cairo.ResizeColumns',
+      ) ?? false;
+
+    this.columnSizeService = new ColumnSizesService({
+      fqdn: params.fqdn,
+      storage: params.dataCapsule,
+      errorHandler: params.container.errorHandler,
+    });
+
+    makeObservable(this, {
+      columnWidths: observable.ref,
+      isResizeExperimentEnabled: observable,
+    });
+  }
+
+  init() {
+    if (!this.isResizeExperimentEnabled) {
+      return;
+    }
+
+    this.initTask.runOnce(async () => {
+      const data = await this.columnSizeService.fetchColumnSizes();
+      runInAction(() => {
+        this.columnWidths = data?.columnWidths;
+      });
+    });
+  }
+
+  mergeSizes(baseColumns: Column[]) {
+    if (!this.isResizeExperimentEnabled) {
+      return baseColumns;
+    }
+
+    const merged = baseColumns.map((column) => {
+      const persistedWidth = column.id
+        ? this.columnWidths?.[column.id]
+        : undefined;
+      return persistedWidth ? { ...column, width: persistedWidth } : column;
+    });
+
+    return merged;
+  }
+
+  async updateColumnWidth(columnId: string, width: number) {
+    const oldColumnWidths = { ...this.columnWidths };
+    const newColumnWidths = {
+      ...oldColumnWidths,
+      [columnId]: width,
+    };
+
+    runInAction(() => {
+      this.columnWidths = newColumnWidths;
+    });
+
+    try {
+      await this.columnSizeService.updateColumnWidths(newColumnWidths);
+    } catch (error) {
+      const resolvedError =
+        this.container.errorHandler?.getResolvedError?.(error);
+      this.container?.showToast?.({
+        biName: 'cairo-column-sizes-update-error',
+        message: resolvedError?.message!,
+        type: 'ERROR',
+      });
+    }
+  }
+}

package/src/state/FormPage/FormPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "FormPageHeader2615991829";
+var _namespace_ = "FormPageHeader2837057717";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"FormPageHeader2615991829__root"};
+export var classes = {"root":"FormPageHeader2837057717__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/ToolbarCollectionState.ts

@@ -61,6 +61,7 @@ import {
 import { ExtensionMenuItemsState } from './ExtensionMenuItemsState';
 import { ToolbarState } from '../components/CollectionToolbars/ToolbarState';
 import { MoreActionItemFactory } from '../components/MoreActions/MoreActionsBase';
+import { ColumnSizesState } from './ColumnSizesState';
 
 export type Component<C> = () => C;
 
@@ -116,6 +117,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
   internalScroll = undefined as boolean | undefined;
   customColumnsState: CustomColumnsState<T, F> | null = null;
   customColumnsStateInitialized = false;
+  columnSizesState: ColumnSizesState | null = null;
   multiLevelSorting: MultiLevelSortingState<T, F> | null = null;
   liveRegionRef: { current: null | LiveRegionRefType } = {
     current: null,
@@ -239,6 +241,12 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
       });
     };
 
+    this.columnSizesState = new ColumnSizesState({
+      container: this.container,
+      dataCapsule: this.dataCapsule,
+      fqdn: this.namespace,
+    });
+
     makeObservable(this, {
       forceRenderIndexes: observable.ref,
       _userColumns: observable.ref,
@@ -429,13 +437,13 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
   }
 
   get selectedOrderedColumnsOrAll() {
-    const { columns, customColumnsState } = this;
+    const { columns, customColumnsState, columnSizesState } = this;
 
-    if (customColumnsState) {
-      return customColumnsState.selectedOrderedColumns;
-    }
+    const baseColumns = customColumnsState
+      ? customColumnsState.selectedOrderedColumns
+      : columns;
 
-    return columns;
+    return columnSizesState?.mergeSizes(baseColumns) ?? baseColumns;
   }
 
   _commonDynamicBiParams(query = this.collection.result.originQuery) {
@@ -543,6 +551,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
       bulk,
       customColumnsState,
       viewsState,
+      columnSizesState,
     } = this;
 
     const biReporters = multi.collections.map(
@@ -573,6 +582,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
       collectionDataExtension?.init(), // dataExtensionState should be initialized and beforeInitialFetch promise listener registered before customColumnsState?._tableInit() because custom columns might use data extensions
       customColumnsState?._tableInit(),
       viewsState?.init(),
+      columnSizesState?.init(),
       // register table feature first as they might register to the collection `beforeInitialFetch`
       ...tableFeatures.map((t) => t.init()),
       reaction(
@@ -636,6 +646,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
           tagsCollectionState?.initTask.status.promise?.catch(() => null), // resilience to failed request
           collectionDataExtension?.initTask.status.promise?.catch(() => null), // resilience to failed request
           customColumnsState?.initTask.status.promise,
+          columnSizesState?.initTask.status.promise,
           ...tableFeatures.map((t) => t.initTask?.status.promise),
         ]);
 
@@ -704,6 +715,10 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
     this.toolbarFiltersStateInitialized = value;
   }
 
+  updateColumnWidth(columnId: string, width: number) {
+    this.columnSizesState?.updateColumnWidth(columnId, width);
+  }
+
   _initDefaultSortableColumn(hasMultiLevelSorting = false) {
     const {
       columns,

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer721780488__root.CardContainer721780488--mobile{border-radius:0}.Collapse2475220223__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse2475220223__exit{height:0}.CollectionPage1784785809__root.CollectionPage1784785809--mobile{--wds-page-header-padding-horizontal:0}.CollectionPage1784785809__root.CollectionPage1784785809--panel{overflow:hidden;position:relative}.CollectionTable778321010__root td{vertical-align:middle}.CollectionTable778321010__root.CollectionTable778321010--mobile td:first-child{padding-left:18px}.CollectionTable778321010__root.CollectionTable778321010--mobile td:last-child{padding-right:18px}.CollectionToolbar2288000066__left{min-width:0}.CollectionToolbar2288000066__root.CollectionToolbar2288000066--views .CollectionToolbar2288000066__left{flex-shrink:1;flex-grow:0}.CollectionToolbar2288000066__left.CollectionToolbar2288000066--expandable{flex:auto}.CollectionToolbar2288000066__root .CollectionToolbar2288000066__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar2288000066__root.CollectionToolbar2288000066--views .CollectionToolbar2288000066__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar2288000066__root .CollectionToolbar2288000066__right.CollectionToolbar2288000066__fullWidth{margin-inline-start:0!important}.CollectionToolbar2288000066__root.CollectionToolbar2288000066--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter31768171__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter31768171__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly1950532632__root.AutoCompleteReadonly1950532632--disableEditing{cursor:pointer}.AutoCompleteReadonly1950532632__root.AutoCompleteReadonly1950532632--disableEditing input{cursor:pointer}.ViewsDropdown2056090890__root{width:200px}.DragHandle305149819__root{display:flex;align-items:center}.DragHandle305149819__root:not(.DragHandle305149819--disabled){cursor:grab;color:#a8caff}.DragHandle305149819__root.DragHandle305149819--disabled{color:#acafc4}.DragHandle305149819__root:focus-visible:not(.DragHandle305149819--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle305149819__root.DragHandle305149819--disabled{pointer-events:none}.DragHandle305149819__root.DragHandle305149819--dragging:not(.DragHandle305149819--disabled){cursor:grabbing}.EntityPagePlain3894158853__root.EntityPagePlain3894158853--mobile{--wds-page-header-padding-horizontal:0}.Fade4203216806__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade4203216806__root.Fade4203216806--exit{opacity:0}.Heading2809978935__root{visibility:visible}.Heading2809978935__root.Heading2809978935--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow928118142__root.InputOverflow928118142--selected:not(.InputOverflow928118142--focused) input::placeholder{color:#000624}@keyframes LoadingRow3099536617__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%}}.LoadingRow3099536617__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:LoadingRow3099536617__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2441333951__root{opacity:1}.MaxHeightText2441333951__root.MaxHeightText2441333951--height24{line-height:24px}.MaxLines2096801093__root{overflow:hidden}.MaxLines2096801093__root.MaxLines2096801093--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar41114521__root{min-width:0}.NestedTablePlaceholderStatesRow4155473347__root td{padding:0!important;width:100%}.NestedTableRow3015097819__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3015097819__root:hover{background-color:#e7f0ff!important}.NestedTableRow3015097819__root.NestedTableRow3015097819--expandable{cursor:pointer}.NestedTableRow3015097819__placeholder td{padding:0!important;width:100%}.NestedTableRow3015097819__root:hover td:first-of-type::before,.NestedTableRow3015097819__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2605786322__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)}.NestedTableDragAndDropRow3988653739__root.NestedTableDragAndDropRow3988653739--draggingInto td{background-color:#e7f0ff!important}.PickerContent2907266792__root{display:flex}.PickerContentAdditionalStep4143737529__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep4143737529__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem40186777__root{box-sizing:border-box}.ScrollableContent2473117578__root.ScrollableContent2473117578--overflowY{overflow-y:auto}.ScrollableContent2473117578__root.ScrollableContent2473117578--overflowX{overflow-x:auto}.ScrollableContent2473117578__root.ScrollableContent2473117578--smooth{scroll-behavior:smooth}.SkeletonCard1311051008__headerLoading{display:block!important}.SlidingModal1570570871__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal1570570871__root.SlidingModal1570570871---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal1570570871__root:not(.SlidingModal1570570871--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter1868749252__root .TabsFilter1868749252__title{color:inherit!important}.ManageTagsModal164861197__root{display:flex}.ToolbarItem2628239786__root{min-width:0}.ToolbarItemBox3007881056__root{min-width:0}.ToolbarItemBox3007881056__root.ToolbarItemBox3007881056--removeStartPadding{margin-left:-24px}.ToolbarItemBox3007881056__root.ToolbarItemBox3007881056--expandable{flex:1 0}.common290980636__column{display:flex;flex-direction:column}.common290980636__fullHeight{height:100%;min-height:0}.CollectionPageHeader1787965736__root.CollectionPageHeader1787965736--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader1787965736__root.CollectionPageHeader1787965736--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2615991829__root.FormPageHeader2615991829--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2615991829__root.FormPageHeader2615991829--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer1533614429__root.CardContainer1533614429--mobile{border-radius:0}.Collapse3056894182__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3056894182__exit{height:0}.CollectionPage2921615897__root.CollectionPage2921615897--mobile{--wds-page-header-padding-horizontal:0}.CollectionPage2921615897__root.CollectionPage2921615897--panel{overflow:hidden;position:relative}.CollectionTable303338115__root td{vertical-align:middle}.CollectionTable303338115__root.CollectionTable303338115--mobile td:first-child{padding-left:18px}.CollectionTable303338115__root.CollectionTable303338115--mobile td:last-child{padding-right:18px}.CollectionToolbar1530227450__left{min-width:0}.CollectionToolbar1530227450__root.CollectionToolbar1530227450--views .CollectionToolbar1530227450__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1530227450__left.CollectionToolbar1530227450--expandable{flex:auto}.CollectionToolbar1530227450__root .CollectionToolbar1530227450__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1530227450__root.CollectionToolbar1530227450--views .CollectionToolbar1530227450__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1530227450__root .CollectionToolbar1530227450__right.CollectionToolbar1530227450__fullWidth{margin-inline-start:0!important}.CollectionToolbar1530227450__root.CollectionToolbar1530227450--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter3044096710__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter3044096710__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly134903242__root.AutoCompleteReadonly134903242--disableEditing{cursor:pointer}.AutoCompleteReadonly134903242__root.AutoCompleteReadonly134903242--disableEditing input{cursor:pointer}.ViewsDropdown1422600001__root{width:200px}.DragHandle1607244629__root{display:flex;align-items:center}.DragHandle1607244629__root:not(.DragHandle1607244629--disabled){cursor:grab;color:#a8caff}.DragHandle1607244629__root.DragHandle1607244629--disabled{color:#acafc4}.DragHandle1607244629__root:focus-visible:not(.DragHandle1607244629--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1607244629__root.DragHandle1607244629--disabled{pointer-events:none}.DragHandle1607244629__root.DragHandle1607244629--dragging:not(.DragHandle1607244629--disabled){cursor:grabbing}.EntityPagePlain16109115__root.EntityPagePlain16109115--mobile{--wds-page-header-padding-horizontal:0}.Fade2992559165__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade2992559165__root.Fade2992559165--exit{opacity:0}.Heading1120633556__root{visibility:visible}.Heading1120633556__root.Heading1120633556--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow2245001799__root.InputOverflow2245001799--selected:not(.InputOverflow2245001799--focused) input::placeholder{color:#000624}@keyframes LoadingRow3834663879__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%}}.LoadingRow3834663879__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:LoadingRow3834663879__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText1729367997__root{opacity:1}.MaxHeightText1729367997__root.MaxHeightText1729367997--height24{line-height:24px}.MaxLines488172259__root{overflow:hidden}.MaxLines488172259__root.MaxLines488172259--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar1490509622__root{min-width:0}.NestedTablePlaceholderStatesRow769400213__root td{padding:0!important;width:100%}.NestedTableRow2118793308__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow2118793308__root:hover{background-color:#e7f0ff!important}.NestedTableRow2118793308__root.NestedTableRow2118793308--expandable{cursor:pointer}.NestedTableRow2118793308__placeholder td{padding:0!important;width:100%}.NestedTableRow2118793308__root:hover td:first-of-type::before,.NestedTableRow2118793308__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect4122007971__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)}.NestedTableDragAndDropRow181099194__root.NestedTableDragAndDropRow181099194--draggingInto td{background-color:#e7f0ff!important}.PickerContent3504984760__root{display:flex}.PickerContentAdditionalStep1189268519__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1189268519__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1584968065__root{box-sizing:border-box}.ScrollableContent3332581126__root.ScrollableContent3332581126--overflowY{overflow-y:auto}.ScrollableContent3332581126__root.ScrollableContent3332581126--overflowX{overflow-x:auto}.ScrollableContent3332581126__root.ScrollableContent3332581126--smooth{scroll-behavior:smooth}.SkeletonCard2541974173__headerLoading{display:block!important}.SlidingModal2762879947__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2762879947__root.SlidingModal2762879947---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal2762879947__root:not(.SlidingModal2762879947--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter4020414784__root .TabsFilter4020414784__title{color:inherit!important}.ManageTagsModal1128705442__root{display:flex}.ToolbarItem3568687689__root{min-width:0}.ToolbarItemBox249779595__root{min-width:0}.ToolbarItemBox249779595__root.ToolbarItemBox249779595--removeStartPadding{margin-left:-24px}.ToolbarItemBox249779595__root.ToolbarItemBox249779595--expandable{flex:1 0}.common3727155085__column{display:flex;flex-direction:column}.common3727155085__fullHeight{height:100%;min-height:0}.CollectionPageHeader2587369503__root.CollectionPageHeader2587369503--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2587369503__root.CollectionPageHeader2587369503--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2837057717__root.FormPageHeader2837057717--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2837057717__root.FormPageHeader2837057717--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.277.0';
+export const version = 'patterns@1.278.0';

package/src/wix-design-system-version.ts

@@ -1 +1 @@
-export const required = '^1.121.0';
+export const required = '^1.217.0';