@wix/patterns 1.409.0 → 1.411.0

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1579238315";
+var _namespace_ = "PickerContentAdditionalStep1711655352";
 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":"PickerContentAdditionalStep1579238315__root","titles":"PickerContentAdditionalStep1579238315__titles","suffix":"PickerContentAdditionalStep1579238315__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1711655352__root","titles":"PickerContentAdditionalStep1711655352__titles","suffix":"PickerContentAdditionalStep1711655352__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard2172099416";
+var _namespace_ = "SkeletonCard704587200";
 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":"SkeletonCard2172099416__root","headerLoading":"SkeletonCard2172099416__headerLoading"};
+export var classes = {"root":"SkeletonCard704587200__root","headerLoading":"SkeletonCard704587200__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter3103961942";
+var _namespace_ = "TabsFilter1587238114";
 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":"TabsFilter3103961942__root","title":"TabsFilter3103961942__title"};
+export var classes = {"root":"TabsFilter1587238114__root","title":"TabsFilter1587238114__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal1787385461";
+var _namespace_ = "ManageTagsModal235810238";
 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":"ManageTagsModal1787385461__root"};
+export var classes = {"root":"ManageTagsModal235810238__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem134099359";
+var _namespace_ = "ToolbarItem4255369492";
 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":"ToolbarItem134099359__root"};
+export var classes = {"root":"ToolbarItem4255369492__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_ = "ToolbarItemBox182709589";
+var _namespace_ = "ToolbarItemBox1832900494";
 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":"ToolbarItemBox182709589__root"};
+export var classes = {"root":"ToolbarItemBox1832900494__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_ = "common2479345232";
+var _namespace_ = "common201821206";
 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":"common2479345232__root","column":"common2479345232__column","fullHeight":"common2479345232__fullHeight"};
+export var classes = {"root":"common201821206__root","column":"common201821206__column","fullHeight":"common201821206__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/dashboard/WixPatternsDashboardBaseProvider.tsx

@@ -25,6 +25,7 @@ interface WixPatternsProviderPrivateProps extends WixPatternsProviderProps {
     | 'showToast'
     | 'navigate'
     | 'onBeforeUnload'
+    | 'onLayerStateChange'
     | 'getDashboardMenuPlugins'
     | 'getDashboardPlugins'
     | 'openMediaManager'
@@ -81,10 +82,16 @@ export function WixPatternsDashboardBaseProvider({
       useTranslation,
       showToast: showToastCompat(dashboard.showToast),
       usePageLocation,
-      navigateTo: ({ pageId = pageLocation.pageId, relativeUrl }) =>
-        dashboard.navigate({ pageId, relativeUrl }),
+      navigateTo: ({
+        pageId = pageLocation.pageId,
+        relativeUrl,
+        displayMode,
+        history,
+      }) =>
+        dashboard.navigate({ pageId, relativeUrl }, { displayMode, history }),
       onSidePanelOpen: undefined, // missing in dashboard-sdk
       onBeforeUnload: dashboard.onBeforeUnload,
+      onLayerStateChange: dashboard.onLayerStateChange,
       openMediaManager: dashboard.openMediaManager,
       closeSidePanel: undefined, // missing in dashboard-sdk
       getHostContainer: getHostContainerCompat(

package/src/giza/WixPatternsGizaProvider.tsx

@@ -33,12 +33,22 @@ export function WixPatternsGizaProvider(props: WixPatternsGizaProviderProps) {
   const [wixPatternsEssentialsOverrides] = useState(
     (): Partial<WixPatternsEssentialsOverrides> => ({
       usePageLocation,
-      navigateTo: ({ pageId, appState, referrer, relativeUrl }) => {
-        navigateTo({
-          pageId,
-          appState: appState || relativeUrl,
-          referrer,
-        });
+      navigateTo: ({
+        pageId,
+        appState,
+        referrer,
+        relativeUrl,
+        displayMode,
+        history,
+      }) => {
+        navigateTo(
+          {
+            pageId,
+            appState: appState || relativeUrl,
+            referrer,
+          },
+          { displayMode, history },
+        );
       },
       getHostContainer,
       showToast: showToastCompat(showToast),

package/src/hooks/useCollectionTableResize.ts

@@ -18,8 +18,6 @@ export function useCollectionTableResize({
   isVirtualized?: boolean;
   forceResize?: boolean;
 }) {
-  const experimentEnabled =
-    columnSizesState?.isResizeExperimentEnabled ?? false;
   const isMobile = useIsMobile();
 
   const areAllColumnsPixelWidth = useMemo(
@@ -29,8 +27,7 @@ export function useCollectionTableResize({
 
   const isResizable =
     forceResize ||
-    (experimentEnabled &&
-      !isMobile &&
+    (!isMobile &&
       !isVirtualized &&
       !!horizontalScroll &&
       areAllColumnsPixelWidth);

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

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

package/src/state/CollectionViewsQueryCompareHelper.ts

@@ -4,6 +4,7 @@ import {
   setViewSelectedColumnsForLayout,
   ViewBase,
   ViewFiltersValues,
+  ViewType,
 } from '../model';
 import isEqual from 'lodash/isEqual';
 import { FiltersMap } from '@wix/bex-core';
@@ -159,6 +160,14 @@ export class CollectionViewsQueryCompareHelper<T, F extends FiltersMap> {
       sortDirections: this.viewBaseSortDirections,
     };
     setViewSelectedColumnsForLayout(base, layout, this.viewBaseSelectedColumns);
+    // Persist a cached edit on the other slot so save doesn't drop divergence
+    // made on the inactive layout.
+    const otherLayout: ViewType =
+      layout === 'spreadsheet' ? 'table' : 'spreadsheet';
+    const cachedOther = this.table._layoutColumnsCache[otherLayout];
+    if (cachedOther) {
+      setViewSelectedColumnsForLayout(base, otherLayout, cachedOther);
+    }
     if (layout) {
       base.layout = layout;
     }

package/src/state/CollectionViewsState.ts

@@ -187,6 +187,9 @@ export class CollectionViewsState<T, F extends FiltersMap> {
           if (!newLayout || !prevLayout || newLayout === prevLayout) {
             return;
           }
+          if (this.table._cacheRestoredLayout === newLayout) {
+            return;
+          }
           if (!this.views.currentView) {
             return;
           }
@@ -293,12 +296,17 @@ export class CollectionViewsState<T, F extends FiltersMap> {
     const { query } = collection;
     // Layout must settle first — _setSelectedViewToCollectionQuery reads layout-aware columns.
     if (this.table.layoutState && currentView?.layout) {
+      if (currentView.layout !== this.table.layoutState.viewType) {
+        this.table._skipNextLayoutCoordinator = true;
+      }
       this.table.layoutState.viewType = currentView.layout;
     }
     this._setSelectedViewToCollectionQuery();
     query.queryHistory?.persistAll();
 
     query.events.emit('refresh');
+    // A view selection is a clean reset of column config for every layout.
+    this.table._clearColumnsCache();
   }
 
   get currentViewColumns() {
@@ -409,6 +417,8 @@ export class CollectionViewsState<T, F extends FiltersMap> {
       this.onSaveViewChanges?.(newView);
       this.viewsStateBIReporter.saveViewChangesBI(newView, oldView);
     }
+    // Every cached layout was just flushed into the saved view by currentViewBase.
+    this.table._clearColumnsCache();
   }
 
   sendSaveNewViewSelectedBI() {
@@ -427,6 +437,9 @@ export class CollectionViewsState<T, F extends FiltersMap> {
       });
       this.onSaveView?.(newView);
       this.viewsStateBIReporter.saveNewViewBI(newView);
+      // The persisted baseline now matches every cached layout (currentViewBase
+      // flushed each one into the saved view), so the whole cache is stale.
+      this.table._clearColumnsCache();
     } catch (err) {
       throw new WixPatternsError({
         errorCode: 'SaveViewFailed',

package/src/state/ColumnSizesState.ts

@@ -13,16 +13,11 @@ 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,
@@ -32,15 +27,10 @@ export class ColumnSizesState {
 
     makeObservable(this, {
       columnWidths: observable.ref,
-      isResizeExperimentEnabled: observable,
     });
   }
 
   init() {
-    if (!this.isResizeExperimentEnabled) {
-      return;
-    }
-
     this.initTask.runOnce(async () => {
       const data = await this.columnSizeService.fetchColumnSizes();
       runInAction(() => {
@@ -50,10 +40,6 @@ export class ColumnSizesState {
   }
 
   mergeSizes(baseColumns: Column[]) {
-    if (!this.isResizeExperimentEnabled) {
-      return baseColumns;
-    }
-
     const merged = baseColumns.map((column) => {
       const persistedWidth = column.id
         ? this.columnWidths?.[column.id]

package/src/state/CustomColumnsHistoryState.ts

@@ -121,6 +121,9 @@ export class CustomColumnsHistoryState {
           if (!newLayout || !prevLayout || newLayout === prevLayout) {
             return;
           }
+          if (this.customColumns.table._cacheRestoredLayout === newLayout) {
+            return;
+          }
           // Views path is handled by CollectionViewsState's own reaction.
           if (this.customColumns.table.viewsProps) {
             return;

package/src/state/CustomColumnsState.ts

@@ -352,6 +352,9 @@ export class CustomColumnsState<
           if (!newLayout || !prevLayout || newLayout === prevLayout) {
             return;
           }
+          if (this.table._cacheRestoredLayout === newLayout) {
+            return;
+          }
           // Views path is handled by CollectionViewsState's own reaction.
           if (this.table.viewsProps) {
             return;

package/src/state/EditableTable/EditableTableState.ts

@@ -182,6 +182,10 @@ export class EditableTableState<T, F extends FiltersMap>
     return this.tableState.onAddItemActionComplete(items);
   };
 
+  onAddItemClick = (origin?: string) => {
+    this.toolbar.toolbarBIReporter.onAddItemClick(origin);
+  };
+
   get editableColumns(): EditableColumn<T>[] {
     const visibleIds = this.visibleColumns.map((c) => c.id);
     if (!visibleIds.length) {

package/src/state/EditableTable/types.ts

@@ -6,6 +6,7 @@ import type { AddressCellTypeConfig } from '../../components/EditableTable/cellT
 import type {
   CellViewProps,
   CellEditProps,
+  CellEditWrapperProps,
 } from '../../components/EditableTable/types';
 
 export interface RichTextCellTypeConfig {
@@ -75,6 +76,13 @@ export interface CellType {
    *  Keyboard navigation remains active. Similar to toggleValue but without toggling. */
   showEditWhenFocused?: boolean;
 
+  /** Optional wrapper component the cell type defines to own behavior that must
+   *  outlive the inline editor. EditableCell mounts it around the cell content
+   *  and keeps it mounted across the edit↔view transition (e.g. a reference cell
+   *  navigating to an overlay and refreshing the table on return). The wrapper
+   *  hands anything the editor needs down via its own context. */
+  EditWrapper?: ComponentType<CellEditWrapperProps>;
+
   /** Called on type-to-edit. Return object with cleared value and/or prevent flag.
    *  CMS-web pattern: text clears to '', number clears only for digits, date blocks non-digits.
    *  Return undefined to block the key. Return {} to enter edit mode without changing the value. */
@@ -110,6 +118,7 @@ export interface CellTypeConfigMap {
   document: never;
   richContent: never;
   video: never;
+  audio: never;
   richText: RichTextCellTypeConfig;
   mediaGallery: never;
   reference: ReferenceTypeConfig;

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

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

package/src/state/ToolbarCollectionState.ts

@@ -43,6 +43,7 @@ import type {
 import type { AppliedFiltersTagListState } from '../components/AppliedFiltersTagList/AppliedFiltersTagListState';
 import { ToolbarFeatureInitializer } from './toolbarFeatureInitializer';
 import { simplifyColumn, simplifyColumns } from './simplifyColumns';
+import { indexOfCompareFn } from './indexOfCompareFn';
 import type { CollectionViewsState } from './CollectionViewsState';
 import { ReactElement } from 'react';
 import { ToolbarBIReporter } from './ToolbarBIReporter';
@@ -178,6 +179,16 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
   tabs?: TabsFilterState<T, F>;
   layoutState?: LayoutState;
 
+  // Per-layout in-memory scratchpad of uncommitted column edits.
+  _layoutColumnsCache: Partial<
+    Record<ViewType, { id: string; isSelected: boolean }[]>
+  > = {};
+  // Set by the coordinator on cache-hit so per-flow reactions skip the same transition.
+  _cacheRestoredLayout?: ViewType;
+  // Set by `_onSelectViewAndRefresh` when a view-select changes layout, so the coordinator
+  // skips flush/restore — the view-select already loaded the correct columns.
+  _skipNextLayoutCoordinator = false;
+
   _searchExpanded = false;
 
   forceRenderIndexes: number[] | undefined = undefined;
@@ -611,6 +622,26 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
     this._initDefaultSortableColumn(hasMultiLevelSorting);
 
     const disposers = [
+      // Must be registered before the per-flow layout reactions so the
+      // `_cacheRestoredLayout` gate they read is set first (mobx fires
+      // reactions in creation order).
+      reaction(
+        () => this.layoutState?.viewType,
+        (next, prev) => {
+          if (!next || !prev || next === prev) {
+            return;
+          }
+          if (this._skipNextLayoutCoordinator) {
+            this._skipNextLayoutCoordinator = false;
+            this._cacheRestoredLayout = next;
+            return;
+          }
+          this._flushColumnsToCache(prev);
+          this._cacheRestoredLayout = this._tryRestoreColumnsFromCache(next)
+            ? next
+            : undefined;
+        },
+      ),
       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(),
@@ -823,6 +854,44 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
     }
   };
 
+  _flushColumnsToCache(layout: ViewType) {
+    this._layoutColumnsCache[layout] = this.selectedColumns.value.map(
+      ({ id, isSelected }) => ({ id, isSelected }),
+    );
+  }
+
+  _tryRestoreColumnsFromCache(layout: ViewType): boolean {
+    const cached = this._layoutColumnsCache[layout];
+    if (!cached) {
+      return false;
+    }
+    // Merge against current columns — mirrors `_fetchFromStorage`.
+    const merged = this.columns.map((column) => {
+      const cachedEntry = cached.find((c) => c.id === column.id);
+      if (cachedEntry == null) {
+        return this._toStoredColumn(column);
+      }
+      const { id, hideable, hiddenFromCustomColumnsSelection } = column;
+      return {
+        id,
+        isSelected:
+          cachedEntry.isSelected ||
+          !hideable ||
+          hiddenFromCustomColumnsSelection === true,
+      };
+    });
+    this.selectedColumns.setValue(
+      this.customColumnsState?.dragAndDrop
+        ? merged.sort(indexOfCompareFn(cached, (e) => e?.id))
+        : merged,
+    );
+    return true;
+  }
+
+  _clearColumnsCache() {
+    this._layoutColumnsCache = {};
+  }
+
   _adjustSortWithNewColumns(tableColumns: TableColumn<T>[]) {
     const {
       collection: { query },