@wix/patterns 1.408.0 → 1.410.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep4247430293";
+var _namespace_ = "PickerContentAdditionalStep1971965885";
 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":"PickerContentAdditionalStep4247430293__root","titles":"PickerContentAdditionalStep4247430293__titles","suffix":"PickerContentAdditionalStep4247430293__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1971965885__root","titles":"PickerContentAdditionalStep1971965885__titles","suffix":"PickerContentAdditionalStep1971965885__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_ = "PickerTableListItem4219872913";
+var _namespace_ = "PickerTableListItem4072182285";
 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":"PickerTableListItem4219872913__root"};
+export var classes = {"root":"PickerTableListItem4072182285__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_ = "ScrollableContent3411013374";
+var _namespace_ = "ScrollableContent1681270320";
 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":"ScrollableContent3411013374__root"};
+export var classes = {"root":"ScrollableContent1681270320__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_ = "SkeletonCard2405288583";
+var _namespace_ = "SkeletonCard3903971855";
 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":"SkeletonCard2405288583__root","headerLoading":"SkeletonCard2405288583__headerLoading"};
+export var classes = {"root":"SkeletonCard3903971855__root","headerLoading":"SkeletonCard3903971855__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_ = "SlidingModal82913432";
+var _namespace_ = "SlidingModal2579078869";
 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":"SlidingModal82913432__root"};
+export var classes = {"root":"SlidingModal2579078869__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_ = "TabsFilter930975424";
+var _namespace_ = "TabsFilter2144118702";
 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":"TabsFilter930975424__root","title":"TabsFilter930975424__title"};
+export var classes = {"root":"TabsFilter2144118702__root","title":"TabsFilter2144118702__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_ = "ManageTagsModal416008325";
+var _namespace_ = "ManageTagsModal252756386";
 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":"ManageTagsModal416008325__root"};
+export var classes = {"root":"ManageTagsModal252756386__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_ = "ToolbarItem405484805";
+var _namespace_ = "ToolbarItem2130246212";
 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":"ToolbarItem405484805__root"};
+export var classes = {"root":"ToolbarItem2130246212__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_ = "ToolbarItemBox3042868621";
+var _namespace_ = "ToolbarItemBox1264806043";
 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":"ToolbarItemBox3042868621__root"};
+export var classes = {"root":"ToolbarItemBox1264806043__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_ = "common1090625813";
+var _namespace_ = "common400510115";
 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":"common1090625813__root","column":"common1090625813__column","fullHeight":"common1090625813__fullHeight"};
+export var classes = {"root":"common400510115__root","column":"common400510115__column","fullHeight":"common400510115__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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/hooks/useIsMobile.ts

@@ -1,10 +1 @@
-import { usePageContext } from '@wix/bex-core/react';
-import { useSelector } from '../useSelector';
-
-// CAIRO-3582: modify mobile detection to use user agent
-// export { MOBILE_BREAKPOINT } from '@wix/bex-core';
-
-export const useIsMobile = () => {
-  const pageState = usePageContext();
-  return useSelector(() => pageState.isMobile);
-};
+export { useIsMobile } from '@wix/bex-core/react';

package/src/model/view.ts

@@ -65,10 +65,20 @@ export interface ViewBase<F extends FiltersMap> {
   filters?: Partial<ViewFiltersValues<AllFilters<F>>> | null;
   orderedColumns?: ColumnViewConfig[];
   /**
-   * Array of the selected columns.
+   * Array of the selected columns for the table layout.
    * @external
    */
   selectedColumns?: ColumnViewConfig[];
+  /**
+   * Array of the selected columns for the spreadsheet (EditableTable) layout.
+   * @external
+   */
+  spreadsheetSelectedColumns?: ColumnViewConfig[];
+  /**
+   * Ordered columns for the spreadsheet (EditableTable) layout.
+   * @external
+   */
+  spreadsheetOrderedColumns?: ColumnViewConfig[];
   /**
    * Array of sort directions.
    * @external
@@ -81,6 +91,26 @@ export interface ViewBase<F extends FiltersMap> {
   layout?: ViewType;
 }
 
+export const getViewSelectedColumnsForLayout = <F extends FiltersMap>(
+  view: ViewBase<F> | null | undefined,
+  layout: ViewType | undefined,
+): ColumnViewConfig[] | undefined =>
+  layout === 'spreadsheet'
+    ? view?.spreadsheetSelectedColumns
+    : view?.selectedColumns;
+
+export const setViewSelectedColumnsForLayout = <F extends FiltersMap>(
+  target: Partial<ViewBase<F>>,
+  layout: ViewType | undefined,
+  columns: ColumnViewConfig[] | undefined,
+): void => {
+  if (layout === 'spreadsheet') {
+    target.spreadsheetSelectedColumns = columns;
+  } else {
+    target.selectedColumns = columns;
+  }
+};
+
 export interface View<F extends FiltersMap> extends ViewBase<F> {
   /**
    * Unique identifier. Do not use category IDs, `saved-views`, or `predefined-views`.

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

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

package/src/state/CollectionViewsQueryCompareHelper.ts

@@ -1,6 +1,7 @@
 import {
   ColumnSortConfig,
   ColumnViewConfig,
+  setViewSelectedColumnsForLayout,
   ViewBase,
   ViewFiltersValues,
 } from '../model';
@@ -156,8 +157,8 @@ export class CollectionViewsQueryCompareHelper<T, F extends FiltersMap> {
     const base: ViewBase<F> = {
       filters: this.viewBaseFilters,
       sortDirections: this.viewBaseSortDirections,
-      selectedColumns: this.viewBaseSelectedColumns,
     };
+    setViewSelectedColumnsForLayout(base, layout, this.viewBaseSelectedColumns);
     if (layout) {
       base.layout = layout;
     }

package/src/state/CollectionViewsState.ts

@@ -8,10 +8,11 @@ import {
 } from '@wix/bex-core';
 import { ViewsState } from './ViewsState';
 import { ViewsProps } from '../index';
-import { action, computed, makeObservable, runInAction } from 'mobx';
+import { action, computed, makeObservable, reaction, runInAction } from 'mobx';
 import {
   AllItemsViewProps,
   Category,
+  getViewSelectedColumnsForLayout,
   PrivateView,
   View,
   ViewType,
@@ -180,6 +181,23 @@ export class CollectionViewsState<T, F extends FiltersMap> {
         views: this.views,
         history,
       }).init(),
+      reaction(
+        () => this.table.layoutState?.viewType,
+        (newLayout, prevLayout) => {
+          if (!newLayout || !prevLayout || newLayout === prevLayout) {
+            return;
+          }
+          if (!this.views.currentView) {
+            return;
+          }
+          const cols = this.currentViewColumns;
+          if (cols) {
+            this.table.selectedColumns.setValue(cols);
+          } else {
+            this.table.selectedColumns.reset();
+          }
+        },
+      ),
     ];
 
     initTask.runOnce(async () => {
@@ -273,11 +291,12 @@ export class CollectionViewsState<T, F extends FiltersMap> {
       views: { currentView },
     } = this;
     const { query } = collection;
-    this._setSelectedViewToCollectionQuery();
-    query.queryHistory?.persistAll();
+    // Layout must settle first — _setSelectedViewToCollectionQuery reads layout-aware columns.
     if (this.table.layoutState && currentView?.layout) {
       this.table.layoutState.viewType = currentView.layout;
     }
+    this._setSelectedViewToCollectionQuery();
+    query.queryHistory?.persistAll();
 
     query.events.emit('refresh');
   }
@@ -286,7 +305,10 @@ export class CollectionViewsState<T, F extends FiltersMap> {
     const { views, table } = this;
     const { columns, customColumnsState } = table;
     const { currentView } = views;
-    const viewSelectedColumns = currentView?.selectedColumns;
+    const viewSelectedColumns = getViewSelectedColumnsForLayout(
+      currentView,
+      this.getLayout(),
+    );
 
     if (!viewSelectedColumns?.length) {
       return null;

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

@@ -1,6 +1,7 @@
 import { reaction } from 'mobx';
 import { History, replaceSearchParamsWith } from '@wix/bex-core';
 import { CustomColumnsState } from './CustomColumnsState';
+import { ViewType } from '../model';
 
 function parseSelectedColumnsString(selectedColumnsFromUrl: string) {
   return selectedColumnsFromUrl
@@ -16,6 +17,31 @@ function parseSelectedColumnsString(selectedColumnsFromUrl: string) {
     .filter(({ id }) => id);
 }
 
+// Legacy `selectedColumns` stays bound to non-spreadsheet layouts so existing
+// deep links keep their meaning; spreadsheet uses a sibling param.
+const SELECTED_COLUMNS_PARAM = 'selectedColumns';
+const SPREADSHEET_SELECTED_COLUMNS_PARAM = 'spreadsheetSelectedColumns';
+
+const getSelectedColumnsParamForLayout = (
+  layout: ViewType | undefined,
+): string =>
+  layout === 'spreadsheet'
+    ? SPREADSHEET_SELECTED_COLUMNS_PARAM
+    : SELECTED_COLUMNS_PARAM;
+
+const serializeSelectedColumns = (
+  selectedColumns: readonly {
+    id: string;
+    isSelected?: boolean;
+  }[],
+) =>
+  selectedColumns
+    .map(
+      (c) =>
+        `${encodeURIComponent(c.id)}${!c.isSelected ? ' false' : ''}`,
+    )
+    .join(',');
+
 export interface CustomColumnsHistoryStateParams {
   customColumns: CustomColumnsState<any, any>;
   history: History;
@@ -25,7 +51,19 @@ export class CustomColumnsHistoryState {
   readonly customColumns;
   readonly history;
 
-  selectedColumnsSearchParamName = 'selectedColumns';
+  get selectedColumnsSearchParamName(): string {
+    return getSelectedColumnsParamForLayout(
+      this.customColumns.table.layoutState?.viewType,
+    );
+  }
+
+  // Live, per-layout read — unlike `_selectedColumnsFromUrl` (frozen at the
+  // initial layout), this reflects the active layout after a switch so URL
+  // takes precedence over dataCapsule per layout, not just on first load.
+  get hasUrlColumnsForCurrentLayout(): boolean {
+    const params = new URLSearchParams(this.history.location.search);
+    return !!params.get(this.selectedColumnsSearchParamName);
+  }
 
   _selectedColumnsFromUrl?: string | null;
 
@@ -60,21 +98,15 @@ export class CustomColumnsHistoryState {
       reaction(
         () => this.customColumns.table.selectedColumns.value,
         (selectedColumns) => {
+          const paramName = this.selectedColumnsSearchParamName;
           replaceSearchParamsWith(this.history, (searchParams) => {
             if (selectedColumns.length) {
               searchParams.set(
-                this.selectedColumnsSearchParamName,
-                selectedColumns
-                  .map(
-                    (c) =>
-                      `${encodeURIComponent(c.id)}${
-                        !c.isSelected ? ' false' : ''
-                      }`,
-                  )
-                  .join(','),
+                paramName,
+                serializeSelectedColumns(selectedColumns),
               );
             } else {
-              searchParams.delete(this.selectedColumnsSearchParamName);
+              searchParams.delete(paramName);
             }
           });
         },
@@ -83,6 +115,31 @@ export class CustomColumnsHistoryState {
           delay: 250,
         },
       ),
+      reaction(
+        () => this.customColumns.table.layoutState?.viewType,
+        (newLayout, prevLayout) => {
+          if (!newLayout || !prevLayout || newLayout === prevLayout) {
+            return;
+          }
+          // Views path is handled by CollectionViewsState's own reaction.
+          if (this.customColumns.table.viewsProps) {
+            return;
+          }
+          const searchParams = new URLSearchParams(
+            this.history.location.search,
+          );
+          const value = searchParams.get(
+            getSelectedColumnsParamForLayout(newLayout),
+          );
+          if (value) {
+            this.customColumns.table.selectedColumns.setValue(
+              parseSelectedColumnsString(value),
+            );
+          } else {
+            this.customColumns.table.selectedColumns.reset();
+          }
+        },
+      ),
     ];
 
     return () => {

package/src/state/CustomColumnsState.ts

@@ -6,7 +6,7 @@ import {
 } from '@wix/bex-core';
 import { action, computed, makeObservable, reaction } from 'mobx';
 import { ToolbarCollectionState } from './ToolbarCollectionState';
-import { Column } from '../model';
+import { Column, ViewType } from '../model';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
 import { CustomColumnsHistoryState } from './CustomColumnsHistoryState';
 import { indexOfCompareFn } from './indexOfCompareFn';
@@ -32,6 +32,16 @@ type StoredColumn =
   | null
   | undefined;
 
+// Legacy `custom-columns` stays bound to non-spreadsheet layouts so existing
+// stored values keep their meaning; spreadsheet uses a sibling key.
+export const CUSTOM_COLUMNS_KEY = 'custom-columns';
+export const SPREADSHEET_CUSTOM_COLUMNS_KEY = 'spreadsheet-custom-columns';
+
+const getCustomColumnsKeyForLayout = (layout: ViewType | undefined): string =>
+  layout === 'spreadsheet'
+    ? SPREADSHEET_CUSTOM_COLUMNS_KEY
+    : CUSTOM_COLUMNS_KEY;
+
 const asStoredColumnsOrNull = (customColumnsResult: unknown) =>
   Array.isArray(customColumnsResult)
     ? (customColumnsResult as StoredColumn[])
@@ -152,7 +162,10 @@ export class CustomColumnsState<
     }
 
     this._touched = true;
-    await dataCapsule.setItem('custom-columns', table.selectedColumns.value);
+    await dataCapsule.setItem(
+      getCustomColumnsKeyForLayout(table.layoutState?.viewType),
+      table.selectedColumns.value,
+    );
   }
 
   private registerSelectedColumnChange() {
@@ -333,6 +346,24 @@ export class CustomColumnsState<
       this.columnsCollection.init(),
       this.dragAndDrop?.init(),
       this.customColumnsHistory?.init(),
+      reaction(
+        () => this.table.layoutState?.viewType,
+        async (newLayout, prevLayout) => {
+          if (!newLayout || !prevLayout || newLayout === prevLayout) {
+            return;
+          }
+          // Views path is handled by CollectionViewsState's own reaction.
+          if (this.table.viewsProps) {
+            return;
+          }
+          const stored = await this._getStoredCustomColumns();
+          if (stored == null) {
+            this.table.selectedColumns.reset();
+          } else {
+            await this._fetchFromStorage();
+          }
+        },
+      ),
     ];
 
     return () => {
@@ -344,7 +375,9 @@ export class CustomColumnsState<
     const { dataCapsule } = this.table;
     try {
       const storedValue = await asStoredColumnsOrNull(
-        await dataCapsule.getItem('custom-columns'),
+        await dataCapsule.getItem(
+          getCustomColumnsKeyForLayout(this.table.layoutState?.viewType),
+        ),
       );
       this._touched = storedValue != null;
       return storedValue;
@@ -400,7 +433,9 @@ export class CustomColumnsState<
       return;
     }
 
-    if (customColumnsState?.customColumnsHistory?._selectedColumnsFromUrl) {
+    if (
+      customColumnsState?.customColumnsHistory?.hasUrlColumnsForCurrentLayout
+    ) {
       return;
     }
 

package/src/state/EditableTable/types.ts

@@ -2,6 +2,7 @@ import type { ComponentType } from 'react';
 import type { RichTextStyleVariables } from '@wix/patterns-fields';
 import type { TableColumn } from '../../model/tableColumn';
 import type { ReferenceTypeConfig } from '../../components/EditableTable/cellTypes/reference/types';
+import type { AddressCellTypeConfig } from '../../components/EditableTable/cellTypes/address';
 import type {
   CellViewProps,
   CellEditProps,
@@ -112,6 +113,7 @@ export interface CellTypeConfigMap {
   richText: RichTextCellTypeConfig;
   mediaGallery: never;
   reference: ReferenceTypeConfig;
+  address: AddressCellTypeConfig;
   custom: Omit<CellType, 'type'>;
 }
 

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

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

package/src/state/ViewsState.ts

@@ -199,6 +199,10 @@ export class ViewsState<F extends FiltersMap> {
             selectedColumns: allItemsViewProps.selectedColumns,
             sortDirections: allItemsViewProps.sortDirections,
             orderedColumns: allItemsViewProps.orderedColumns,
+            spreadsheetSelectedColumns:
+              allItemsViewProps.spreadsheetSelectedColumns,
+            spreadsheetOrderedColumns:
+              allItemsViewProps.spreadsheetOrderedColumns,
             layout: allItemsViewProps.layout,
           };
           views.unshift(allItemsView);