es-grid-template 1.9.98 → 1.9.99

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

@@ -6,7 +6,7 @@ export declare function getRowFocusHandlers<T>(rowData: T, rowFocus?: RowFocus<T
     onClickCapture: (event: MouseEvent<HTMLElement>) => void;
     onContextMenuCapture: (event: MouseEvent<HTMLElement>) => void;
 };
-/** Report the last focused row after the arrow key is released. */
+/** Report the last focused row after a pause in arrow navigation. */
 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,4 @@
+const arrowFocusDelay = 700;
 const gridViewportSelector = '[data-grid-scroll], [data-virtuoso-scroller]';
 const pendingArrowFocus = new WeakMap();
 
@@ -19,7 +20,7 @@ export function getRowFocusHandlers(rowData, rowFocus) {
   };
 }
 
-/** Report the last focused row after the arrow key is released. */
+/** Report the last focused row after a pause in arrow navigation. */
 export function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
   if (useArrow !== true || !rowFocus) return;
   const viewport = event.currentTarget.closest(gridViewportSelector);
@@ -31,6 +32,10 @@ export function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus)
   });
   const pending = pendingArrowFocus.get(viewport);
   if (pending) {
+    if (pending.timer !== undefined) {
+      view.clearTimeout(pending.timer);
+      pending.timer = undefined;
+    }
     pending.key = event.key;
     pending.notify = notify;
     return;
@@ -41,17 +46,18 @@ export function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus)
   };
   pendingArrowFocus.set(viewport, focus);
   const cancel = () => {
+    if (focus.timer !== undefined) view.clearTimeout(focus.timer);
     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 (keyEvent.key !== focus.key || focus.timer !== undefined) return;
+    focus.timer = view.setTimeout(() => {
+      cancel();
       if (viewport.isConnected) focus.notify();
-    }, 0);
+    }, arrowFocusDelay);
   };
 
   // A virtualized row can unmount before keyup reaches its original cell.

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

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

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

@@ -6,7 +6,7 @@ export declare function getRowFocusHandlers<T>(rowData: T, rowFocus?: RowFocus<T
     onClickCapture: (event: MouseEvent<HTMLElement>) => void;
     onContextMenuCapture: (event: MouseEvent<HTMLElement>) => void;
 };
-/** Report the last focused row after the arrow key is released. */
+/** Report the last focused row after a pause in arrow navigation. */
 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,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.focusArrowRow = focusArrowRow;
 exports.getRowFocusHandlers = getRowFocusHandlers;
 exports.notifyArrowRowFocus = notifyArrowRowFocus;
+const arrowFocusDelay = 700;
 const gridViewportSelector = '[data-grid-scroll], [data-virtuoso-scroller]';
 const pendingArrowFocus = new WeakMap();
 
@@ -27,7 +28,7 @@ function getRowFocusHandlers(rowData, rowFocus) {
   };
 }
 
-/** Report the last focused row after the arrow key is released. */
+/** Report the last focused row after a pause in arrow navigation. */
 function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
   if (useArrow !== true || !rowFocus) return;
   const viewport = event.currentTarget.closest(gridViewportSelector);
@@ -39,6 +40,10 @@ function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
   });
   const pending = pendingArrowFocus.get(viewport);
   if (pending) {
+    if (pending.timer !== undefined) {
+      view.clearTimeout(pending.timer);
+      pending.timer = undefined;
+    }
     pending.key = event.key;
     pending.notify = notify;
     return;
@@ -49,17 +54,18 @@ function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
   };
   pendingArrowFocus.set(viewport, focus);
   const cancel = () => {
+    if (focus.timer !== undefined) view.clearTimeout(focus.timer);
     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 (keyEvent.key !== focus.key || focus.timer !== undefined) return;
+    focus.timer = view.setTimeout(() => {
+      cancel();
       if (viewport.isConnected) focus.notify();
-    }, 0);
+    }, arrowFocusDelay);
   };
 
   // A virtualized row can unmount before keyup reaches its original cell.

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

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

package/package.json

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