@neo4j-ndl/react-graph 0.0.5 → 1.0.1

package/lib/esm/use-semi-controlled-state.js

@@ -19,22 +19,19 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { useCallback, useMemo, useState } from 'react';
-export function useSemicontrolledState(externalState, externalSetState) {
-    const [backupState, setBackupState] = useState(externalState);
-    const state = useMemo(() => (externalSetState ? externalState : backupState), [externalState, backupState, externalSetState]);
-    const setState = useCallback((newState) => {
-        if (externalSetState !== undefined) {
-            if (typeof newState === 'function') {
-                externalSetState(newState(externalState));
-            }
-            else {
-                externalSetState(newState);
-            }
+export function useSemicontrolledState({ state, onChange, isControlled, }) {
+    const [internal, setInternal] = useState(state);
+    // Decide which state is "active"
+    const current = useMemo(() => {
+        return isControlled === true ? state : internal;
+    }, [isControlled, state, internal]);
+    const setState = useCallback((next) => {
+        const resolved = typeof next === 'function' ? next(current) : next;
+        if (isControlled !== true) {
+            setInternal(resolved);
         }
-        else {
-            setBackupState(newState);
-        }
-    }, [externalSetState, setBackupState, externalState]);
-    return [state, setState];
+        onChange === null || onChange === void 0 ? void 0 : onChange(resolved);
+    }, [isControlled, current, onChange]);
+    return [current, setState];
 }
 //# sourceMappingURL=use-semi-controlled-state.js.map

package/lib/esm/use-semi-controlled-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-semi-controlled-state.js","sourceRoot":"","sources":["../../src/use-semi-controlled-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,UAAU,sBAAsB,CACpC,aAAgB,EAChB,gBAAwC;IAExC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAI,aAAa,CAAC,CAAC;IAEjE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,EACtD,CAAC,aAAa,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAC/C,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,QAA2B,EAAE,EAAE;QAC9B,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;YACnC,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;gBACnC,gBAAgB,CAAE,QAA2B,CAAC,aAAa,CAAC,CAAC,CAAC;YAChE,CAAC;iBAAM,CAAC;gBACN,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,cAAc,EAAE,aAAa,CAAC,CAClD,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"use-semi-controlled-state.js","sourceRoot":"","sources":["../../src/use-semi-controlled-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUvD,MAAM,UAAU,sBAAsB,CAAI,EACxC,KAAK,EACL,QAAQ,EACR,YAAY,GACmB;IAC/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAI,KAAK,CAAC,CAAC;IAEnD,iCAAiC;IACjC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAuB,EAAE,EAAE;QAC1B,MAAM,QAAQ,GACZ,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAE,IAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAExE,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,WAAW,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,EAAE,QAAQ,CAAC,CAClC,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAC7B,CAAC"}

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

@@ -18,16 +18,26 @@
  *  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 HtmlAttributes, type TooltipProps } from '@neo4j-ndl/react';
-import { type CSSProperties, type PropsWithChildren } from 'react';
+import { CleanIconButton, Tooltip } from '@neo4j-ndl/react';
+import { type PropsWithChildren } from 'react';
 type GraphVisualizationButtonProps = {
+    tooltipPlacement?: React.ComponentProps<typeof Tooltip>['placement'];
     className?: string;
-    style?: CSSProperties;
-    htmlAttributes?: HtmlAttributes<'button'>;
-    tooltipPlacement?: TooltipProps['placement'];
+    /**
+     * Additional css styling. Will be applied to the root element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Html attributes to apply to the root element. This will override any default html attributes, use with caution.
+     */
+    htmlAttributes?: React.ComponentPropsWithRef<typeof CleanIconButton>['htmlAttributes'];
+    /**
+     * A ref to apply to the root element.
+     */
+    ref?: React.ComponentPropsWithRef<'button'>['ref'];
 };
 type BaseProperties = GraphVisualizationButtonProps & {
-    tipContent: string;
+    description: string;
     testid?: string;
     ariaLabel?: string;
     isActive?: boolean;

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

@@ -18,7 +18,6 @@
  *  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 PolymorphicRef } from '@neo4j-ndl/react';
 import type NVL from '@neo4j-nvl/base';
 import { type InteractiveNvlWrapperProps } from '@neo4j-nvl/react';
 import React from 'react';
@@ -29,15 +28,14 @@ export declare const DEFAULT_NVL_OPTIONS: {
     maxZoom: number;
     minZoom: number;
     relationshipThreshold: number;
-    useWebGL: boolean;
 };
-export type GraphVisualizationProps<T extends React.ElementType> = {
+export type GraphVisualizationProps<T extends React.ElementType = 'div'> = {
     nvlRef?: React.RefObject<NVL>;
     sidepanel?: Sidepanel | null;
-    topRightIsland?: React.ReactNode;
     bottomLeftIsland?: React.ReactNode;
     bottomRightIsland?: React.ReactNode;
     topLeftIsland?: React.ReactNode;
+    topRightIsland?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     gesture?: Gesture;
@@ -51,7 +49,7 @@ export type GraphVisualizationProps<T extends React.ElementType> = {
     highlightedNodeIds?: string[];
     highlightedRelationshipIds?: string[];
     as?: T;
-    ref?: PolymorphicRef<T>;
+    ref?: React.ComponentPropsWithRef<T>['ref'];
     htmlAttributes?: React.HTMLAttributes<T>;
 } & InteractiveNvlWrapperProps;
 /**
@@ -115,58 +113,238 @@ export type GraphVisualizationProps<T extends React.ElementType> = {
 export declare function GraphVisualization<T extends React.ElementType = 'div'>({ nvlRef: rawNvlRef, nvlCallbacks, nvlOptions, sidepanel: rawSidepanel, nodes: rawNodes, rels: rawRels, highlightedNodeIds, highlightedRelationshipIds, topLeftIsland, topRightIsland, bottomLeftIsland, bottomRightIsland, gesture, setGesture, selected: rawSelected, setSelected: rawSetSelected, interactionMode: rawInteractionMode, setInteractionMode: rawSetInteractionMode, mouseEventCallbacks, className, style, htmlAttributes, ref, as, ...restProps }: GraphVisualizationProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace GraphVisualization {
     var ZoomInButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     }) => import("react/jsx-runtime").JSX.Element;
     var ZoomOutButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     }) => import("react/jsx-runtime").JSX.Element;
     var ZoomToFitButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     }) => import("react/jsx-runtime").JSX.Element;
     var ToggleSidePanelButton: ({ className, htmlAttributes, style, tooltipPlacement, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     }) => import("react/jsx-runtime").JSX.Element;
     var DownloadButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     }) => import("react/jsx-runtime").JSX.Element;
     var BoxSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     }) => import("react/jsx-runtime").JSX.Element;
     var LassoSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     }) => import("react/jsx-runtime").JSX.Element;
     var SingleSelectButton: ({ className, style, htmlAttributes, tooltipPlacement, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     }) => import("react/jsx-runtime").JSX.Element;
     var SearchButton: ({ className, style, htmlAttributes, tooltipPlacement, open: rawOpen, setOpen: rawSetOpen, searchTerm: rawSearchTerm, setSearchTerm: rawSetSearchTerm, onSearch, }: {
+        tooltipPlacement?: React.ComponentProps<{
+            ({ children, isDisabled, type, isInitialOpen, placement, isOpen, onOpenChange, isPortaled: isPortaledProp, floatingStrategy: strategyProp, hoverDelay, shouldCloseOnReferenceClick, autoUpdateOptions, }: import("@neo4j-ndl/react/lib/types/tooltip").TooltipProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            Actions: ({ children, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Body: ({ children, className, style, htmlAttributes, passThroughProps, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", import("@neo4j-ndl/react/lib/types/tooltip").TooltipBodyProps>) => import("react/jsx-runtime").JSX.Element | null;
+            Content: ({ children, style, htmlAttributes, className, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"div", {
+                children: React.ReactNode;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Header: ({ children, passThroughProps, className, style, htmlAttributes, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"span", {
+                children: React.ReactNode;
+                passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof import("@neo4j-ndl/react").Typography>>;
+            }>) => import("react/jsx-runtime").JSX.Element | null;
+            Trigger: ({ children, hasButtonWrapper, htmlAttributes, className, style, ref, }: import("@neo4j-ndl/react/lib/types/_common/types").CommonProps<"button", {
+                children: React.ReactNode;
+                hasButtonWrapper?: boolean;
+            }>) => import("react/jsx-runtime").JSX.Element;
+        }>["placement"];
         className?: string;
         style?: React.CSSProperties;
-        htmlAttributes?: import("@neo4j-ndl/react").HtmlAttributes<"button">;
-        tooltipPlacement?: import("@neo4j-ndl/react").TooltipProps["placement"];
+        htmlAttributes?: React.ComponentPropsWithRef<typeof import("@neo4j-ndl/react").CleanIconButton>["htmlAttributes"];
+        ref?: React.ComponentPropsWithRef<"button">["ref"];
     } & {
         open?: boolean;
         setOpen?: React.Dispatch<React.SetStateAction<boolean>>;

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

@@ -18,6 +18,6 @@
  *  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";
+export declare const containerClasses = "n-w-full n-border-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/stories/graph-visualization-custom.story.d.ts

@@ -18,6 +18,6 @@
  *  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";
+export declare const containerClasses = "n-w-full n-border-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/stories/graph-visualization-default.story.d.ts

@@ -18,6 +18,6 @@
  *  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";
+export declare const containerClasses = "n-w-full n-border-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/stories/graph-visualization-maximalist.story.d.ts

@@ -18,6 +18,6 @@
  *  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";
+export declare const containerClasses = "n-w-full n-border-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/stories/story-data.d.ts

@@ -23,4 +23,4 @@ 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";
+export declare const containerClasses = "n-w-full n-border-neutral-border-weak n-mx-2 n-rounded-lg n-border";

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

@@ -19,5 +19,10 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 type SetStateAction<T> = T | ((prev: T) => T);
-export declare function useSemicontrolledState<T>(externalState: T, externalSetState?: (newState: T) => void): [T, (setState: SetStateAction<T>) => void];
+type UseSemiControlledStateProps<T> = {
+    state: T;
+    onChange?: (next: T) => void;
+    isControlled?: boolean;
+};
+export declare function useSemicontrolledState<T>({ state, onChange, isControlled, }: UseSemiControlledStateProps<T>): [T, (setState: SetStateAction<T>) => void];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react-graph",
-  "version": "0.0.5",
+  "version": "1.0.1",
   "sideEffects": false,
   "description": "React implementation of the graph visualization from Neo4j Design System",
   "keywords": [
@@ -36,8 +36,8 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.9.0",
-    "@playwright/experimental-ct-react": "1.55.1",
-    "@playwright/test": "1.55.1",
+    "@playwright/experimental-ct-react": "1.56.0",
+    "@playwright/test": "1.56.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "14.3.1",
     "@types/react": "18.2.18",
@@ -55,8 +55,8 @@
     "@neo4j-nvl/base": "^1.0.0",
     "@neo4j-nvl/interaction-handlers": "^1.0.0",
     "@neo4j-nvl/react": "^1.0.0",
-    "@neo4j-ndl/base": "^3.7.36",
-    "@neo4j-ndl/react": "^3.9.24"
+    "@neo4j-ndl/base": "^4.0.0",
+    "@neo4j-ndl/react": "^4.0.1"
   },
   "dependencies": {
     "classnames": "2.5.1",