@wix/patterns 1.348.0 → 1.350.0

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep2173691430";
+var _namespace_ = "PickerContentAdditionalStep264967915";
 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":"PickerContentAdditionalStep2173691430__root","titles":"PickerContentAdditionalStep2173691430__titles","suffix":"PickerContentAdditionalStep2173691430__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep264967915__root","titles":"PickerContentAdditionalStep264967915__titles","suffix":"PickerContentAdditionalStep264967915__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_ = "PickerTableListItem3400953959";
+var _namespace_ = "PickerTableListItem3022048392";
 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":"PickerTableListItem3400953959__root"};
+export var classes = {"root":"PickerTableListItem3022048392__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_ = "ScrollableContent3587171475";
+var _namespace_ = "ScrollableContent2076216529";
 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":"ScrollableContent3587171475__root"};
+export var classes = {"root":"ScrollableContent2076216529__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_ = "SkeletonCard658555106";
+var _namespace_ = "SkeletonCard1795565244";
 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":"SkeletonCard658555106__root","headerLoading":"SkeletonCard658555106__headerLoading"};
+export var classes = {"root":"SkeletonCard1795565244__root","headerLoading":"SkeletonCard1795565244__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_ = "SlidingModal1479463160";
+var _namespace_ = "SlidingModal3372557518";
 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":"SlidingModal1479463160__root"};
+export var classes = {"root":"SlidingModal3372557518__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/TableBase.tsx

@@ -78,6 +78,8 @@ function _TableBase<T, F extends FiltersMap = FiltersMap>(
           table={state}
           groupBy={sections.groupBy}
           renderSection={sections.renderSection}
+          collapsible={sections.collapsible}
+          events={sections.events}
         />
       ) : (
         <CollectionTable {...commonTableProps} TrElementType={TableBaseRow} />

package/src/components/TableGridSwitch/TableGridSwitch.tsx

@@ -9,7 +9,11 @@ import { GridPresetProps } from '../Grid/Grid.types';
 import type { TableGridSwitchDragAndDrop } from './TableGridSwitchDragAndDrop';
 import { InitialLoader } from '../InitialLoader';
 import { GridSectionsContent } from '../GridSections/GridSectionsContent';
-import type { GroupBy, RenderSection } from '../CollectionSectionHeader';
+import type {
+  GroupBy,
+  RenderSection,
+  SectionEvents,
+} from '../CollectionSectionHeader';
 import { TableSections } from '../TableSections';
 
 export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
@@ -42,6 +46,8 @@ export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
     TableSections: typeof TableSections;
     groupBy: GroupBy<T>;
     renderSection: RenderSection<T>;
+    collapsible?: boolean;
+    events?: SectionEvents;
   };
 }
 
@@ -81,6 +87,8 @@ export function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(
         TableSections: sections.TableSections,
         groupBy: sections.groupBy,
         renderSection: sections.renderSection,
+        collapsible: sections.collapsible,
+        events: sections.events,
       }
     : undefined;
 

package/src/components/TableSections/TableSectionRow.tsx

@@ -56,7 +56,7 @@ const _TableSectionRow = forwardRef<
       return <RegularTrElement {...regularTrElementProps} />;
     }
 
-    const { sectionId, section } = result;
+    const { sectionId, sectionIndex, section, collapsible } = result;
 
     return (
       <tr
@@ -84,10 +84,13 @@ const _TableSectionRow = forwardRef<
           >
             <CollectionSectionHeader
               sectionId={sectionId}
+              sectionIndex={sectionIndex}
               section={section}
               biComponentType="TableSections"
               skin="neutral"
               dataHook="table-section-header"
+              collapsible={collapsible}
+              onToggleCollapse={state.toggleSection}
             />
           </div>
         </th>

package/src/components/TableSections/TableSections.tsx

@@ -1,10 +1,15 @@
 import React, { useMemo, useState } from 'react';
+import { runInAction } from 'mobx';
 import { FiltersMap, KeyedItem } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { CollectionTable, CollectionTableBaseProps } from '../CollectionTable';
 import { useTableSectionRow } from './useTableSectionRow';
 import { TableState } from '../../state';
-import { GroupBy, RenderSection } from '../CollectionSectionHeader';
+import {
+  GroupBy,
+  RenderSection,
+  SectionEvents,
+} from '../CollectionSectionHeader';
 import { TableSectionsState } from './TableSectionsState';
 
 export interface TableSectionsProps<T, F extends FiltersMap>
@@ -12,6 +17,8 @@ export interface TableSectionsProps<T, F extends FiltersMap>
   groupBy: GroupBy<T>;
   renderSection: RenderSection<T>;
   table: TableState<T, F>;
+  collapsible?: boolean;
+  events?: SectionEvents;
 }
 
 const _TableSections = <T, F extends FiltersMap>({
@@ -20,12 +27,19 @@ const _TableSections = <T, F extends FiltersMap>({
   table,
   columns,
   rowDetails,
+  collapsible,
+  events,
   ...collectionTableProps
 }: TableSectionsProps<T, F>) => {
   const [state] = useState(
-    () => new TableSectionsState(table, groupBy, renderSection),
+    () => new TableSectionsState(table, groupBy, renderSection, collapsible),
   );
 
+  runInAction(() => {
+    state.renderSection = renderSection;
+  });
+  state.onToggleCallback = events?.onToggle;
+
   const columnsWithSections = useMemo(
     () =>
       columns.map((column) => ({
@@ -67,6 +81,7 @@ const _TableSections = <T, F extends FiltersMap>({
       isRowDisabled={(keyedItem) => {
         return state.isSectionRow(keyedItem);
       }}
+      isUsingExpandCollapse={collapsible}
     />
   );
 };
@@ -77,4 +92,6 @@ export type TableSectionsProp<T> = {
   TableSections: typeof TableSections;
   groupBy: GroupBy<T>;
   renderSection: RenderSection<T>;
+  collapsible?: boolean;
+  events?: SectionEvents;
 };

package/src/components/TableSections/TableSectionsState.ts

@@ -1,4 +1,4 @@
-import { computed, makeObservable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 import { FiltersMap, KeyedItem } from '@wix/bex-core';
 import { TableState } from '../../state';
 import { GroupBy, RenderSection, Section } from '../CollectionSectionHeader';
@@ -10,21 +10,47 @@ export class TableSectionsState<T, F extends FiltersMap> {
   table: TableState<T, F>;
   groupBy: GroupBy<T>;
   renderSection: RenderSection<T>;
+  collapsible: boolean;
+  onToggleCallback?: (sectionId: string, isCollapsed: boolean) => void;
 
   constructor(
     table: TableState<T, F>,
     groupBy: GroupBy<T>,
     renderSection: RenderSection<T>,
+    collapsible?: boolean,
   ) {
     this.table = table;
     this.groupBy = groupBy;
     this.renderSection = renderSection;
+    this.collapsible = collapsible ?? false;
     makeObservable(this, {
+      renderSection: observable.ref,
       sectionsKeyedItems: computed,
       sectionCounts: computed,
     });
   }
 
+  toggleSection = (sectionId: string) => {
+    const currentCollapsed = this.isSectionCollapsed(sectionId);
+    this.onToggleCallback?.(sectionId, !currentCollapsed);
+  };
+
+  private isSectionCollapsed(sectionId: string): boolean {
+    const sectionItems = this.getSectionItems(sectionId);
+    const section = this.renderSection(sectionId, sectionItems);
+    return section.collapsed ?? false;
+  }
+
+  private getSectionItems(sectionId: string): T[] {
+    const items: T[] = [];
+    for (const keyedItem of this.table.keyedItems) {
+      if (this.groupBy(keyedItem.item) === sectionId) {
+        items.push(keyedItem.item);
+      }
+    }
+    return items;
+  }
+
   private generateSectionId(firstItemId: string): string {
     return `${SECTION_PREFIX}${firstItemId}`;
   }
@@ -32,14 +58,16 @@ export class TableSectionsState<T, F extends FiltersMap> {
   private get computeSectionData(): {
     counts: Map<string, { count: number; isComplete: boolean }>;
     items: Map<string, T[]>;
+    indices: Map<string, number>;
     keyedItems: KeyedItem<T>[];
   } {
     const counts = new Map<string, { count: number; isComplete: boolean }>();
     const items = new Map<string, T[]>();
+    const indices = new Map<string, number>();
     const keyedItems: KeyedItem<T>[] = [];
 
     if (this.table.keyedItems.length === 0) {
-      return { counts, items, keyedItems };
+      return { counts, items, indices, keyedItems };
     }
 
     // Add invisible row for design purposes
@@ -56,6 +84,7 @@ export class TableSectionsState<T, F extends FiltersMap> {
     let currentSectionIndex: number = 0;
     let currentHeaderId: string | null = null;
     let count = 0;
+    let isCurrentSectionCollapsed = false;
     let currentSectionItems: T[] = [];
 
     for (const keyedItem of this.table.keyedItems) {
@@ -73,10 +102,19 @@ export class TableSectionsState<T, F extends FiltersMap> {
         currentHeaderId = this.generateSectionId(
           `${sectionId}@${currentSectionIndex}`,
         );
+        indices.set(currentHeaderId, currentSectionIndex);
         currentSectionIndex++;
         count = 1;
         currentSectionItems = [keyedItem.item];
 
+        // Determine if section is collapsed from renderSection
+        const section = this.renderSection(
+          sectionId,
+          this.getSectionItems(sectionId),
+        );
+        isCurrentSectionCollapsed =
+          this.collapsible && (section.collapsed ?? false);
+
         // Add section header to keyed items
         const sectionKeyedItem: KeyedItem<T> = {
           id: currentHeaderId,
@@ -92,8 +130,10 @@ export class TableSectionsState<T, F extends FiltersMap> {
         currentSectionItems.push(keyedItem.item);
       }
 
-      // Add the actual data item
-      keyedItems.push(keyedItem);
+      // Add the actual data item only if section is not collapsed
+      if (!isCurrentSectionCollapsed) {
+        keyedItems.push(keyedItem);
+      }
     }
 
     // Handle last section
@@ -103,7 +143,7 @@ export class TableSectionsState<T, F extends FiltersMap> {
       items.set(currentHeaderId, currentSectionItems);
     }
 
-    return { counts, items, keyedItems };
+    return { counts, items, indices, keyedItems };
   }
 
   get sectionCounts(): Map<string, { count: number; isComplete: boolean }> {
@@ -114,13 +154,24 @@ export class TableSectionsState<T, F extends FiltersMap> {
     return this.computeSectionData.items;
   }
 
+  get sectionIndices(): Map<string, number> {
+    return this.computeSectionData.indices;
+  }
+
   get sectionsKeyedItems(): KeyedItem<T>[] {
     return this.computeSectionData.keyedItems;
   }
 
   getSectionWithCount(sectionKeyedItem: KeyedItem<T>): {
     sectionId: string;
-    section: Section & { count: number; hasMore: boolean; items: T[] };
+    sectionIndex: number;
+    section: Section & {
+      count: number;
+      hasMore: boolean;
+      items: T[];
+      collapsed: boolean;
+    };
+    collapsible: boolean;
   } {
     const headerId = sectionKeyedItem.id;
     const sectionData = headerId
@@ -129,18 +180,22 @@ export class TableSectionsState<T, F extends FiltersMap> {
     const sectionItemsList = headerId
       ? this.sectionItems.get(headerId) || []
       : [];
+    const sectionIndex = headerId ? this.sectionIndices.get(headerId) ?? 0 : 0;
 
     const sectionId = this.groupBy(sectionKeyedItem.item);
     const section = this.renderSection(sectionId, sectionItemsList);
 
     return {
       sectionId,
+      sectionIndex,
       section: {
         ...section,
         count: sectionData.count,
         hasMore: !sectionData.isComplete,
         items: sectionItemsList,
+        collapsed: this.collapsible && (section.collapsed ?? false),
       },
+      collapsible: this.collapsible,
     };
   }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter139350848";
+var _namespace_ = "TabsFilter495725624";
 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":"TabsFilter139350848__root","title":"TabsFilter139350848__title"};
+export var classes = {"root":"TabsFilter495725624__root","title":"TabsFilter495725624__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_ = "ManageTagsModal3372698127";
+var _namespace_ = "ManageTagsModal2969187637";
 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":"ManageTagsModal3372698127__root"};
+export var classes = {"root":"ManageTagsModal2969187637__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarCollection/useToolbarCollectionSyncProps.ts

@@ -14,6 +14,7 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
     isUsingHorizontalScroll: boolean;
     isUsingFolders: boolean;
     isUsingTableVirtualization: boolean;
+    isUsingExpandCollapse?: boolean;
   },
 ) {
   const {
@@ -170,6 +171,7 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
       isUsingCustomEmptyState: !!props.emptyState,
       isUsingCustomNoResultsState: !!props.noResultsState,
       isUsingPrimaryActionCta: !!props.primaryActionButton,
+      isUsingExpandCollapse: !!props.isUsingExpandCollapse,
     };
   });
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem1044695008";
+var _namespace_ = "ToolbarItem3348336680";
 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":"ToolbarItem1044695008__root"};
+export var classes = {"root":"ToolbarItem3348336680__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_ = "ToolbarItemBox670410846";
+var _namespace_ = "ToolbarItemBox2027176087";
 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":"ToolbarItemBox670410846__root"};
+export var classes = {"root":"ToolbarItemBox2027176087__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_ = "common2108847060";
+var _namespace_ = "common309578550";
 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":"common2108847060__root","column":"common2108847060__column","fullHeight":"common2108847060__fullHeight"};
+export var classes = {"root":"common309578550__root","column":"common309578550__column","fullHeight":"common309578550__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/dashboard/WixPatternsDashboardBaseProvider.tsx

@@ -80,8 +80,8 @@ export function WixPatternsDashboardBaseProvider({
       useTranslation,
       showToast: showToastCompat(dashboard.showToast),
       usePageLocation,
-      navigateTo: ({ relativeUrl }) =>
-        dashboard.navigate({ pageId: pageLocation.pageId, relativeUrl }),
+      navigateTo: ({ pageId = pageLocation.pageId, relativeUrl }) =>
+        dashboard.navigate({ pageId, relativeUrl }),
       onSidePanelOpen: undefined, // missing in dashboard-sdk
       onBeforeUnload: dashboard.onBeforeUnload,
       closeSidePanel: undefined, // missing in dashboard-sdk

package/src/model/view.ts

@@ -1,6 +1,8 @@
 import { AllFilters, FiltersMap, ExtractFilterValue } from '@wix/bex-core';
 import { InfoIconProps } from '@wix/design-system';
 
+export type ViewType = 'table' | 'grid';
+
 export type ColumnSortOrder = 'Ascending' | 'Descending';
 
 export const columnSortOrder = {
@@ -71,6 +73,11 @@ export interface ViewBase<F extends FiltersMap> {
    * @external
    */
   sortDirections?: ColumnSortConfig[];
+  /**
+   * Layout type for the view ('table' or 'grid').
+   * @external
+   */
+  layout?: ViewType;
 }
 
 export interface View<F extends FiltersMap> extends ViewBase<F> {

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

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

package/src/state/CollectionViewsQueryCompareHelper.ts

@@ -152,11 +152,16 @@ export class CollectionViewsQueryCompareHelper<T, F extends FiltersMap> {
   }
 
   get currentViewBase(): ViewBase<F> {
-    return {
+    const layout = this.collectionViews.getLayout();
+    const base: ViewBase<F> = {
       filters: this.viewBaseFilters,
       sortDirections: this.viewBaseSortDirections,
       selectedColumns: this.viewBaseSelectedColumns,
     };
+    if (layout) {
+      base.layout = layout;
+    }
+    return base;
   }
 
   get viewBaseSortDirections() {

package/src/state/CollectionViewsState.ts

@@ -9,7 +9,13 @@ import {
 import { ViewsState } from './ViewsState';
 import { ViewsProps } from '../index';
 import { action, computed, makeObservable, runInAction } from 'mobx';
-import { AllItemsViewProps, Category, PrivateView, View } from '../model';
+import {
+  AllItemsViewProps,
+  Category,
+  PrivateView,
+  View,
+  ViewType,
+} from '../model';
 import { ToolbarCollectionState } from './ToolbarCollectionState';
 import { CollectionViewsStateBIReporter } from './CollectionViewsStateBIReporter';
 import { EventEmitter } from 'events';
@@ -58,6 +64,9 @@ export class CollectionViewsState<T, F extends FiltersMap> {
 
   viewsStateBIReporter: CollectionViewsStateBIReporter<T, F>;
 
+  getLayout(): ViewType | undefined {
+    return this.table.layoutState?.viewType;
+  }
   constructor(params: CollectionViewsStateParams<T, F>) {
     this.table = params.table;
     this.onDeleteView = params.onDeleteView;
@@ -261,9 +270,15 @@ export class CollectionViewsState<T, F extends FiltersMap> {
 
     const {
       table: { collection },
+      views: { currentView },
     } = this;
     const { query } = collection;
     this._setSelectedViewToCollectionQuery();
+    query.queryHistory?.persistAll();
+    if (this.table.layoutState && currentView?.layout) {
+      this.table.layoutState.viewType = currentView.layout;
+    }
+
     query.events.emit('refresh');
   }
 

package/src/state/FeaturesAvailabilityBIParams.ts

@@ -23,4 +23,5 @@ export interface AdditionalFeaturesAvailabilityBIParams {
   isUsingCustomEmptyState?: boolean | null;
   isUsingCustomNoResultsState?: boolean | null;
   isUsingPrimaryActionCta?: boolean | null;
+  isUsingExpandCollapse?: boolean | null;
 }