react-apextree 1.1.0 → 2.0.0-beta.1

package/README.md

@@ -40,11 +40,13 @@ function App() {
   return (
     <ApexTreeChart
       data={data}
-      width={800}
-      height={600}
-      direction="top"
-      nodeWidth={120}
-      nodeHeight={80}
+      options={{
+        width: 800,
+        height: 600,
+        direction: "top",
+        nodeWidth: 120,
+        nodeHeight: 80,
+      }}
     />
   );
 }
@@ -61,28 +63,18 @@ import { ApexTreeChart, ApexTreeRef } from "react-apextree";
 function App() {
   const treeRef = useRef<ApexTreeRef>(null);
 
-  const handleChangeLayout = () => {
-    treeRef.current?.changeLayout("left");
-  };
-
-  const handleCollapse = (nodeId: string) => {
-    treeRef.current?.collapse(nodeId);
-  };
-
-  const handleExpand = (nodeId: string) => {
-    treeRef.current?.expand(nodeId);
-  };
-
-  const handleFitScreen = () => {
-    treeRef.current?.fitScreen();
-  };
-
   return (
     <div>
-      <button onClick={handleChangeLayout}>Change Layout</button>
-      <button onClick={handleFitScreen}>Fit Screen</button>
-
-      <ApexTreeChart ref={treeRef} data={data} width={800} height={600} />
+      <button onClick={() => treeRef.current?.changeLayout("left")}>Change Layout</button>
+      <button onClick={() => treeRef.current?.fitScreen()}>Fit Screen</button>
+      <button onClick={() => treeRef.current?.collapse("2")}>Collapse node 2</button>
+      <button onClick={() => treeRef.current?.expand("2")}>Expand node 2</button>
+
+      <ApexTreeChart
+        ref={treeRef}
+        data={data}
+        options={{ width: 800, height: 600 }}
+      />
     </div>
   );
 }
@@ -93,62 +85,83 @@ function App() {
 ```tsx
 <ApexTreeChart
   data={data}
-  width={800}
-  height={600}
-  contentKey="data"
-  nodeWidth={150}
-  nodeHeight={100}
-  nodeTemplate={(content) => `
-    <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
-      <img 
-        src="${content.imageURL}" 
-        style="width: 50px; height: 50px; border-radius: 50%;" 
-      />
-      <div style="font-weight: bold;">${content.name}</div>
-    </div>
-  `}
+  options={{
+    width: 800,
+    height: 600,
+    contentKey: "data",
+    nodeWidth: 150,
+    nodeHeight: 100,
+    nodeTemplate: (content) => `
+      <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
+        <img
+          src="${content.imageURL}"
+          style="width: 50px; height: 50px; border-radius: 50%;"
+        />
+        <div style="font-weight: bold;">${content.name}</div>
+      </div>
+    `,
+  }}
 />
 ```
 
 ## Props
 
-| Prop                   | Type                                     | Default      | Description                         |
-| ---------------------- | ---------------------------------------- | ------------ | ----------------------------------- |
-| `data`                 | `NodeData`                               | **required** | Tree data structure                 |
-| `width`                | `number \| string`                       | `400`        | Width of the container              |
-| `height`               | `number \| string`                       | `400`        | Height of the container             |
-| `direction`            | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'`      | Direction of tree growth            |
-| `contentKey`           | `string`                                 | `'name'`     | Key for node content                |
-| `siblingSpacing`       | `number`                                 | `50`         | Spacing between siblings            |
-| `childrenSpacing`      | `number`                                 | `50`         | Spacing between parent and children |
-| `nodeWidth`            | `number`                                 | `50`         | Width of nodes                      |
-| `nodeHeight`           | `number`                                 | `30`         | Height of nodes                     |
-| `nodeTemplate`         | `(content: unknown) => string`           | -            | Custom HTML template for nodes      |
-| `nodeStyle`            | `string`                                 | -            | CSS styles for nodes                |
-| `nodeBGColor`          | `string`                                 | `'#FFFFFF'`  | Node background color               |
-| `nodeBGColorHover`     | `string`                                 | `'#FFFFFF'`  | Node background color on hover      |
-| `borderWidth`          | `number`                                 | `1`          | Node border width                   |
-| `borderStyle`          | `string`                                 | `'solid'`    | Node border style                   |
-| `borderRadius`         | `string`                                 | `'5px'`      | Node border radius                  |
-| `borderColor`          | `string`                                 | `'#BCBCBC'`  | Node border color                   |
-| `borderColorHover`     | `string`                                 | `'#5C6BC0'`  | Node border color on hover          |
-| `edgeWidth`            | `number`                                 | `1`          | Edge line width                     |
-| `edgeColor`            | `string`                                 | `'#BCBCBC'`  | Edge line color                     |
-| `edgeColorHover`       | `string`                                 | `'#5C6BC0'`  | Edge line color on hover            |
-| `fontSize`             | `string`                                 | `'14px'`     | Font size                           |
-| `fontFamily`           | `string`                                 | -            | Font family                         |
-| `fontWeight`           | `string`                                 | `'400'`      | Font weight                         |
-| `fontColor`            | `string`                                 | `'#000000'`  | Font color                          |
-| `highlightOnHover`     | `boolean`                                | `true`       | Enable highlight on hover           |
-| `enableToolbar`        | `boolean`                                | `false`      | Show toolbar                        |
-| `enableExpandCollapse` | `boolean`                                | `false`      | Enable expand/collapse buttons      |
-| `enableTooltip`        | `boolean`                                | `false`      | Enable tooltips                     |
-| `tooltipTemplate`      | `(content: unknown) => string`           | -            | Custom tooltip template             |
-| `groupLeafNodes`       | `boolean`                                | `false`      | Stack leaf nodes                    |
-| `onNodeClick`          | `(node: NodeData) => void`               | -            | Node click handler                  |
-| `className`            | `string`                                 | -            | CSS class for container             |
-| `style`                | `CSSProperties`                          | -            | Inline styles for container         |
-| `canvasStyle`          | `string`                                 | -            | CSS styles for canvas               |
+| Prop          | Type                                    | Default      | Description                           |
+| ------------- | --------------------------------------- | ------------ | ------------------------------------- |
+| `data`        | `NestedNode`                            | **required** | Tree data structure                   |
+| `options`     | `Omit<Partial<TreeOptions>, 'onNodeClick'>` | -        | Tree configuration (see below)        |
+| `onNodeClick` | `(node: unknown) => void`               | -            | Callback fired when a node is clicked |
+| `className`   | `string`                                | -            | CSS class for the container           |
+| `style`       | `CSSProperties`                         | -            | Inline styles for the container       |
+
+### TreeOptions
+
+All tree configuration is passed through the `options` prop:
+
+| Option                           | Type                           | Default     | Description                         |
+| -------------------------------- | ------------------------------ | ----------- | ----------------------------------- |
+| `width`                          | `number \| string`             | `400`       | Width of the container              |
+| `height`                         | `number \| string`             | `400`       | Height of the container             |
+| `direction`                      | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'` | Direction of tree growth       |
+| `contentKey`                     | `string`                       | `'name'`    | Key for node content                |
+| `siblingSpacing`                 | `number`                       | `50`        | Spacing between siblings            |
+| `childrenSpacing`                | `number`                       | `50`        | Spacing between parent and children |
+| `nodeWidth`                      | `number`                       | `50`        | Width of nodes                      |
+| `nodeHeight`                     | `number`                       | `30`        | Height of nodes                     |
+| `nodeTemplate`                   | `(content: string) => string`  | -           | Custom HTML template for nodes      |
+| `nodeStyle`                      | `string`                       | -           | CSS styles for nodes                |
+| `nodeBGColor`                    | `string`                       | `'#FFFFFF'` | Node background color               |
+| `nodeBGColorHover`               | `string`                       | `'#FFFFFF'` | Node background color on hover      |
+| `borderWidth`                    | `number`                       | `1`         | Node border width                   |
+| `borderStyle`                    | `string`                       | `'solid'`   | Node border style                   |
+| `borderRadius`                   | `string`                       | `'5px'`     | Node border radius                  |
+| `borderColor`                    | `string`                       | `'#BCBCBC'` | Node border color                   |
+| `borderColorHover`               | `string`                       | `'#5C6BC0'` | Node border color on hover          |
+| `edgeWidth`                      | `number`                       | `1`         | Edge line width                     |
+| `edgeColor`                      | `string`                       | `'#BCBCBC'` | Edge line color                     |
+| `edgeColorHover`                 | `string`                       | `'#5C6BC0'` | Edge line color on hover            |
+| `fontSize`                       | `string`                       | `'14px'`    | Font size                           |
+| `fontFamily`                     | `string`                       | -           | Font family                         |
+| `fontWeight`                     | `string`                       | `'400'`     | Font weight                         |
+| `fontColor`                      | `string`                       | `'#000000'` | Font color                          |
+| `highlightOnHover`               | `boolean`                      | `true`      | Enable highlight on hover           |
+| `enableToolbar`                  | `boolean`                      | `false`     | Show toolbar                        |
+| `enableExpandCollapse`           | `boolean`                      | `false`     | Enable expand/collapse buttons      |
+| `expandCollapseButtonBGColor`    | `string`                       | -           | Expand/collapse button background   |
+| `expandCollapseButtonBorderColor`| `string`                       | -           | Expand/collapse button border       |
+| `enableTooltip`                  | `boolean`                      | `false`     | Enable tooltips                     |
+| `tooltipTemplate`                | `(content: string) => string`  | -           | Custom tooltip template             |
+| `tooltipMaxWidth`                | `number`                       | -           | Tooltip max width                   |
+| `tooltipMinWidth`                | `number`                       | -           | Tooltip min width                   |
+| `tooltipBorderColor`             | `string`                       | -           | Tooltip border color                |
+| `tooltipBGColor`                 | `string`                       | -           | Tooltip background color            |
+| `tooltipFontColor`               | `string`                       | -           | Tooltip font color                  |
+| `tooltipFontSize`                | `string`                       | -           | Tooltip font size                   |
+| `tooltipPadding`                 | `number`                       | -           | Tooltip padding                     |
+| `tooltipOffset`                  | `number`                       | -           | Tooltip offset                      |
+| `groupLeafNodes`                 | `boolean`                      | `false`     | Stack leaf nodes                    |
+| `groupLeafNodesSpacing`          | `number`                       | -           | Spacing when leaf nodes are grouped |
+| `canvasStyle`                    | `string`                       | -           | CSS styles for the canvas           |
 
 ## Ref Methods
 
@@ -163,23 +176,12 @@ function App() {
 ## Data Structure
 
 ```ts
-interface NodeData<T = unknown> {
-  id: string; // unique identifier
-  name?: string; // display name (or use contentKey)
-  data?: T; // custom data for templates
-  options?: NodeOptions; // per-node styling
-  children?: NodeData<T>[];
-}
-
-interface NodeOptions {
-  nodeBGColor?: string;
-  nodeBGColorHover?: string;
-  borderColor?: string;
-  borderColorHover?: string;
-  fontSize?: string;
-  fontFamily?: string;
-  fontWeight?: string | number;
-  fontColor?: string;
+interface NestedNode<T = undefined> {
+  id: string;                  // unique identifier
+  name: string;                // display label (or use contentKey to point at a different field)
+  data: T;                     // custom data payload, available in nodeTemplate / onNodeClick
+  children: NestedNode<T>[];   // child nodes; pass [] for leaf nodes
+  options?: Partial<TreeOptions>; // per-node visual overrides (font, border, tooltip)
 }
 ```
 
@@ -191,13 +193,61 @@ Full TypeScript support with exported types:
 import type {
   ApexTreeProps,
   ApexTreeRef,
-  NodeData,
-  NodeOptions,
-  TreeDirection,
+  NestedNode,
+  TreeOptions,
   GraphInstance,
 } from "react-apextree";
 ```
 
+## Migrating from v1
+
+**v2 is a breaking change.** All tree configuration options that were previously individual props are now grouped under a single `options` prop.
+
+### Before (v1)
+
+```tsx
+<ApexTreeChart
+  data={data}
+  width={800}
+  height={600}
+  direction="top"
+  nodeWidth={200}
+  nodeHeight={80}
+  edgeColor="#ccc"
+  fontSize="14px"
+  enableExpandCollapse
+  onNodeClick={(node) => console.log(node)}
+/>
+```
+
+### After (v2)
+
+```tsx
+<ApexTreeChart
+  data={data}
+  onNodeClick={(node) => console.log(node)}
+  options={{
+    width: 800,
+    height: 600,
+    direction: "top",
+    nodeWidth: 200,
+    nodeHeight: 80,
+    edgeColor: "#ccc",
+    fontSize: "14px",
+    enableExpandCollapse: true,
+  }}
+/>
+```
+
+The `className` and `style` props remain at the top level (they style the container element, not the tree).
+
+### Updated type imports
+
+```diff
+- import type { NodeData, NodeOptions, TreeDirection } from "react-apextree";
++ import type { NestedNode, TreeOptions } from "react-apextree";
+```
+
 ## License
 
 React-Apextree uses the same dual-license model as ApexCharts. See [LICENSE](./LICENSE) for details.

package/dist/index.cjs

@@ -1,2 +1,2 @@
-'use strict';var react=require('react'),h=require('apextree'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var h__default=/*#__PURE__*/_interopDefault(h);function x(i){h__default.default.setLicense(i);}function u(i){let{className:e,style:d,data:a,...c}=i,l={};for(let[r,n]of Object.entries(c))n!==void 0&&(l[r]=n);return l}var A=react.forwardRef(function(e,d){let{data:a,className:c,style:l}=e,r=react.useRef(null),n=react.useRef(null),f=react.useMemo(()=>u(e),[e.width,e.height,e.direction,e.contentKey,e.siblingSpacing,e.childrenSpacing,e.containerClassName,e.canvasStyle,e.nodeWidth,e.nodeHeight,e.nodeTemplate,e.nodeStyle,e.nodeClassName,e.nodeBGColor,e.nodeBGColorHover,e.borderWidth,e.borderStyle,e.borderRadius,e.borderColor,e.borderColorHover,e.edgeWidth,e.edgeColor,e.edgeColorHover,e.fontSize,e.fontFamily,e.fontWeight,e.fontColor,e.enableTooltip,e.tooltipId,e.tooltipTemplate,e.tooltipMaxWidth,e.tooltipMinWidth,e.tooltipBorderColor,e.tooltipBGColor,e.tooltipFontColor,e.tooltipFontSize,e.tooltipPadding,e.tooltipOffset,e.highlightOnHover,e.enableToolbar,e.enableExpandCollapse,e.expandCollapseButtonBGColor,e.expandCollapseButtonBorderColor,e.groupLeafNodes,e.groupLeafNodesSpacing,e.onNodeClick]);return react.useImperativeHandle(d,()=>({changeLayout:t=>{var o;(o=n.current)==null||o.changeLayout(t);},collapse:t=>{var o;(o=n.current)==null||o.collapse(t);},expand:t=>{var o;(o=n.current)==null||o.expand(t);},fitScreen:()=>{var t;(t=n.current)==null||t.fitScreen();},getGraph:()=>n.current}),[]),react.useEffect(()=>{if(!r.current||!a)return;r.current.innerHTML="";let t=new h__default.default(r.current,f);n.current=t.render(a);},[a,f]),jsxRuntime.jsx("div",{ref:r,className:c,style:l})});exports.ApexTreeChart=A;exports.setApexTreeLicense=x;//# sourceMappingURL=index.cjs.map
+'use strict';var react=require('react'),R=require('apextree'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var R__default=/*#__PURE__*/_interopDefault(R);var g=react.forwardRef(function(x,d){let{data:c,options:f,onNodeClick:t,className:m,style:T}=x,s=react.useRef(null),u=react.useRef(null),n=react.useRef(null),o=react.useRef(t);react.useEffect(()=>{o.current=t;});let l=react.useMemo(()=>({...f,...t!==void 0&&{onNodeClick:r=>{var e;return (e=o.current)==null?void 0:e.call(o,r)}}}),[f,t!==void 0]);return react.useImperativeHandle(d,()=>({changeLayout:r=>{var e;(e=n.current)==null||e.changeLayout(r);},collapse:r=>{var e;(e=n.current)==null||e.collapse(r);},expand:r=>{var e;(e=n.current)==null||e.expand(r);},fitScreen:()=>{var r;(r=n.current)==null||r.fitScreen();},getGraph:()=>n.current}),[]),react.useEffect(()=>{if(!s.current||!c)return;let r=new R__default.default(s.current,l);return u.current=r,n.current=r.render(c),()=>{var e;(e=u.current)==null||e.destroy(),u.current=null,n.current=null;}},[c,l]),jsxRuntime.jsx("div",{ref:s,className:m,style:T})});function I(a){R__default.default.setLicense(a);}exports.ApexTreeChart=g;exports.setApexTreeLicense=I;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.ts","../src/ApexTreeChart.tsx"],"names":["setApexTreeLicense","licenseKey","ApexTree","buildOptions","props","_className","_style","_data","options","cleanOptions","key","value","ApexTreeChart","forwardRef","ref","data","className","style","containerRef","useRef","graphRef","useMemo","useImperativeHandle","direction","_a","nodeId","useEffect","tree","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import ApexTree from \"apextree\";\nimport type { ApexTreeProps } from \"./types\";\n\n/**\n * sets the ApexTree license key globally\n * should be called once at app initialization, before rendering any charts\n *\n * @param licenseKey - the license key string provided by ApexCharts\n *\n * @example\n * ```tsx\n * import { setApexTreeLicense } from 'react-apextree';\n *\n * // call this at the top of your app, before rendering any charts\n * setApexTreeLicense('your-license-key-here');\n * ```\n */\nexport function setApexTreeLicense(licenseKey: string): void {\n  ApexTree.setLicense(licenseKey);\n}\n\n/**\n * extracts ApexTree options from React props\n * filters out react-specific props (className, style, data)\n */\nexport function buildOptions<T>(\n  props: ApexTreeProps<T>\n): Record<string, unknown> {\n  const {\n    // exclude react-specific props\n    className: _className,\n    style: _style,\n    data: _data,\n    // everything else becomes options\n    ...options\n  } = props;\n\n  // remove undefined values to let ApexTree use its defaults\n  const cleanOptions: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(options)) {\n    if (value !== undefined) {\n      cleanOptions[key] = value;\n    }\n  }\n\n  return cleanOptions;\n}\n\n/**\n * shallow comparison of two objects\n * used to detect option changes\n */\nexport function shallowEqual(\n  obj1: Record<string, unknown>,\n  obj2: Record<string, unknown>\n): boolean {\n  const keys1 = Object.keys(obj1);\n  const keys2 = Object.keys(obj2);\n\n  if (keys1.length !== keys2.length) {\n    return false;\n  }\n\n  for (const key of keys1) {\n    if (obj1[key] !== obj2[key]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport ApexTree from 'apextree';\nimport type { ApexTreeProps, ApexTreeRef, GraphInstance } from './types';\nimport { buildOptions } from './utils';\n\n/**\n * react wrapper component for ApexTree\n */\nexport const ApexTreeChart = forwardRef<ApexTreeRef, ApexTreeProps>(\n  function ApexTreeChart(props, ref) {\n    const { data, className, style } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const graphRef = useRef<GraphInstance | null>(null);\n\n    // memoize options to prevent unnecessary re-renders\n    const options = useMemo(() => buildOptions(props), [\n      props.width,\n      props.height,\n      props.direction,\n      props.contentKey,\n      props.siblingSpacing,\n      props.childrenSpacing,\n      props.containerClassName,\n      props.canvasStyle,\n      props.nodeWidth,\n      props.nodeHeight,\n      props.nodeTemplate,\n      props.nodeStyle,\n      props.nodeClassName,\n      props.nodeBGColor,\n      props.nodeBGColorHover,\n      props.borderWidth,\n      props.borderStyle,\n      props.borderRadius,\n      props.borderColor,\n      props.borderColorHover,\n      props.edgeWidth,\n      props.edgeColor,\n      props.edgeColorHover,\n      props.fontSize,\n      props.fontFamily,\n      props.fontWeight,\n      props.fontColor,\n      props.enableTooltip,\n      props.tooltipId,\n      props.tooltipTemplate,\n      props.tooltipMaxWidth,\n      props.tooltipMinWidth,\n      props.tooltipBorderColor,\n      props.tooltipBGColor,\n      props.tooltipFontColor,\n      props.tooltipFontSize,\n      props.tooltipPadding,\n      props.tooltipOffset,\n      props.highlightOnHover,\n      props.enableToolbar,\n      props.enableExpandCollapse,\n      props.expandCollapseButtonBGColor,\n      props.expandCollapseButtonBorderColor,\n      props.groupLeafNodes,\n      props.groupLeafNodesSpacing,\n      props.onNodeClick,\n    ]);\n\n    // expose imperative methods via ref\n    useImperativeHandle(ref, () => ({\n      changeLayout: (direction) => {\n        graphRef.current?.changeLayout(direction);\n      },\n      collapse: (nodeId) => {\n        graphRef.current?.collapse(nodeId);\n      },\n      expand: (nodeId) => {\n        graphRef.current?.expand(nodeId);\n      },\n      fitScreen: () => {\n        graphRef.current?.fitScreen();\n      },\n      getGraph: () => graphRef.current,\n    }), []);\n\n    // render tree when data or options change\n    useEffect(() => {\n      if (!containerRef.current || !data) {\n        return;\n      }\n\n      // clear previous content\n      containerRef.current.innerHTML = '';\n\n      // create new tree instance and render\n      const tree = new ApexTree(containerRef.current, options);\n      graphRef.current = tree.render(data as any) as GraphInstance;\n    }, [data, options]);\n\n    return (\n      <div\n        ref={containerRef}\n        className={className}\n        style={style}\n      />\n    );\n  }\n);"]}
+{"version":3,"sources":["../src/ApexTreeChart.tsx","../src/utils.ts"],"names":["ApexTreeChart","forwardRef","props","ref","data","options","onNodeClick","className","style","containerRef","useRef","treeRef","graphRef","onNodeClickRef","useEffect","mergedOptions","useMemo","node","_a","useImperativeHandle","direction","nodeId","tree","ApexTree","jsx","setApexTreeLicense","licenseKey"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport ApexTree from 'apextree';\nimport type { ApexTreeProps, ApexTreeRef, GraphInstance } from './types';\n\n/**\n * react wrapper component for ApexTree\n */\nexport const ApexTreeChart = forwardRef<ApexTreeRef, ApexTreeProps>(\n  function ApexTreeChart(props, ref) {\n    const { data, options, onNodeClick, className, style } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const treeRef = useRef<ApexTree | null>(null);\n    const graphRef = useRef<GraphInstance | null>(null);\n\n    // keep onNodeClick in a ref so the effect doesn't re-run when the callback changes identity\n    const onNodeClickRef = useRef(onNodeClick);\n    useEffect(() => {\n      onNodeClickRef.current = onNodeClick;\n    });\n\n    // merge onNodeClick into options; stable object identity when neither changes\n    const mergedOptions = useMemo(() => ({\n      ...options,\n      ...(onNodeClick !== undefined && {\n        onNodeClick: (node: unknown) => onNodeClickRef.current?.(node),\n      }),\n    }), [options, onNodeClick !== undefined]); // eslint-disable-line react-hooks/exhaustive-deps\n\n    // expose imperative methods via ref\n    useImperativeHandle(ref, () => ({\n      changeLayout: (direction) => {\n        graphRef.current?.changeLayout(direction);\n      },\n      collapse: (nodeId) => {\n        graphRef.current?.collapse(nodeId);\n      },\n      expand: (nodeId) => {\n        graphRef.current?.expand(nodeId);\n      },\n      fitScreen: () => {\n        graphRef.current?.fitScreen();\n      },\n      getGraph: () => graphRef.current,\n    }), []);\n\n    // render tree when data or options change; destroy previous instance on cleanup\n    useEffect(() => {\n      if (!containerRef.current || !data) {\n        return;\n      }\n\n      const tree = new ApexTree(containerRef.current, mergedOptions);\n      treeRef.current = tree;\n      graphRef.current = tree.render(data) as GraphInstance;\n\n      return () => {\n        treeRef.current?.destroy();\n        treeRef.current = null;\n        graphRef.current = null;\n      };\n    }, [data, mergedOptions]);\n\n    return (\n      <div\n        ref={containerRef}\n        className={className}\n        style={style}\n      />\n    );\n  }\n);\n","import ApexTree from \"apextree\";\n\n/**\n * sets the ApexTree license key globally\n * should be called once at app initialization, before rendering any charts\n *\n * @param licenseKey - the license key string provided by ApexCharts\n *\n * @example\n * ```tsx\n * import { setApexTreeLicense } from 'react-apextree';\n *\n * // call this at the top of your app, before rendering any charts\n * setApexTreeLicense('your-license-key-here');\n * ```\n */\nexport function setApexTreeLicense(licenseKey: string): void {\n  ApexTree.setLicense(licenseKey);\n}\n"]}

package/dist/index.d.cts

@@ -1,38 +1,24 @@
 import * as react from 'react';
 import { CSSProperties } from 'react';
+import { NestedNode, TreeOptions, TreeDirection } from 'apextree';
+export { NestedNode, TreeOptions } from 'apextree';
 
-type TreeDirection = 'top' | 'bottom' | 'left' | 'right';
 /**
- * node data structure expected by ApexTree
- */
-interface NodeData<T = unknown> {
-    readonly id: string;
-    readonly name?: string;
-    readonly data?: T;
-    readonly options?: NodeOptions;
-    readonly children?: Array<NodeData<T>>;
-}
-/**
- * per-node styling options
- */
-interface NodeOptions {
-    nodeBGColor?: string;
-    nodeBGColorHover?: string;
-    borderColor?: string;
-    borderColorHover?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string | number;
-    fontColor?: string;
-}
-/**
- * graph instance returned by ApexTree.render()
+ * public API surface of the graph instance returned by ApexTree.render().
+ * Defined as a structural interface to avoid exposing private class members
+ * from the core Graph class in wrapper public types (prevents TS4094).
  */
 interface GraphInstance {
-    changeLayout: (direction?: TreeDirection) => void;
-    collapse: (nodeId: string) => void;
-    expand: (nodeId: string) => void;
-    fitScreen: () => void;
+    options: TreeOptions;
+    changeLayout(direction?: TreeDirection): void;
+    collapse(nodeId: string): void;
+    construct(data: NestedNode): void;
+    expand(nodeId: string): void;
+    fitScreen(): void;
+    render(options?: {
+        keepOldPosition?: boolean;
+        mode?: 'initial' | 'expand' | 'collapse' | 'data-update';
+    }): void;
 }
 /**
  * imperative methods exposed via ref
@@ -47,62 +33,26 @@ interface ApexTreeRef {
 /**
  * props for the ApexTree React component
  */
-interface ApexTreeProps<T = unknown> {
-    data: NodeData<T>;
+interface ApexTreeProps<T = undefined> {
+    /** Tree data structure */
+    data: NestedNode<T>;
+    /**
+     * Configuration options — imported from core apextree, zero local re-definition.
+     * onNodeClick is omitted here; use the top-level onNodeClick prop instead.
+     */
+    options?: Omit<Partial<TreeOptions>, 'onNodeClick'>;
+    /** Callback fired when a node is clicked */
+    onNodeClick?: (node: unknown) => void;
+    /** CSS class name for the container element */
     className?: string;
+    /** Inline styles for the container element */
     style?: CSSProperties;
-    width?: number | string;
-    height?: number | string;
-    direction?: TreeDirection;
-    siblingSpacing?: number;
-    childrenSpacing?: number;
-    containerClassName?: string;
-    canvasStyle?: string;
-    contentKey?: string;
-    nodeWidth?: number;
-    nodeHeight?: number;
-    nodeTemplate?: (content: unknown) => string;
-    nodeStyle?: string;
-    nodeClassName?: string;
-    nodeBGColor?: string;
-    nodeBGColorHover?: string;
-    borderWidth?: number;
-    borderStyle?: string;
-    borderRadius?: string;
-    borderColor?: string;
-    borderColorHover?: string;
-    edgeWidth?: number;
-    edgeColor?: string;
-    edgeColorHover?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    fontColor?: string;
-    enableTooltip?: boolean;
-    tooltipId?: string;
-    tooltipTemplate?: (content: unknown) => string;
-    tooltipMaxWidth?: number;
-    tooltipMinWidth?: number;
-    tooltipBorderColor?: string;
-    tooltipBGColor?: string;
-    tooltipFontColor?: string;
-    tooltipFontSize?: string;
-    tooltipPadding?: number;
-    tooltipOffset?: number;
-    highlightOnHover?: boolean;
-    enableToolbar?: boolean;
-    enableExpandCollapse?: boolean;
-    expandCollapseButtonBGColor?: string;
-    expandCollapseButtonBorderColor?: string;
-    groupLeafNodes?: boolean;
-    groupLeafNodesSpacing?: number;
-    onNodeClick?: (node: NodeData<T>) => void;
 }
 
 /**
  * react wrapper component for ApexTree
  */
-declare const ApexTreeChart: react.ForwardRefExoticComponent<ApexTreeProps<unknown> & react.RefAttributes<ApexTreeRef>>;
+declare const ApexTreeChart: react.ForwardRefExoticComponent<ApexTreeProps<undefined> & react.RefAttributes<ApexTreeRef>>;
 
 /**
  * sets the ApexTree license key globally
@@ -120,4 +70,4 @@ declare const ApexTreeChart: react.ForwardRefExoticComponent<ApexTreeProps<unkno
  */
 declare function setApexTreeLicense(licenseKey: string): void;
 
-export { ApexTreeChart, type ApexTreeProps, type ApexTreeRef, type GraphInstance, type NodeData, type NodeOptions, type TreeDirection, setApexTreeLicense };
+export { ApexTreeChart, type ApexTreeProps, type ApexTreeRef, type GraphInstance, setApexTreeLicense };

package/dist/index.d.ts

@@ -1,38 +1,24 @@
 import * as react from 'react';
 import { CSSProperties } from 'react';
+import { NestedNode, TreeOptions, TreeDirection } from 'apextree';
+export { NestedNode, TreeOptions } from 'apextree';
 
-type TreeDirection = 'top' | 'bottom' | 'left' | 'right';
 /**
- * node data structure expected by ApexTree
- */
-interface NodeData<T = unknown> {
-    readonly id: string;
-    readonly name?: string;
-    readonly data?: T;
-    readonly options?: NodeOptions;
-    readonly children?: Array<NodeData<T>>;
-}
-/**
- * per-node styling options
- */
-interface NodeOptions {
-    nodeBGColor?: string;
-    nodeBGColorHover?: string;
-    borderColor?: string;
-    borderColorHover?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string | number;
-    fontColor?: string;
-}
-/**
- * graph instance returned by ApexTree.render()
+ * public API surface of the graph instance returned by ApexTree.render().
+ * Defined as a structural interface to avoid exposing private class members
+ * from the core Graph class in wrapper public types (prevents TS4094).
  */
 interface GraphInstance {
-    changeLayout: (direction?: TreeDirection) => void;
-    collapse: (nodeId: string) => void;
-    expand: (nodeId: string) => void;
-    fitScreen: () => void;
+    options: TreeOptions;
+    changeLayout(direction?: TreeDirection): void;
+    collapse(nodeId: string): void;
+    construct(data: NestedNode): void;
+    expand(nodeId: string): void;
+    fitScreen(): void;
+    render(options?: {
+        keepOldPosition?: boolean;
+        mode?: 'initial' | 'expand' | 'collapse' | 'data-update';
+    }): void;
 }
 /**
  * imperative methods exposed via ref
@@ -47,62 +33,26 @@ interface ApexTreeRef {
 /**
  * props for the ApexTree React component
  */
-interface ApexTreeProps<T = unknown> {
-    data: NodeData<T>;
+interface ApexTreeProps<T = undefined> {
+    /** Tree data structure */
+    data: NestedNode<T>;
+    /**
+     * Configuration options — imported from core apextree, zero local re-definition.
+     * onNodeClick is omitted here; use the top-level onNodeClick prop instead.
+     */
+    options?: Omit<Partial<TreeOptions>, 'onNodeClick'>;
+    /** Callback fired when a node is clicked */
+    onNodeClick?: (node: unknown) => void;
+    /** CSS class name for the container element */
     className?: string;
+    /** Inline styles for the container element */
     style?: CSSProperties;
-    width?: number | string;
-    height?: number | string;
-    direction?: TreeDirection;
-    siblingSpacing?: number;
-    childrenSpacing?: number;
-    containerClassName?: string;
-    canvasStyle?: string;
-    contentKey?: string;
-    nodeWidth?: number;
-    nodeHeight?: number;
-    nodeTemplate?: (content: unknown) => string;
-    nodeStyle?: string;
-    nodeClassName?: string;
-    nodeBGColor?: string;
-    nodeBGColorHover?: string;
-    borderWidth?: number;
-    borderStyle?: string;
-    borderRadius?: string;
-    borderColor?: string;
-    borderColorHover?: string;
-    edgeWidth?: number;
-    edgeColor?: string;
-    edgeColorHover?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    fontColor?: string;
-    enableTooltip?: boolean;
-    tooltipId?: string;
-    tooltipTemplate?: (content: unknown) => string;
-    tooltipMaxWidth?: number;
-    tooltipMinWidth?: number;
-    tooltipBorderColor?: string;
-    tooltipBGColor?: string;
-    tooltipFontColor?: string;
-    tooltipFontSize?: string;
-    tooltipPadding?: number;
-    tooltipOffset?: number;
-    highlightOnHover?: boolean;
-    enableToolbar?: boolean;
-    enableExpandCollapse?: boolean;
-    expandCollapseButtonBGColor?: string;
-    expandCollapseButtonBorderColor?: string;
-    groupLeafNodes?: boolean;
-    groupLeafNodesSpacing?: number;
-    onNodeClick?: (node: NodeData<T>) => void;
 }
 
 /**
  * react wrapper component for ApexTree
  */
-declare const ApexTreeChart: react.ForwardRefExoticComponent<ApexTreeProps<unknown> & react.RefAttributes<ApexTreeRef>>;
+declare const ApexTreeChart: react.ForwardRefExoticComponent<ApexTreeProps<undefined> & react.RefAttributes<ApexTreeRef>>;
 
 /**
  * sets the ApexTree license key globally
@@ -120,4 +70,4 @@ declare const ApexTreeChart: react.ForwardRefExoticComponent<ApexTreeProps<unkno
  */
 declare function setApexTreeLicense(licenseKey: string): void;
 
-export { ApexTreeChart, type ApexTreeProps, type ApexTreeRef, type GraphInstance, type NodeData, type NodeOptions, type TreeDirection, setApexTreeLicense };
+export { ApexTreeChart, type ApexTreeProps, type ApexTreeRef, type GraphInstance, setApexTreeLicense };

package/dist/index.js

@@ -1,2 +1,2 @@
-import {forwardRef,useRef,useMemo,useImperativeHandle,useEffect}from'react';import h from'apextree';import {jsx}from'react/jsx-runtime';function x(i){h.setLicense(i);}function u(i){let{className:e,style:d,data:a,...c}=i,l={};for(let[r,n]of Object.entries(c))n!==void 0&&(l[r]=n);return l}var A=forwardRef(function(e,d){let{data:a,className:c,style:l}=e,r=useRef(null),n=useRef(null),f=useMemo(()=>u(e),[e.width,e.height,e.direction,e.contentKey,e.siblingSpacing,e.childrenSpacing,e.containerClassName,e.canvasStyle,e.nodeWidth,e.nodeHeight,e.nodeTemplate,e.nodeStyle,e.nodeClassName,e.nodeBGColor,e.nodeBGColorHover,e.borderWidth,e.borderStyle,e.borderRadius,e.borderColor,e.borderColorHover,e.edgeWidth,e.edgeColor,e.edgeColorHover,e.fontSize,e.fontFamily,e.fontWeight,e.fontColor,e.enableTooltip,e.tooltipId,e.tooltipTemplate,e.tooltipMaxWidth,e.tooltipMinWidth,e.tooltipBorderColor,e.tooltipBGColor,e.tooltipFontColor,e.tooltipFontSize,e.tooltipPadding,e.tooltipOffset,e.highlightOnHover,e.enableToolbar,e.enableExpandCollapse,e.expandCollapseButtonBGColor,e.expandCollapseButtonBorderColor,e.groupLeafNodes,e.groupLeafNodesSpacing,e.onNodeClick]);return useImperativeHandle(d,()=>({changeLayout:t=>{var o;(o=n.current)==null||o.changeLayout(t);},collapse:t=>{var o;(o=n.current)==null||o.collapse(t);},expand:t=>{var o;(o=n.current)==null||o.expand(t);},fitScreen:()=>{var t;(t=n.current)==null||t.fitScreen();},getGraph:()=>n.current}),[]),useEffect(()=>{if(!r.current||!a)return;r.current.innerHTML="";let t=new h(r.current,f);n.current=t.render(a);},[a,f]),jsx("div",{ref:r,className:c,style:l})});export{A as ApexTreeChart,x as setApexTreeLicense};//# sourceMappingURL=index.js.map
+import {forwardRef,useRef,useEffect,useMemo,useImperativeHandle}from'react';import R from'apextree';import {jsx}from'react/jsx-runtime';var g=forwardRef(function(x,d){let{data:c,options:f,onNodeClick:t,className:m,style:T}=x,s=useRef(null),u=useRef(null),n=useRef(null),o=useRef(t);useEffect(()=>{o.current=t;});let l=useMemo(()=>({...f,...t!==void 0&&{onNodeClick:r=>{var e;return (e=o.current)==null?void 0:e.call(o,r)}}}),[f,t!==void 0]);return useImperativeHandle(d,()=>({changeLayout:r=>{var e;(e=n.current)==null||e.changeLayout(r);},collapse:r=>{var e;(e=n.current)==null||e.collapse(r);},expand:r=>{var e;(e=n.current)==null||e.expand(r);},fitScreen:()=>{var r;(r=n.current)==null||r.fitScreen();},getGraph:()=>n.current}),[]),useEffect(()=>{if(!s.current||!c)return;let r=new R(s.current,l);return u.current=r,n.current=r.render(c),()=>{var e;(e=u.current)==null||e.destroy(),u.current=null,n.current=null;}},[c,l]),jsx("div",{ref:s,className:m,style:T})});function I(a){R.setLicense(a);}export{g as ApexTreeChart,I as setApexTreeLicense};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.ts","../src/ApexTreeChart.tsx"],"names":["setApexTreeLicense","licenseKey","ApexTree","buildOptions","props","_className","_style","_data","options","cleanOptions","key","value","ApexTreeChart","forwardRef","ref","data","className","style","containerRef","useRef","graphRef","useMemo","useImperativeHandle","direction","_a","nodeId","useEffect","tree","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import ApexTree from \"apextree\";\nimport type { ApexTreeProps } from \"./types\";\n\n/**\n * sets the ApexTree license key globally\n * should be called once at app initialization, before rendering any charts\n *\n * @param licenseKey - the license key string provided by ApexCharts\n *\n * @example\n * ```tsx\n * import { setApexTreeLicense } from 'react-apextree';\n *\n * // call this at the top of your app, before rendering any charts\n * setApexTreeLicense('your-license-key-here');\n * ```\n */\nexport function setApexTreeLicense(licenseKey: string): void {\n  ApexTree.setLicense(licenseKey);\n}\n\n/**\n * extracts ApexTree options from React props\n * filters out react-specific props (className, style, data)\n */\nexport function buildOptions<T>(\n  props: ApexTreeProps<T>\n): Record<string, unknown> {\n  const {\n    // exclude react-specific props\n    className: _className,\n    style: _style,\n    data: _data,\n    // everything else becomes options\n    ...options\n  } = props;\n\n  // remove undefined values to let ApexTree use its defaults\n  const cleanOptions: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(options)) {\n    if (value !== undefined) {\n      cleanOptions[key] = value;\n    }\n  }\n\n  return cleanOptions;\n}\n\n/**\n * shallow comparison of two objects\n * used to detect option changes\n */\nexport function shallowEqual(\n  obj1: Record<string, unknown>,\n  obj2: Record<string, unknown>\n): boolean {\n  const keys1 = Object.keys(obj1);\n  const keys2 = Object.keys(obj2);\n\n  if (keys1.length !== keys2.length) {\n    return false;\n  }\n\n  for (const key of keys1) {\n    if (obj1[key] !== obj2[key]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport ApexTree from 'apextree';\nimport type { ApexTreeProps, ApexTreeRef, GraphInstance } from './types';\nimport { buildOptions } from './utils';\n\n/**\n * react wrapper component for ApexTree\n */\nexport const ApexTreeChart = forwardRef<ApexTreeRef, ApexTreeProps>(\n  function ApexTreeChart(props, ref) {\n    const { data, className, style } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const graphRef = useRef<GraphInstance | null>(null);\n\n    // memoize options to prevent unnecessary re-renders\n    const options = useMemo(() => buildOptions(props), [\n      props.width,\n      props.height,\n      props.direction,\n      props.contentKey,\n      props.siblingSpacing,\n      props.childrenSpacing,\n      props.containerClassName,\n      props.canvasStyle,\n      props.nodeWidth,\n      props.nodeHeight,\n      props.nodeTemplate,\n      props.nodeStyle,\n      props.nodeClassName,\n      props.nodeBGColor,\n      props.nodeBGColorHover,\n      props.borderWidth,\n      props.borderStyle,\n      props.borderRadius,\n      props.borderColor,\n      props.borderColorHover,\n      props.edgeWidth,\n      props.edgeColor,\n      props.edgeColorHover,\n      props.fontSize,\n      props.fontFamily,\n      props.fontWeight,\n      props.fontColor,\n      props.enableTooltip,\n      props.tooltipId,\n      props.tooltipTemplate,\n      props.tooltipMaxWidth,\n      props.tooltipMinWidth,\n      props.tooltipBorderColor,\n      props.tooltipBGColor,\n      props.tooltipFontColor,\n      props.tooltipFontSize,\n      props.tooltipPadding,\n      props.tooltipOffset,\n      props.highlightOnHover,\n      props.enableToolbar,\n      props.enableExpandCollapse,\n      props.expandCollapseButtonBGColor,\n      props.expandCollapseButtonBorderColor,\n      props.groupLeafNodes,\n      props.groupLeafNodesSpacing,\n      props.onNodeClick,\n    ]);\n\n    // expose imperative methods via ref\n    useImperativeHandle(ref, () => ({\n      changeLayout: (direction) => {\n        graphRef.current?.changeLayout(direction);\n      },\n      collapse: (nodeId) => {\n        graphRef.current?.collapse(nodeId);\n      },\n      expand: (nodeId) => {\n        graphRef.current?.expand(nodeId);\n      },\n      fitScreen: () => {\n        graphRef.current?.fitScreen();\n      },\n      getGraph: () => graphRef.current,\n    }), []);\n\n    // render tree when data or options change\n    useEffect(() => {\n      if (!containerRef.current || !data) {\n        return;\n      }\n\n      // clear previous content\n      containerRef.current.innerHTML = '';\n\n      // create new tree instance and render\n      const tree = new ApexTree(containerRef.current, options);\n      graphRef.current = tree.render(data as any) as GraphInstance;\n    }, [data, options]);\n\n    return (\n      <div\n        ref={containerRef}\n        className={className}\n        style={style}\n      />\n    );\n  }\n);"]}
+{"version":3,"sources":["../src/ApexTreeChart.tsx","../src/utils.ts"],"names":["ApexTreeChart","forwardRef","props","ref","data","options","onNodeClick","className","style","containerRef","useRef","treeRef","graphRef","onNodeClickRef","useEffect","mergedOptions","useMemo","node","_a","useImperativeHandle","direction","nodeId","tree","ApexTree","jsx","setApexTreeLicense","licenseKey"],"mappings":"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","file":"index.js","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport ApexTree from 'apextree';\nimport type { ApexTreeProps, ApexTreeRef, GraphInstance } from './types';\n\n/**\n * react wrapper component for ApexTree\n */\nexport const ApexTreeChart = forwardRef<ApexTreeRef, ApexTreeProps>(\n  function ApexTreeChart(props, ref) {\n    const { data, options, onNodeClick, className, style } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const treeRef = useRef<ApexTree | null>(null);\n    const graphRef = useRef<GraphInstance | null>(null);\n\n    // keep onNodeClick in a ref so the effect doesn't re-run when the callback changes identity\n    const onNodeClickRef = useRef(onNodeClick);\n    useEffect(() => {\n      onNodeClickRef.current = onNodeClick;\n    });\n\n    // merge onNodeClick into options; stable object identity when neither changes\n    const mergedOptions = useMemo(() => ({\n      ...options,\n      ...(onNodeClick !== undefined && {\n        onNodeClick: (node: unknown) => onNodeClickRef.current?.(node),\n      }),\n    }), [options, onNodeClick !== undefined]); // eslint-disable-line react-hooks/exhaustive-deps\n\n    // expose imperative methods via ref\n    useImperativeHandle(ref, () => ({\n      changeLayout: (direction) => {\n        graphRef.current?.changeLayout(direction);\n      },\n      collapse: (nodeId) => {\n        graphRef.current?.collapse(nodeId);\n      },\n      expand: (nodeId) => {\n        graphRef.current?.expand(nodeId);\n      },\n      fitScreen: () => {\n        graphRef.current?.fitScreen();\n      },\n      getGraph: () => graphRef.current,\n    }), []);\n\n    // render tree when data or options change; destroy previous instance on cleanup\n    useEffect(() => {\n      if (!containerRef.current || !data) {\n        return;\n      }\n\n      const tree = new ApexTree(containerRef.current, mergedOptions);\n      treeRef.current = tree;\n      graphRef.current = tree.render(data) as GraphInstance;\n\n      return () => {\n        treeRef.current?.destroy();\n        treeRef.current = null;\n        graphRef.current = null;\n      };\n    }, [data, mergedOptions]);\n\n    return (\n      <div\n        ref={containerRef}\n        className={className}\n        style={style}\n      />\n    );\n  }\n);\n","import ApexTree from \"apextree\";\n\n/**\n * sets the ApexTree license key globally\n * should be called once at app initialization, before rendering any charts\n *\n * @param licenseKey - the license key string provided by ApexCharts\n *\n * @example\n * ```tsx\n * import { setApexTreeLicense } from 'react-apextree';\n *\n * // call this at the top of your app, before rendering any charts\n * setApexTreeLicense('your-license-key-here');\n * ```\n */\nexport function setApexTreeLicense(licenseKey: string): void {\n  ApexTree.setLicense(licenseKey);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-apextree",
-  "version": "1.1.0",
+  "version": "2.0.0-beta.1",
   "description": "React wrapper for ApexTree - a JavaScript library for creating organizational and hierarchical charts",
   "author": "ApexCharts",
   "license": "See LICENSE in LICENSE",
@@ -54,14 +54,14 @@
     "demo:build": "npm run --prefix demo build"
   },
   "peerDependencies": {
-    "apextree": ">=1.6.1",
+    "apextree": ">=1.9.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "apextree": "^1.6.1",
+    "apextree": "^1.9.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tsup": "^8.5.1",