@neo4j-ndl/react 3.8.6 → 3.8.8

package/lib/types/graph-visualization/stories/graph-viz-custom.story.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export declare const containerClasses = "n-w-full n-border-palette-neutral-border-weak n-mx-2 n-rounded-lg n-border";
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;

package/lib/types/graph-visualization/stories/graph-viz-default.story.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export declare const containerClasses = "n-w-full n-border-palette-neutral-border-weak n-mx-2 n-rounded-lg n-border";
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;

package/lib/types/graph-visualization/stories/graph-viz-maximalist.story.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export declare const containerClasses = "n-w-full n-border-palette-neutral-border-weak n-mx-2 n-rounded-lg n-border";
+declare const Component: () => import("react/jsx-runtime").JSX.Element;
+export default Component;

package/lib/types/graph-visualization/stories/graph-viz.stories.d.ts

@@ -0,0 +1,36 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type StoryObj } from '@storybook/react';
+declare const componentMeta: {
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+    tags: string[];
+    title: string;
+};
+export default componentMeta;
+type Story = StoryObj<typeof componentMeta>;
+export declare const Default: Story;
+export declare const Barebones: Story;
+export declare const Maximalist: Story;
+export declare const CustomIslands: Story;

package/lib/types/graph-visualization/stories/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export { default as GraphVizBarebones } from './graph-viz-barebones.story';
+export { default as GraphVizCustom } from './graph-viz-custom.story';
+export { default as GraphVizDefault } from './graph-viz-default.story';
+export { default as GraphVizMaximalist } from './graph-viz-maximalist.story';
+export declare const GraphVizDefaultSrc: string;
+export declare const GraphVizBarebonesSrc: string;
+export declare const GraphVizMaximalistSrc: string;
+export declare const GraphVizCustomSrc: string;

package/lib/types/graph-visualization/stories/story-data.d.ts

@@ -0,0 +1,26 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type NeoNode, type NeoRel } from '../graph-viz-context';
+export declare const StoryGraph: {
+    nodes: NeoNode[];
+    rels: NeoRel[];
+};
+export declare const containerClasses = "n-w-full n-border-palette-neutral-border-weak n-mx-2 n-rounded-lg n-border";

package/lib/types/graph-visualization/use-managed-selection-state.d.ts

@@ -0,0 +1,114 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { type HitTargets, type Node, type Relationship } from '@neo4j-nvl/base';
+import { type MouseEventCallbacks } from '@neo4j-nvl/react';
+import { type Gesture, type GraphSelection, type InteractionMode } from './graph-viz-context';
+export type ManagedSelectionArgs = {
+    selected: GraphSelection;
+    setSelected: (newSelection: GraphSelection) => void;
+    gesture: Gesture;
+    interactionMode: InteractionMode;
+    setInteractionMode: (newInteractionMode: InteractionMode) => void;
+    mouseEventCallbacks: MouseEventCallbacks;
+    nvlGraph: {
+        nodes: Node[];
+        rels: Relationship[];
+    };
+};
+export declare function useManagedSelectionState({ selected, setSelected, gesture, interactionMode, setInteractionMode, mouseEventCallbacks, nvlGraph, }: ManagedSelectionArgs): {
+    nodesWithSelection: {
+        selected: boolean;
+        size?: number;
+        pinned?: boolean;
+        x?: number;
+        y?: number;
+        activated?: boolean;
+        icon?: string;
+        html?: HTMLElement;
+        id: string;
+        color?: string;
+        caption?: string;
+        disabled?: boolean;
+        hovered?: boolean;
+        captionSize?: number;
+        captionAlign?: "top" | "bottom" | "center";
+        captions?: import("@neo4j-nvl/base").StyledCaption[];
+        overlayIcon?: {
+            url: string;
+            position?: number[];
+            size?: number;
+        };
+    }[];
+    relsWithSelection: {
+        selected: boolean;
+        from: string;
+        to: string;
+        type?: string;
+        width?: number;
+        captionHtml?: HTMLElement;
+        id: string;
+        color?: string;
+        caption?: string;
+        disabled?: boolean;
+        hovered?: boolean;
+        captionSize?: number;
+        captionAlign?: "top" | "bottom" | "center";
+        captions?: import("@neo4j-nvl/base").StyledCaption[];
+        overlayIcon?: {
+            url: string;
+            position?: number[];
+            size?: number;
+        };
+    }[];
+    wrappedMouseEventCallbacks: {
+        onBoxSelect: boolean | (({ nodes, rels }: {
+            nodes: Node[];
+            rels: Relationship[];
+        }, evt: MouseEvent) => void);
+        onBoxStarted: boolean | ((event: MouseEvent) => void) | undefined;
+        onCanvasClick: boolean | ((evt: MouseEvent) => void);
+        onDragEnd: boolean | ((draggedNodes: Node[], evt: MouseEvent) => void);
+        onDragStart: boolean | ((draggedNodes: Node[], evt: MouseEvent) => void);
+        onDrawEnded: boolean | ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void);
+        onDrawStarted: boolean | ((evt: MouseEvent) => void);
+        onHover: boolean | ((element: Node | Relationship, hitElements: HitTargets, event: MouseEvent) => void) | undefined;
+        onHoverNodeMargin: boolean | ((hoveredNode: Node | null, evt: MouseEvent) => void) | undefined;
+        onLassoSelect: boolean | (({ nodes, rels }: {
+            nodes: Node[];
+            rels: Relationship[];
+        }, evt: MouseEvent) => void);
+        onLassoStarted: boolean | ((event: MouseEvent) => void) | undefined;
+        onNodeClick: boolean | ((node: Node, hitElements: HitTargets, evt: MouseEvent) => void);
+        onNodeDoubleClick: boolean | ((node: Node, hitElements: HitTargets, evt: MouseEvent) => void);
+        onPan: boolean | ((panning: {
+            x: number;
+            y: number;
+        }, event: MouseEvent) => void);
+        onRelationshipClick: boolean | ((relationship: Relationship, hitElements: HitTargets, evt: MouseEvent) => void);
+        onRelationshipDoubleClick: boolean | ((relationship: Relationship, hitElements: HitTargets, evt: MouseEvent) => void);
+        onZoom: boolean | ((zoomLevel: number, event: WheelEvent) => void);
+        onCanvasDoubleClick?: ((event: MouseEvent) => void) | boolean;
+        onCanvasRightClick?: ((event: MouseEvent) => void) | boolean;
+        onNodeRightClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+        onRelationshipRightClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+        onDrag?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
+    };
+};

package/lib/types/graph-visualization/use-semi-controlled-state.d.ts

@@ -0,0 +1,21 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export declare function useSemicontrolledState<T>(externalState: T, externalSetState?: (newState: T) => void): [T, (setState: T) => void];

package/lib/types/graph-visualization/utils.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export declare const isMac: boolean;
+export declare const xor: (a: string[], b: string[]) => string[];
+export declare const mapValues: <T, R>(obj: Record<string, T>, fn: (value: T) => R) => Record<string, R>;

package/lib/types/index.d.ts

@@ -71,3 +71,4 @@ export * from './loading-bar';
 export * from './conditional-wrap';
 export * from './ai-presence';
 export * from './color-picker';
+export * from './graph-visualization';

package/lib/types/spotlight/Spotlight.d.ts

@@ -65,6 +65,8 @@ export type SpotlightProps = {
     beforeActions?: React.ReactNode;
     /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
     onClose?: (action: SpotlightCloseAction) => void;
+    /** Callback function called when the spotlight is opened */
+    onOpen?: () => void;
     /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
     hasAnchorPortal?: boolean;
     children?: React.ReactNode;
@@ -81,6 +83,8 @@ declare const Spotlight: Omit<React.ForwardRefExoticComponent<{
     beforeActions?: React.ReactNode;
     /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
     onClose?: (action: SpotlightCloseAction) => void;
+    /** Callback function called when the spotlight is opened */
+    onOpen?: () => void;
     /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
     hasAnchorPortal?: boolean;
     children?: React.ReactNode;
@@ -98,6 +102,8 @@ declare const Spotlight: Omit<React.ForwardRefExoticComponent<{
     beforeActions?: React.ReactNode;
     /** Callback function called when Esc is pressed or on mouse click outside of the Spotlight*/
     onClose?: (action: SpotlightCloseAction) => void;
+    /** Callback function called when the spotlight is opened */
+    onOpen?: () => void;
     /** Use anchorEl for portal's container. Should be used if the spotlight is inside an Dialog or Modal */
     hasAnchorPortal?: boolean;
     children?: React.ReactNode;

package/lib/types/spotlight/SpotlightTour.d.ts

@@ -20,7 +20,7 @@
  */
 import type React from 'react';
 import { Spotlight, type SpotlightCloseAction } from './Spotlight';
-type SpotlightTourAction = SpotlightCloseAction | 'dismiss' | 'back' | 'next' | 'close';
+type SpotlightTourAction = SpotlightCloseAction | 'dismiss' | 'back' | 'next' | 'close' | 'open';
 type SpotlightTourProps = {
     /** Array of spotlights */
     spotlights: React.ComponentProps<typeof Spotlight>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "3.8.6",
+  "version": "3.8.8",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -50,6 +50,8 @@
     "@playwright/test": "1.45.0",
     "@storybook/react": "8.5.7",
     "@svgr/cli": "6.5.1",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "14.3.1",
     "@types/react": "18.2.18",
     "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "18.2.7",
@@ -70,7 +72,7 @@
     "@tanstack/react-table": "8.20.5",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "@neo4j-ndl/base": "^3.7.3"
+    "@neo4j-ndl/base": "^3.7.4"
   },
   "dependencies": {
     "@dnd-kit/core": "6.1.0",
@@ -78,6 +80,9 @@
     "@floating-ui/react": "0.26.24",
     "@floating-ui/react-dom": "2.1.2",
     "@heroicons/react": "2.1.5",
+    "@neo4j-devtools/word-color": "^0.0.8",
+    "@neo4j-nvl/base": "0.3.8",
+    "@neo4j-nvl/react": "0.3.8",
     "@uiw/react-color": "2.5.4",
     "classnames": "2.5.1",
     "date-fns": "4.1.0",