@wix/patterns 1.497.0 → 1.499.0

package/src/model/itemAccess.ts

@@ -0,0 +1,36 @@
+import type { CollectionBackend, ItemPermissions } from '@wix/bex-core';
+
+interface ItemActions {
+  create: boolean;
+  update: boolean;
+  delete: boolean;
+  bulkDelete: boolean;
+}
+
+export interface ItemAccess {
+  /** What the item permissions allow. An unset permission allows the action. */
+  permitted: ItemActions;
+  /** Which write methods the backend has. */
+  supported: ItemActions;
+}
+
+export function getItemAccess(
+  permissions: ItemPermissions<any> | undefined,
+  backend: CollectionBackend<any> | undefined,
+): ItemAccess {
+  return {
+    permitted: {
+      create: permissions?.createItem ?? true,
+      update: permissions?.updateItem ?? true,
+      delete: permissions?.deleteItem ?? true,
+      bulkDelete:
+        permissions?.bulkDeleteItems ?? permissions?.deleteItem ?? true,
+    },
+    supported: {
+      create: !!backend?.create,
+      update: !!backend?.update,
+      delete: !!backend?.delete,
+      bulkDelete: !!backend?.bulkDelete,
+    },
+  };
+}

package/src/schema/syncSourcePermissions.ts

@@ -1,6 +1,7 @@
 import { autorun } from 'mobx';
 import type { FiltersMap, SourceState } from '@wix/bex-core';
 import type { EditableTableState } from '../state/EditableTable';
+import { getItemAccess } from '../model/itemAccess';
 
 /**
  * Keeps an editable table's row-action flags in sync with its source: an action
@@ -19,15 +20,14 @@ export function syncSourcePermissions<T, F extends FiltersMap>(
     const perms = loaded?.schema.itemPermissions;
     const backend = loaded?.backend;
 
+    const { permitted, supported } = getItemAccess(perms, backend);
     const isRemoveItemDisabled = perms?.isRemoveItemDisabled;
 
     state.setPermissions({
-      addItemDisabled: !(perms?.createItem ?? true) || !backend?.create,
-      updateItemDisabled: !(perms?.updateItem ?? true) || !backend?.update,
-      removeItemDisabled: !(perms?.deleteItem ?? true) || !backend?.bulkDelete,
-      multiDeleteDisabled:
-        !(perms?.bulkDeleteItems ?? perms?.deleteItem ?? true) ||
-        !backend?.bulkDelete,
+      addItemDisabled: !permitted.create || !supported.create,
+      updateItemDisabled: !permitted.update || !supported.update,
+      removeItemDisabled: !permitted.delete || !supported.bulkDelete,
+      multiDeleteDisabled: !permitted.bulkDelete || !supported.bulkDelete,
       isCreateItemDisabled: perms?.isCreateItemDisabled,
       isRemoveItemDisabled: isRemoveItemDisabled
         ? (item: T) => isRemoveItemDisabled(item as Record<string, unknown>)

package/src/schema/useEntityPage.ts

@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { observable, runInAction } from 'mobx';
 import type { FieldValues } from 'react-hook-form';
 import type { SchemaSource } from '@wix/bex-core';
 import type { EntityPageDeleteAction, EntityPageState } from '../state';
+import { markSourceSave } from '../state/EntityPage/sourceSave';
 import {
   useEntityPage as useOpenEntityPage,
   type UseEntityPageParams,
@@ -41,8 +43,19 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
   // The derived read and write need values that change or don't exist yet when
   // the state is created: the state itself (the save merges into the loaded
   // entity) and the latest entityId (a re-fetch should read the current one).
-  const [page] = useState<PageRef<T, V>>(() => ({}));
-  page.entityId = entityId;
+  // entityId is observable so the page's create/update permission follows it.
+  const [page] = useState(() =>
+    observable<PageRef<T, V>>(
+      { entityId, state: undefined },
+      { state: false },
+      { deep: false },
+    ),
+  );
+  useEffect(() => {
+    runInAction(() => {
+      page.entityId = entityId;
+    });
+  }, [page, entityId]);
 
   const state = useOpenEntityPage<T, V>({
     ...rest,
@@ -50,7 +63,7 @@ export function useEntityPage<T, V extends FieldValues = FieldValues>(
     isNewEntity: () => !page.entityId,
     fetch:
       fetch ?? (() => fetchFromSource(source, page.entityId, createLocalItem)),
-    onSave: onSave ?? (() => saveToSource(source, page)),
+    onSave: onSave ?? markSourceSave(() => saveToSource(source, page)),
     deleteAction: resolveDeleteAction(page, deleteAction),
   } as UseEntityPageParams<T, V>);
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader3311006848";
+var _namespace_ = "CollectionPageHeader1447808307";
 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":"CollectionPageHeader3311006848__root","mobileMoreActions":"CollectionPageHeader3311006848__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader1447808307__root","mobileMoreActions":"CollectionPageHeader1447808307__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges3914608263";
+var _namespace_ = "TitleBadges239452423";
 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":"TitleBadges3914608263__root","tooltip":"TitleBadges3914608263__tooltip","tooltipTrigger":"TitleBadges3914608263__tooltipTrigger"};
+export var classes = {"root":"TitleBadges239452423__root","tooltip":"TitleBadges239452423__tooltip","tooltipTrigger":"TitleBadges239452423__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellValueState.ts

@@ -2,6 +2,7 @@ import { action, computed, makeObservable, observable } from 'mobx';
 import type { CellType, Cell, ValidationResult } from './types';
 import type { EditableCellContextMenuAction, FiltersMap } from '@wix/bex-core';
 import type { EditableTableState } from './EditableTableState';
+import type { UpdateOptions } from './MutationState';
 import {
   builtInCellTypes,
   textCellType,
@@ -27,6 +28,10 @@ export class CellValueState<T, F extends FiltersMap> {
     { rowKey: string; columnId: string; value: any }
   >();
 
+  /** Local new rows not to create yet, with how many open paste toasts hold
+   *  each. See `applyPastedValues`. */
+  private readonly _heldNewRows = new Map<string, number>();
+
   private readonly _parent: EditableTableState<T, F>;
   private readonly _extraCellTypes: Map<string, CellType>;
 
@@ -46,8 +51,10 @@ export class CellValueState<T, F extends FiltersMap> {
       commitHandler: action,
       applyBulkRawValues: action,
       applyBulkValues: action,
+      applyPastedValues: action,
       revalidatePendingCells: action,
       flushDrafts: action,
+      flushDraftsOnUnmount: action,
       flushRow: action,
       dropRowCellState: action,
     });
@@ -359,9 +366,13 @@ export class CellValueState<T, F extends FiltersMap> {
    * Deserialize and apply multiple raw string values in bulk.
    * Handles conversion failures by storing them as pending cells.
    */
-  applyBulkRawValues(
-    rawChanges: { rowKey: string; columnId: string; rawValue: string }[],
-  ) {
+  applyBulkRawValues(rawChanges: RawCellChange[]) {
+    this.applyBulkValues(this._deserializeRawValues(rawChanges));
+  }
+
+  /** Values that fail are stored as pending cells with their error and left
+   *  out of the result. */
+  private _deserializeRawValues(rawChanges: RawCellChange[]) {
     const changes: { rowKey: string; columnId: string; value: any }[] = [];
     for (const { rowKey, columnId, rawValue } of rawChanges) {
       const { value, error } = this.tryDeserialize(columnId, rawValue);
@@ -378,7 +389,7 @@ export class CellValueState<T, F extends FiltersMap> {
         changes.push({ rowKey, columnId, value });
       }
     }
-    this.applyBulkValues(changes);
+    return changes;
   }
 
   /**
@@ -388,7 +399,10 @@ export class CellValueState<T, F extends FiltersMap> {
    * checking isColumnEditable here — not just at the call sites — keeps
    * read-only cells protected regardless of entry point.
    */
-  applyBulkValues(changes: { rowKey: string; columnId: string; value: any }[]) {
+  applyBulkValues(
+    changes: { rowKey: string; columnId: string; value: any }[],
+    options?: UpdateOptions,
+  ) {
     const rowUpdates = new Map<
       string,
       { item: T; changedFieldIds: Set<string> }
@@ -454,6 +468,148 @@ export class CellValueState<T, F extends FiltersMap> {
     this._parent.mutation.updateItems(
       updates.map(({ item }) => item),
       updates.map(({ changedFieldIds }) => Array.from(changedFieldIds)),
+      options,
+    );
+  }
+
+  /**
+   * Applies pasted values and shows `successToast` with Undo. The server call
+   * waits until the toast closes or times out. With `batchWait` the toast has
+   * no Undo (see `MutationState.updatesAreBatched`).
+   *
+   * Undo rolls back the saved rows, and puts back the unsaved state (invalid
+   * values and drafts) of the pasted cells and of the drafts in their rows,
+   * which the paste saves along with it. A cell changed again after the paste
+   * keeps its newer value.
+   *
+   * Local new rows the paste touched are not created while the toast is open.
+   * Otherwise the click on Undo, which takes focus out of the table, would
+   * create them with the pasted values first.
+   */
+  applyPastedValues(
+    changes: { rowKey: string; columnId: string; value: any }[],
+    rawChanges: RawCellChange[],
+    successToast: string,
+  ) {
+    if (this._parent.mutation.updatesAreBatched) {
+      this.applyBulkValues(
+        [...changes, ...this._deserializeRawValues(rawChanges)],
+        { successToast },
+      );
+      return;
+    }
+
+    const pastedCells = [...changes, ...rawChanges];
+    const rowKeys = new Set(pastedCells.map(({ rowKey }) => rowKey));
+    const affectedCellKeys = new Set<string>();
+    for (const { rowKey, columnId } of pastedCells) {
+      const key = this._pendingCellKey(rowKey, columnId);
+      if (key) {
+        affectedCellKeys.add(key);
+      }
+    }
+    for (const [key, draft] of this._draftCells) {
+      if (rowKeys.has(draft.rowKey)) {
+        affectedCellKeys.add(key);
+      }
+    }
+    const beforePaste = this._snapshotUnsavedCells(affectedCellKeys);
+    // Replaced right after the paste below. `onUndo` reads it, and core calls
+    // `onUndo` only on a click on the toast, after that.
+    let afterPaste = beforePaste;
+
+    const newRowKeys = new Set(
+      [...rowKeys].filter((rowKey) =>
+        this._parent.mutation.isLocalNewRow(rowKey),
+      ),
+    );
+    for (const rowKey of newRowKeys) {
+      this._heldNewRows.set(rowKey, (this._heldNewRows.get(rowKey) ?? 0) + 1);
+    }
+    let toastOpen = true;
+    // Retry calls `onKept` again; only the first call counts.
+    const endUndoWindow = () => {
+      if (!toastOpen) {
+        return false;
+      }
+      toastOpen = false;
+      for (const rowKey of newRowKeys) {
+        const holds = (this._heldNewRows.get(rowKey) ?? 1) - 1;
+        if (holds > 0) {
+          this._heldNewRows.set(rowKey, holds);
+        } else {
+          this._heldNewRows.delete(rowKey);
+        }
+      }
+      return true;
+    };
+
+    this.applyBulkValues(
+      // After the snapshot: this writes invalid values into `_pendingCells`.
+      [...changes, ...this._deserializeRawValues(rawChanges)],
+      {
+        successToast,
+        undo: {
+          onUndo: action(() => {
+            const wasOpen = endUndoWindow();
+            if (!wasOpen) {
+              return;
+            }
+            const restoredDraftRows = new Set<string>();
+            for (const key of affectedCellKeys) {
+              const pasted = afterPaste.get(key);
+              if (
+                this._pendingCells.get(key) !== pasted?.pending ||
+                this._draftCells.get(key) !== pasted?.draft
+              ) {
+                continue;
+              }
+              const { pending, draft } = beforePaste.get(key) ?? {};
+              setOrDelete(this._pendingCells, key, pending);
+              setOrDelete(this._draftCells, key, draft);
+              if (draft) {
+                restoredDraftRows.add(draft.rowKey);
+              }
+            }
+            // The click on Undo already flushed the table, before these drafts
+            // were back. No toast: nothing should confirm the Undo.
+            this._flushRowsWithoutFocus(restoredDraftRows, {
+              successToast: null,
+            });
+          }),
+          onKept: action(() => {
+            const wasOpen = endUndoWindow();
+            if (!wasOpen) {
+              return;
+            }
+            this._flushRowsWithoutFocus(newRowKeys);
+          }),
+        },
+      },
+    );
+    afterPaste = this._snapshotUnsavedCells(affectedCellKeys);
+  }
+
+  private _snapshotUnsavedCells(keys: Set<string>): UnsavedCellsSnapshot {
+    return new Map(
+      [...keys].map((key) => [
+        key,
+        {
+          pending: this._pendingCells.get(key),
+          draft: this._draftCells.get(key),
+        },
+      ]),
+    );
+  }
+
+  private _flushRowsWithoutFocus(
+    rowKeys: Set<string>,
+    options?: UpdateOptions,
+  ) {
+    const focusedRowKey = this._parent.cellInteraction.focusedCell?.rowKey;
+    this._flushRows(
+      (rowKey) => rowKeys.has(rowKey) && rowKey !== focusedRowKey,
+      options,
     );
   }
 
@@ -511,22 +667,36 @@ export class CellValueState<T, F extends FiltersMap> {
     this._flushRows((rowKey) => rowKey !== exceptRowKey);
   }
 
+  /** Like `flushDrafts()`, but also saves new rows held by an open paste
+   *  toast: focus can stay on a held row on unmount, and the toast doesn't
+   *  create a focused row. */
+  flushDraftsOnUnmount() {
+    this._heldNewRows.clear();
+    this.flushDrafts();
+  }
+
   /** Save one row's drafts now, leaving other rows' drafts buffered. */
   flushRow(rowKey: string) {
     this._flushRows((key) => key === rowKey);
   }
 
-  private _flushRows(includeRow: (rowKey: string) => boolean) {
+  private _flushRows(
+    includeRow: (rowKey: string) => boolean,
+    options?: UpdateOptions,
+  ) {
+    const include = (rowKey: string) =>
+      includeRow(rowKey) && !this._heldNewRows.has(rowKey);
+
     const invalidNewRows = new Set<string>();
     for (const rowKey of this._parent.mutation._drafts.keys()) {
-      if (includeRow(rowKey) && !this._validateNewRow(rowKey)) {
+      if (include(rowKey) && !this._validateNewRow(rowKey)) {
         invalidNewRows.add(rowKey);
       }
     }
 
     const rowKeys = new Set<string>();
     for (const entry of this._draftCells.values()) {
-      if (includeRow(entry.rowKey)) {
+      if (include(entry.rowKey)) {
         rowKeys.add(entry.rowKey);
       }
     }
@@ -550,6 +720,7 @@ export class CellValueState<T, F extends FiltersMap> {
       this._parent.mutation.updateItems(
         updates.map(({ item }) => item),
         updates.map(({ changedFieldIds }) => changedFieldIds),
+        options,
       );
     }
   }
@@ -621,3 +792,21 @@ export class CellValueState<T, F extends FiltersMap> {
     }
   }
 }
+
+type RawCellChange = { rowKey: string; columnId: string; rawValue: string };
+
+type UnsavedCellsSnapshot = Map<
+  string,
+  {
+    pending?: { value: any; errors: string[] };
+    draft?: { rowKey: string; columnId: string; value: any };
+  }
+>;
+
+const setOrDelete = <V>(map: Map<string, V>, key: string, value?: V) => {
+  if (value === undefined) {
+    map.delete(key);
+  } else {
+    map.set(key, value);
+  }
+};

package/src/state/EditableTable/ClipboardState.ts

@@ -74,18 +74,28 @@ export class ClipboardState<T, F extends FiltersMap> {
       this._copiedDataString !== undefined &&
       this._copiedDataString === rawData;
 
-    const { keptSourceKeys, pasted } = this._pasteGrid(
+    const { richChanges, rawChanges, keptSourceKeys, pasted } = this._pasteGrid(
       rawData,
       targetPos,
       isInternal,
-      cellValue,
     );
 
+    // Clearing the cut sources goes out in the same update as the paste, so
+    // one Undo restores both sides.
     if (this.isCut && isInternal) {
-      this._clearCutSources(keptSourceKeys, cellValue);
+      richChanges.push(...this._cutSourceClears(keptSourceKeys));
     }
 
     if (pasted.length > 0) {
+      cellValue.applyPastedValues(
+        richChanges,
+        rawChanges,
+        this._parent.collection.translate(
+          'cairo.editableTable.paste.success.toast',
+          { count: pasted.length },
+        ),
+      );
+
       this._parent.bi.clipboardAction({
         actionName: 'paste',
         origin,
@@ -101,8 +111,8 @@ export class ClipboardState<T, F extends FiltersMap> {
     rawData: string,
     targetPos: { row: number; col: number },
     useRichValues: boolean,
-    cellValue: EditableTableState<T, F>['cellValue'],
-  ): { keptSourceKeys: Set<string>; pasted: Cell[] } {
+  ) {
+    const { cellValue } = this._parent;
     const keptSourceKeys = new Set<string>();
     const pasted: Cell[] = [];
     const richChanges: { rowKey: string; columnId: string; value: any }[] = [];
@@ -161,14 +171,7 @@ export class ClipboardState<T, F extends FiltersMap> {
       }
     }
 
-    if (richChanges.length > 0) {
-      cellValue.applyBulkValues(richChanges);
-    }
-    if (rawChanges.length > 0) {
-      cellValue.applyBulkRawValues(rawChanges);
-    }
-
-    return { keptSourceKeys, pasted };
+    return { richChanges, rawChanges, keptSourceKeys, pasted };
   }
 
   // A typed value pasted into a column of another cell type would skip that
@@ -189,22 +192,21 @@ export class ClipboardState<T, F extends FiltersMap> {
     );
   }
 
-  private _clearCutSources(
-    keptSourceKeys: Set<string>,
-    cellValue: EditableTableState<T, F>['cellValue'],
-  ) {
-    const cells: Cell[] = [];
+  // The clear rule is checked again here because it can depend on row values
+  // that changed since the cut.
+  private _cutSourceClears(keptSourceKeys: Set<string>) {
+    const { cellValue } = this._parent;
+    const clears: { rowKey: string; columnId: string; value: undefined }[] = [];
     for (const key of this.copiedCells) {
       if (keptSourceKeys.has(key)) {
         continue;
       }
       const pos = parseCellKey(key);
-      if (pos) {
-        cells.push(pos);
+      if (pos && !cellValue.getCellActionDisabledTooltip('clear', pos)) {
+        clears.push({ ...pos, value: undefined });
       }
     }
-
-    cellValue.clearCells(cells);
+    return clears;
   }
 
   clear() {

package/src/state/EditableTable/EditableTableState.ts

@@ -351,7 +351,7 @@ export class EditableTableState<T, F extends FiltersMap>
 
     return () => {
       disposeValidation();
-      this.cellValue.flushDrafts();
+      this.cellValue.flushDraftsOnUnmount();
       disposeMutation();
       onBeforeUnloadSubscription?.remove();
     };

package/src/state/EditableTable/MutationState.ts

@@ -26,6 +26,20 @@ export interface EditableTableMutationHandlers<T> {
   submitDelete: (items: T[]) => Promise<void>;
 }
 
+export interface UpdateOptions {
+  /** Missing: the "Item updated" toast. A string: this text instead. `null`:
+   *  no success toast. */
+  successToast?: string | null;
+  /** Adds Undo to the success toast. The server call waits until the toast
+   *  closes or times out. */
+  undo?: {
+    /** Runs when the user clicks Undo, after the rows are rolled back. */
+    onUndo: () => void;
+    /** Runs when the toast closes or times out without Undo. */
+    onKept: () => void;
+  };
+}
+
 type DraftRow<T> = {
   item: T;
   afterItemKey?: string;
@@ -258,18 +272,37 @@ export class MutationState<T, F extends FiltersMap> {
     });
   }
 
-  updateItems(updatedItems: T[], changedFieldIdsByItem?: string[][]) {
-    const t = this._parent.collection.translate;
-    if (updatedItems.length === 0) {
+  /** With `batchWait`, core runs a batch with the last update's `submit` and
+   *  toast only, so an earlier update's Undo and `onKept` would be lost. */
+  get updatesAreBatched(): boolean {
+    return Boolean(this._optimisticActions.executor.batchWait);
+  }
+
+  updateItems(
+    updatedItems: T[],
+    changedFieldIdsByItem?: string[][],
+    { successToast, undo }: UpdateOptions = {},
+  ) {
+    // With its own toast, an empty update still runs, to show the toast for
+    // values that stayed local (invalid cells, unsaved rows).
+    if (updatedItems.length === 0 && typeof successToast !== 'string') {
       return;
     }
     const contexts = this._updateContexts(updatedItems, changedFieldIdsByItem);
     this._optimisticActions.updateMany(updatedItems, {
       keepPosition: true,
-      submit: (items) => this._submitUpdate(items, updatedItems, contexts),
-      successToast: t('cairo.editableTable.updateItem.success.toast', {
-        count: updatedItems.length,
-      }),
+      // With undo, core calls this when the toast closes or times out without
+      // Undo. Retry calls it again.
+      submit: (items) => {
+        undo?.onKept();
+        // With `batchWait`, `items` also holds the other updates of the batch.
+        return items.length > 0
+          ? this._submitUpdate(items, updatedItems, contexts)
+          : Promise.resolve();
+      },
+      successToast: this._updateSuccessToast(successToast, updatedItems.length),
+      showUndoToast: undo !== undefined,
+      onUndo: undo?.onUndo,
       errorToast: this._retryableToast(
         'cairo.editableTable.updateItem.error.toast',
         'Update',
@@ -277,6 +310,22 @@ export class MutationState<T, F extends FiltersMap> {
     });
   }
 
+  private _updateSuccessToast(
+    successToast: UpdateOptions['successToast'],
+    count: number,
+  ) {
+    if (successToast === null) {
+      return undefined;
+    }
+    return (
+      successToast ??
+      this._parent.collection.translate(
+        'cairo.editableTable.updateItem.success.toast',
+        { count },
+      )
+    );
+  }
+
   /** Wraps the create submit so the outcome is reported once the server answers
    *  — the optimistic action itself has no completion callback. */
   private _reportedCreate(origin: RowCreationOrigin) {

package/src/state/EntityPage/EntityPageDeleteActionState.ts

@@ -6,6 +6,7 @@ import type {
   WixPatternsContainer,
 } from '@wix/bex-core';
 import { computed, makeObservable } from 'mobx';
+import { getItemAccess } from '../../model/itemAccess';
 
 type DeleteErrorToast = (
   err: unknown,
@@ -104,13 +105,14 @@ export class EntityPageDeleteActionState<T> {
   }
 
   get canShow() {
-    const itemPermissions = this.getLoadedSchema()?.schema.itemPermissions;
+    const loaded = this.getLoadedSchema();
     return (
       !!this.getEntity() &&
       !!this.config &&
       this.isEnabled &&
       !!this.getDeleteHandler() &&
-      (itemPermissions?.deleteItem ?? true)
+      getItemAccess(loaded?.schema.itemPermissions, loaded?.backend).permitted
+        .delete
     );
   }