@wix/patterns 1.432.0 → 1.433.0

package/src/components/BulkActionButton/BulkActionButton.tsx

@@ -7,44 +7,40 @@ export type BulkActionButtonProps = ButtonProps & {
   tooltipProps?: Partial<TooltipProps>;
 };
 
-export const BulkActionButton = forwardRef<HTMLButtonElement, BulkActionButtonProps>(
-  (props, ref) => {
-    const { tooltipText, tooltipProps, ...rest } = props;
+export const BulkActionButton = forwardRef<
+  HTMLButtonElement,
+  BulkActionButtonProps
+>((props, ref) => {
+  const { tooltipText, tooltipProps, ...rest } = props;
 
-    const setRef = useCallback(
-      (element: HTMLElement | null) => {
-        if (!ref) {
-          return;
-        }
-        const buttonEl =
-          (element?.querySelector('button') as HTMLButtonElement | null) ?? null;
-        if (typeof ref === 'function') {
-          ref(buttonEl);
-        } else {
-          (ref as React.MutableRefObject<HTMLButtonElement | null>).current =
-            buttonEl;
-        }
-      },
-      [ref],
-    );
+  const setRef = useCallback(
+    (element: HTMLElement | null) => {
+      if (!ref) {
+        return;
+      }
+      const buttonEl =
+        (element?.querySelector('button') as HTMLButtonElement | null) ?? null;
+      if (typeof ref === 'function') {
+        ref(buttonEl);
+      } else {
+        (ref as React.MutableRefObject<HTMLButtonElement | null>).current =
+          buttonEl;
+      }
+    },
+    [ref],
+  );
 
-    return (
-      <div ref={setRef} style={{ display: 'contents' }}>
-        <DisabledTooltip
-          content={tooltipText}
-          dataHook="bulk-action-button-tooltip"
-          {...tooltipProps}
-        >
-          <Button
-            dataHook="bulk-action-button"
-            skin="standard"
-            priority="secondary"
-            {...rest}
-          />
-        </DisabledTooltip>
-      </div>
-    );
-  },
-);
+  return (
+    <div ref={setRef} style={{ display: 'contents' }}>
+      <DisabledTooltip
+        content={tooltipText}
+        dataHook="bulk-action-button-tooltip"
+        {...tooltipProps}
+      >
+        <Button dataHook="bulk-action-button" priority="secondary" {...rest} />
+      </DisabledTooltip>
+    </div>
+  );
+});
 
 BulkActionButton.displayName = 'BulkActionButton';

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

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

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm3072570740";
+var _namespace_ = "CmsFieldForm1956475299";
 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":"CmsFieldForm3072570740__root","fullBleedDivider":"CmsFieldForm3072570740__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1956475299__root","fullBleedDivider":"CmsFieldForm1956475299__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal574041138";
+var _namespace_ = "CmsFieldModal45411424";
 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":"CmsFieldModal574041138__root","modal":"CmsFieldModal574041138__modal"};
+export var classes = {"root":"CmsFieldModal45411424__root","modal":"CmsFieldModal45411424__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection3027898072";
+var _namespace_ = "ValidationAndDefaultsSection411259117";
 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":"ValidationAndDefaultsSection3027898072__root","accordionWrapper":"ValidationAndDefaultsSection3027898072__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection411259117__root","accordionWrapper":"ValidationAndDefaultsSection411259117__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput3690679241";
+var _namespace_ = "CharactersLimitInput4042816749";
 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":"CharactersLimitInput3690679241__root","field":"CharactersLimitInput3690679241__field"};
+export var classes = {"root":"CharactersLimitInput4042816749__root","field":"CharactersLimitInput4042816749__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3206668098";
+var _namespace_ = "Collapse2758930313";
 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":"Collapse3206668098__root","exit":"Collapse3206668098__exit"};
+export var classes = {"root":"Collapse2758930313__root","exit":"Collapse2758930313__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3072653247";
+var _namespace_ = "CollectionSectionHeader4174355409";
 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":"CollectionSectionHeader3072653247__root","summaryIcon":"CollectionSectionHeader3072653247__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader4174355409__root","summaryIcon":"CollectionSectionHeader4174355409__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -29,6 +29,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 import { CollectionToolbarsVisualizationProps } from '../CollectionToolbars/CollectionToolbarsVisualization';
 import { buildMobileColumns } from './buildMobileColumns';
 import { TableColumn } from '../../model';
+import { version as cairoVersion } from '../../version';
 
 export interface CollectionTableWSRTableBaseProps<U, T, F extends FiltersMap>
   extends ToolbarCollectionBaseProps<T, F>,
@@ -223,6 +224,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
   return (
     <div
       data-hook="collection-table"
+      data-wix-patterns={cairoVersion}
       className={wsrTableSt(
         wsrTableClasses.root,
         { resizable: !!resizable },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2037920816";
+var _namespace_ = "CollectionToolbar1618305658";
 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":"CollectionToolbar2037920816__root","right":"CollectionToolbar2037920816__right","left":"CollectionToolbar2037920816__left","fullWidth":"CollectionToolbar2037920816__fullWidth"};
+export var classes = {"root":"CollectionToolbar1618305658__root","right":"CollectionToolbar1618305658__right","left":"CollectionToolbar1618305658__left","fullWidth":"CollectionToolbar1618305658__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2155612317";
+var _namespace_ = "SearchOrCustomFilter4157439794";
 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":"SearchOrCustomFilter2155612317__root","search":"SearchOrCustomFilter2155612317__search","searchMobile":"SearchOrCustomFilter2155612317__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter4157439794__root","search":"SearchOrCustomFilter4157439794__search","searchMobile":"SearchOrCustomFilter4157439794__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

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

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

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell2141481655";
+var _namespace_ = "EditableCell2760915353";
 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":"EditableCell2141481655__root","validationIndicator":"EditableCell2141481655__validationIndicator"};
+export var classes = {"root":"EditableCell2760915353__root","validationIndicator":"EditableCell2760915353__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableTable.tsx

@@ -23,6 +23,7 @@ import { AddItemRow } from './AddItemRow';
 import { useAddRow } from './useAddRow';
 import type { TableColumn } from '../../model';
 import { useHeaderActions } from './useHeaderActions';
+import { version as cairoVersion } from '../../version';
 
 export interface EditableTableProps<
   T,
@@ -115,6 +116,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
       <div
         ref={containerRef}
         data-hook={dataHook}
+        data-wix-patterns={cairoVersion}
         tabIndex={0}
         onKeyDown={keyboard.onKeyDown}
         onFocus={onFocus}

package/src/components/EditableTable/EditableTableContextMenu.tsx

@@ -2,14 +2,20 @@ import React, { useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { observer } from 'mobx-react-lite';
 import type { FiltersMap } from '@wix/bex-core';
-import { DropdownLayout, listItemActionBuilder } from '@wix/design-system';
+import {
+  DropdownLayout,
+  Tooltip,
+  listItemActionBuilder,
+} from '@wix/design-system';
 import {
   DeleteSmall,
   AddSmall,
   DuplicateSmall,
-} from '@wix/wix-ui-icons-common/lazy';
+} from '@wix/wix-ui-icons-common';
 import type { EditableTableState, Cell } from '../../state/EditableTable';
 
+type ListItemActionBuilderParams = Parameters<typeof listItemActionBuilder>[0];
+
 export interface EditableTableContextMenuProps<T, F extends FiltersMap> {
   state: EditableTableState<T, F>;
   position: { x: number; y: number } | null;
@@ -25,6 +31,40 @@ const PADDING = 16;
 const OFFSET_X = 4;
 const OFFSET_Y = 4;
 
+// ListItemAction's built-in disabledDescription tooltip is hardcoded to open
+// above the item, where it covers neighboring menu items. Build the item
+// without it and attach our own tooltip to the side instead. The hidden span
+// mirrors what ListItemAction renders for disabledDescription, keeping the
+// description reachable by screen readers and testkits.
+const buildMenuAction = ({
+  disabledDescription,
+  ...params
+}: ListItemActionBuilderParams) => {
+  const built = listItemActionBuilder(params);
+  if (!params.disabled || !disabledDescription) {
+    return built;
+  }
+  const descriptionId = `editable-table-context-menu-${params.id}-disabled-description`;
+  return {
+    ...built,
+    value: (args: { hovered: boolean }) => (
+      <>
+        <Tooltip
+          content={disabledDescription}
+          placement="right"
+          enterDelay={450}
+          aria-describedby={descriptionId}
+        >
+          {built.value(args)}
+        </Tooltip>
+        <span id={descriptionId} hidden>
+          {disabledDescription}
+        </span>
+      </>
+    ),
+  };
+};
+
 function _EditableTableContextMenu<T, F extends FiltersMap>({
   state,
   position,
@@ -110,42 +150,71 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
 
   const options = [];
 
-  const pushRowActions = (multipleRows: boolean) => {
-    if (!multipleRows && !addItemDisabled) {
+  const isDeleteDisabledFor = (rowKeys: string[]) =>
+    rowKeys.length > 1
+      ? state.isMultiDeleteDisabled(rowKeys)
+      : state.isRowDeleteDisabled(rowKeys[0] ?? cell.rowKey);
+  const deleteDisabledReasonFor = (rowKeys: string[]) =>
+    removeItemDisabled
+      ? "You don't have permission to delete rows"
+      : rowKeys.length > 1 && state.multiDeleteDisabled
+      ? "You don't have permission to delete multiple rows at once"
+      : rowKeys.length > 1
+      ? "Some of the selected rows can't be deleted"
+      : state.rowDeleteDisabledReason(rowKeys[0] ?? cell.rowKey) ??
+        "This row can't be deleted";
+
+  const addDisabledReason = addItemDisabled
+    ? "You don't have permission to add rows"
+    : undefined;
+  const updateDisabledReason = updateItemDisabled
+    ? "You don't have permission to edit rows"
+    : undefined;
+
+  const pushRowActions = (targetKeys: string[]) => {
+    if (targetKeys.length === 1) {
       options.push(
-        listItemActionBuilder({
+        buildMenuAction({
           id: 'add-above',
           title: 'Add Row Above',
           prefixIcon: <AddSmall />,
+          disabled: !!addItemDisabled,
+          disabledDescription: addDisabledReason,
         }),
-        listItemActionBuilder({
+        buildMenuAction({
           id: 'add-below',
           title: 'Add Row Below',
           prefixIcon: <AddSmall />,
+          disabled: !!addItemDisabled,
+          disabledDescription: addDisabledReason,
         }),
-        listItemActionBuilder({
+        buildMenuAction({
           id: 'duplicate',
           title: 'Duplicate Row',
           prefixIcon: <DuplicateSmall />,
+          disabled: !!addItemDisabled,
+          disabledDescription: addDisabledReason,
         }),
       );
+      options.push({ id: 'divider-2', value: '-' });
     }
 
-    if (!removeItemDisabled) {
-      if (!multipleRows && !addItemDisabled) {
-        options.push({ id: 'divider-2', value: '-' });
-      }
-      options.push(
-        listItemActionBuilder({
-          id: 'delete',
-          title: multipleRows
-            ? `Delete ${selectedRowCount} Rows`
+    const deleteDisabled = isDeleteDisabledFor(targetKeys);
+    options.push(
+      buildMenuAction({
+        id: 'delete',
+        title:
+          targetKeys.length > 1
+            ? `Delete ${targetKeys.length} Rows`
             : 'Delete Row',
-          prefixIcon: <DeleteSmall />,
-          skin: 'destructive',
-        }),
-      );
-    }
+        prefixIcon: <DeleteSmall />,
+        skin: 'destructive',
+        disabled: deleteDisabled,
+        disabledDescription: deleteDisabled
+          ? deleteDisabledReasonFor(targetKeys)
+          : undefined,
+      }),
+    );
   };
 
   if (isRowSelectionMode) {
@@ -156,43 +225,48 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
     // selected row is actually loaded client-side.
     if (collection.bulkSelect.allSelectedItemsFetched) {
       if (hasMultipleRows) {
-        if (!removeItemDisabled) {
-          options.push(
-            listItemActionBuilder({
-              id: 'delete',
-              title: `Remove ${selectedRowCount} Rows`,
-              prefixIcon: <DeleteSmall />,
-              skin: 'destructive',
-            }),
-          );
-        }
+        const deleteDisabled = isDeleteDisabledFor(selectedRowKeys);
+        options.push(
+          buildMenuAction({
+            id: 'delete',
+            title: `Remove ${selectedRowCount} Rows`,
+            prefixIcon: <DeleteSmall />,
+            skin: 'destructive',
+            disabled: deleteDisabled,
+            disabledDescription: deleteDisabled
+              ? deleteDisabledReasonFor(selectedRowKeys)
+              : undefined,
+          }),
+        );
       } else {
         // A single checked row gets the full row menu, targeting the checked
         // row — not the row under the cursor.
-        pushRowActions(false);
+        pushRowActions(selectedRowKeys);
       }
     }
   } else {
     options.push(
-      listItemActionBuilder({
+      buildMenuAction({
         id: 'copy',
         title: `Copy`,
         disabled: selectedCount === 0,
       }),
-      listItemActionBuilder({
+      buildMenuAction({
         id: 'cut',
         title: `Cut`,
         disabled:
           selectedCount === 0 ||
           !!updateItemDisabled ||
           areSelectedCellsReadOnly,
+        disabledDescription: updateDisabledReason,
       }),
-      listItemActionBuilder({
+      buildMenuAction({
         id: 'paste',
         title: `Paste`,
         disabled: !!updateItemDisabled || isPasteTargetReadOnly,
+        disabledDescription: updateDisabledReason,
       }),
-      listItemActionBuilder({
+      buildMenuAction({
         id: 'clear',
         title:
           selectedCount > 1 ? `Clear ${selectedCount} Cells` : 'Clear Cell',
@@ -200,16 +274,19 @@ function _EditableTableContextMenu<T, F extends FiltersMap>({
           selectedCount === 0 ||
           !!updateItemDisabled ||
           areSelectedCellsReadOnly,
+        disabledDescription: updateDisabledReason,
       }),
     );
 
-    // A cell-range selection spanning several rows offers cell ops plus
+    options.push({ id: 'divider-1', value: '-' });
+
+    // A cell-range selection spanning several rows only offers cell ops plus
     // deleting the spanned rows; a single-row context gets the full row menu.
-    const hasRowOps = !addItemDisabled || !removeItemDisabled;
-    if (hasRowOps) {
-      options.push({ id: 'divider-1', value: '-' });
-    }
-    pushRowActions(isMultiCellSelection && hasMultipleRows);
+    const deleteKeys =
+      isMultiCellSelection && selectedRowKeys.length > 0
+        ? selectedRowKeys
+        : [cell.rowKey];
+    pushRowActions(deleteKeys);
   }
 
   if (options.length === 0) {