@wix/patterns 1.460.0 → 1.462.0

package/src/exports/page.ts

@@ -1,3 +1,7 @@
 export * from '../components/CollectionPageNew';
+export type {
+  CollectionPageHeaderBadge,
+  CollectionPageHeaderProps,
+} from '../components/CollectionPageHeaderNew';
 
 export { WidgetsFormProvider } from '../components/FormPage';

package/src/index.ts

@@ -181,6 +181,9 @@ export {
   type FormTypeConfig,
   type FormFieldComponentProps,
   type EditableCellConfig,
+  type EditableCellContextMenuAction,
+  type EditableCellContextMenuActionConfig,
+  type EditableCellContextMenuActionContext,
   type TableCellConfig,
   type CellViewProps,
   type CellEditProps,

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

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

package/src/state/CollectionPage/PanelHeader.tsx

@@ -1,20 +1,26 @@
 import { Box, Text } from '@wix/design-system';
 import React from 'react';
+import { CollectionPageHeaderBadge } from '../../components/CollectionPageHeaderNew';
+import { TitleBadges } from './TitleBadges';
 
 export interface PanelHeaderProps {
   title: string;
   subtitle?: string;
+  badges?: CollectionPageHeaderBadge[];
 }
 
 export function PanelHeader(props: PanelHeaderProps) {
-  const { title, subtitle } = props;
+  const { title, subtitle, badges } = props;
 
   return (
     <Box padding="SP4">
       <Box direction="vertical">
-        <Text size="small" weight="bold">
-          {title}
-        </Text>
+        <Box verticalAlign="middle">
+          <Text size="small" weight="bold">
+            {title}
+          </Text>
+          <TitleBadges badges={badges} />
+        </Box>
         {subtitle && <Text size="tiny">{subtitle}</Text>}
       </Box>
     </Box>

package/src/state/CollectionPage/TitleBadges.tsx

@@ -0,0 +1,42 @@
+import React, { lazy, Suspense } from 'react';
+import { Box } from '@wix/design-system';
+import { CollectionPageHeaderBadge } from '../../components/CollectionPageHeaderNew';
+
+const LazyBadge = lazy(() =>
+  import('@wix/design-system').then((m) => ({ default: m.Badge })),
+);
+
+export interface TitleBadgesProps {
+  badges?: CollectionPageHeaderBadge[];
+}
+
+export function TitleBadges({ badges }: TitleBadgesProps) {
+  if (!badges?.length) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={null}>
+      <Box
+        inline
+        gap="SP2"
+        verticalAlign="middle"
+        paddingLeft="SP2"
+        flexShrink={0}
+      >
+        {badges.map((badge, index) => (
+          <LazyBadge
+            key={index}
+            size="small"
+            skin={badge.skin}
+            prefixIcon={badge.prefixIcon}
+            suffixIcon={badge.suffixIcon}
+            dataHook={`collection-page-header-badge-${index}`}
+          >
+            {badge.text}
+          </LazyBadge>
+        ))}
+      </Box>
+    </Suspense>
+  );
+}

package/src/state/CollectionPage/useCollectionPageHeader.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import { Box, Heading, Page } from '@wix/design-system';
-import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
+import {
+  CollectionPageHeaderBadge,
+  CollectionPageHeaderElement,
+} from '../../components/CollectionPageHeaderNew';
 import { useCollectionPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
 import { PageSubTitle } from '../../components/PageSubTitle';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { classes, st } from './CollectionPageHeader.st.css.js';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { PanelHeader } from './PanelHeader';
 import { CollectionPageActionsBar } from './CollectionPageActionsBar';
+import { TitleBadges } from './TitleBadges';
 
 export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
   const isMobile = useIsMobile();
@@ -19,6 +24,7 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
       <PanelHeader
         title={child.props.title.text}
         subtitle={child.props.subtitle?.text}
+        badges={child.props.title.badges}
       />
     );
   }
@@ -28,7 +34,12 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
       key={child.key}
       className={st(classes.root, { mobile: isMobile })}
       dataHook="collection-page-header"
-      title={(minimized) => <CollectionPageHeaderTitle minimized={minimized} />}
+      title={(minimized) => (
+        <CollectionPageHeaderTitle
+          minimized={minimized}
+          badges={child.props.title.badges}
+        />
+      )}
       subtitle={
         child.props.subtitle ? (
           <PageSubTitle {...child.props.subtitle} />
@@ -47,19 +58,37 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
 }
 
 const CollectionPageHeaderTitle = observer(
-  ({ minimized }: { minimized: boolean }) => {
+  ({
+    minimized,
+    badges,
+  }: {
+    minimized: boolean;
+    badges?: CollectionPageHeaderBadge[];
+  }) => {
     const state = useCollectionPageContext();
     const isMobile = useIsMobile();
+    const isBmHarmonyTheme = useBmHarmonyTheme();
 
     if (minimized) {
       return <>{state.pageTitle}</>;
     }
 
+    // Page.Header sizes its own title wrapper from
+    // `--wds-page-header-title-font-size`, which Harmony maps to the `large`
+    // heading tokens. The nested Heading needs the same size or it keeps
+    // painting the 32px `extraLarge` tokens over it.
+    const titleSize = isMobile || isBmHarmonyTheme ? 'large' : 'extraLarge';
+
+    // Page.Header already wraps this in the page's `h1`, so both Headings here
+    // only carry typography — `as` keeps them from nesting more headings
+    // inside it.
     return (
-      <Heading size={isMobile ? 'large' : 'extraLarge'}>
+      <Heading as="div" size={titleSize}>
         <Box inline maxLines={1} paddingRight="9px" minWidth={0} width="100%">
           <Heading
-            size={isMobile ? 'large' : 'extraLarge'}
+            as="span"
+            dataHook="collection-page-header-title"
+            size={titleSize}
             ellipsis
             showTooltip={!isMobile}
             placement="bottom"
@@ -76,6 +105,7 @@ const CollectionPageHeaderTitle = observer(
               {state.total}
             </Box>
           )}
+          <TitleBadges badges={badges} />
         </Box>
       </Heading>
     );

package/src/state/EditableTable/CellValueState.ts

@@ -1,6 +1,6 @@
 import { action, computed, makeObservable, observable } from 'mobx';
 import type { CellType, Cell, ValidationResult } from './types';
-import type { FiltersMap } from '@wix/bex-core';
+import type { EditableCellContextMenuAction, FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
 import {
   builtInCellTypes,
@@ -145,6 +145,71 @@ export class CellValueState<T, F extends FiltersMap> {
     return column.editable !== false;
   }
 
+  getCellActionDisabledTooltip(
+    actionId: EditableCellContextMenuAction,
+    cell: Cell,
+  ): string | undefined {
+    const column = this._parent._columnMap.get(cell.columnId);
+    if (!column) {
+      return undefined;
+    }
+
+    const contextMenu = this.resolveCellTypeByColumnId(
+      cell.columnId,
+    ).contextMenu;
+    if (!contextMenu) {
+      return undefined;
+    }
+
+    const context = {
+      value: this.getCellDisplayValue(cell.rowKey, cell.columnId),
+      field: column.field,
+      rowKey: cell.rowKey,
+      columnId: cell.columnId,
+    };
+    const configs =
+      actionId === 'cut'
+        ? [contextMenu.cut, contextMenu.copy, contextMenu.clear]
+        : [contextMenu[actionId]];
+
+    for (const config of configs) {
+      const tooltip = config?.disabledTooltip(context);
+      if (tooltip) {
+        return tooltip;
+      }
+    }
+    return undefined;
+  }
+
+  getActionableCells(
+    actionId: EditableCellContextMenuAction,
+    cells: Cell[],
+  ): Cell[] {
+    return cells.filter(
+      (cell) => !this.getCellActionDisabledTooltip(actionId, cell),
+    );
+  }
+
+  getCellActionMenuAvailability(
+    actionId: EditableCellContextMenuAction,
+    cells: Cell[],
+  ): { disabled: boolean; disabledTooltip?: string } {
+    let disabledTooltip: string | undefined;
+
+    for (const cell of cells) {
+      const tooltip = this.getCellActionDisabledTooltip(actionId, cell);
+      disabledTooltip ??= tooltip;
+      const isAvailableWithoutCustomPolicy =
+        actionId === 'copy' ||
+        this.isColumnEditable(cell.rowKey, cell.columnId);
+      if (isAvailableWithoutCustomPolicy && !tooltip) {
+        return { disabled: false };
+      }
+    }
+
+    return { disabled: true, disabledTooltip };
+  }
+
   /** Serialize a cell value to a string (for clipboard copy/cut). */
   serializeCellValue(rowKey: string, columnId: string): string {
     const column = this._parent._columnMap.get(columnId);
@@ -157,7 +222,7 @@ export class CellValueState<T, F extends FiltersMap> {
     return resolved.serialize ? resolved.serialize(value) : String(value ?? '');
   }
 
-  /** Clear selected cells (Delete/Backspace). Respects cellType.clearable and column.editable. */
+  /** Clear selected cells (Delete/Backspace). Respects column.editable and contextMenu.clear. */
   clearCells(cells: Cell[]) {
     const changes: { rowKey: string; columnId: string; value: any }[] = [];
 
@@ -166,11 +231,10 @@ export class CellValueState<T, F extends FiltersMap> {
       if (!column?.setValue) {
         continue;
       }
-      const resolved = this.resolveCellTypeByColumnId(column.id);
-      if (resolved.clearable === false) {
+      if (!this.isColumnEditable(cell.rowKey, cell.columnId)) {
         continue;
       }
-      if (!this.isColumnEditable(cell.rowKey, cell.columnId)) {
+      if (this.getCellActionDisabledTooltip('clear', cell)) {
         continue;
       }
 
@@ -178,8 +242,11 @@ export class CellValueState<T, F extends FiltersMap> {
       if (pendingKey) {
         this._pendingCells.delete(pendingKey);
       }
-      const value = resolved.deserialize ? resolved.deserialize('') : '';
-      changes.push({ rowKey: cell.rowKey, columnId: cell.columnId, value });
+      changes.push({
+        rowKey: cell.rowKey,
+        columnId: cell.columnId,
+        value: undefined,
+      });
     }
 
     if (changes.length > 0) {

package/src/state/EditableTable/ClipboardState.ts

@@ -1,14 +1,15 @@
 import { action, computed, makeObservable, observable } from 'mobx';
-import type { CellBorder } from './types';
-import type { FiltersMap } from '@wix/bex-core';
+import type { Cell, CellBorder } from './types';
+import type { EditableCellContextMenuAction, FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
 import { cellKey, parseCellKey, noBorder } from './utils';
 
 export class ClipboardState<T, F extends FiltersMap> {
   copiedCells = new Set<string>();
   isCut = false;
-  private _copiedDataString = '';
+  private _copiedDataString?: string;
   private _copiedValues = new Map<string, any>();
+  private _copiedSourceKeys = new Map<string, string>();
   private readonly _parent: EditableTableState<T, F>;
 
   constructor(parent: EditableTableState<T, F>) {
@@ -29,7 +30,7 @@ export class ClipboardState<T, F extends FiltersMap> {
    */
   copy(): string {
     this.clear();
-    return this._storeCells();
+    return this._storeCells('copy');
   }
 
   /**
@@ -37,8 +38,9 @@ export class ClipboardState<T, F extends FiltersMap> {
    */
   cut(): string {
     this.clear();
-    this.isCut = true;
-    return this._storeCells();
+    const data = this._storeCells('cut');
+    this.isCut = this.copiedCells.size > 0;
+    return data;
   }
 
   /**
@@ -52,15 +54,19 @@ export class ClipboardState<T, F extends FiltersMap> {
     if (!target) {
       return;
     }
+    if (cellValue.getCellActionDisabledTooltip('paste', target)) {
+      return;
+    }
     const targetPos = this._parent._toIndices(target);
     if (!targetPos) {
       return;
     }
 
     const isInternal =
-      this._copiedDataString !== '' && this._copiedDataString === rawData;
+      this._copiedDataString !== undefined &&
+      this._copiedDataString === rawData;
 
-    const pastedKeys = this._pasteGrid(
+    const keptSourceKeys = this._pasteGrid(
       rawData,
       targetPos,
       isInternal,
@@ -68,7 +74,7 @@ export class ClipboardState<T, F extends FiltersMap> {
     );
 
     if (this.isCut && isInternal) {
-      this._clearCutSources(pastedKeys, cellValue);
+      this._clearCutSources(keptSourceKeys, cellValue);
     }
 
     this.clear();
@@ -80,32 +86,44 @@ export class ClipboardState<T, F extends FiltersMap> {
     useRichValues: boolean,
     cellValue: EditableTableState<T, F>['cellValue'],
   ): Set<string> {
-    const pastedKeys = new Set<string>();
+    const keptSourceKeys = new Set<string>();
     const richChanges: { rowKey: string; columnId: string; value: any }[] = [];
     const rawChanges: { rowKey: string; columnId: string; rawValue: string }[] =
       [];
-    const rows = rawData.split(/\r?\n/).filter((r) => r.length > 0);
+    const rows = rawData
+      .split(/\r?\n/)
+      .filter((row) => useRichValues || row.length > 0);
 
     for (let r = 0; r < rows.length; r++) {
       const cols = rows[r].split('\t');
       for (let c = 0; c < cols.length; c++) {
+        const offset = `${r}:${c}`;
+        if (useRichValues && !this._copiedValues.has(offset)) {
+          continue;
+        }
+
         const dest = this._parent._toPosition(
           targetPos.row + r,
           targetPos.col + c,
         );
-        if (!dest) {
+        if (
+          !dest ||
+          !cellValue.isColumnEditable(dest.rowKey, dest.columnId) ||
+          cellValue.getCellActionDisabledTooltip('paste', dest)
+        ) {
+          const sourceKey = this._copiedSourceKeys.get(offset);
+          if (sourceKey) {
+            keptSourceKeys.add(sourceKey);
+          }
           continue;
         }
 
-        const richValue = useRichValues
-          ? this._copiedValues.get(`${r}:${c}`)
-          : undefined;
-
-        if (richValue !== undefined) {
+        keptSourceKeys.add(cellKey(dest.rowKey, dest.columnId));
+        if (useRichValues) {
           richChanges.push({
             rowKey: dest.rowKey,
             columnId: dest.columnId,
-            value: richValue,
+            value: this._copiedValues.get(offset),
           });
         } else {
           rawChanges.push({
@@ -114,8 +132,6 @@ export class ClipboardState<T, F extends FiltersMap> {
             rawValue: cols[c],
           });
         }
-
-        pastedKeys.add(cellKey(dest.rowKey, dest.columnId));
       }
     }
 
@@ -126,40 +142,33 @@ export class ClipboardState<T, F extends FiltersMap> {
       cellValue.applyBulkRawValues(rawChanges);
     }
 
-    return pastedKeys;
+    return keptSourceKeys;
   }
 
   private _clearCutSources(
-    pastedKeys: Set<string>,
+    keptSourceKeys: Set<string>,
     cellValue: EditableTableState<T, F>['cellValue'],
   ) {
-    const rawChanges: {
-      rowKey: string;
-      columnId: string;
-      rawValue: string;
-    }[] = [];
+    const cells: Cell[] = [];
     for (const key of this.copiedCells) {
-      if (pastedKeys.has(key)) {
+      if (keptSourceKeys.has(key)) {
         continue;
       }
       const pos = parseCellKey(key);
       if (pos) {
-        rawChanges.push({
-          rowKey: pos.rowKey,
-          columnId: pos.columnId,
-          rawValue: '',
-        });
+        cells.push(pos);
       }
     }
 
-    cellValue.applyBulkRawValues(rawChanges);
+    cellValue.clearCells(cells);
   }
 
   clear() {
     this.copiedCells.clear();
     this.isCut = false;
-    this._copiedDataString = '';
+    this._copiedDataString = undefined;
     this._copiedValues.clear();
+    this._copiedSourceKeys.clear();
   }
 
   isCellCopied(rowKey: string, columnId: string): boolean {
@@ -196,19 +205,23 @@ export class ClipboardState<T, F extends FiltersMap> {
     return this.copiedCells.size > 0;
   }
 
-  private _storeCells(): string {
-    const cells = this._parent.cellInteraction.selectedCellsList;
-    if (cells.length === 0) {
+  private _storeCells(actionId: EditableCellContextMenuAction): string {
+    const selectedCells = this._parent.cellInteraction.selectedCellsList;
+    if (selectedCells.length === 0) {
       return '';
     }
 
     const { cellValue } = this._parent;
+    const cells = cellValue.getActionableCells(actionId, selectedCells);
+    if (cells.length === 0) {
+      return '';
+    }
 
     for (const cell of cells) {
       this.copiedCells.add(cellKey(cell.rowKey, cell.columnId));
     }
 
-    const indices = cells
+    const indices = selectedCells
       .map((c) => this._parent._toIndices(c))
       .filter((idx): idx is { row: number; col: number } => idx !== null);
 
@@ -232,10 +245,12 @@ export class ClipboardState<T, F extends FiltersMap> {
             pos.columnId,
           );
           row.push(serialized);
+          const offset = `${r - minRow}:${c - minCol}`;
           this._copiedValues.set(
-            `${r - minRow}:${c - minCol}`,
+            offset,
             cellValue.getCellDisplayValue(pos.rowKey, pos.columnId),
           );
+          this._copiedSourceKeys.set(offset, cellKey(pos.rowKey, pos.columnId));
         } else {
           row.push('');
         }

package/src/state/EditableTable/types.ts

@@ -1,5 +1,10 @@
 import type { ComponentType } from 'react';
-import type { Translate, ValidationRule } from '@wix/bex-core';
+import type {
+  EditableCellConfig,
+  Field,
+  Translate,
+  ValidationRule,
+} from '@wix/bex-core';
 import type { RichTextStyleVariables } from '@wix/patterns-fields';
 import type { TableColumn } from '../../model/tableColumn';
 import type { ReferenceTypeConfig } from '../../components/EditableTable/cellTypes/reference/types';
@@ -61,8 +66,8 @@ export interface CellType {
   /** Can this cell type be edited? (default: true) */
   editable?: boolean;
 
-  /** Can this cell type be cleared with Delete key? (default: true) */
-  clearable?: boolean;
+  /** Availability of Cairo's built-in cell context-menu actions. */
+  contextMenu?: EditableCellConfig<unknown>['contextMenu'];
 
   /** Toggle value on single click (e.g., boolean checkbox). Skips focus→edit flow. */
   toggleValue?: (value: any) => any;
@@ -150,6 +155,9 @@ interface EditableColumnBase<T> extends Omit<TableColumn<T>, 'render'> {
   /** Extract the cell value from the row data */
   getValue: (item: T) => any;
 
+  /** Field metadata associated with the column, when available. */
+  field?: Field;
+
   /** Return updated item with new cell value (immutable) */
   setValue?: (item: T, value: any) => T;
 

package/src/state/EditableTable/utils.ts

@@ -28,6 +28,10 @@ export const noBorder: CellBorder = {
 export const validResult: ValidationResult = { valid: true };
 
 function checkValidationRule(rule: ValidationRule, value: any): boolean {
+  if (value == null && rule.type !== 'required' && rule.type !== 'custom') {
+    return true;
+  }
+
   switch (rule.type) {
     case 'required':
       return value != null && value !== '';

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

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

package/src/state/FormPage/useFormPageHeader.tsx

@@ -13,6 +13,7 @@ import { FormPageActionsBar } from '../../components/FormPage';
 import { PageSubTitle, PageSubTitleProps } from '../../components/PageSubTitle';
 import { st, classes } from './FormPageHeader.st.css.js';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { FormPageHeaderProps } from '../../components/FormPageHeader';
 
 export function useFormPageHeader(
@@ -31,6 +32,7 @@ export function useFormPageHeader(
 ) {
   const state = useFormPageContext();
   const isMobile = useIsMobile();
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const { title, subtitle, breadcrumbs } = overrides;
 
   const actionsBar = (
@@ -44,9 +46,16 @@ export function useFormPageHeader(
 
     const { text, badges } = title;
 
+    // Match the size Page.Header's own title wrapper takes from
+    // `--wds-page-header-title-font-size` — otherwise this nested Heading
+    // paints the 32px `extraLarge` tokens over Harmony's 24px.
+    const titleSize = isMobile || isBmHarmonyTheme ? 'large' : 'extraLarge';
+
     return (
       <Box gap="SP2" verticalAlign="middle" alignContent="center">
-        <Heading size={isMobile ? 'large' : 'extraLarge'}>{text}</Heading>
+        <Heading as="span" dataHook="form-page-header-title" size={titleSize}>
+          {text}
+        </Heading>
         {badges && badges.length > 0 && (
           <Box gap="SP2">
             {badges.map((badge, index) => (