Data Grid Keyboard Shortcuts

1"use client";
2 
3import { SearchIcon, XIcon } from "lucide-react";
4import * as React from "react";
5import { Button } from "@/components/ui/button";
6import {
7  Dialog,
8  DialogClose,
9  DialogContent,
10  DialogDescription,
11  DialogHeader,
12  DialogTitle,
13} from "@/components/ui/dialog";
14import { useDirection } from "@/components/ui/direction";
15import { Input } from "@/components/ui/input";
16import { Kbd, KbdGroup } from "@/components/ui/kbd";
17import { Separator } from "@/components/ui/separator";
18 
19const SHORTCUT_KEY = "/";
20 
21interface ShortcutGroup {
22  title: string;
23  shortcuts: Array<{
24    keys: string[];
25    description: string;
26  }>;
27}
28 
29interface DataGridKeyboardShortcutsProps {
30  enableSearch?: boolean;
31  enableUndoRedo?: boolean;
32  enablePaste?: boolean;
33  enableRowAdd?: boolean;
34  enableRowsDelete?: boolean;
35}
36 
37export const DataGridKeyboardShortcuts = React.memo(
38  DataGridKeyboardShortcutsImpl,
39  (prev, next) => {
40    return (
41      prev.enableSearch === next.enableSearch &&
42      prev.enableUndoRedo === next.enableUndoRedo &&
43      prev.enablePaste === next.enablePaste &&
44      prev.enableRowAdd === next.enableRowAdd &&
45      prev.enableRowsDelete === next.enableRowsDelete
46    );
47  },
48);
49 
50function DataGridKeyboardShortcutsImpl({
51  enableSearch = false,
52  enableUndoRedo = false,
53  enablePaste = false,
54  enableRowAdd = false,
55  enableRowsDelete = false,
56}: DataGridKeyboardShortcutsProps) {
57  const dir = useDirection();
58  const [open, setOpen] = React.useState(false);
59  const [input, setInput] = React.useState("");
60  const inputRef = React.useRef<HTMLInputElement>(null);
61 
62  const isMac =
63    typeof navigator !== "undefined"
64      ? /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
65      : false;
66 
67  const modKey = isMac ? "⌘" : "Ctrl";
68 
69  const onOpenChange = React.useCallback((isOpen: boolean) => {
70    setOpen(isOpen);
71    if (!isOpen) {
72      setInput("");
73    }
74  }, []);
75 
76  const onOpenAutoFocus = React.useCallback((event: Event) => {
77    event.preventDefault();
78    inputRef.current?.focus();
79  }, []);
80 
81  const onInputChange = React.useCallback(
82    (event: React.ChangeEvent<HTMLInputElement>) => {
83      setInput(event.target.value);
84    },
85    [],
86  );
87 
88  const shortcutGroups: ShortcutGroup[] = React.useMemo(
89    () => [
90      {
91        title: "Navigation",
92        shortcuts: [
93          {
94            keys: ["↑", "↓", "←", "→"],
95            description: "Navigate between cells",
96          },
97          {
98            keys: ["Tab"],
99// … truncated