@wix/patterns 1.378.0 → 1.381.0

package/src/state/CustomColumnsState.ts

@@ -3,6 +3,7 @@ import {
   FiltersMap,
   SelectState,
   TaskState,
+  TransitionState,
   TypedEmitter,
   withoutDefaults,
   WixPatternsContainer,
@@ -14,7 +15,33 @@ import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/Custo
 import { CustomColumnsHistoryState } from './CustomColumnsHistoryState';
 import { indexOfCompareFn } from './indexOfCompareFn';
 import { EventEmitter } from 'events';
-import { cairoCustomizeColumnsInSidePanel } from '@wix/bex-core/bi';
+import {
+  cairoCustomizeColumnsInSidePanel,
+  cairoFiltersPanelUsed,
+} from '@wix/bex-core/bi';
+import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
+import type { CollectionDataExtensionState } from '../components/DataExtension';
+
+export type CustomColumnsPanelState<
+  T = unknown,
+  F extends FiltersMap = FiltersMap,
+> = {
+  readonly columnsCollection: CollectionState<Column, FiltersMap>;
+  readonly searchValue: string;
+  readonly orderedColumns: Column[];
+  readonly dragAndDrop?: CustomColumnsDragAndDropState<T, F>;
+  readonly select: SelectState<{ id: string }>;
+  setSearchValue(value: string): void;
+  onColumnCheckboxToggle(column: Column): void;
+  customizeColumnsInSidePanelBi(params: {
+    actionName: CustomColumnsActionName;
+  }): void;
+  init(): () => void;
+  readonly showFieldTypeIcons: boolean;
+  readonly collectionDataExtension?: CollectionDataExtensionState<T, F> | null;
+  readonly sidePanelTransition?: TransitionState<string>;
+  onClose(): void;
+};
 
 type StoredColumn =
   | { id?: string; name?: string; isSelected?: boolean }
@@ -477,6 +504,29 @@ export class CustomColumnsState<T, F extends FiltersMap> {
     );
   }
 
+  get showFieldTypeIcons() {
+    return this.table.showFieldTypeIcons;
+  }
+
+  get collectionDataExtension() {
+    return this.table.collectionDataExtension;
+  }
+
+  get sidePanelTransition() {
+    return this.table.sidePanel.transition;
+  }
+
+  onClose() {
+    this.table.reportBi(
+      withoutDefaults(cairoFiltersPanelUsed)({
+        isOpened: false,
+        feature: 'Custom Columns',
+        origin: 'X Button',
+      }),
+    );
+    this.table.sidePanel.close();
+  }
+
   get filteredColumns(): Column[] {
     const { orderedColumns, searchValue } = this;
 

package/src/state/EditableTable/CellInteractionState.ts

@@ -3,13 +3,10 @@ import type { Cell, CellBorder } from './types';
 import type { FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
 import { cellKey, parseCellKey, noBorder } from './utils';
+import { EditTrigger } from '../../components/EditableTable/types';
 
 type Direction = 'up' | 'down' | 'left' | 'right';
 type CommitHandler = (editingValue: any, cell: Cell) => void;
-export type EditTrigger =
-  | { kind: 'type'; key: string }
-  | 'enter'
-  | 'doubleClick';
 
 export class CellInteractionState<T, F extends FiltersMap> {
   focusedCell: Cell | null = null;

package/src/state/EditableTable/EditableTableState.ts

@@ -174,8 +174,8 @@ export class EditableTableState<T, F extends FiltersMap>
     return this.mutation.init();
   }
 
-  addItem(afterItemKey?: string) {
-    this.mutation.addItem(afterItemKey);
+  addItem(afterItemKey?: string): string {
+    return this.mutation.addItem(afterItemKey);
   }
 
   duplicateItem(rowKey: string) {
@@ -233,21 +233,44 @@ export class EditableTableState<T, F extends FiltersMap>
       }
       // Plain click on a different cell: commit the edit and move focus.
       this.cellInteraction.commitEdit();
+
+      // If the target cell wants edit-on-click, enter edit directly.
+      const col = this._columnMap.get(columnId);
+      const res = col ? this.resolveCellTypeByColumnId(col.id) : null;
+      if (res?.editOnClick) {
+        const val = this.getCellDisplayValue(rowKey, columnId);
+        if (res.editOnClick(val) && this.isCellEditable(rowKey, columnId)) {
+          this.cellInteraction.focusCell(rowKey, columnId);
+          this.cellInteraction.startEdit(rowKey, columnId, 'click');
+          return;
+        }
+      }
+
       this.cellInteraction.focusCell(rowKey, columnId);
       return;
     }
 
     const column = this._columnMap.get(columnId);
     const resolved = column ? this.resolveCellTypeByColumnId(column.id) : null;
-    if (resolved?.toggleValue) {
-      // Toggle cells (e.g. boolean): click focuses the cell and shows the
-      // checkbox affordance. The toggle itself is committed when the user
-      // interacts with the checkbox or presses Enter — not on the bare cell
-      // click — so that clicking to focus doesn't inadvertently change the value.
+    if (resolved?.toggleValue || resolved?.showEditWhenFocused) {
+      // Toggle/showEditWhenFocused cells: click focuses the cell and shows the
+      // EditComponent affordance. Keyboard navigation remains active.
       this.cellInteraction.focusCell(rowKey, columnId);
       return;
     }
 
+    if (resolved?.editOnClick) {
+      const value = this.getCellDisplayValue(rowKey, columnId);
+      if (
+        resolved.editOnClick(value) &&
+        this.isCellEditable(rowKey, columnId)
+      ) {
+        this.cellInteraction.focusCell(rowKey, columnId);
+        this.cellInteraction.startEdit(rowKey, columnId, 'click');
+        return;
+      }
+    }
+
     if (shiftKey && this.cellInteraction.selectionAnchor) {
       this.cellInteraction.selectRange(this.cellInteraction.selectionAnchor, {
         rowKey,
@@ -267,7 +290,7 @@ export class EditableTableState<T, F extends FiltersMap>
     // Toggle-value cells (e.g. boolean) activate on single click, not double-click.
     // Entering edit mode on double-click would apply the editing box-shadow
     // without any EditComponent being shown, causing a visual border glitch.
-    if (resolved?.toggleValue) {
+    if (resolved?.toggleValue || resolved?.showEditWhenFocused) {
       return;
     }
     if (this.isCellEditable(rowKey, columnId)) {

package/src/state/EditableTable/MutationState.ts

@@ -37,7 +37,7 @@ export class MutationState<T, F extends FiltersMap> {
     return this._optimisticActions.init();
   }
 
-  addItem(afterItemKey?: string) {
+  addItem(afterItemKey?: string): string {
     const newItem = this._handlers.createItem();
     this._optimisticActions.createOne(newItem, {
       submit: this._handlers.submitCreate,
@@ -48,6 +48,7 @@ export class MutationState<T, F extends FiltersMap> {
         action: { onClick: retry, text: 'Retry' },
       }),
     });
+    return this._parent.collection.itemKey(newItem);
   }
 
   duplicateItem(rowKey: string) {

package/src/state/EditableTable/types.ts

@@ -23,7 +23,11 @@ export type ValidationRule =
   | { type: 'minLength' | 'maxLength'; value: number; message: string }
   | { type: 'pattern'; value: RegExp; message: string }
   | { type: 'custom'; validate: (value: unknown) => boolean; message: string }
-  | { type: 'specificValues'; values: { id: string; value: string }[]; message: string };
+  | {
+      type: 'specificValues';
+      values: { id: string; value: string }[];
+      message: string;
+    };
 
 export interface ValidationResult {
   valid: boolean;
@@ -57,6 +61,13 @@ export interface CellType {
   /** Toggle value on single click (e.g., boolean checkbox). Skips focus→edit flow. */
   toggleValue?: (value: any) => any;
 
+  /** Enter edit mode on single click (e.g., image cell with no value). */
+  editOnClick?: (value: any) => boolean;
+
+  /** Show the EditComponent when the cell is focused, without entering edit mode.
+   *  Keyboard navigation remains active. Similar to toggleValue but without toggling. */
+  showEditWhenFocused?: boolean;
+
   /** 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. */
@@ -69,7 +80,6 @@ export interface CellType {
    *  Called before commitEdit() from EditableCell (blur/Enter) and useKeyboardNavigation (Tab).
    *  The value is written back to editingValue via runInAction before committing. */
   normalizeOnCommit?: (value: any) => any;
-
 }
 
 export interface CellTypeConfigMap {
@@ -80,6 +90,8 @@ export interface CellTypeConfigMap {
   email: never;
   date: never;
   object: never;
+  image: never;
+  richContent: never;
   custom: Omit<CellType, 'type'>;
 }
 

package/src/state/EntityPage/EntityPageFieldsState.ts

@@ -0,0 +1,158 @@
+import { DataCapsule, TaskState } from '@wix/bex-core';
+import {
+  action,
+  computed,
+  makeObservable,
+  observable,
+  runInAction,
+} from 'mobx';
+import { indexOfCompareFn } from '../indexOfCompareFn';
+
+const STORAGE_KEY = 'entity-page-layout';
+
+export interface EntityViewConfig {
+  id: string;
+  isVisible?: boolean;
+  hideable?: boolean; // not persisted — consumer-only; false = always visible
+}
+
+type StoredLayout = {
+  fields: Pick<EntityViewConfig, 'id' | 'isVisible'>[];
+};
+
+export interface EntityPageFieldsStateParams {
+  dataCapsule: DataCapsule;
+  fields: EntityViewConfig[];
+}
+
+export class EntityPageFieldsState {
+  _storedFields: EntityViewConfig[] = [];
+  readonly initTask = new TaskState();
+  private _persistQueue: Promise<void> = Promise.resolve();
+  private readonly params: EntityPageFieldsStateParams;
+
+  constructor(params: EntityPageFieldsStateParams) {
+    this.params = params;
+    makeObservable(this, {
+      _storedFields: observable,
+      orderedFields: computed,
+      setFieldVisibility: action.bound,
+      setFieldOrder: action.bound,
+    });
+  }
+
+  // Called from EntityPageState.init() — mirrors CustomColumnsState._tableInit()
+  init() {
+    this.initTask.runOnce(async () => {
+      try {
+        await this._fetchFromStorage();
+      } catch (e) {
+        console.error(e);
+      }
+    });
+  }
+
+  get orderedFields(): EntityViewConfig[] {
+    if (!this._storedFields.length) {
+      return this.params.fields;
+    }
+    // Fields not in storage all get index -1; stable sort preserves their declaration order
+    return [...this.params.fields].sort(
+      indexOfCompareFn(this._storedFields, (f) => f?.id),
+    );
+  }
+
+  isFieldVisible(id: string): boolean {
+    const field = this.params.fields.find((f) => f.id === id);
+    if (!field) {
+      return true;
+    } // unknown id — render by default
+    if (field.hideable === false) {
+      return true;
+    } // non-hideable — always visible
+    const stored = this._storedFields.find((f) => f.id === id);
+    return stored ? stored.isVisible ?? true : field.isVisible ?? true;
+  }
+
+  setFieldVisibility(id: string, isVisible: boolean) {
+    const idx = this._storedFields.findIndex((f) => f.id === id);
+    if (idx >= 0) {
+      // Replace element (not mutate in-place) so MobX tracks the array change
+      this._storedFields[idx] = { ...this._storedFields[idx], isVisible };
+    } else {
+      this._storedFields.push({ id, isVisible });
+    }
+    // Wait for init to complete before persisting — prevents overwriting the
+    // full stored layout when called before _fetchFromStorage resolves.
+    // Serialize writes: chain onto the queue so rapid toggles don't race.
+    this._persistQueue = this._persistQueue
+      .then(() => this.initTask.status.promise)
+      .then(() => this.persistFields())
+      .catch((e) => console.error(e));
+  }
+
+  setFieldOrder(orderedFields: EntityViewConfig[]) {
+    const storedMap = new Map(this._storedFields.map((f) => [f.id, f]));
+    const declaredMap = new Map(this.params.fields.map((f) => [f.id, f]));
+
+    // Rebuild _storedFields in the new order, preserving existing visibility.
+    // Only include fields that are still declared; unknown ids are silently dropped.
+    this._storedFields = orderedFields
+      .filter((f) => declaredMap.has(f.id))
+      .map((f) => storedMap.get(f.id) ?? { id: f.id, isVisible: declaredMap.get(f.id)!.isVisible ?? true });
+
+    this._persistQueue = this._persistQueue
+      .then(() => this.initTask.status.promise)
+      .then(() => this.persistFields())
+      .catch((e) => console.error(e));
+  }
+
+  private async persistFields() {
+    const fields = this._storedFields.map(({ id, isVisible }) => ({
+      id,
+      isVisible,
+    }));
+    await this.params.dataCapsule.setItem(STORAGE_KEY, { fields });
+  }
+
+  async _fetchFromStorage() {
+    const { dataCapsule, fields } = this.params;
+    let storedLayout: StoredLayout | null = null;
+    try {
+      const raw = await dataCapsule.getItem<StoredLayout>(STORAGE_KEY);
+      storedLayout =
+        raw && typeof raw === 'object' && Array.isArray(raw.fields)
+          ? raw
+          : null;
+    } catch (e) {
+      if (e instanceof Error && e.message === 'Key was not found in capsule') {
+        storedLayout = null;
+      } else {
+        throw e;
+      }
+    }
+    if (!storedLayout) {
+      return;
+    }
+
+    // Merge: keep stored order/visibility; append new fields; drop removed ones.
+    // Dedup by id — keeps the first occurrence, discarding any corrupt duplicates.
+    const declaredIds = new Set(fields.map((f) => f.id));
+    const seenIds = new Set<string>();
+    const merged: EntityViewConfig[] = storedLayout.fields.filter((f) => {
+      if (!f?.id || !declaredIds.has(f.id) || seenIds.has(f.id)) {
+        return false;
+      }
+      seenIds.add(f.id);
+      return true;
+    });
+    fields.forEach((f) => {
+      if (!merged.some((s) => s.id === f.id)) {
+        merged.push({ id: f.id, isVisible: f.isVisible ?? true });
+      }
+    });
+    runInAction(() => {
+      this._storedFields = merged;
+    });
+  }
+}

package/src/state/EntityPage/EntityPageState.ts

@@ -5,17 +5,22 @@ import {
   ActionsBarConfig,
   isMobileDevice,
 } from '@wix/bex-core';
+import { isEmpty } from 'lodash';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { EntityPageStateBIReporter } from './EntityPageStateBIReporter';
 import { EventEmitter, TypedEmitter } from '@wix/bex-core/events';
 import { WixPatternsRouterState } from '../WixPatternsRouterState';
+import {
+  EntityPageFieldsState,
+  EntityViewConfig,
+} from './EntityPageFieldsState';
 
 type OnSaveParams = {
   widgetsFormData: { [key: string]: any };
 };
 
-export interface EntityPageStateParams<T, V extends FieldValues = FieldValues> {
+interface EntityPageStateParamsBase<T, V extends FieldValues = FieldValues> {
   /**
    * A function that fetches the entity data.
    * @returns a promise that resolves to an object containing the entity.
@@ -86,13 +91,36 @@ export interface EntityPageStateParams<T, V extends FieldValues = FieldValues> {
    * An optional object to override the actions bar.
    */
   actionsBarConfig?: ActionsBarConfig;
-
-  /**
-   * Entity fqdn.
-   */
-  fqdn?: string;
 }
 
+/**
+ * Pass both `fields` and `persistencyKey` together to enable field order and visibility persistency.
+ * Omit both to disable persistency.
+ */
+export type EntityPageStateParams<
+  T,
+  V extends FieldValues = FieldValues,
+> = EntityPageStateParamsBase<T, V> &
+  (
+    | {
+        /**
+         * Field definitions for persistency.
+         * Must be accompanied by `persistencyKey`.
+         */
+        fields: EntityViewConfig[];
+        /**
+         * A unique key identifying this entity page, used as the storage namespace for field
+         * order and visibility persistency. Required when `fields` is set.
+         * Should be unique per entity page type within the app (e.g. 'contacts', 'products').
+         */
+        persistencyKey: string;
+      }
+    | {
+        fields?: never;
+        persistencyKey?: never;
+      }
+  );
+
 export interface EntityPageStateInterface {}
 
 export interface EntityPageWidgetState {
@@ -118,6 +146,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
   readonly container: WixPatternsContainer;
   readonly reportBI: ReportBI;
   readonly bi: EntityPageStateBIReporter<T, V>;
+  readonly fieldsState?: EntityPageFieldsState;
 
   _routerState: WixPatternsRouterState | null = null;
 
@@ -141,6 +170,27 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
 
     this.container = params.container;
 
+    if (params.persistencyKey) {
+      if (isEmpty(params.fields)) {
+        console.warn(
+          'EntityPageState: `fields` is empty — field persistency will not be enabled.',
+        );
+      } else {
+        const { componentId, artifactId } = params.container.environment;
+        const namespace = [
+          componentId || artifactId,
+          params.persistencyKey,
+        ].join('.');
+        const dataCapsule = params.container._createComponentSettings({
+          namespace,
+        });
+        this.fieldsState = new EntityPageFieldsState({
+          dataCapsule,
+          fields: params.fields!,
+        });
+      }
+    }
+
     this._routerState = params.routerState ?? null;
 
     if (this._routerState) {
@@ -197,6 +247,7 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     );
 
     initTask.runOnce(async () => {
+      this.fieldsState?.init(); // starts async storage read (non-blocking)
       const [data] = await Promise.all([
         this.fetch(),
         container.initTask.status.promise,

package/src/state/EntityPage/index.ts

@@ -1,3 +1,4 @@
 export * from './EntityPageState';
+export type { EntityViewConfig } from './EntityPageFieldsState';
 export * from './useEntityPageHeader';
 export * from './useEntityPageContent';

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

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

package/src/state/ILayoutSwitchState.ts

@@ -0,0 +1,10 @@
+import { FiltersMap, TaskState } from '@wix/bex-core';
+import { ToolbarCollectionState } from './ToolbarCollectionState';
+import { ViewTypeState } from './ViewTypeState';
+
+export interface ILayoutSwitchState<T, F extends FiltersMap> {
+  readonly viewTypeState: ViewTypeState;
+  readonly toolbar: ToolbarCollectionState<T, F>;
+  readonly initTask: TaskState<unknown>;
+  init(): void;
+}

package/src/state/LayoutSwitchState.ts

@@ -0,0 +1,147 @@
+import {
+  CollectionOptimisticActions,
+  CollectionState,
+  FiltersMap,
+  TaskState,
+  WixPatternsContainer,
+  WixPatternsContainerParams,
+} from '@wix/bex-core';
+import { computed, makeObservable, runInAction } from 'mobx';
+import {
+  EditableTableState,
+  EditableTablePermissions,
+  EditableTableMutationHandlers,
+} from './EditableTable';
+import { GridState } from './GridState';
+import { ICollectionComponentState } from './ICollectionComponentState';
+import { ILayoutSwitchState } from './ILayoutSwitchState';
+import { TableState } from './TableState';
+import { ToolbarCollectionState } from './ToolbarCollectionState';
+import { ViewType, ViewTypeState } from './ViewTypeState';
+
+export interface TableLayoutConfig {}
+
+export interface GridLayoutConfig {}
+
+export interface SpreadsheetLayoutConfig<T, F extends FiltersMap> {
+  mutations: EditableTableMutationHandlers<T>;
+  permissions?: EditableTablePermissions;
+  createOptimisticActions: (
+    collection: CollectionState<T, F>,
+  ) => CollectionOptimisticActions<T, F>;
+}
+
+export interface LayoutSwitchStateParams<T, F extends FiltersMap> {
+  collection: CollectionState<T, F>;
+  container: WixPatternsContainer;
+  containerOverrides: Partial<WixPatternsContainerParams>;
+  table?: TableLayoutConfig;
+  grid?: GridLayoutConfig;
+  spreadsheet?: SpreadsheetLayoutConfig<T, F>;
+}
+
+const componentType = 'LayoutSwitch';
+
+export class LayoutSwitchState<T, F extends FiltersMap>
+  implements ICollectionComponentState, ILayoutSwitchState<T, F>
+{
+  readonly collection: CollectionState<T, F>;
+  readonly toolbar: ToolbarCollectionState<T, F>;
+  readonly containerOverrides: Partial<WixPatternsContainerParams>;
+  readonly tableState: TableState<T, F> | undefined;
+  readonly gridState: GridState<T, F> | undefined;
+  readonly spreadsheetState: EditableTableState<T, F> | undefined;
+  readonly viewTypeState: ViewTypeState;
+  readonly initTask = new TaskState();
+
+  get viewType(): ViewType {
+    return this.viewTypeState.viewType;
+  }
+
+  set viewType(v: ViewType) {
+    runInAction(() => {
+      this.viewTypeState.viewType = v;
+    });
+  }
+
+  get options(): ViewType[] {
+    return this.viewTypeState.options;
+  }
+
+  constructor(params: LayoutSwitchStateParams<T, F>) {
+    this.collection = params.collection;
+    this.containerOverrides = params.containerOverrides;
+
+    this.toolbar = new ToolbarCollectionState({
+      componentType,
+      collection: this.collection,
+      container: params.container,
+      reportBi: (biParams) =>
+        params.container.reportBi({
+          ...biParams,
+          params: {
+            ...biParams.params,
+            componentStatus: this.viewTypeState.viewType,
+          },
+        }),
+    });
+
+    this.tableState = params.table
+      ? new TableState({
+          collection: this.collection,
+          container: params.container,
+          toolbar: this.toolbar,
+        })
+      : undefined;
+
+    this.gridState = params.grid
+      ? new GridState({
+          collection: this.collection,
+          container: params.container,
+          toolbar: this.toolbar,
+        })
+      : undefined;
+
+    this.spreadsheetState = params.spreadsheet
+      ? new EditableTableState({
+          collection: this.collection,
+          container: params.container,
+          toolbar: this.toolbar,
+          mutations: params.spreadsheet.mutations,
+          permissions: params.spreadsheet.permissions,
+          createOptimisticActions: params.spreadsheet.createOptimisticActions,
+        })
+      : undefined;
+
+    const enabledLayouts: ViewType[] = [
+      params.table ? 'table' : null,
+      params.grid ? 'grid' : null,
+      params.spreadsheet ? 'spreadsheet' : null,
+    ].filter(Boolean) as ViewType[];
+
+    this.viewTypeState = new ViewTypeState({
+      container: params.container,
+      dataCapsule: this.toolbar.dataCapsule,
+      componentType,
+      collection: this.collection,
+      options: enabledLayouts,
+    });
+
+    this.toolbar.layoutState = this;
+
+    makeObservable(this, {
+      viewType: computed,
+      options: computed,
+    });
+  }
+
+  init() {
+    const { viewTypeState, initTask } = this;
+    viewTypeState.init();
+
+    initTask.runOnce(async () => {
+      viewTypeState.initTask.runOnce();
+      await viewTypeState.initTask.status.promise;
+    });
+  }
+}

package/src/state/TableGridSwitchFoldersState.ts

@@ -77,6 +77,7 @@ export class TableGridSwitchFoldersState<
       container: this.container,
       dataCapsule: this.toolbar.dataCapsule,
       componentType: 'TableGridSwitchFolders',
+      options: ['table', 'grid'],
     });
 
     this.toolbar.layoutState = this;

package/src/state/TableGridSwitchState.ts

@@ -64,6 +64,7 @@ export class TableGridSwitchState<T, F extends FiltersMap>
       dataCapsule: this.toolbar.dataCapsule,
       componentType,
       collection: this.collection,
+      options: ['table', 'grid'],
     });
 
     this.toolbar.layoutState = this;