diff --git a/apps/client/src/features/base/components/grid/grid-container.tsx b/apps/client/src/features/base/components/grid/grid-container.tsx index 0b0cc47e..b38eaf5e 100644 --- a/apps/client/src/features/base/components/grid/grid-container.tsx +++ b/apps/client/src/features/base/components/grid/grid-container.tsx @@ -21,6 +21,8 @@ import { editingCellAtom, activePropertyMenuAtom, propertyMenuDirtyAtom, propert import { useColumnResize } from "@/features/base/hooks/use-column-resize"; import { useGridKeyboardNav } from "@/features/base/hooks/use-grid-keyboard-nav"; import { useRowDrag } from "@/features/base/hooks/use-row-drag"; +import { useRowSelection } from "@/features/base/hooks/use-row-selection"; +import { useDeleteSelectedRows } from "@/features/base/hooks/use-delete-selected-rows"; import { GridHeader } from "./grid-header"; import { GridRow } from "./grid-row"; import { AddRowButton } from "./add-row-button"; @@ -66,6 +68,9 @@ export function GridContainer({ propertyMenuDirtyRef.current = propertyMenuDirty; const closeRequestCounterRef = useRef(0); + const { selectionCount, clear: clearSelection } = useRowSelection(); + const { deleteSelected } = useDeleteSelectedRows(baseId ?? ""); + useEffect(() => { const handleMouseDown = (e: MouseEvent) => { const target = e.target as HTMLElement; @@ -113,6 +118,30 @@ export function GridContainer({ } }, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]); + useEffect(() => { + const el = scrollRef.current; + if (!el || !baseId) return; + const handler = (e: KeyboardEvent) => { + if (editingCell) return; + const active = document.activeElement as HTMLElement | null; + if (!active || !el.contains(active)) return; + const tag = active.tagName; + if (tag === "INPUT" || tag === "TEXTAREA" || active.isContentEditable) { + return; + } + if (e.key === "Escape" && selectionCount > 0) { + clearSelection(); + return; + } + if ((e.key === "Delete" || e.key === "Backspace") && selectionCount > 0) { + e.preventDefault(); + void deleteSelected(); + } + }; + el.addEventListener("keydown", handler); + return () => el.removeEventListener("keydown", handler); + }, [editingCell, selectionCount, clearSelection, deleteSelected, baseId]); + const gridTemplateColumns = useMemo(() => { const visibleColumns = table.getVisibleLeafColumns(); const columnWidths = visibleColumns.map((col) => `${col.getSize()}px`);