@wix/patterns 1.276.0 → 1.278.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem3103346507";
+var _namespace_ = "ToolbarItem3568687689";
 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":"ToolbarItem3103346507__root"};
+export var classes = {"root":"ToolbarItem3568687689__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItemBox3434270811";
+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":"ToolbarItemBox3434270811__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_ = "common1202472231";
+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":"common1202472231__root","column":"common1202472231__column","fullHeight":"common1202472231__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_ = "CollectionPageHeader212225933";
+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":"CollectionPageHeader212225933__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_ = "FormPageHeader2764997865";
+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":"FormPageHeader2764997865__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 @@
-.CardContainer1617995258__root.CardContainer1617995258--mobile{border-radius:0}.Collapse869299777__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse869299777__exit{height:0}.CollectionPage2695218142__root.CollectionPage2695218142--mobile{--wds-page-header-padding-horizontal:0}.CollectionPage2695218142__root.CollectionPage2695218142--panel{overflow:hidden;position:relative}.CollectionTable1532046273__root td{vertical-align:middle}.CollectionTable1532046273__root.CollectionTable1532046273--mobile td:first-child{padding-left:18px}.CollectionTable1532046273__root.CollectionTable1532046273--mobile td:last-child{padding-right:18px}.CollectionToolbar1016017639__left{min-width:0}.CollectionToolbar1016017639__root.CollectionToolbar1016017639--views .CollectionToolbar1016017639__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1016017639__left.CollectionToolbar1016017639--expandable{flex:auto}.CollectionToolbar1016017639__root .CollectionToolbar1016017639__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1016017639__root.CollectionToolbar1016017639--views .CollectionToolbar1016017639__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1016017639__root .CollectionToolbar1016017639__right.CollectionToolbar1016017639__fullWidth{margin-inline-start:0!important}.CollectionToolbar1016017639__root.CollectionToolbar1016017639--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter2024201148__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter2024201148__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly816294878__root.AutoCompleteReadonly816294878--disableEditing{cursor:pointer}.AutoCompleteReadonly816294878__root.AutoCompleteReadonly816294878--disableEditing input{cursor:pointer}.ViewsDropdown2076102972__root{width:200px}.DragHandle856334160__root{display:flex;align-items:center}.DragHandle856334160__root:not(.DragHandle856334160--disabled){cursor:grab;color:#a8caff}.DragHandle856334160__root.DragHandle856334160--disabled{color:#acafc4}.DragHandle856334160__root:focus-visible:not(.DragHandle856334160--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle856334160__root.DragHandle856334160--disabled{pointer-events:none}.DragHandle856334160__root.DragHandle856334160--dragging:not(.DragHandle856334160--disabled){cursor:grabbing}.EntityPagePlain2211584579__root.EntityPagePlain2211584579--mobile{--wds-page-header-padding-horizontal:0}.Fade4244410800__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade4244410800__root.Fade4244410800--exit{opacity:0}.Heading3300302847__root{visibility:visible}.Heading3300302847__root.Heading3300302847--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow470916784__root.InputOverflow470916784--selected:not(.InputOverflow470916784--focused) input::placeholder{color:#000624}@keyframes LoadingRow3542635232__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%}}.LoadingRow3542635232__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:LoadingRow3542635232__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText192018246__root{opacity:1}.MaxHeightText192018246__root.MaxHeightText192018246--height24{line-height:24px}.MaxLines3912780278__root{overflow:hidden}.MaxLines3912780278__root.MaxLines3912780278--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar2938014388__root{min-width:0}.NestedTablePlaceholderStatesRow2776751933__root td{padding:0!important;width:100%}.NestedTableRow4112368320__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow4112368320__root:hover{background-color:#e7f0ff!important}.NestedTableRow4112368320__root.NestedTableRow4112368320--expandable{cursor:pointer}.NestedTableRow4112368320__placeholder td{padding:0!important;width:100%}.NestedTableRow4112368320__root:hover td:first-of-type::before,.NestedTableRow4112368320__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1792466980__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)}.NestedTableDragAndDropRow1379263467__root.NestedTableDragAndDropRow1379263467--draggingInto td{background-color:#e7f0ff!important}.PickerContent1528018006__root{display:flex}.PickerContentAdditionalStep3744330275__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3744330275__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1285752877__root{box-sizing:border-box}.ScrollableContent2982600912__root.ScrollableContent2982600912--overflowY{overflow-y:auto}.ScrollableContent2982600912__root.ScrollableContent2982600912--overflowX{overflow-x:auto}.ScrollableContent2982600912__root.ScrollableContent2982600912--smooth{scroll-behavior:smooth}.SkeletonCard2523295022__headerLoading{display:block!important}.SlidingModal3597319599__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3597319599__root.SlidingModal3597319599---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal3597319599__root:not(.SlidingModal3597319599--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2185831622__root .TabsFilter2185831622__title{color:inherit!important}.ManageTagsModal1233099008__root{display:flex}.ToolbarItem3103346507__root{min-width:0}.ToolbarItemBox3434270811__root{min-width:0}.ToolbarItemBox3434270811__root.ToolbarItemBox3434270811--removeStartPadding{margin-left:-24px}.ToolbarItemBox3434270811__root.ToolbarItemBox3434270811--expandable{flex:1 0}.common1202472231__column{display:flex;flex-direction:column}.common1202472231__fullHeight{height:100%;min-height:0}.CollectionPageHeader212225933__root.CollectionPageHeader212225933--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader212225933__root.CollectionPageHeader212225933--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2764997865__root.FormPageHeader2764997865--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2764997865__root.FormPageHeader2764997865--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.276.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';