@wix/patterns 1.478.0 → 1.479.0

package/src/schema/useLayoutSwitchCollection.ts

@@ -12,6 +12,7 @@ import type {
   GridLayoutConfig,
   SpreadsheetLayoutConfig,
 } from '../state/LayoutSwitchState';
+import type { ViewType } from '../state/ViewTypeState';
 import type { FieldsSourceProvider } from '../components/fieldsSourceProvider';
 import { useLayoutSwitchCollection as useOpenLayoutSwitchCollection } from '../hooks/useLayoutSwitchCollection';
 import { SchemaState } from '../components/SchemaSource/SchemaState';
@@ -27,15 +28,20 @@ export type SchemaLayoutSwitchCollectionOptions<
   T,
   F extends FiltersMap = OptionalFiltersMap,
 > = SchemaMutableCollectionOptions<T, F> & {
-    table?: TableLayoutConfig;
-    grid?: GridLayoutConfig;
-    // No `permissions` either: row-action permissions are source-driven
-    // (schema.itemPermissions + backend capabilities), not consumer-supplied.
-    spreadsheet?: Omit<
-      SpreadsheetLayoutConfig<T, F>,
-      'createOptimisticActions' | 'mutations' | 'permissions'
-    >;
-  };
+  /** Layout shown while the user has no saved choice; a saved choice wins and
+   *  the default is never saved. Ignored when not an enabled layout. Read on
+   *  mount, so later changes have no effect. Without it, the first enabled
+   *  layout in table, grid, spreadsheet order. */
+  defaultViewType?: ViewType;
+  table?: TableLayoutConfig;
+  grid?: GridLayoutConfig;
+  // No `permissions` either: row-action permissions are source-driven
+  // (schema.itemPermissions + backend capabilities), not consumer-supplied.
+  spreadsheet?: Omit<
+    SpreadsheetLayoutConfig<T, F>,
+    'createOptimisticActions' | 'mutations' | 'permissions'
+  >;
+};
 
 /** One collection and one toolbar driven by a source, shared by every enabled
  *  layout — the source attaches before any layout mounts, so a page opening
@@ -65,8 +71,14 @@ export function useLayoutSwitchCollection<
     };
   });
 
-  const { table, grid, spreadsheet, createLocalItem, ...rest } =
-    options ?? ({} as SchemaLayoutSwitchCollectionOptions<T, F>);
+  const {
+    table,
+    grid,
+    spreadsheet,
+    defaultViewType,
+    createLocalItem,
+    ...rest
+  } = options ?? ({} as SchemaLayoutSwitchCollectionOptions<T, F>);
   const createLocalItemRef = useRef(createLocalItem);
   createLocalItemRef.current = createLocalItem;
 
@@ -74,6 +86,7 @@ export function useLayoutSwitchCollection<
     Object.assign(schemaCollectionConfig<T, F>(source, rest), {
       table,
       grid,
+      defaultViewType,
       spreadsheet: spreadsheet
         ? {
             ...spreadsheet,

package/src/state/CollectionPage/CollectionPageActionsBar.tsx

@@ -13,6 +13,7 @@ import {
   MoreActionsPropItem,
 } from '../../components/MoreActions/MoreActionsBase';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { classes } from './CollectionPageHeader.st.css.js';
 
 function withFeaturedActions(
   items: MoreActionsPropItem[] | MoreActionsPropItem[][] | undefined,
@@ -87,8 +88,13 @@ export const CollectionPageActionsBar = observer(
       isNarrow &&
       internalExperiments?.enabled('specs.cairo.CollectionPageMinWidth');
 
+    // The primary action is rendered in the page's fixed footer on mobile.
     if (isMobile) {
-      return <Box gap="SP2">{child.props.primaryAction}</Box>;
+      return (
+        <Box gap="SP2" className={classes.mobileMoreActions}>
+          <NarrowModeMoreActions child={child} />
+        </Box>
+      );
     }
 
     if (isNarrowMode) {

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

@@ -1,3 +1,5 @@
+@property st-global(--wds-page-header-title-actions-gap);
+
 .root {
   -st-states: mobile;
 }
@@ -7,13 +9,17 @@
 }
 
 .root:mobile {
-  flex-direction: column;
+  --wds-page-header-title-actions-gap: 8px;
   padding-right: 18px;
   padding-left: 18px;
 }
 
-.root:mobile > * {
-  margin-left: 0;
-  margin-top: 6px !important;
-  height: auto;
+/* Drops the WDS actions bar offsets so "more actions" lines up with the title row. */
+.root:mobile [data-hook="page-header-actionbar"] {
+  display: contents;
+}
+
+.mobileMoreActions {
+  align-self: flex-start;
+  margin-top: 6px;
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader2327761266";
+var _namespace_ = "CollectionPageHeader712680140";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPageHeader2327761266__root"};
+export var classes = {"root":"CollectionPageHeader712680140__root","mobileMoreActions":"CollectionPageHeader712680140__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-page-header-title-actions-gap":"--wds-page-header-title-actions-gap"}; 
 
 
 

package/src/state/CollectionPage/MobilePrimaryActionBar.st.css

@@ -0,0 +1,6 @@
+@property st-global(--wds-space-300);
+@property st-global(--wds-space-400);
+
+.root {
+  padding: var(--wds-space-300, 18px) var(--wds-space-400, 24px);
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "MobilePrimaryActionBar3410265983";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"MobilePrimaryActionBar3410265983__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-space-300":"--wds-space-300","wds-space-400":"--wds-space-400"}; 
+
+
+
+

package/src/state/CollectionPage/MobilePrimaryActionBar.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { Box } from '@wix/design-system';
+import { classes } from './MobilePrimaryActionBar.st.css.js';
+
+export function MobilePrimaryActionBar({ children }: { children: ReactNode }) {
+  return (
+    <Box
+      direction="vertical"
+      className={classes.root}
+      dataHook="collection-page-mobile-primary-action"
+    >
+      {children}
+    </Box>
+  );
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges2624840756";
+var _namespace_ = "TitleBadges531506099";
 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":"TitleBadges2624840756__root","tooltip":"TitleBadges2624840756__tooltip","tooltipTrigger":"TitleBadges2624840756__tooltipTrigger"};
+export var classes = {"root":"TitleBadges531506099__root","tooltip":"TitleBadges531506099__tooltip","tooltipTrigger":"TitleBadges531506099__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/TitleBadges.tsx

@@ -1,5 +1,6 @@
 import React, { lazy, Suspense, useState } from 'react';
 import { Box, Tooltip } from '@wix/design-system';
+import type { BadgeProps } from '@wix/design-system';
 import uniqueId from 'lodash/uniqueId';
 import { classes } from './TitleBadges.st.css.js';
 import { CollectionPageHeaderBadge } from '../../components/CollectionPageHeaderNew';
@@ -10,9 +11,10 @@ const LazyBadge = lazy(() =>
 
 export interface TitleBadgesProps {
   badges?: CollectionPageHeaderBadge[];
+  size?: BadgeProps['size'];
 }
 
-export function TitleBadges({ badges }: TitleBadgesProps) {
+export function TitleBadges({ badges, size = 'small' }: TitleBadgesProps) {
   const [tooltipId] = useState(() =>
     uniqueId('collection-page-badge-tooltip-'),
   );
@@ -34,7 +36,7 @@ export function TitleBadges({ badges }: TitleBadgesProps) {
           const content = (
             <LazyBadge
               key={index}
-              size="small"
+              size={size}
               skin={badge.skin}
               prefixIcon={badge.prefixIcon}
               suffixIcon={badge.suffixIcon}

package/src/state/CollectionPage/useCollectionPageHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Box, Heading, Page } from '@wix/design-system';
+import { Box, Breadcrumbs, Heading, Page } from '@wix/design-system';
 import {
+  BreadcrumbsElement,
   CollectionPageHeaderBadge,
   CollectionPageHeaderElement,
 } from '../../components/CollectionPageHeaderNew';
@@ -29,11 +30,17 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
     );
   }
 
+  const onBackClicked = isMobile
+    ? getBreadcrumbsBackHandler(child.props.breadcrumbs)
+    : undefined;
+
   return (
     <Page.Header
       key={child.key}
       className={st(classes.root, { mobile: isMobile })}
       dataHook="collection-page-header"
+      showBackButton={!!onBackClicked}
+      onBackClicked={onBackClicked}
       title={(minimized) => (
         <CollectionPageHeaderTitle
           minimized={minimized}
@@ -46,17 +53,34 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
         ) : undefined
       }
       actionsBar={<CollectionPageActionsBar child={child} />}
-      breadcrumbs={
-        isMobile
-          ? () => {
-              return <div></div>;
-            }
-          : child.props.breadcrumbs
-      }
+      breadcrumbs={isMobile ? undefined : child.props.breadcrumbs}
     />
   );
 }
 
+// WDS gives `Breadcrumbs` a no-op `onClick` default, so a link-only
+// breadcrumbs element still has an `onClick`. This is that default.
+const defaultBreadcrumbsOnClick = (<Breadcrumbs items={[]} />).props.onClick;
+
+// Mobile hides the breadcrumbs, so the back button takes the user to the
+// breadcrumb before the current page.
+function getBreadcrumbsBackHandler(breadcrumbs?: BreadcrumbsElement) {
+  const items = breadcrumbs?.props.items ?? [];
+  const parent = items[items.length - 2];
+  if (!parent) {
+    return undefined;
+  }
+  const onClick = breadcrumbs?.props.onClick;
+  const hasOwnOnClick = onClick && onClick !== defaultBreadcrumbsOnClick;
+  return (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (hasOwnOnClick) {
+      onClick(parent, event);
+    } else if (parent.link) {
+      window.location.assign(parent.link);
+    }
+  };
+}
+
 const CollectionPageHeaderTitle = observer(
   ({
     minimized,
@@ -70,7 +94,16 @@ const CollectionPageHeaderTitle = observer(
     const isBmHarmonyTheme = useBmHarmonyTheme();
 
     if (minimized) {
-      return <>{state.pageTitle}</>;
+      // The sticky toolbar sits at a fixed offset under the minimized header,
+      // so on mobile the title row keeps the "more actions" button height
+      // even when there are no actions.
+      return isMobile ? (
+        <Box height="36px" verticalAlign="middle">
+          {state.pageTitle}
+        </Box>
+      ) : (
+        <>{state.pageTitle}</>
+      );
     }
 
     // Page.Header sizes its own title wrapper from
@@ -105,7 +138,7 @@ const CollectionPageHeaderTitle = observer(
               {state.total}
             </Box>
           )}
-          <TitleBadges badges={badges} />
+          <TitleBadges badges={badges} size={isMobile ? 'medium' : 'small'} />
         </Box>
       </Heading>
     );

package/src/state/EditableTable/CellInteractionState.ts

@@ -122,6 +122,7 @@ export class CellInteractionState<T, F extends FiltersMap> {
       this.selectedCells.clear();
       this.selectedCells.add(cellKey(rk, cid));
       this.selectionAnchor = { rowKey: rk, columnId: cid };
+      this._parent.bi.cellEditStarted({ rowKey: rk, columnId: cid }, trigger);
     }
   }
 
@@ -130,9 +131,16 @@ export class CellInteractionState<T, F extends FiltersMap> {
   }
 
   commitEdit() {
+    const cell = this.editingCell;
+    const trigger = this.editTrigger;
     try {
-      if (this.editingCell) {
-        this._commitHandler(this.editingValue, this.editingCell);
+      if (cell) {
+        const hasValueChanged = this._parent.bi.hasValueChanged(
+          cell,
+          this.editingValue,
+        );
+        this._commitHandler(this.editingValue, cell);
+        this._parent.bi.cellEditCommitted(cell, { trigger, hasValueChanged });
       }
     } finally {
       this.editingValue = undefined;
@@ -142,6 +150,15 @@ export class CellInteractionState<T, F extends FiltersMap> {
   }
 
   cancelEdit() {
+    const cell = this.editingCell;
+    if (cell) {
+      this._parent.bi.cellEditCancelled(cell, {
+        hasValueChanged: this._parent.bi.hasValueChanged(
+          cell,
+          this.editingValue,
+        ),
+      });
+    }
     this.editingValue = undefined;
     this.editTrigger = null;
     this.editingCell = null;

package/src/state/EditableTable/CellValueState.ts

@@ -222,8 +222,9 @@ export class CellValueState<T, F extends FiltersMap> {
     return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
   }
 
-  /** Clear selected cells (Delete/Backspace). Respects column.editable and contextMenu.clear. */
-  clearCells(cells: Cell[]) {
+  /** Clear selected cells (Delete/Backspace). Respects column.editable and contextMenu.clear.
+   *  Returns the cells that were actually cleared. */
+  clearCells(cells: Cell[]): Cell[] {
     const changes: { rowKey: string; columnId: string; value: any }[] = [];
 
     for (const cell of cells) {
@@ -252,6 +253,8 @@ export class CellValueState<T, F extends FiltersMap> {
     if (changes.length > 0) {
       this.applyBulkValues(changes);
     }
+
+    return changes.map(({ rowKey, columnId }) => ({ rowKey, columnId }));
   }
 
   toggleCell(rowKey: string, columnId: string) {
@@ -268,7 +271,14 @@ export class CellValueState<T, F extends FiltersMap> {
 
     const value = this.getCellDisplayValue(rowKey, columnId);
     const newValue = resolved.toggleValue(value);
+    const hasValueChanged = !Object.is(value, newValue);
     this._applyValue(rowKey, columnId, newValue);
+    // isValid is read from the cell after the write, so it matches the value
+    // that was just stored.
+    this._parent.bi.cellEditCommitted(
+      { rowKey, columnId },
+      { origin: 'Toggle', hasValueChanged },
+    );
   }
 
   /** Commit handler — used as callback for CellInteractionState. */

package/src/state/EditableTable/ClipboardState.ts

@@ -2,6 +2,10 @@ import { action, computed, makeObservable, observable } from 'mobx';
 import type { Cell, CellBorder } from './types';
 import type { EditableCellContextMenuAction, FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
+import {
+  clipboardCellCounts,
+  type ClipboardOrigin,
+} from './EditableTableStateBIReporter';
 import { cellKey, parseCellKey, noBorder } from './utils';
 
 export class ClipboardState<T, F extends FiltersMap> {
@@ -28,18 +32,21 @@ export class ClipboardState<T, F extends FiltersMap> {
   /**
    * Copy selected cells. Returns serialized TSV string for clipboard.
    */
-  copy(): string {
+  copy(origin: ClipboardOrigin = 'Keyboard'): string {
     this.clear();
-    return this._storeCells('copy');
+    const tsv = this._storeCells('copy');
+    this._reportStoredCells('copy', origin);
+    return tsv;
   }
 
   /**
    * Cut selected cells. Returns serialized TSV string for clipboard.
    */
-  cut(): string {
+  cut(origin: ClipboardOrigin = 'Keyboard'): string {
     this.clear();
     const data = this._storeCells('cut');
     this.isCut = this.copiedCells.size > 0;
+    this._reportStoredCells('cut', origin);
     return data;
   }
 
@@ -48,7 +55,7 @@ export class ClipboardState<T, F extends FiltersMap> {
    * If the clipboard text matches what we stored at copy time, uses the rich
    * typed values instead of deserializing from TSV (avoids lossy round-trip).
    */
-  paste(rawData: string) {
+  paste(rawData: string, origin: ClipboardOrigin = 'Keyboard') {
     const { cellValue, cellInteraction } = this._parent;
     const target = cellInteraction.focusedCell;
     if (!target) {
@@ -66,7 +73,7 @@ export class ClipboardState<T, F extends FiltersMap> {
       this._copiedDataString !== undefined &&
       this._copiedDataString === rawData;
 
-    const keptSourceKeys = this._pasteGrid(
+    const { keptSourceKeys, pasted } = this._pasteGrid(
       rawData,
       targetPos,
       isInternal,
@@ -77,6 +84,15 @@ export class ClipboardState<T, F extends FiltersMap> {
       this._clearCutSources(keptSourceKeys, cellValue);
     }
 
+    if (pasted.length > 0) {
+      this._parent.bi.clipboardAction({
+        actionName: 'paste',
+        origin,
+        isExternalSource: !isInternal,
+        ...clipboardCellCounts(pasted),
+      });
+    }
+
     this.clear();
   }
 
@@ -85,8 +101,9 @@ export class ClipboardState<T, F extends FiltersMap> {
     targetPos: { row: number; col: number },
     useRichValues: boolean,
     cellValue: EditableTableState<T, F>['cellValue'],
-  ): Set<string> {
+  ): { keptSourceKeys: Set<string>; pasted: Cell[] } {
     const keptSourceKeys = new Set<string>();
+    const pasted: Cell[] = [];
     const richChanges: { rowKey: string; columnId: string; value: any }[] = [];
     const rawChanges: { rowKey: string; columnId: string; rawValue: string }[] =
       [];
@@ -119,6 +136,7 @@ export class ClipboardState<T, F extends FiltersMap> {
         }
 
         keptSourceKeys.add(cellKey(dest.rowKey, dest.columnId));
+        pasted.push(dest);
         if (useRichValues) {
           richChanges.push({
             rowKey: dest.rowKey,
@@ -142,7 +160,7 @@ export class ClipboardState<T, F extends FiltersMap> {
       cellValue.applyBulkRawValues(rawChanges);
     }
 
-    return keptSourceKeys;
+    return { keptSourceKeys, pasted };
   }
 
   private _clearCutSources(
@@ -205,6 +223,23 @@ export class ClipboardState<T, F extends FiltersMap> {
     return this.copiedCells.size > 0;
   }
 
+  private _reportStoredCells(
+    actionName: 'copy' | 'cut',
+    origin: ClipboardOrigin,
+  ) {
+    const cells = [...this.copiedCells]
+      .map((key) => parseCellKey(key))
+      .filter((cell): cell is Cell => cell !== null);
+    if (cells.length === 0) {
+      return;
+    }
+    this._parent.bi.clipboardAction({
+      actionName,
+      origin,
+      ...clipboardCellCounts(cells),
+    });
+  }
+
   private _storeCells(actionId: EditableCellContextMenuAction): string {
     const selectedCells = this._parent.cellInteraction.selectedCellsList;
     if (selectedCells.length === 0) {

package/src/state/EditableTable/EditableTableState.ts

@@ -23,7 +23,11 @@ import { CellValueState } from './CellValueState';
 import { ClipboardState } from './ClipboardState';
 import { MutationState } from './MutationState';
 import type { EditableTableMutationHandlers } from './MutationState';
-import { EditableTableStateBIReporter } from './EditableTableStateBIReporter';
+import {
+  clipboardCellCounts,
+  EditableTableStateBIReporter,
+  type ClipboardOrigin,
+} from './EditableTableStateBIReporter';
 import type { Cell, CellType, EditableColumn, ValidationResult } from './types';
 import { buildEditableFieldColumns } from '../buildEditableFieldColumns';
 
@@ -412,8 +416,16 @@ export class EditableTableState<T, F extends FiltersMap>
     return this.cellValue.isColumnEditable(rowKey, columnId);
   }
 
-  clearCells(cells: Cell[]) {
-    this.cellValue.clearCells(cells);
+  clearCells(cells: Cell[], origin: ClipboardOrigin = 'Keyboard') {
+    const cleared = this.cellValue.clearCells(cells);
+    if (cleared.length === 0) {
+      return;
+    }
+    this.bi.clipboardAction({
+      actionName: 'clear',
+      origin,
+      ...clipboardCellCounts(cleared),
+    });
   }
 
   handleCellClick(rowKey: string, columnId: string, shiftKey: boolean) {
@@ -489,6 +501,10 @@ export class EditableTableState<T, F extends FiltersMap>
     if (resolved?.toggleValue || resolved?.showEditWhenFocused) {
       return;
     }
+    // A second double-click in an editor that is already open is not a new edit.
+    if (this.cellInteraction.isCellEditing(rowKey, columnId)) {
+      return;
+    }
     if (this.isCellEditable(rowKey, columnId)) {
       this.cellInteraction.startEdit(rowKey, columnId, 'doubleClick');
     }

package/src/state/EditableTable/EditableTableStateBIReporter.ts

@@ -21,6 +21,18 @@ export type ClipboardActionName = 'copy' | 'cut' | 'paste' | 'clear';
 export type ClipboardOrigin = 'Keyboard' | 'Context Menu';
 export type MenuType = 'Cell Context Menu' | 'Column Header';
 
+/** Cell count and how many distinct columns they span. Shared by every
+ *  clipboard action so copy, cut, paste, and clear count the same set. */
+export function clipboardCellCounts(cells: Cell[]): {
+  numItems: number;
+  numColumns: number;
+} {
+  return {
+    numItems: cells.length,
+    numColumns: new Set(cells.map((cell) => cell.columnId)).size,
+  };
+}
+
 /** Where a new row was asked for. `Card CTA` is the add-row button and keeps its
  *  original name so it stays comparable with data already collected. The context
  *  menu entries reported nothing before. */
@@ -82,17 +94,25 @@ export class EditableTableStateBIReporter<T, F extends FiltersMap> {
     return this._state.toolbar.reportBi;
   }
 
-  /** Whether committing `editingValue` would actually change the cell. Call
-   *  before the write — afterwards the stored value is the new one. */
+  /** Whether committing `editingValue` would change the stored cell.
+   *  Compares the value commit would write, after normalizeOnCommit.
+   *  Call before the write — afterwards the stored value is the new one. */
   hasValueChanged(cell: Cell, editingValue: unknown): boolean {
     if (editingValue === undefined) {
       return false;
     }
+    const column = this._state._columnMap.get(cell.columnId);
+    const resolved = column
+      ? this._state.resolveCellTypeByColumnId(column.id)
+      : undefined;
+    const committedValue = resolved?.normalizeOnCommit
+      ? resolved.normalizeOnCommit(editingValue)
+      : editingValue;
     // The displayed value includes uncommitted drafts and pending cells, so a
     // re-edit to what the user already sees is not a change.
     return !Object.is(
       this._state.cellValue.getCellDisplayValue(cell.rowKey, cell.columnId),
-      editingValue,
+      committedValue,
     );
   }
 

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

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

package/src/state/LayoutSwitchState.ts

@@ -38,6 +38,9 @@ export interface LayoutSwitchStateParams<T, F extends FiltersMap> {
   table?: TableLayoutConfig;
   grid?: GridLayoutConfig;
   spreadsheet?: SpreadsheetLayoutConfig<T, F>;
+  /** Layout shown while the user has no saved choice. Ignored when not enabled.
+   *  Read on construction, so later changes have no effect. */
+  defaultViewType?: ViewType;
 }
 
 const componentType = 'LayoutSwitch';
@@ -123,6 +126,7 @@ export class LayoutSwitchState<T, F extends FiltersMap>
       componentType,
       collection: this.collection,
       options: enabledLayouts,
+      defaultViewType: params.defaultViewType,
     });
 
     this.toolbar.layoutState = this;

package/src/state/TableState.ts

@@ -49,7 +49,7 @@ export interface TableStatePublicAPI<T, F extends FiltersMap> {
   onAddItemActionComplete(items: T[]): void;
 
   /**
-   * Visible columns as selected via [CustomColumns](./?path=/story/features-display--customcolumns)
+   * Visible columns as selected via [CustomColumns](./?path=/story/features-display-custom-columns--customcolumns)
    * @external
    */
   readonly visibleColumns: { id: string }[];