react-apextree 1.0.0

package/LICENSE

@@ -0,0 +1,80 @@
+## 📄 License Options for react-apextree
+
+react-apextree is offered under a **dual-license model** to support individuals, startups, and commercial products of all sizes.
+
+---
+
+### 🔓 Community License (Free)
+
+For individuals, non-profits, educators, and small businesses with **less than $2 million USD in annual revenue**.
+
+✅ What's allowed:
+
+- Personal, educational, or non-profit use
+- Commercial use by small orgs (< $2M annual revenue)
+- Modifications and redistribution (with attribution)
+
+🚫 Not allowed:
+
+- Use by companies or entities over $2M/year revenue
+- Use in competing charting products
+- Sublicensing under different terms
+
+➡ By using react-apextree under this license, you confirm that **you qualify as a Small Organization**.
+
+---
+
+### 💼 Commercial License (Paid)
+
+Required if **you or your affiliated organization earns $2 million USD or more per year**.
+
+✅ What's included:
+
+- Use in internal tools and commercial applications
+- Modifications and app-level distribution
+- 12-month subscription with updates & support
+
+🚫 Not allowed:
+
+- Redistribution in toolkits, SDKs, or platforms
+- Use by unlicensed developers
+- Competing charting products
+
+---
+
+### 🔄 OEM / Redistribution License (Paid)
+
+Required if you are **embedding react-apextree into a product or platform used by other people**, such as:
+
+- No-code dashboards
+- Developer platforms
+- Embedded BI tools
+- White-labeled apps or SDKs
+
+✅ What's included:
+
+- Redistribution rights for 1 application or product
+- 12-month subscription with updates & support
+
+✅ OEM **not required** if your app simply renders static charts and users **cannot** configure or interact with them.
+
+---
+
+### ⚠️ License Acceptance
+
+By installing react-apextree (e.g., via `npm install react-apextree`), you are agreeing to the applicable license based on your usage:
+
+- Community License (if under $2M revenue)
+- Commercial License (if over $2M revenue)
+- OEM License (if redistributing to third-party users)
+
+---
+
+### 🛠 Need a License or Have Questions?
+
+📧 Contact us at [sales@apexcharts.com](mailto:sales@apexcharts.com)  
+📚 Read full license agreements here: [https://apexcharts.com/license](https://apexcharts.com/license)
+
+---
+
+Thank you for supporting ApexCharts! Your licensing helps keep it free and open for individuals and small teams.

package/README.md

@@ -0,0 +1,244 @@
+# react-apextree
+
+React wrapper for [ApexTree](https://github.com/apexcharts/apextree) - a JavaScript library for creating organizational and hierarchical charts.
+
+<img width="811" alt="ApexTree Example" src="https://github.com/apexcharts/tree/assets/17950663/e09212ec-6322-4c68-ac12-9afc524d2abd">
+
+## Installation
+
+```bash
+npm install react-apextree apextree
+```
+
+> **Note:** `apextree` is a peer dependency and must be installed alongside `react-apextree`.
+
+## Basic Usage
+
+```tsx
+import { ApexTreeChart } from "react-apextree";
+
+const data = {
+  id: "1",
+  name: "CEO",
+  children: [
+    {
+      id: "2",
+      name: "CTO",
+      children: [
+        { id: "3", name: "Dev Lead" },
+        { id: "4", name: "QA Lead" },
+      ],
+    },
+    {
+      id: "5",
+      name: "CFO",
+    },
+  ],
+};
+
+function App() {
+  return (
+    <ApexTreeChart
+      data={data}
+      width={800}
+      height={600}
+      direction="top"
+      nodeWidth={120}
+      nodeHeight={80}
+    />
+  );
+}
+```
+
+## Using Imperative Methods
+
+Access methods like `changeLayout`, `collapse`, `expand`, and `fitScreen` via ref:
+
+```tsx
+import { useRef } from "react";
+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} />
+    </div>
+  );
+}
+```
+
+## Custom Node Templates
+
+```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>
+  `}
+/>
+```
+
+## 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               |
+
+## Ref Methods
+
+| Method                     | Description                       |
+| -------------------------- | --------------------------------- |
+| `changeLayout(direction?)` | Change tree direction             |
+| `collapse(nodeId)`         | Collapse a node                   |
+| `expand(nodeId)`           | Expand a node                     |
+| `fitScreen()`              | Fit tree to screen                |
+| `getGraph()`               | Get the underlying graph instance |
+
+## 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;
+}
+```
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```ts
+import type {
+  ApexTreeProps,
+  ApexTreeRef,
+  NodeData,
+  NodeOptions,
+  TreeDirection,
+  GraphInstance,
+} from "react-apextree";
+```
+
+## License
+
+React-Apextree uses the same dual-license model as ApexCharts. See [LICENSE](./LICENSE) for details.
+
+- **Free** for individuals, non-profits, and small businesses (< $2M revenue)
+- **Commercial license** required for larger organizations
+
+## Links
+
+- [ApexTree Documentation](https://github.com/apexcharts/apextree)
+- [ApexCharts](https://apexcharts.com)
+- [License Information](https://apexcharts.com/license)
+
+## Development
+
+### Running the Demo
+
+The package includes a demo app showcasing various features:
+
+```bash
+# clone the repo
+git clone https://github.com/apexcharts/react-apextree.git
+cd react-apextree
+
+# install dependencies
+npm install
+cd demo && npm install && cd ..
+
+# build the library
+npm run build
+
+# run the demo
+npm run demo
+```
+
+Then open http://localhost:5173 to see the examples.
+
+### Available Scripts
+
+- `npm run build` - Build the library
+- `npm run dev` - Build in watch mode
+- `npm run typecheck` - Run TypeScript type checking
+- `npm run demo` - Run the demo app
+- `npm run demo:build` - Build the demo app

package/dist/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var react=require('react'),x=require('apextree'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var x__default=/*#__PURE__*/_interopDefault(x);function u(c){let{className:e,style:d,data:a,...i}=c,l={};for(let[r,n]of Object.entries(i))n!==void 0&&(l[r]=n);return l}var C=react.forwardRef(function(e,d){let{data:a,className:i,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 x__default.default(r.current,f);n.current=t.render(a);},[a,f]),jsxRuntime.jsx("div",{ref:r,className:i,style:l})});exports.ApexTreeChart=C;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts","../src/ApexTreeChart.tsx"],"names":["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","ApexTree","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { ApexTreeProps } from './types';\n\n/**\n * extracts ApexTree options from React props\n * filters out react-specific props (className, style, data)\n */\nexport function buildOptions<T>(props: ApexTreeProps<T>): 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);"]}

package/dist/index.d.cts

@@ -0,0 +1,107 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+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()
+ */
+interface GraphInstance {
+    changeLayout: (direction?: TreeDirection) => void;
+    collapse: (nodeId: string) => void;
+    expand: (nodeId: string) => void;
+    fitScreen: () => void;
+}
+/**
+ * imperative methods exposed via ref
+ */
+interface ApexTreeRef {
+    changeLayout: (direction?: TreeDirection) => void;
+    collapse: (nodeId: string) => void;
+    expand: (nodeId: string) => void;
+    fitScreen: () => void;
+    getGraph: () => GraphInstance | null;
+}
+/**
+ * props for the ApexTree React component
+ */
+interface ApexTreeProps<T = unknown> {
+    data: NodeData<T>;
+    className?: string;
+    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>>;
+
+export { ApexTreeChart, type ApexTreeProps, type ApexTreeRef, type GraphInstance, type NodeData, type NodeOptions, type TreeDirection };

package/dist/index.d.ts

@@ -0,0 +1,107 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+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()
+ */
+interface GraphInstance {
+    changeLayout: (direction?: TreeDirection) => void;
+    collapse: (nodeId: string) => void;
+    expand: (nodeId: string) => void;
+    fitScreen: () => void;
+}
+/**
+ * imperative methods exposed via ref
+ */
+interface ApexTreeRef {
+    changeLayout: (direction?: TreeDirection) => void;
+    collapse: (nodeId: string) => void;
+    expand: (nodeId: string) => void;
+    fitScreen: () => void;
+    getGraph: () => GraphInstance | null;
+}
+/**
+ * props for the ApexTree React component
+ */
+interface ApexTreeProps<T = unknown> {
+    data: NodeData<T>;
+    className?: string;
+    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>>;
+
+export { ApexTreeChart, type ApexTreeProps, type ApexTreeRef, type GraphInstance, type NodeData, type NodeOptions, type TreeDirection };

package/dist/index.js

@@ -0,0 +1,2 @@
+import {forwardRef,useRef,useMemo,useImperativeHandle,useEffect}from'react';import x from'apextree';import {jsx}from'react/jsx-runtime';function u(c){let{className:e,style:d,data:a,...i}=c,l={};for(let[r,n]of Object.entries(i))n!==void 0&&(l[r]=n);return l}var C=forwardRef(function(e,d){let{data:a,className:i,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 x(r.current,f);n.current=t.render(a);},[a,f]),jsx("div",{ref:r,className:i,style:l})});export{C as ApexTreeChart};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts","../src/ApexTreeChart.tsx"],"names":["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","ApexTree","jsx"],"mappings":"wIAMO,SAASA,CAAAA,CAAgBC,CAAAA,CAAkD,CAChF,GAAM,CAEJ,SAAA,CAAWC,CAAAA,CACX,MAAOC,CAAAA,CACP,IAAA,CAAMC,CAAAA,CAEN,GAAGC,CACL,CAAA,CAAIJ,CAAAA,CAGEK,CAAAA,CAAwC,EAAC,CAE/C,IAAA,GAAW,CAACC,CAAAA,CAAKC,CAAK,CAAA,GAAK,MAAA,CAAO,OAAA,CAAQH,CAAO,CAAA,CAC3CG,CAAAA,GAAU,MAAA,GACZF,CAAAA,CAAaC,CAAG,CAAA,CAAIC,CAAAA,CAAAA,CAIxB,OAAOF,CACT,CCZO,IAAMG,CAAAA,CAAgBC,UAAAA,CAC3B,SAAuBT,EAAOU,CAAAA,CAAK,CACjC,GAAM,CAAE,IAAA,CAAAC,CAAAA,CAAM,SAAA,CAAAC,CAAAA,CAAW,MAAAC,CAAM,CAAA,CAAIb,CAAAA,CAE7Bc,CAAAA,CAAeC,MAAAA,CAAuB,IAAI,CAAA,CAC1CC,CAAAA,CAAWD,OAA6B,IAAI,CAAA,CAG5CX,CAAAA,CAAUa,OAAAA,CAAQ,IAAMlB,CAAAA,CAAaC,CAAK,CAAA,CAAG,CACjDA,CAAAA,CAAM,KAAA,CACNA,CAAAA,CAAM,MAAA,CACNA,CAAAA,CAAM,SAAA,CACNA,CAAAA,CAAM,UAAA,CACNA,EAAM,cAAA,CACNA,CAAAA,CAAM,eAAA,CACNA,CAAAA,CAAM,kBAAA,CACNA,CAAAA,CAAM,WAAA,CACNA,CAAAA,CAAM,UACNA,CAAAA,CAAM,UAAA,CACNA,CAAAA,CAAM,YAAA,CACNA,CAAAA,CAAM,SAAA,CACNA,CAAAA,CAAM,aAAA,CACNA,EAAM,WAAA,CACNA,CAAAA,CAAM,gBAAA,CACNA,CAAAA,CAAM,WAAA,CACNA,CAAAA,CAAM,WAAA,CACNA,CAAAA,CAAM,aACNA,CAAAA,CAAM,WAAA,CACNA,CAAAA,CAAM,gBAAA,CACNA,CAAAA,CAAM,SAAA,CACNA,CAAAA,CAAM,SAAA,CACNA,EAAM,cAAA,CACNA,CAAAA,CAAM,QAAA,CACNA,CAAAA,CAAM,WACNA,CAAAA,CAAM,UAAA,CACNA,CAAAA,CAAM,SAAA,CACNA,EAAM,aAAA,CACNA,CAAAA,CAAM,SAAA,CACNA,CAAAA,CAAM,eAAA,CACNA,CAAAA,CAAM,eAAA,CACNA,CAAAA,CAAM,gBACNA,CAAAA,CAAM,kBAAA,CACNA,CAAAA,CAAM,cAAA,CACNA,CAAAA,CAAM,gBAAA,CACNA,CAAAA,CAAM,eAAA,CACNA,EAAM,cAAA,CACNA,CAAAA,CAAM,aAAA,CACNA,CAAAA,CAAM,gBAAA,CACNA,CAAAA,CAAM,aAAA,CACNA,CAAAA,CAAM,qBACNA,CAAAA,CAAM,2BAAA,CACNA,CAAAA,CAAM,+BAAA,CACNA,CAAAA,CAAM,cAAA,CACNA,CAAAA,CAAM,qBAAA,CACNA,EAAM,WACR,CAAC,CAAA,CAGD,OAAAkB,mBAAAA,CAAoBR,CAAAA,CAAK,KAAO,CAC9B,aAAeS,CAAAA,EAAc,CAzEnC,IAAAC,CAAAA,CAAAA,CA0EQA,CAAAA,CAAAJ,CAAAA,CAAS,OAAA,GAAT,IAAA,EAAAI,EAAkB,YAAA,CAAaD,CAAAA,EACjC,CAAA,CACA,QAAA,CAAWE,CAAAA,EAAW,CA5E5B,IAAAD,CAAAA,CAAAA,CA6EQA,EAAAJ,CAAAA,CAAS,OAAA,GAAT,IAAA,EAAAI,CAAAA,CAAkB,SAASC,CAAAA,EAC7B,CAAA,CACA,MAAA,CAASA,CAAAA,EAAW,CA/E1B,IAAAD,CAAAA,CAAAA,CAgFQA,CAAAA,CAAAJ,CAAAA,CAAS,OAAA,GAAT,IAAA,EAAAI,CAAAA,CAAkB,MAAA,CAAOC,GAC3B,CAAA,CACA,SAAA,CAAW,IAAM,CAlFvB,IAAAD,CAAAA,CAAAA,CAmFQA,CAAAA,CAAAJ,CAAAA,CAAS,UAAT,IAAA,EAAAI,CAAAA,CAAkB,SAAA,GACpB,CAAA,CACA,QAAA,CAAU,IAAMJ,CAAAA,CAAS,OAC3B,GAAI,EAAE,CAAA,CAGNM,SAAAA,CAAU,IAAM,CACd,GAAI,CAACR,EAAa,OAAA,EAAW,CAACH,CAAAA,CAC5B,OAIFG,CAAAA,CAAa,OAAA,CAAQ,SAAA,CAAY,EAAA,CAGjC,IAAMS,CAAAA,CAAO,IAAIC,CAAAA,CAASV,CAAAA,CAAa,OAAA,CAASV,CAAO,CAAA,CACvDY,CAAAA,CAAS,QAAUO,CAAAA,CAAK,MAAA,CAAOZ,CAAW,EAC5C,CAAA,CAAG,CAACA,CAAAA,CAAMP,CAAO,CAAC,CAAA,CAGhBqB,GAAAA,CAAC,KAAA,CAAA,CACC,GAAA,CAAKX,EACL,SAAA,CAAWF,CAAAA,CACX,KAAA,CAAOC,CAAAA,CACT,CAEJ,CACF","file":"index.js","sourcesContent":["import type { ApexTreeProps } from './types';\n\n/**\n * extracts ApexTree options from React props\n * filters out react-specific props (className, style, data)\n */\nexport function buildOptions<T>(props: ApexTreeProps<T>): 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);"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "react-apextree",
+  "version": "1.0.0",
+  "description": "React wrapper for ApexTree - a JavaScript library for creating organizational and hierarchical charts",
+  "author": "ApexCharts",
+  "license": "See LICENSE in LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/apexcharts/react-apextree"
+  },
+  "homepage": "https://github.com/apexcharts/react-apextree#readme",
+  "bugs": {
+    "url": "https://github.com/apexcharts/react-apextree/issues"
+  },
+  "keywords": [
+    "react",
+    "apextree",
+    "tree",
+    "chart",
+    "organizational-chart",
+    "org-chart",
+    "hierarchy",
+    "diagram",
+    "svg"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "demo": "npm run --prefix demo dev",
+    "demo:build": "npm run --prefix demo build"
+  },
+  "peerDependencies": {
+    "apextree": ">=1.6.1",
+    "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",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}