@grampro/kit 0.0.0-stage → 2.4.1

package/source/components/data-grid/react/keyboard.ts

@@ -0,0 +1,110 @@
+import type { KeyboardEvent } from "react";
+import type { GridEngine } from "../core/grid";
+
+const INTERACTIVE = "input, select, textarea, button, a[href], [contenteditable]";
+
+/**
+ * WAI-ARIA grid keyboard model: arrows, Home/End, Ctrl+Home/End, PageUp/Down,
+ * Enter/F2 to edit (or sort on a header), Space to select, Ctrl+A, Ctrl+C.
+ */
+export function handleGridKeyDown<T>(event: KeyboardEvent<HTMLElement>, engine: GridEngine<T>): void {
+  const model = engine.getModel();
+  const target = event.target as HTMLElement;
+  const cell = target.closest<HTMLElement>("[data-col-index]");
+  if (!model || !cell) return;
+
+  // Focus is inside the cell: an editor or a custom widget handles its own keys.
+  if (cell !== target) {
+    if (event.key === "Escape" && !target.closest(".dg-editor")) {
+      event.preventDefault();
+      cell.focus();
+    }
+    return;
+  }
+
+  const rowIndex = Number(cell.closest<HTMLElement>("[data-row-index]")?.dataset.rowIndex ?? -1);
+  const colIndex = Number(cell.dataset.colIndex);
+  const lastRow = model.page.rows.length - 1;
+  const lastCol = model.layout.columns.length - 1;
+  const rtl = getComputedStyle(cell).direction === "rtl";
+  const mod = event.ctrlKey || event.metaKey;
+  const options = engine.getOptions();
+  const visibleRows = Math.max(
+    1,
+    Math.floor((engine.viewport.getSnapshot().height - model.headerHeight) / model.rowHeight) - 1,
+  );
+  const item = model.layout.columns[colIndex];
+  const row = rowIndex >= 0 ? model.page.rows[rowIndex] : undefined;
+  const { api } = engine;
+  const go = (r: number, c: number) => engine.setActiveCell(r, c);
+
+  switch (event.key) {
+    case "ArrowUp":
+      go(rowIndex - 1, colIndex);
+      break;
+    case "ArrowDown":
+      go(rowIndex + 1, colIndex);
+      break;
+    case "ArrowLeft":
+      go(rowIndex, colIndex + (rtl ? 1 : -1));
+      break;
+    case "ArrowRight":
+      go(rowIndex, colIndex + (rtl ? -1 : 1));
+      break;
+    case "Home":
+      go(mod ? -1 : rowIndex, 0);
+      break;
+    case "End":
+      go(mod ? lastRow : rowIndex, lastCol);
+      break;
+    case "PageUp":
+      go(rowIndex === -1 ? -1 : Math.max(0, rowIndex - visibleRows), colIndex);
+      break;
+    case "PageDown":
+      go(Math.min(lastRow, Math.max(0, rowIndex + visibleRows)), colIndex);
+      break;
+    case "Enter":
+    case "F2": {
+      if (!item) return;
+      if (rowIndex === -1) {
+        if (event.key !== "Enter" || !item.column.sortable || options.enableSorting === false) return;
+        api.toggleSort(item.column.id, event.shiftKey);
+      } else if (row && !item.column.internal && engine.isCellEditable(row.original, item.column)) {
+        api.startEditing(row.id, item.column.id);
+      } else {
+        const inner = cell.querySelector<HTMLElement>(INTERACTIVE);
+        if (!inner) return;
+        inner.focus();
+      }
+      break;
+    }
+    case " ": {
+      if (rowIndex === -1 && item?.column.internal) {
+        const selection = api.getState().rowSelection;
+        const allSelected = model.sortedRows.every(
+          (r) => !engine.isRowSelectable(r.original) || selection[r.id],
+        );
+        api.toggleAllRowsSelected(!allSelected);
+      } else if (row && engine.isRowSelectable(row.original)) {
+        api.toggleRowSelected(row.id, { range: event.shiftKey });
+      } else {
+        return;
+      }
+      break;
+    }
+    case "a":
+    case "A":
+      if (!mod || !options.enableRowSelection || options.selectionMode === "single") return;
+      api.toggleAllRowsSelected(true);
+      break;
+    case "c":
+    case "C":
+      if (!mod || window.getSelection()?.toString()) return;
+      void api.copyToClipboard();
+      break;
+    default:
+      return;
+  }
+
+  event.preventDefault();
+}

package/source/components/data-grid/react/locale.ts

@@ -0,0 +1,130 @@
+import type { FilterOperator } from "../core/types";
+
+export interface LocaleText {
+  gridLabel: string;
+  search: string;
+  searchPlaceholder: string;
+  columns: string;
+  resetColumns: string;
+  export: string;
+  exportCsv: string;
+  exportExcel: string;
+  exportPdf: string;
+  print: string;
+  density: string;
+  densityCompact: string;
+  densityStandard: string;
+  densityComfortable: string;
+  selected(count: string): string;
+  clearSelection: string;
+  clearFilters: string;
+  removeFilter(label: string): string;
+  filtered: string;
+  noRows: string;
+  noResults: string;
+  loading: string;
+  pagination: string;
+  rowsPerPage: string;
+  pageRange(from: string, to: string, total: string): string;
+  page: string;
+  pageOf(total: string): string;
+  firstPage: string;
+  previousPage: string;
+  nextPage: string;
+  lastPage: string;
+  columnMenu(header: string): string;
+  sortAscending: string;
+  sortDescending: string;
+  clearSort: string;
+  pinLeft: string;
+  pinRight: string;
+  unpin: string;
+  hideColumn: string;
+  moveLeft: string;
+  moveRight: string;
+  filter: string;
+  filterValue: string;
+  filterFrom: string;
+  filterTo: string;
+  filterOperator: string;
+  applyFilter: string;
+  clearFilter: string;
+  operators: Record<FilterOperator, string>;
+  yes: string;
+  no: string;
+  selectRow: string;
+  selectAllRows: string;
+}
+
+export const defaultLocaleText: LocaleText = {
+  gridLabel: "Data grid",
+  search: "Search",
+  searchPlaceholder: "Search…",
+  columns: "Columns",
+  resetColumns: "Reset columns",
+  export: "Export",
+  exportCsv: "CSV",
+  exportExcel: "Excel (.xlsx)",
+  exportPdf: "PDF (.pdf)",
+  print: "Print…",
+  density: "Density",
+  densityCompact: "Compact",
+  densityStandard: "Standard",
+  densityComfortable: "Comfortable",
+  selected: (count) => `${count} selected`,
+  clearSelection: "Clear",
+  clearFilters: "Clear all",
+  removeFilter: (label) => `Remove filter: ${label}`,
+  filtered: "Filtered",
+  noRows: "No rows",
+  noResults: "No rows match the current filters",
+  loading: "Loading…",
+  pagination: "Pagination",
+  rowsPerPage: "Rows per page",
+  pageRange: (from, to, total) => `${from}–${to} of ${total}`,
+  page: "Page",
+  pageOf: (total) => `of ${total}`,
+  firstPage: "First page",
+  previousPage: "Previous page",
+  nextPage: "Next page",
+  lastPage: "Last page",
+  columnMenu: (header) => `${header} column options`,
+  sortAscending: "Sort ascending",
+  sortDescending: "Sort descending",
+  clearSort: "Clear sort",
+  pinLeft: "Pin to start",
+  pinRight: "Pin to end",
+  unpin: "Unpin",
+  hideColumn: "Hide column",
+  moveLeft: "Move earlier",
+  moveRight: "Move later",
+  filter: "Filter",
+  filterValue: "Value",
+  filterFrom: "From",
+  filterTo: "To",
+  filterOperator: "Condition",
+  applyFilter: "Apply",
+  clearFilter: "Clear",
+  operators: {
+    contains: "contains",
+    notContains: "does not contain",
+    equals: "is",
+    notEquals: "is not",
+    startsWith: "starts with",
+    endsWith: "ends with",
+    gt: ">",
+    gte: "≥",
+    lt: "<",
+    lte: "≤",
+    between: "between",
+    before: "before",
+    after: "after",
+    in: "is any of",
+    isEmpty: "is empty",
+    isNotEmpty: "is not empty",
+  },
+  yes: "Yes",
+  no: "No",
+  selectRow: "Select row",
+  selectAllRows: "Select all rows",
+};