es-grid-template 1.9.97 → 1.9.98

package/es/grid-component/hooks/rowFocus.d.ts

@@ -1,4 +1,4 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent } from 'react';
 import type { RowFocusEventArgs } from '../type';
 type RowFocus<T> = (args: RowFocusEventArgs<T>) => void;
 /** Capture clicks even when a cell handles the event itself. */
@@ -6,7 +6,7 @@ export declare function getRowFocusHandlers<T>(rowData: T, rowFocus?: RowFocus<T
     onClickCapture: (event: MouseEvent<HTMLElement>) => void;
     onContextMenuCapture: (event: MouseEvent<HTMLElement>) => void;
 };
-/** Notify arrow focus without changing the existing navigation or selection. */
-export declare function notifyArrowRowFocus<T>(rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
-export declare function focusArrowRow(event: KeyboardEvent, rowId: string, columnId: string, scrollToRow: () => void): void;
+/** Report the last focused row after the arrow key is released. */
+export declare function notifyArrowRowFocus<T>(event: ReactKeyboardEvent, rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
+export declare function focusArrowRow(event: ReactKeyboardEvent, rowId: string, columnId: string, scrollToRow: () => void): void;
 export {};

package/es/grid-component/hooks/rowFocus.js

@@ -1,3 +1,6 @@
+const gridViewportSelector = '[data-grid-scroll], [data-virtuoso-scroller]';
+const pendingArrowFocus = new WeakMap();
+
 /** Capture clicks even when a cell handles the event itself. */
 export function getRowFocusHandlers(rowData, rowFocus) {
   return {
@@ -16,19 +19,52 @@ export function getRowFocusHandlers(rowData, rowFocus) {
   };
 }
 
-/** Notify arrow focus without changing the existing navigation or selection. */
-export function notifyArrowRowFocus(rowData, method, useArrow, rowFocus) {
-  if (useArrow === true) rowFocus?.({
+/** Report the last focused row after the arrow key is released. */
+export function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
+  if (useArrow !== true || !rowFocus) return;
+  const viewport = event.currentTarget.closest(gridViewportSelector);
+  const view = viewport?.ownerDocument.defaultView;
+  if (!viewport || !view) return;
+  const notify = () => rowFocus({
     rowData,
     method
   });
+  const pending = pendingArrowFocus.get(viewport);
+  if (pending) {
+    pending.key = event.key;
+    pending.notify = notify;
+    return;
+  }
+  const focus = {
+    key: event.key,
+    notify
+  };
+  pendingArrowFocus.set(viewport, focus);
+  const cancel = () => {
+    pendingArrowFocus.delete(viewport);
+    view.removeEventListener('keyup', release, true);
+    view.removeEventListener('blur', cancel);
+    view.removeEventListener('pointerdown', cancel, true);
+  };
+  const release = keyEvent => {
+    if (keyEvent.key !== focus.key) return;
+    cancel();
+    view.setTimeout(() => {
+      if (viewport.isConnected) focus.notify();
+    }, 0);
+  };
+
+  // A virtualized row can unmount before keyup reaches its original cell.
+  view.addEventListener('keyup', release, true);
+  view.addEventListener('blur', cancel);
+  view.addEventListener('pointerdown', cancel, true);
 }
 export function focusArrowRow(event, rowId, columnId, scrollToRow) {
   event.preventDefault();
   const source = event.currentTarget;
   const body = source.closest('.ui-rc-grid-row')?.parentElement;
   const row = body && Array.from(body.children).find(child => child.getAttribute('data-row-key') === rowId);
-  const viewport = source.closest('[data-grid-scroll], [data-virtuoso-scroller]');
+  const viewport = source.closest(gridViewportSelector);
   const canScroll = viewport && viewport.scrollHeight > viewport.clientHeight;
   if (!row) {
     if (canScroll) scrollToRow();

package/es/grid-component/type.d.ts

@@ -791,7 +791,7 @@ export type IWrapSettings = {
     wrapMode?: IWrapMode;
 };
 export type SelectionSettings<T = AnyObject> = {
-    /** Invoke rowFocus on ArrowUp/ArrowDown. Defaults to false. */
+    /** Invoke rowFocus for the final row after releasing ArrowUp or ArrowDown. Defaults to false. */
     useArrow?: boolean;
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';

package/es/group-component/body/TableBodyCell.js

@@ -459,7 +459,7 @@ const TableBodyCell = props => {
           focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
             align: 'center'
           }));
-          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/group-component/body/TableBodyCellEdit.js

@@ -810,7 +810,7 @@ const TableBodyCellEdit = props => {
         focusArrowRow(e, nextRow.id, colId, () => rowVirtualizer.scrollToIndex(nextIndex, {
           align: 'center'
         }));
-        notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+        notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
       }
       return;
     }

package/es/group-component/body/TableBodyCellEmpty.js

@@ -105,7 +105,7 @@ const TableBodyCellEmpty = props => {
           focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
             align: 'center'
           }));
-          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/group-component/body/TableBodyRowGroupCell.js

@@ -439,7 +439,7 @@ const TableBodyCell = props => {
           focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
             align: 'center'
           }));
-          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/group-component/hook/utils.d.ts

@@ -196,10 +196,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/body/TableBodyCell.js

@@ -448,7 +448,7 @@ const TableBodyCell = props => {
           focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
             align: 'center'
           }));
-          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/table-component/body/TableBodyCellEdit.js

@@ -838,7 +838,7 @@ const TableBodyCellEdit = props => {
         focusArrowRow(e, nextRow.id, colId, () => rowVirtualizer.scrollToIndex(nextIndex, {
           align: 'center'
         }));
-        notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+        notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
       }
       return;
     }

package/es/table-virtuoso/body/TableBodyCell.js

@@ -385,7 +385,7 @@ const TableBodyCell = props => {
             rowId: nextRow.id
           });
           focusArrowRow(e, nextRow.id, cell.column.id, () => props.scrollToRow?.(nextIndex));
-          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/table-virtuoso/body/TableBodyCellRowGroup.js

@@ -100,7 +100,7 @@ const TableBodyCellRowGroup = props => {
             rowId: nextRow.id
           });
           focusArrowRow(e, nextRow.id, cell.column.id, () => props.scrollToRow?.(nextIndex));
-          notifyArrowRowFocus(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/grid-component/hooks/rowFocus.d.ts

@@ -1,4 +1,4 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent } from 'react';
 import type { RowFocusEventArgs } from '../type';
 type RowFocus<T> = (args: RowFocusEventArgs<T>) => void;
 /** Capture clicks even when a cell handles the event itself. */
@@ -6,7 +6,7 @@ export declare function getRowFocusHandlers<T>(rowData: T, rowFocus?: RowFocus<T
     onClickCapture: (event: MouseEvent<HTMLElement>) => void;
     onContextMenuCapture: (event: MouseEvent<HTMLElement>) => void;
 };
-/** Notify arrow focus without changing the existing navigation or selection. */
-export declare function notifyArrowRowFocus<T>(rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
-export declare function focusArrowRow(event: KeyboardEvent, rowId: string, columnId: string, scrollToRow: () => void): void;
+/** Report the last focused row after the arrow key is released. */
+export declare function notifyArrowRowFocus<T>(event: ReactKeyboardEvent, rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
+export declare function focusArrowRow(event: ReactKeyboardEvent, rowId: string, columnId: string, scrollToRow: () => void): void;
 export {};

package/lib/grid-component/hooks/rowFocus.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.focusArrowRow = focusArrowRow;
 exports.getRowFocusHandlers = getRowFocusHandlers;
 exports.notifyArrowRowFocus = notifyArrowRowFocus;
+const gridViewportSelector = '[data-grid-scroll], [data-virtuoso-scroller]';
+const pendingArrowFocus = new WeakMap();
+
 /** Capture clicks even when a cell handles the event itself. */
 function getRowFocusHandlers(rowData, rowFocus) {
   return {
@@ -24,19 +27,52 @@ function getRowFocusHandlers(rowData, rowFocus) {
   };
 }
 
-/** Notify arrow focus without changing the existing navigation or selection. */
-function notifyArrowRowFocus(rowData, method, useArrow, rowFocus) {
-  if (useArrow === true) rowFocus?.({
+/** Report the last focused row after the arrow key is released. */
+function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
+  if (useArrow !== true || !rowFocus) return;
+  const viewport = event.currentTarget.closest(gridViewportSelector);
+  const view = viewport?.ownerDocument.defaultView;
+  if (!viewport || !view) return;
+  const notify = () => rowFocus({
     rowData,
     method
   });
+  const pending = pendingArrowFocus.get(viewport);
+  if (pending) {
+    pending.key = event.key;
+    pending.notify = notify;
+    return;
+  }
+  const focus = {
+    key: event.key,
+    notify
+  };
+  pendingArrowFocus.set(viewport, focus);
+  const cancel = () => {
+    pendingArrowFocus.delete(viewport);
+    view.removeEventListener('keyup', release, true);
+    view.removeEventListener('blur', cancel);
+    view.removeEventListener('pointerdown', cancel, true);
+  };
+  const release = keyEvent => {
+    if (keyEvent.key !== focus.key) return;
+    cancel();
+    view.setTimeout(() => {
+      if (viewport.isConnected) focus.notify();
+    }, 0);
+  };
+
+  // A virtualized row can unmount before keyup reaches its original cell.
+  view.addEventListener('keyup', release, true);
+  view.addEventListener('blur', cancel);
+  view.addEventListener('pointerdown', cancel, true);
 }
 function focusArrowRow(event, rowId, columnId, scrollToRow) {
   event.preventDefault();
   const source = event.currentTarget;
   const body = source.closest('.ui-rc-grid-row')?.parentElement;
   const row = body && Array.from(body.children).find(child => child.getAttribute('data-row-key') === rowId);
-  const viewport = source.closest('[data-grid-scroll], [data-virtuoso-scroller]');
+  const viewport = source.closest(gridViewportSelector);
   const canScroll = viewport && viewport.scrollHeight > viewport.clientHeight;
   if (!row) {
     if (canScroll) scrollToRow();

package/lib/grid-component/type.d.ts

@@ -791,7 +791,7 @@ export type IWrapSettings = {
     wrapMode?: IWrapMode;
 };
 export type SelectionSettings<T = AnyObject> = {
-    /** Invoke rowFocus on ArrowUp/ArrowDown. Defaults to false. */
+    /** Invoke rowFocus for the final row after releasing ArrowUp or ArrowDown. Defaults to false. */
     useArrow?: boolean;
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';

package/lib/group-component/body/TableBodyCell.js

@@ -467,7 +467,7 @@ const TableBodyCell = props => {
           (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
             align: 'center'
           }));
-          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/group-component/body/TableBodyCellEdit.js

@@ -817,7 +817,7 @@ const TableBodyCellEdit = props => {
         (0, _rowFocus.focusArrowRow)(e, nextRow.id, colId, () => rowVirtualizer.scrollToIndex(nextIndex, {
           align: 'center'
         }));
-        (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+        (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
       }
       return;
     }

package/lib/group-component/body/TableBodyCellEmpty.js

@@ -112,7 +112,7 @@ const TableBodyCellEmpty = props => {
           (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
             align: 'center'
           }));
-          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/group-component/body/TableBodyRowGroupCell.js

@@ -447,7 +447,7 @@ const TableBodyCell = props => {
           (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
             align: 'center'
           }));
-          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/table-component/body/TableBodyCell.js

@@ -455,7 +455,7 @@ const TableBodyCell = props => {
           (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
             align: 'center'
           }));
-          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/table-component/body/TableBodyCellEdit.js

@@ -843,7 +843,7 @@ const TableBodyCellEdit = props => {
         (0, _rowFocus.focusArrowRow)(e, nextRow.id, colId, () => rowVirtualizer.scrollToIndex(nextIndex, {
           align: 'center'
         }));
-        (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+        (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
       }
       return;
     }

package/lib/table-virtuoso/body/TableBodyCell.js

@@ -392,7 +392,7 @@ const TableBodyCell = props => {
             rowId: nextRow.id
           });
           (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.scrollToRow?.(nextIndex));
-          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/table-virtuoso/body/TableBodyCellRowGroup.js

@@ -107,7 +107,7 @@ const TableBodyCellRowGroup = props => {
             rowId: nextRow.id
           });
           (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.scrollToRow?.(nextIndex));
-          (0, _rowFocus.notifyArrowRowFocus)(nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.97",
+  "version": "1.9.98",
   "description": "es-grid-template",
   "keywords": [
     "react",