@wix/patterns 1.407.0 → 1.409.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow1508922526";
+var _namespace_ = "LoadingRow2926727146";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow1508922526__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1508922526__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2926727146__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2926727146__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar945964";
+var _namespace_ = "MultiBulkActionToolbar2653134755";
 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":"MultiBulkActionToolbar945964__root","leftGroupWrapper":"MultiBulkActionToolbar945964__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar945964__selectedCountItem","selectedCountText":"MultiBulkActionToolbar945964__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2653134755__root","leftGroupWrapper":"MultiBulkActionToolbar2653134755__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2653134755__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2653134755__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow933144787";
+var _namespace_ = "NestedTableRow4017610873";
 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":"NestedTableRow933144787__root","firstLevel":"NestedTableRow933144787__firstLevel","placeholder":"NestedTableRow933144787__placeholder","parentHovered":"NestedTableRow933144787__parentHovered"};
+export var classes = {"root":"NestedTableRow4017610873__root","firstLevel":"NestedTableRow4017610873__firstLevel","placeholder":"NestedTableRow4017610873__placeholder","parentHovered":"NestedTableRow4017610873__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow766116763";
+var _namespace_ = "NestedTableDragAndDropRow4118053086";
 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":"NestedTableDragAndDropRow766116763__root"};
+export var classes = {"root":"NestedTableDragAndDropRow4118053086__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_ = "PickerContent166815625";
+var _namespace_ = "PickerContent684748937";
 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":"PickerContent166815625__root"};
+export var classes = {"root":"PickerContent684748937__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_ = "PickerContentAdditionalStep2241802214";
+var _namespace_ = "PickerContentAdditionalStep1579238315";
 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":"PickerContentAdditionalStep2241802214__root","titles":"PickerContentAdditionalStep2241802214__titles","suffix":"PickerContentAdditionalStep2241802214__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1579238315__root","titles":"PickerContentAdditionalStep1579238315__titles","suffix":"PickerContentAdditionalStep1579238315__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/SelectAllCheckbox.tsx

@@ -17,7 +17,7 @@ function _SelectAllCheckbox<T, F extends FiltersMap>(
     picker: {
       collection: {
         result: { isEmptyAndNotFetching },
-        query: { hasActiveFilters },
+        query: { hasActiveFilters, limit },
         bulkSelect: {
           selectedCountOrTotal,
           select: { isNotEmptyEnabledItems: hasEnabledCheckedItems },
@@ -35,19 +35,17 @@ function _SelectAllCheckbox<T, F extends FiltersMap>(
     <Checkbox
       dataHook="picker-select-all-checkbox"
       checked={allSelected}
-      disabled={hasActiveFilters || isEmptyAndNotFetching}
+      disabled={isEmptyAndNotFetching || (hasActiveFilters && total > limit)}
       onChange={toggleIsSelectAll}
       indeterminate={hasEnabledCheckedItems && (!allSelected || hasUnchecked)}
     >
       {hasEnabledCheckedItems ? (
         <>
-          {t('cairo.deselectAll')}
-          {!hasActiveFilters && <> ({selectedCountOrTotal})</>}
+          {t('cairo.deselectAll')} ({selectedCountOrTotal})
         </>
       ) : (
         <>
-          {t('cairo.selectAll')}
-          {!hasActiveFilters && <> ({total})</>}
+          {t('cairo.selectAll')} ({total})
         </>
       )}
     </Checkbox>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem187048861";
+var _namespace_ = "PickerTableListItem2099534030";
 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":"PickerTableListItem187048861__root"};
+export var classes = {"root":"PickerTableListItem2099534030__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_ = "ScrollableContent2216011140";
+var _namespace_ = "ScrollableContent1041335997";
 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":"ScrollableContent2216011140__root"};
+export var classes = {"root":"ScrollableContent1041335997__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_ = "SkeletonCard2920634239";
+var _namespace_ = "SkeletonCard2172099416";
 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":"SkeletonCard2920634239__root","headerLoading":"SkeletonCard2920634239__headerLoading"};
+export var classes = {"root":"SkeletonCard2172099416__root","headerLoading":"SkeletonCard2172099416__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_ = "SlidingModal506629060";
+var _namespace_ = "SlidingModal1066041142";
 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":"SlidingModal506629060__root"};
+export var classes = {"root":"SlidingModal1066041142__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_ = "TabsFilter818514116";
+var _namespace_ = "TabsFilter3103961942";
 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":"TabsFilter818514116__root","title":"TabsFilter818514116__title"};
+export var classes = {"root":"TabsFilter3103961942__root","title":"TabsFilter3103961942__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_ = "ManageTagsModal1815513124";
+var _namespace_ = "ManageTagsModal1787385461";
 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":"ManageTagsModal1815513124__root"};
+export var classes = {"root":"ManageTagsModal1787385461__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_ = "ToolbarItem1802518651";
+var _namespace_ = "ToolbarItem134099359";
 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":"ToolbarItem1802518651__root"};
+export var classes = {"root":"ToolbarItem134099359__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_ = "ToolbarItemBox3235981517";
+var _namespace_ = "ToolbarItemBox182709589";
 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":"ToolbarItemBox3235981517__root"};
+export var classes = {"root":"ToolbarItemBox182709589__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_ = "common2262432115";
+var _namespace_ = "common2479345232";
 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":"common2262432115__root","column":"common2262432115__column","fullHeight":"common2262432115__fullHeight"};
+export var classes = {"root":"common2479345232__root","column":"common2479345232__column","fullHeight":"common2479345232__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "CollectionPageHeader3782336142";
+var _namespace_ = "CollectionPageHeader2089769102";
 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":"CollectionPageHeader3782336142__root"};
+export var classes = {"root":"CollectionPageHeader2089769102__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;