@neo4j-nvl/react 2.0.0-c8e499dc → 2.0.0-ec6fdba7

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to NVL will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [Unreleased]
+
+This release adds keyboard actions for moving nodes, ships an agent skill for NVL, and makes all packages loadable as ESM in Node.js without a bundler.
+
+### Added
+
+* Keyboard interaction handler actions for moving nodes with the arrow keys, with a new `onNodeMove` callback.
+* Agent skill files for NVL, shipped with `@neo4j-nvl/base`.
+
+### Changed
+
+* `@neo4j-nvl/react` and `@neo4j-nvl/interaction-handlers` are now spec-compliant ESM with `"type": "module"` and an `exports` map. Note that deep imports into `lib/` will no longer work.
+* Replaced `lodash` with `lodash-es` in `@neo4j-nvl/react` and `@neo4j-nvl/interaction-handlers` (Jest users transforming `@neo4j-nvl/*` also need to transform `lodash-es`).
+* Type declarations of `@neo4j-nvl/base` now resolve correctly with `moduleResolution: "nodenext"`.
+* Container resizing uses the native `ResizeObserver` instead of the `resizelistener` dependency.
+* Default `height` and `outline` styles of NVL containers can now be overridden by stylesheets.
+
+### Fixed
+
+* `fit()` zooms out beyond `minZoom` when `allowDynamicMinZoom` is `true` and the graph does not fit the viewport.
+* `onHover` callback's `element` parameter is now typed as possibly `undefined`, matching the runtime behaviour.
+* Added missing caret for the React 18 peer dependency range in `@neo4j-nvl/react`.
+
 ## [2.0.0] - 2026-09-15
 
 This 2.0.0 major release upgrades NVL to WebGL2 for both the renderer and physics engine, unlocking major performance improvements. It also adds new clustering capabilities with visual decorations to the force directed and hierarchical layouts.

package/lib/basic-wrapper/BasicNvlWrapper.d.ts

@@ -1,37 +1,36 @@
-import type { ExternalCallbacks, Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
-import NVL from '@neo4j-nvl/base';
-import { type HTMLProps } from 'react';
+import NVL, { ExternalCallbacks, Node, NvlOptions, Relationship } from "@neo4j-nvl/base";
+import { HTMLProps } from "react";
 /**
  * The properties that can be passed to the {@link BasicNvlWrapper} component.
  */
 export interface BasicReactWrapperProps {
-    /** The nodes of the graph of type Node[] */
-    nodes: Node[];
-    /** The rels of the graph of type Relationship[] */
-    rels: Relationship[];
-    /** an Object containing functions for callbacks on certain actions */
-    nvlCallbacks?: ExternalCallbacks;
-    /** An object containing options for the Nvl instance */
-    nvlOptions?: NvlOptions;
-    /** Sets the positions of the nodes in the graph using the setNodePositions method. */
-    positions?: Node[];
-    /**
-     * Sets the zoom level of the viewport using the setZoom method.
-     * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
-     */
-    zoom?: number;
-    /**
-     * Sets the pan coordinates of the viewport using the setPan method.
-     * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
-     */
-    pan?: {
-        /** The x coordinate of the pan. */
-        x: number;
-        /** The y coordinate of the pan. */
-        y: number;
-    };
-    /** A callback to handle any errors that happen during NVL initialization */
-    onInitializationError?: (error: unknown) => void;
+  /** The nodes of the graph of type Node[] */
+  nodes: Node[];
+  /** The rels of the graph of type Relationship[] */
+  rels: Relationship[];
+  /** an Object containing functions for callbacks on certain actions */
+  nvlCallbacks?: ExternalCallbacks;
+  /** An object containing options for the Nvl instance */
+  nvlOptions?: NvlOptions;
+  /** Sets the positions of the nodes in the graph using the setNodePositions method. */
+  positions?: Node[];
+  /**
+   * Sets the zoom level of the viewport using the setZoom method.
+   * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
+   */
+  zoom?: number;
+  /**
+   * Sets the pan coordinates of the viewport using the setPan method.
+   * @remarks If both zoom and pan are provided, the setZoomAndPan method will be used.
+   */
+  pan?: {
+    /** The x coordinate of the pan. */
+    x: number;
+    /** The y coordinate of the pan. */
+    y: number;
+  };
+  /** A callback to handle any errors that happen during NVL initialization */
+  onInitializationError?: (error: unknown) => void;
 }
 /**
  *
@@ -41,4 +40,4 @@ export interface BasicReactWrapperProps {
  *
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
  */
-export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<Partial<Pick<NVL, "restart" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "destroy" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "saveToSvg" | "getImageDataUrl" | "getSvgDataUrl" | "saveFullGraphToLargeFile" | "getZoomLimits" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>>>;
+export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<Partial<Pick<NVL, "restart" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "destroy" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "saveToSvg" | "getImageDataUrl" | "getSvgDataUrl" | "saveFullGraphToLargeFile" | "getZoomLimits" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>>>;

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -1,145 +1,118 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NVL from '@neo4j-nvl/base';
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { BASIC_WRAPPER_ID } from '../utils/constants';
-import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graph-comparison';
-import { useDeepCompareEffect } from '../utils/hooks';
+import { BASIC_WRAPPER_ID } from "../utils/constants.js";
+import { getMapDifferences, getNodeAttributeDifferences } from "../utils/graph-comparison.js";
+import { useDeepCompareEffect } from "../utils/hooks.js";
+import NVL from "@neo4j-nvl/base";
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/basic-wrapper/BasicNvlWrapper.tsx
 /**
- *
- * A basic React wrapper that wraps the NVL base library within a React component.
- * It takes the class' arguments as properties, which are passed to the NVL constructor.
- * Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
- */
-export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
-    const nvlRef = useRef(null);
-    const prevZoomRef = useRef(undefined);
-    const prevPanRef = useRef(undefined);
-    useImperativeHandle(ref, () => {
-        const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
-        return nvlMethods.reduce((current, method) => ({
-            ...current,
-            [method]: (...args) => {
-                if (nvlRef.current === null) {
-                    return null;
-                }
-                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                return nvlRef.current[method](...args);
-            }
-        }), {});
-    });
-    const containerRef = useRef(null);
-    const [currentNodes, setCurrentNodes] = useState(nodes);
-    const [currentRels, setCurrentRels] = useState(rels);
-    useEffect(() => {
-        return () => {
-            nvlRef.current?.destroy();
-            nvlRef.current = null;
-            prevZoomRef.current = undefined;
-            prevPanRef.current = undefined;
-        };
-    }, []);
-    useEffect(() => {
-        let newNvl = null;
-        const hasMinimap = 'minimapContainer' in nvlOptions;
-        const minimapContainerIsReady = hasMinimap ? nvlOptions.minimapContainer !== null : true;
-        const mainContainerIsReady = containerRef.current !== null;
-        if (mainContainerIsReady && minimapContainerIsReady) {
-            if (nvlRef.current === null) {
-                try {
-                    newNvl = new NVL(containerRef.current, currentNodes, currentRels, nvlOptions, nvlCallbacks);
-                    nvlRef.current = newNvl;
-                    setCurrentRels(rels);
-                    setCurrentNodes(nodes);
-                }
-                catch (e) {
-                    if (typeof onInitializationError === 'function') {
-                        onInitializationError(e);
-                    }
-                    else {
-                        throw e;
-                    }
-                }
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [containerRef.current, nvlOptions.minimapContainer]);
-    useEffect(() => {
-        if (nvlRef.current === null) {
-            return;
-        }
-        const nodeChanges = getMapDifferences(currentNodes, nodes);
-        const nodeDiff = getNodeAttributeDifferences(currentNodes, nodes);
-        const relChanges = getMapDifferences(currentRels, rels);
-        const graphIsUnchanged = nodeChanges.added.length === 0 &&
-            nodeChanges.removed.length === 0 &&
-            nodeDiff.length === 0 &&
-            relChanges.added.length === 0 &&
-            relChanges.removed.length === 0 &&
-            relChanges.updated.length === 0;
-        if (graphIsUnchanged) {
-            return;
-        }
-        setCurrentRels(rels);
-        setCurrentNodes(nodes);
-        const nodesToAddAndUpdate = [...nodeChanges.added, ...nodeDiff];
-        const relsToAddAndUpdate = [...relChanges.added, ...relChanges.updated];
-        nvlRef.current.addAndUpdateElementsInGraph(nodesToAddAndUpdate, relsToAddAndUpdate);
-        const relationshipsToRemove = relChanges.removed.map((r) => r.id);
-        const nodesToRemove = nodeChanges.removed.map((n) => n.id);
-        nvlRef.current.removeRelationshipsWithIds(relationshipsToRemove);
-        nvlRef.current.removeNodesWithIds(nodesToRemove);
-    }, [currentNodes, currentRels, nodes, rels]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.layout === undefined) {
-            return;
-        }
-        nvlRef.current.setLayout(nvlOptions.layout);
-    }, [nvlOptions.layout]);
-    useDeepCompareEffect(() => {
-        if (nvlRef.current === null || nvlOptions.layoutOptions === undefined) {
-            return;
-        }
-        nvlRef.current.setLayoutOptions(nvlOptions.layoutOptions);
-    }, [nvlOptions.layoutOptions]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.renderer === undefined) {
-            return;
-        }
-        nvlRef.current.setRenderer(nvlOptions.renderer);
-    }, [nvlOptions.renderer]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.disableWebGL === undefined) {
-            return;
-        }
-        nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
-    }, [nvlOptions.disableWebGL]);
-    useEffect(() => {
-        if (nvlRef.current === null || positions.length === 0) {
-            return;
-        }
-        nvlRef.current.setNodePositions(positions);
-    }, [positions]);
-    useEffect(() => {
-        if (nvlRef.current === null) {
-            return;
-        }
-        const currentZoom = prevZoomRef.current;
-        const currentPan = prevPanRef.current;
-        const zoomHasChanged = zoom !== undefined && zoom !== currentZoom;
-        const panHasChanged = pan !== undefined && (pan.x !== currentPan?.x || pan.y !== currentPan.y);
-        if (zoomHasChanged && panHasChanged) {
-            nvlRef.current.setZoomAndPan(zoom, pan.x, pan.y);
-        }
-        else if (zoomHasChanged) {
-            nvlRef.current.setZoom(zoom);
-        }
-        else if (panHasChanged) {
-            nvlRef.current.setPan(pan.x, pan.y);
-        }
-        prevZoomRef.current = zoom;
-        prevPanRef.current = pan;
-    }, [zoom, pan]);
-    return _jsx("div", { id: BASIC_WRAPPER_ID, ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
+*
+* A basic React wrapper that wraps the NVL base library within a React component.
+* It takes the class' arguments as properties, which are passed to the NVL constructor.
+* Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
+*
+* For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
+*/
+const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
+	const nvlRef = useRef(null);
+	const prevZoomRef = useRef(void 0);
+	const prevPanRef = useRef(void 0);
+	useImperativeHandle(ref, () => {
+		return Object.getOwnPropertyNames(NVL.prototype).reduce((current, method) => ({
+			...current,
+			[method]: (...args) => {
+				if (nvlRef.current === null) return null;
+				return nvlRef.current[method](...args);
+			}
+		}), {});
+	});
+	const containerRef = useRef(null);
+	const [currentNodes, setCurrentNodes] = useState(nodes);
+	const [currentRels, setCurrentRels] = useState(rels);
+	useEffect(() => {
+		return () => {
+			nvlRef.current?.destroy();
+			nvlRef.current = null;
+			prevZoomRef.current = void 0;
+			prevPanRef.current = void 0;
+		};
+	}, []);
+	useEffect(() => {
+		let newNvl = null;
+		const minimapContainerIsReady = "minimapContainer" in nvlOptions ? nvlOptions.minimapContainer !== null : true;
+		if (containerRef.current !== null && minimapContainerIsReady) {
+			if (nvlRef.current === null) try {
+				newNvl = new NVL(containerRef.current, currentNodes, currentRels, nvlOptions, nvlCallbacks);
+				nvlRef.current = newNvl;
+				setCurrentRels(rels);
+				setCurrentNodes(nodes);
+			} catch (e) {
+				if (typeof onInitializationError === "function") onInitializationError(e);
+				else throw e;
+			}
+		}
+	}, [containerRef.current, nvlOptions.minimapContainer]);
+	useEffect(() => {
+		if (nvlRef.current === null) return;
+		const nodeChanges = getMapDifferences(currentNodes, nodes);
+		const nodeDiff = getNodeAttributeDifferences(currentNodes, nodes);
+		const relChanges = getMapDifferences(currentRels, rels);
+		if (nodeChanges.added.length === 0 && nodeChanges.removed.length === 0 && nodeDiff.length === 0 && relChanges.added.length === 0 && relChanges.removed.length === 0 && relChanges.updated.length === 0) return;
+		setCurrentRels(rels);
+		setCurrentNodes(nodes);
+		const nodesToAddAndUpdate = [...nodeChanges.added, ...nodeDiff];
+		const relsToAddAndUpdate = [...relChanges.added, ...relChanges.updated];
+		nvlRef.current.addAndUpdateElementsInGraph(nodesToAddAndUpdate, relsToAddAndUpdate);
+		const relationshipsToRemove = relChanges.removed.map((r) => r.id);
+		const nodesToRemove = nodeChanges.removed.map((n) => n.id);
+		nvlRef.current.removeRelationshipsWithIds(relationshipsToRemove);
+		nvlRef.current.removeNodesWithIds(nodesToRemove);
+	}, [
+		currentNodes,
+		currentRels,
+		nodes,
+		rels
+	]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.layout === void 0) return;
+		nvlRef.current.setLayout(nvlOptions.layout);
+	}, [nvlOptions.layout]);
+	useDeepCompareEffect(() => {
+		if (nvlRef.current === null || nvlOptions.layoutOptions === void 0) return;
+		nvlRef.current.setLayoutOptions(nvlOptions.layoutOptions);
+	}, [nvlOptions.layoutOptions]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.renderer === void 0) return;
+		nvlRef.current.setRenderer(nvlOptions.renderer);
+	}, [nvlOptions.renderer]);
+	useEffect(() => {
+		if (nvlRef.current === null || nvlOptions.disableWebGL === void 0) return;
+		nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
+	}, [nvlOptions.disableWebGL]);
+	useEffect(() => {
+		if (nvlRef.current === null || positions.length === 0) return;
+		nvlRef.current.setNodePositions(positions);
+	}, [positions]);
+	useEffect(() => {
+		if (nvlRef.current === null) return;
+		const currentZoom = prevZoomRef.current;
+		const currentPan = prevPanRef.current;
+		const zoomHasChanged = zoom !== void 0 && zoom !== currentZoom;
+		const panHasChanged = pan !== void 0 && (pan.x !== currentPan?.x || pan.y !== currentPan.y);
+		if (zoomHasChanged && panHasChanged) nvlRef.current.setZoomAndPan(zoom, pan.x, pan.y);
+		else if (zoomHasChanged) nvlRef.current.setZoom(zoom);
+		else if (panHasChanged) nvlRef.current.setPan(pan.x, pan.y);
+		prevZoomRef.current = zoom;
+		prevPanRef.current = pan;
+	}, [zoom, pan]);
+	return /* @__PURE__ */ jsx("div", {
+		id: BASIC_WRAPPER_ID,
+		ref: containerRef,
+		style: {
+			height: "100%",
+			outline: "0"
+		},
+		...nvlEvents
+	});
 }));
+export { BasicNvlWrapper };

package/lib/index.d.ts

@@ -1,8 +1,5 @@
-import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-import type { BasicReactWrapperProps } from './basic-wrapper/BasicNvlWrapper';
-import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-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, KeyboardEventCallbacks, MouseEvent, KeyboardEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps, StaticPictureWrapperProps };
+import { BasicNvlWrapper, BasicReactWrapperProps } from "./basic-wrapper/BasicNvlWrapper.js";
+import { InteractionOptions, InteractiveNvlWrapperProps, KeyboardEvent, KeyboardEventCallbacks, MouseEvent, MouseEventCallbacks } from "./interactive-nvl-wrapper/types.js";
+import { InteractiveNvlWrapper } from "./interactive-nvl-wrapper/InteractiveNvlWrapper.js";
+import { StaticPictureWrapper, StaticPictureWrapperProps } from "./static-picture-wrapper/StaticPictureWrapper.js";
+export { BasicNvlWrapper, type BasicReactWrapperProps, type InteractionOptions, InteractiveNvlWrapper, type InteractiveNvlWrapperProps, type KeyboardEvent, type KeyboardEventCallbacks, type MouseEvent, type MouseEventCallbacks, StaticPictureWrapper, type StaticPictureWrapperProps };

package/lib/index.js

@@ -1,4 +1,4 @@
-import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
+import { BasicNvlWrapper } from "./basic-wrapper/BasicNvlWrapper.js";
+import { InteractiveNvlWrapper } from "./interactive-nvl-wrapper/InteractiveNvlWrapper.js";
+import { StaticPictureWrapper } from "./static-picture-wrapper/StaticPictureWrapper.js";
 export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };

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

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

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

@@ -1,61 +1,63 @@
-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, keyboardEventCallbacks, interactionOptions }) => {
-    const hoverInteraction = useRef(null);
-    const clickInteraction = useRef(null);
-    const panInteraction = useRef(null);
-    const zoomInteraction = useRef(null);
-    const dragNodeInteraction = useRef(null);
-    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);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeRightClick, 'onNodeRightClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipClick, 'onRelationshipClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipDoubleClick, 'onRelationshipDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipRightClick, 'onRelationshipRightClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasClick, 'onCanvasClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasDoubleClick, 'onCanvasDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasRightClick, 'onCanvasRightClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterClick, 'onClusterClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterDoubleClick, 'onClusterDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterRightClick, 'onClusterRightClick', nvlRef, interactionOptions);
-    useInteraction(PanInteraction, panInteraction, mouseEventCallbacks.onPan, 'onPan', nvlRef, interactionOptions);
-    useInteraction(ZoomInteraction, zoomInteraction, mouseEventCallbacks.onZoomAndPan, 'onZoomAndPan', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDrag, 'onDrag', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragStart, 'onDragStart', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragEnd, 'onDragEnd', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onHoverNodeMargin, 'onHoverNodeMargin', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawStarted, 'onDrawStarted', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawEnded, 'onDrawEnded', nvlRef, interactionOptions);
-    useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxStarted, 'onBoxStarted', nvlRef, interactionOptions);
-    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);
-    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeMove, 'onNodeMove', nvlRef, interactionOptions);
-    useEffect(() => () => {
-        destroyInteraction(hoverInteraction);
-        destroyInteraction(clickInteraction);
-        destroyInteraction(panInteraction);
-        destroyInteraction(zoomInteraction);
-        destroyInteraction(dragNodeInteraction);
-        destroyInteraction(drawInteraction);
-        destroyInteraction(multiSelectInteraction);
-        destroyInteraction(lassoInteraction);
-        destroyInteraction(keyboardInteraction);
-    }, []);
-    return null;
+import { destroyInteraction, useInteraction } from "./hooks.js";
+import { useEffect, useRef } from "react";
+import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from "@neo4j-nvl/interaction-handlers";
+// src/interactive-nvl-wrapper/InteractionHandlers.tsx
+const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, keyboardEventCallbacks, interactionOptions }) => {
+	const hoverInteraction = useRef(null);
+	const clickInteraction = useRef(null);
+	const panInteraction = useRef(null);
+	const zoomInteraction = useRef(null);
+	const dragNodeInteraction = useRef(null);
+	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);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeRightClick, "onNodeRightClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipClick, "onRelationshipClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipDoubleClick, "onRelationshipDoubleClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipRightClick, "onRelationshipRightClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasClick, "onCanvasClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasDoubleClick, "onCanvasDoubleClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasRightClick, "onCanvasRightClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterClick, "onClusterClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterDoubleClick, "onClusterDoubleClick", nvlRef, interactionOptions);
+	useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onClusterRightClick, "onClusterRightClick", nvlRef, interactionOptions);
+	useInteraction(PanInteraction, panInteraction, mouseEventCallbacks.onPan, "onPan", nvlRef, interactionOptions);
+	useInteraction(ZoomInteraction, zoomInteraction, mouseEventCallbacks.onZoomAndPan, "onZoomAndPan", nvlRef, interactionOptions);
+	useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDrag, "onDrag", nvlRef, interactionOptions);
+	useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragStart, "onDragStart", nvlRef, interactionOptions);
+	useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragEnd, "onDragEnd", nvlRef, interactionOptions);
+	useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onHoverNodeMargin, "onHoverNodeMargin", nvlRef, interactionOptions);
+	useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawStarted, "onDrawStarted", nvlRef, interactionOptions);
+	useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawEnded, "onDrawEnded", nvlRef, interactionOptions);
+	useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxStarted, "onBoxStarted", nvlRef, interactionOptions);
+	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);
+	useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeMove, "onNodeMove", nvlRef, interactionOptions);
+	useEffect(() => () => {
+		destroyInteraction(hoverInteraction);
+		destroyInteraction(clickInteraction);
+		destroyInteraction(panInteraction);
+		destroyInteraction(zoomInteraction);
+		destroyInteraction(dragNodeInteraction);
+		destroyInteraction(drawInteraction);
+		destroyInteraction(multiSelectInteraction);
+		destroyInteraction(lassoInteraction);
+		destroyInteraction(keyboardInteraction);
+	}, []);
+	return null;
 };
+export { InteractionHandlers };

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

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