feat: add onGridFocused()/onGridBlurred() callbacks

TheSisb · Jul 31, 2024 · 7f90cb4 · 7f90cb4
1 parent 63f708d
commit 7f90cb4
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 11 deletions.
diff --git a/dist/cjs/data-editor/data-editor.js b/dist/cjs/data-editor/data-editor.js
diff --git a/dist/cjs/data-editor/data-editor.js.map b/dist/cjs/data-editor/data-editor.js.map
diff --git a/dist/dts/data-editor-all.d.ts b/dist/dts/data-editor-all.d.ts
@@ -5,4 +5,3 @@ export interface DataEditorAllProps extends Omit<DataEditorProps, "renderers" |
     imageWindowLoader?: ImageWindowLoader;
 }
 export declare const DataEditorAll: React.ForwardRefExoticComponent<DataEditorAllProps & React.RefAttributes<DataEditorRef>>;
-//# sourceMappingURL=data-editor-all.d.ts.map
diff --git a/dist/dts/data-editor/data-editor.d.ts b/dist/dts/data-editor/data-editor.d.ts
@@ -59,6 +59,14 @@ export interface DataEditorProps extends Props, Pick<DataGridSearchProps, "image
      * @group Events
      */
     readonly onCellActivated?: (cell: Item) => void;
+    /** Emitted when the grid is focused.
+     * @group Events
+     */
+    readonly onGridFocused?: () => void;
+    /** Emitted when the grid is blurred.
+     * @group Events
+     */
+    readonly onGridBlurred?: () => void;
     /**
      * Emitted whenever the user initiats a pattern fill using the fill handle. This event provides both
      * a patternSource region and a fillDestination region, and can be prevented.
@@ -501,4 +509,3 @@ export interface DataEditorRef {
  */
 export declare const DataEditor: React.ForwardRefExoticComponent<DataEditorProps & React.RefAttributes<DataEditorRef>>;
 export {};
-//# sourceMappingURL=data-editor.d.ts.map
diff --git a/dist/dts/data-editor/data-editor.d.ts.map b/dist/dts/data-editor/data-editor.d.ts.map
diff --git a/dist/esm/data-editor/data-editor.js b/dist/esm/data-editor/data-editor.js
diff --git a/dist/esm/data-editor/data-editor.js.map b/dist/esm/data-editor/data-editor.js.map
diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
@@ -237,6 +237,14 @@ export interface DataEditorProps extends Props, Pick<DataGridSearchProps, "image
      * @group Events
      */
     readonly onCellActivated?: (cell: Item) => void;
+    /** Emitted when the grid is focused.
+     * @group Events
+     */
+    readonly onGridFocused?: () => void;
+    /** Emitted when the grid is blurred.
+     * @group Events
+     */
+    readonly onGridBlurred?: () => void;
 
     /**
      * Emitted whenever the user initiats a pattern fill using the fill handle. This event provides both
@@ -765,6 +773,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         getCellContent,
         onCellClicked,
         onCellActivated,
+        onGridFocused,
+        onGridBlurred,
         onFillPattern,
         onFinishedEditing,
         coercePasteValue,
@@ -3943,12 +3953,12 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const setIsFocusedDebounced = React.useRef(
         debounce((val: boolean) => {
             setIsFocused(val);
+            onGridFocused?.();
         }, 5)
     );
 
     const onCanvasFocused = React.useCallback(() => {
         setIsFocusedDebounced.current(true);
-
         // check for mouse state, don't do anything if the user is clicked to focus.
         if (
             gridSelection.current === undefined &&
@@ -3975,7 +3985,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
 
     const onFocusOut = React.useCallback(() => {
         setIsFocusedDebounced.current(false);
-    }, []);
+        onGridBlurred?.();
+    }, [onGridBlurred]);
 
     const [idealWidth, idealHeight] = React.useMemo(() => {
         let h: number;