@wix/patterns 1.477.0 → 1.479.0

package/src/hooks/useCollectionPageChild/useCollectionPageChild.tsx

@@ -1,4 +1,5 @@
 import React, { isValidElement, Children, ReactNode } from 'react';
+import { Page } from '@wix/design-system';
 import {
   CollectionPageHeader,
   CollectionPageHeaderElement,
@@ -11,10 +12,22 @@ import {
   CollectionPageFooter,
   CollectionPageFooterElement,
 } from '../../components/CollectionPageFooter';
+import { MobilePrimaryActionBar } from '../../state/CollectionPage/MobilePrimaryActionBar';
+import { useIsMobile } from '../useIsMobile';
 
 export function useCollectionPageChild(children: ReactNode) {
+  const isMobile = useIsMobile();
+  const childrenArr = Children.toArray(children);
+  const headerChild = childrenArr.find(
+    (child): child is CollectionPageHeaderElement =>
+      isValidElement(child) && child.type === CollectionPageHeader,
+  );
+  const mobilePrimaryAction = isMobile
+    ? headerChild?.props.primaryAction
+    : undefined;
+
   // Mapping to raw WDS components since original Page filtering none expected components: https://github.com/wix-private/wix-design-systems/blob/master/packages/wix-style-react/src/Page/Page.js#L626
-  return Children.toArray(children)
+  const mapped = childrenArr
     .map((child, index) => {
       let newChild = null;
       if (isValidElement(child)) {
@@ -43,4 +56,16 @@ export function useCollectionPageChild(children: ReactNode) {
       return React.cloneElement(newChild, { key: index });
     })
     .filter((c) => c);
+
+  // On mobile the primary action moves from the header to the page's fixed
+  // footer.
+  if (mobilePrimaryAction) {
+    mapped.push(
+      <Page.FixedFooter key="mobile-primary-action">
+        <MobilePrimaryActionBar>{mobilePrimaryAction}</MobilePrimaryActionBar>
+      </Page.FixedFooter>,
+    );
+  }
+
+  return mapped;
 }

package/src/hooks/useLayoutSwitchCollection.ts

@@ -6,6 +6,7 @@ import {
   useCreateCollection,
   useCreateOptimisticActions,
 } from '@wix/bex-core/react';
+import type { ViewType } from '../state/ViewTypeState';
 import {
   LayoutSwitchState,
   LayoutSwitchStateParams,
@@ -22,6 +23,11 @@ export type LayoutSwitchCollectionConfig<
   table?: TableLayoutConfig;
   grid?: GridLayoutConfig;
   spreadsheet?: Omit<SpreadsheetLayoutConfig<T, F>, 'createOptimisticActions'>;
+  /** 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;
 };
 
 export const useLayoutSwitchCollection = <
@@ -53,6 +59,7 @@ export const useLayoutSwitchCollection = <
       table: config.table,
       grid: config.grid,
       spreadsheet,
+      defaultViewType: config.defaultViewType,
     });
   });
 

package/src/hooks/usePickerModal/UsePickerModalParamsBase.ts

@@ -107,7 +107,7 @@ export interface UsePickerModalParamsBase<T, F extends FiltersMap> {
    * Accepts the following parameters:
    * - `query`: A [ComputedQuery](./?path=/story/common-types--computedquery)  instance. Holds all the relevant variables to query the server API with.
    *
-   * The function must return a promise of [DataResultRaw](./?path=/story/common-models--dataresultraw)
+   * The function must return a promise of [DataResultRaw](./?path=/story/common-types--dataresultraw)
    */
   fetchData?: (query: ComputedQuery<F>) => Promise<DataResultRaw<T>>;
 

package/src/index.ts

@@ -199,6 +199,7 @@ export {
 } from '@wix/bex-core';
 export * from './state/LayoutSwitchState';
 export * from './state/ILayoutSwitchState';
+export type { ViewType } from './state/ViewTypeState';
 export { DateRangeFilterStateParams } from './state/DateRangeFilterState';
 
 export { TableDragAndDrop } from './components/TableDragAndDrop';

package/src/schema/syncSourcePermissions.ts

@@ -28,6 +28,7 @@ export function syncSourcePermissions<T, F extends FiltersMap>(
       multiDeleteDisabled:
         !(perms?.bulkDeleteItems ?? perms?.deleteItem ?? true) ||
         !backend?.bulkDelete,
+      isCreateItemDisabled: perms?.isCreateItemDisabled,
       isRemoveItemDisabled: isRemoveItemDisabled
         ? (item: T) => isRemoveItemDisabled(item as Record<string, unknown>)
         : undefined,

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_ = "CollectionPageHeader1380742778";
+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":"CollectionPageHeader1380742778__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_ = "TitleBadges19120444";
+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":"TitleBadges19120444__root","tooltip":"TitleBadges19120444__tooltip","tooltipTrigger":"TitleBadges19120444__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) {