@neo4j-nvl/react 1.1.0-e5f94955 → 1.1.0-e61ddd81

package/lib/__tests__/BasicNvlWrapper.test.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import NVL, { HierarchicalLayoutType } from '@neo4j-nvl/base';
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import React from 'react';
+import { StrictMode } from 'react';
 import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
 jest.mock('@neo4j-nvl/base');
 jest.mock('@neo4j-nvl/layout-workers');
@@ -43,7 +43,7 @@ describe('BasicNvlWrapper', () => {
     test('successfully re-initialises NVL when using React StrictMode', () => {
         const destroy = jest.fn();
         jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
-        render(_jsx(React.StrictMode, { children: _jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }) }));
+        render(_jsx(StrictMode, { children: _jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }) }));
         expect(NVL).toHaveBeenCalledTimes(2);
         expect(destroy).toHaveBeenCalledTimes(1);
     });

package/lib/__tests__/InteractiveNvlWrapper.test.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import NVL, { HierarchicalLayoutType } from '@neo4j-nvl/base';
-import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
+import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import React, { act, createRef } from 'react';
+import { StrictMode, act, createRef } from 'react';
 import { InteractiveNvlWrapper } from '../interactive-nvl-wrapper/InteractiveNvlWrapper';
 jest.mock('@neo4j-nvl/base');
 jest.mock('@neo4j-nvl/layout-workers');
@@ -42,6 +42,10 @@ LassoInteraction.prototype.callbackMap = new Map();
 LassoInteraction.prototype.updateCallback = jest.fn();
 LassoInteraction.prototype.removeCallback = jest.fn();
 LassoInteraction.prototype.destroy = jest.fn();
+KeyboardInteraction.prototype.callbackMap = new Map();
+KeyboardInteraction.prototype.updateCallback = jest.fn();
+KeyboardInteraction.prototype.removeCallback = jest.fn();
+KeyboardInteraction.prototype.destroy = jest.fn();
 let mockDestroy;
 let destroyHoverInteraction;
 let destroyPanInteraction;
@@ -70,6 +74,7 @@ describe('InteractiveNvlWrapper', () => {
         jest.spyOn(DrawInteraction.prototype, 'destroy').mockImplementation(jest.fn());
         jest.spyOn(BoxSelectInteraction.prototype, 'destroy').mockImplementation(jest.fn());
         jest.spyOn(LassoInteraction.prototype, 'destroy').mockImplementation(jest.fn());
+        jest.spyOn(KeyboardInteraction.prototype, 'destroy').mockImplementation(jest.fn());
     });
     afterEach(() => {
         jest.clearAllMocks();
@@ -110,6 +115,7 @@ describe('InteractiveNvlWrapper', () => {
         expect(ZoomInteraction).not.toHaveBeenCalled();
         expect(BoxSelectInteraction).not.toHaveBeenCalled();
         expect(LassoInteraction).not.toHaveBeenCalled();
+        expect(KeyboardInteraction).not.toHaveBeenCalled();
     });
     test.each([
         {
@@ -253,6 +259,48 @@ describe('InteractiveNvlWrapper', () => {
         expect(InteractionClass).toHaveBeenCalledWith(myNvlRef.current, options);
         expect(InteractionClass).toHaveBeenCalledTimes(1);
     });
+    test.each([
+        {
+            name: 'KeyboardInteraction with onKeyDown',
+            callback: { onKeyDown: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onKeyUp',
+            callback: { onKeyUp: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onNodeFocus',
+            callback: { onNodeFocus: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onNodeBlur',
+            callback: { onNodeBlur: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onRelationshipFocus',
+            callback: { onRelationshipFocus: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onRelationshipBlur',
+            callback: { onRelationshipBlur: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onCanvasFocus',
+            callback: { onCanvasFocus: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onCanvasBlur',
+            callback: { onCanvasBlur: jest.fn() }
+        }
+    ])('initialises $name when its callback is provided', ({ callback }) => {
+        const myNvlRef = createRef();
+        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, keyboardEventCallbacks: callback }));
+        act(() => {
+            mockOnInitialization?.();
+        });
+        expect(KeyboardInteraction).toHaveBeenCalledWith(myNvlRef.current, expect.objectContaining({}));
+        expect(KeyboardInteraction).toHaveBeenCalledTimes(1);
+    });
     test('does not attempt to initialize interaction handlers if NVL container is not available', () => {
         const myNvlRef = createRef();
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -280,7 +328,7 @@ describe('InteractiveNvlWrapper', () => {
     });
     test('successfully re-initialises NVL and active interaction handlers when using React StrictMode', () => {
         const myNvlRef = createRef();
-        render(_jsx(React.StrictMode, { children: _jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
+        render(_jsx(StrictMode, { children: _jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
                     onHover: true
                 }, interactionOptions: {
                     drawShadowOnHover: true
@@ -299,6 +347,19 @@ describe('InteractiveNvlWrapper', () => {
         expect(ZoomInteraction).not.toHaveBeenCalled();
         expect(BoxSelectInteraction).not.toHaveBeenCalled();
         expect(LassoInteraction).not.toHaveBeenCalled();
+        expect(KeyboardInteraction).not.toHaveBeenCalled();
+    });
+    test('destroys keyboard interaction on unmount', () => {
+        const destroyKeyboardInteraction = jest.fn();
+        jest.spyOn(KeyboardInteraction.prototype, 'destroy').mockImplementation(destroyKeyboardInteraction);
+        const { unmount } = render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], keyboardEventCallbacks: {
+                onKeyDown: true
+            } }));
+        act(() => {
+            mockOnInitialization?.();
+        });
+        unmount();
+        expect(destroyKeyboardInteraction).toHaveBeenCalledTimes(1);
     });
     test('also calls custom callbacks on initialization', () => {
         const customOnInitializationCallback = jest.fn();

package/lib/index.d.ts

@@ -1,8 +1,8 @@
 import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
 import type { BasicReactWrapperProps } from './basic-wrapper/BasicNvlWrapper';
 import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-import type { InteractionOptions, InteractiveNvlWrapperProps, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/types';
+import type { InteractionOptions, InteractiveNvlWrapperProps, KeyboardEvent, KeyboardEventCallbacks, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/types';
 import type { StaticPictureWrapperProps } from './static-picture-wrapper/StaticPictureWrapper';
 import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
 export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };
-export type { MouseEventCallbacks, MouseEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps, StaticPictureWrapperProps };
+export type { MouseEventCallbacks, KeyboardEventCallbacks, MouseEvent, KeyboardEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps, StaticPictureWrapperProps };

package/lib/interactive-nvl-wrapper/InteractionHandlers.d.ts

@@ -1,9 +1,10 @@
 import type NVL from '@neo4j-nvl/base';
 import type { MutableRefObject } from 'react';
-import type { InteractionOptions, MouseEventCallbacks } from './types';
+import type { InteractionOptions, KeyboardEventCallbacks, MouseEventCallbacks } from './types';
 interface InteractionHandlersProps {
     nvlRef: MutableRefObject<NVL | null>;
     mouseEventCallbacks: MouseEventCallbacks;
+    keyboardEventCallbacks: KeyboardEventCallbacks;
     interactionOptions: InteractionOptions;
 }
 export declare const InteractionHandlers: React.FC<InteractionHandlersProps>;

package/lib/interactive-nvl-wrapper/InteractionHandlers.js

@@ -1,7 +1,7 @@
-import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
+import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
 import { useEffect, useRef } from 'react';
 import { destroyInteraction, useInteraction } from './hooks';
-export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOptions }) => {
+export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, keyboardEventCallbacks, interactionOptions }) => {
     const hoverInteraction = useRef(null);
     const clickInteraction = useRef(null);
     const panInteraction = useRef(null);
@@ -10,6 +10,7 @@ export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOp
     const drawInteraction = useRef(null);
     const multiSelectInteraction = useRef(null);
     const lassoInteraction = useRef(null);
+    const keyboardInteraction = useRef(null);
     useInteraction(HoverInteraction, hoverInteraction, mouseEventCallbacks.onHover, 'onHover', nvlRef, interactionOptions);
     useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeClick, 'onNodeClick', nvlRef, interactionOptions);
     useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeDoubleClick, 'onNodeDoubleClick', nvlRef, interactionOptions);
@@ -33,6 +34,15 @@ export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOp
     useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxSelect, 'onBoxSelect', nvlRef, interactionOptions);
     useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoStarted, 'onLassoStarted', nvlRef, interactionOptions);
     useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoSelect, 'onLassoSelect', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onKeyDown, 'onKeyDown', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onKeyUp, 'onKeyUp', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeFocus, 'onNodeFocus', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeBlur, 'onNodeBlur', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onRelationshipFocus, 'onRelationshipFocus', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onRelationshipBlur, 'onRelationshipBlur', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onCanvasFocus, 'onCanvasFocus', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onCanvasBlur, 'onCanvasBlur', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onContextMenu, 'onContextMenu', nvlRef, interactionOptions);
     useEffect(() => () => {
         destroyInteraction(hoverInteraction);
         destroyInteraction(clickInteraction);
@@ -42,6 +52,7 @@ export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOp
         destroyInteraction(drawInteraction);
         destroyInteraction(multiSelectInteraction);
         destroyInteraction(lassoInteraction);
+        destroyInteraction(keyboardInteraction);
     }, []);
     return null;
 };

package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.d.ts

@@ -1,6 +1,5 @@
 import type NVL from '@neo4j-nvl/base';
 import type { HTMLProps } from 'react';
-import React from 'react';
 import type { InteractiveNvlWrapperProps } from './types';
 /**
  * The interactive React wrapper component contains a collection of interaction handlers by default
@@ -13,4 +12,4 @@ import type { InteractiveNvlWrapperProps } from './types';
  *
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_reactive_wrapperr Interactive React wrapper documentation page}.
  */
-export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<NVL>>>;
+export declare const InteractiveNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<NVL>>>;

package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.js

@@ -20,7 +20,7 @@ const options = {
  *
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_reactive_wrapperr Interactive React wrapper documentation page}.
  */
-export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, onInitializationError, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...nvlEvents }, nvlRef) => {
+export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, onInitializationError, mouseEventCallbacks = {}, keyboardEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...nvlEvents }, nvlRef) => {
     const newNvlRef = useRef(null);
     const myNvlRef = nvlRef ?? newNvlRef;
     const [isNvlInitialized, setIsNvlInitialized] = useState(false);
@@ -42,5 +42,5 @@ export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, lay
                         }
                         handleInitialization();
                     }
-                }, layout: layout, layoutOptions: layoutOptions, onInitializationError: handleInitializationError, ...nvlEvents }), setupInteractions && (_jsx(InteractionHandlers, { nvlRef: myNvlRef, mouseEventCallbacks: mouseEventCallbacks, interactionOptions: interactionOptions }))] }));
+                }, layout: layout, layoutOptions: layoutOptions, onInitializationError: handleInitializationError, ...nvlEvents }), setupInteractions && (_jsx(InteractionHandlers, { nvlRef: myNvlRef, mouseEventCallbacks: mouseEventCallbacks, keyboardEventCallbacks: keyboardEventCallbacks, interactionOptions: interactionOptions }))] }));
 }));

package/lib/interactive-nvl-wrapper/hooks.d.ts

@@ -1,5 +1,5 @@
 import type NVL from '@neo4j-nvl/base';
 import type { MutableRefObject } from 'react';
-import type { InteractionOptions, MouseEvent, MouseInteraction, MouseInteractionModule } from './types';
-export declare const destroyInteraction: (interactionRef: MutableRefObject<MouseInteraction | null>) => void;
-export declare const useInteraction: (Interaction: MouseInteractionModule, interactionRef: MutableRefObject<MouseInteraction | null>, callback: ((...args: unknown[]) => void) | boolean | undefined, eventName: MouseEvent, nvlRef: MutableRefObject<NVL | null>, interactionOptions: InteractionOptions) => void;
+import type { Interaction, InteractionModule, InteractionOptions, KeyboardEvent, MouseEvent } from './types';
+export declare const destroyInteraction: (interactionRef: MutableRefObject<Interaction | null>) => void;
+export declare const useInteraction: (Interaction: InteractionModule, interactionRef: MutableRefObject<Interaction | null>, callback: ((...args: unknown[]) => void) | boolean | undefined, eventName: MouseEvent | KeyboardEvent, nvlRef: MutableRefObject<NVL | null>, interactionOptions: InteractionOptions) => void;

package/lib/interactive-nvl-wrapper/types.d.ts

@@ -1,28 +1,36 @@
-import type { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks, ZoomInteractionOptions } from '@neo4j-nvl/interaction-handlers';
+import type { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, KeyboardInteraction, KeyboardInteractionCallbacks, KeyboardInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks, ZoomInteractionOptions } from '@neo4j-nvl/interaction-handlers';
 import type { BasicReactWrapperProps } from '../basic-wrapper/BasicNvlWrapper';
-export type MouseInteractionModule = typeof HoverInteraction | typeof ClickInteraction | typeof PanInteraction | typeof ZoomInteraction | typeof DragNodeInteraction | typeof DrawInteraction | typeof BoxSelectInteraction | typeof LassoInteraction;
-export type MouseInteraction = HoverInteraction | ClickInteraction | PanInteraction | ZoomInteraction | DragNodeInteraction | DrawInteraction | BoxSelectInteraction | LassoInteraction;
+export type InteractionModule = typeof HoverInteraction | typeof ClickInteraction | typeof PanInteraction | typeof ZoomInteraction | typeof DragNodeInteraction | typeof DrawInteraction | typeof BoxSelectInteraction | typeof LassoInteraction | typeof KeyboardInteraction;
+export type Interaction = HoverInteraction | ClickInteraction | PanInteraction | ZoomInteraction | DragNodeInteraction | DrawInteraction | BoxSelectInteraction | LassoInteraction | KeyboardInteraction;
 /**
  * Collection of mouse event callbacks that can be used with
  * the {@link InteractiveNvlWrapper} component.
  */
 export type MouseEventCallbacks = ClickInteractionCallbacks & DragNodeInteractionCallbacks & HoverInteractionCallbacks & PanInteractionCallbacks & ZoomInteractionCallbacks & BoxSelectInteractionCallbacks & DrawInteractionCallbacks & LassoInteractionCallbacks;
+/**
+ * Collection of keyboard event callbacks that can be used with
+ * the {@link InteractiveNvlWrapper} component.
+ */
+export type KeyboardEventCallbacks = KeyboardInteractionCallbacks;
 /**
  * Collection of interaction options that can be used with
  * the {@link InteractiveNvlWrapper} component.
  */
-export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & ZoomInteractionOptions & LassoInteractionOptions & DrawInteractionOptions;
+export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & ZoomInteractionOptions & LassoInteractionOptions & DrawInteractionOptions & KeyboardInteractionOptions;
 /**
  * The events that can be passed to the {@link MouseEventCallbacks} object
  * to turn on/off certain events for the {@link InteractiveNvlWrapper} component.
  */
 export type MouseEvent = keyof MouseEventCallbacks;
+export type KeyboardEvent = keyof KeyboardEventCallbacks;
 /**
  * The properties that can be passed to the {@link InteractiveNvlWrapper} component.
  */
 export interface InteractiveNvlWrapperProps extends BasicReactWrapperProps {
     /** {@link MouseEventCallbacks} containing functions for callbacks on certain actions */
     mouseEventCallbacks?: MouseEventCallbacks;
+    /** {@link KeyboardEventCallbacks} containing functions for callbacks on keyboard actions */
+    keyboardEventCallbacks?: KeyboardEventCallbacks;
     /** {@link InteractionOptions} for the underlying interaction handlers */
     interactionOptions?: InteractionOptions;
 }

package/lib/utils/constants.d.ts

@@ -1,2 +1,2 @@
-export const BASIC_WRAPPER_ID: "NVL_basic-wrapper";
-export const INTERACTIVE_WRAPPER_ID: "NVL_interactive-wrapper";
+export declare const BASIC_WRAPPER_ID = "NVL_basic-wrapper";
+export declare const INTERACTIVE_WRAPPER_ID = "NVL_interactive-wrapper";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "1.1.0-e5f94955",
+  "version": "1.1.0-e61ddd81",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -36,9 +36,9 @@
     "react-dom": "19.2.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "1.1.0-e5f94955",
-    "@neo4j-nvl/interaction-handlers": "1.1.0-e5f94955",
-    "lodash": "4.17.23"
+    "@neo4j-nvl/base": "1.1.0-e61ddd81",
+    "@neo4j-nvl/interaction-handlers": "1.1.0-e61ddd81",
+    "lodash": "4.18.1"
   },
   "peerDependencies": {
     "react": "18.0.0 || ^19.0.0",