react-arborist 3.6.0 → 3.7.0

package/dist/main/components/default-container.js

@@ -16,6 +16,7 @@ let timeoutId = null;
  * the event handler. Future clean up welcome.
  */
 function DefaultContainer() {
+    var _a, _b;
     (0, context_1.useDataUpdates)();
     const tree = (0, context_1.useTreeApi)();
     return ((0, jsx_runtime_1.jsx)("div", { role: "tree", style: {
@@ -233,5 +234,5 @@ function DefaultContainer() {
             });
             if (node)
                 tree.focus(node.id);
-        }, children: (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: list_outer_element_1.ListOuterElement, innerElementType: list_inner_element_1.ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: row_container_1.RowContainer }) }));
+        }, children: (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: (_a = tree.props.outerElementType) !== null && _a !== void 0 ? _a : list_outer_element_1.ListOuterElement, innerElementType: (_b = tree.props.innerElementType) !== null && _b !== void 0 ? _b : list_inner_element_1.ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: row_container_1.RowContainer }) }));
 }

package/dist/main/components/list-outer-element.d.ts

@@ -1 +1,2 @@
 export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const DropContainer: () => import("react/jsx-runtime").JSX.Element;

package/dist/main/components/list-outer-element.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListOuterElement = void 0;
+exports.DropContainer = exports.ListOuterElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const context_1 = require("../context");
@@ -24,7 +24,7 @@ exports.ListOuterElement = (0, react_1.forwardRef)(function Outer(props, ref) {
         ref: ref }, rest, { onClick: (e) => {
             if (e.currentTarget === e.target)
                 tree.deselectAll();
-        }, children: [(0, jsx_runtime_1.jsx)(DropContainer, {}), children] })));
+        }, children: [(0, jsx_runtime_1.jsx)(exports.DropContainer, {}), children] })));
 });
 const DropContainer = () => {
     const tree = (0, context_1.useTreeApi)();
@@ -36,3 +36,4 @@ const DropContainer = () => {
             right: "0",
         }, children: (0, jsx_runtime_1.jsx)(cursor_1.Cursor, {}) }));
 };
+exports.DropContainer = DropContainer;

package/dist/main/components/provider.js

@@ -29,7 +29,14 @@ function TreeProvider({ treeProps, imperativeHandle, children, }) {
     (0, react_1.useMemo)(() => {
         updateCount.current += 1;
         api.update(treeProps);
-    }, [...Object.values(treeProps), state.nodes.open]);
+    }, [...Object.values(treeProps)]);
+    /* Rebuild visible nodes when open state changes, without clobbering
+       props set imperatively via api.update(). Bumping updateCount keeps
+       DataUpdates consumers (e.g. DefaultContainer) in sync. */
+    (0, react_1.useMemo)(() => {
+        updateCount.current += 1;
+        api.update(api.props);
+    }, [state.nodes.open]);
     /* Expose the tree api */
     (0, react_1.useImperativeHandle)(imperativeHandle, () => api);
     /* Change selection based on props */

package/dist/main/components/provider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/main/components/provider.test.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@testing-library/react");
+const tree_1 = require("./tree");
+const data = [
+    {
+        id: "1",
+        name: "root",
+        children: [
+            { id: "2", name: "a" },
+            { id: "3", name: "b", children: [{ id: "4", name: "c" }] },
+        ],
+    },
+];
+test("imperative tree.update() props survive node toggles (#228)", () => {
+    const ref = (0, react_1.createRef)();
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: 24, openByDefault: false }));
+    const api = ref.current;
+    expect(api.rowHeight).toBe(24);
+    (0, react_2.act)(() => {
+        api.update(Object.assign(Object.assign({}, api.props), { rowHeight: 48 }));
+    });
+    expect(api.rowHeight).toBe(48);
+    /* Opening a node dispatches a redux action that changes state.nodes.open.
+       Before #337, the open-state effect re-ran api.update(treeProps), reverting
+       rowHeight to 24. */
+    (0, react_2.act)(() => {
+        api.open("1");
+    });
+    expect(api.rowHeight).toBe(48);
+});

package/dist/main/index.d.ts

@@ -1,4 +1,7 @@
 export { Tree } from "./components/tree";
+export { DropContainer } from "./components/list-outer-element";
+export { ListOuterElement } from "./components/list-outer-element";
+export { ListInnerElement } from "./components/list-inner-element";
 export * from "./types/handlers";
 export * from "./types/renderers";
 export * from "./types/state";

package/dist/main/index.js

@@ -14,10 +14,16 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTreeLinePrefix = exports.Tree = void 0;
+exports.getTreeLinePrefix = exports.ListInnerElement = exports.ListOuterElement = exports.DropContainer = exports.Tree = void 0;
 /* The Public Api */
 var tree_1 = require("./components/tree");
 Object.defineProperty(exports, "Tree", { enumerable: true, get: function () { return tree_1.Tree; } });
+var list_outer_element_1 = require("./components/list-outer-element");
+Object.defineProperty(exports, "DropContainer", { enumerable: true, get: function () { return list_outer_element_1.DropContainer; } });
+var list_outer_element_2 = require("./components/list-outer-element");
+Object.defineProperty(exports, "ListOuterElement", { enumerable: true, get: function () { return list_outer_element_2.ListOuterElement; } });
+var list_inner_element_1 = require("./components/list-inner-element");
+Object.defineProperty(exports, "ListInnerElement", { enumerable: true, get: function () { return list_inner_element_1.ListInnerElement; } });
 __exportStar(require("./types/handlers"), exports);
 __exportStar(require("./types/renderers"), exports);
 __exportStar(require("./types/state"), exports);

package/dist/main/types/tree-props.d.ts

@@ -2,7 +2,7 @@ import { BoolFunc } from "./utils";
 import * as handlers from "./handlers";
 import * as renderers from "./renderers";
 import { ElementType, MouseEventHandler } from "react";
-import { ListOnScrollProps } from "react-window";
+import { ListOnScrollProps, CommonProps as ReactWindowCommonProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
 import { useDragDropManager, DndProviderProps } from "react-dnd";
@@ -57,4 +57,6 @@ export interface TreeProps<T> {
         backend: unknown;
     }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
+    outerElementType?: ReactWindowCommonProps["outerElementType"];
+    innerElementType?: ReactWindowCommonProps["innerElementType"];
 }

package/dist/module/components/default-container.js

@@ -13,6 +13,7 @@ let timeoutId = null;
  * the event handler. Future clean up welcome.
  */
 export function DefaultContainer() {
+    var _a, _b;
     useDataUpdates();
     const tree = useTreeApi();
     return (_jsx("div", { role: "tree", style: {
@@ -230,5 +231,5 @@ export function DefaultContainer() {
             });
             if (node)
                 tree.focus(node.id);
-        }, children: _jsx(FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: ListOuterElement, innerElementType: ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: RowContainer }) }));
+        }, children: _jsx(FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: (_a = tree.props.outerElementType) !== null && _a !== void 0 ? _a : ListOuterElement, innerElementType: (_b = tree.props.innerElementType) !== null && _b !== void 0 ? _b : ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: RowContainer }) }));
 }

package/dist/module/components/list-outer-element.d.ts

@@ -1 +1,2 @@
 export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;
+export declare const DropContainer: () => import("react/jsx-runtime").JSX.Element;

package/dist/module/components/list-outer-element.js

@@ -23,7 +23,7 @@ export const ListOuterElement = forwardRef(function Outer(props, ref) {
                 tree.deselectAll();
         }, children: [_jsx(DropContainer, {}), children] })));
 });
-const DropContainer = () => {
+export const DropContainer = () => {
     const tree = useTreeApi();
     return (_jsx("div", { style: {
             height: tree.visibleNodes.length * tree.rowHeight,

package/dist/module/components/provider.js

@@ -26,7 +26,14 @@ export function TreeProvider({ treeProps, imperativeHandle, children, }) {
     useMemo(() => {
         updateCount.current += 1;
         api.update(treeProps);
-    }, [...Object.values(treeProps), state.nodes.open]);
+    }, [...Object.values(treeProps)]);
+    /* Rebuild visible nodes when open state changes, without clobbering
+       props set imperatively via api.update(). Bumping updateCount keeps
+       DataUpdates consumers (e.g. DefaultContainer) in sync. */
+    useMemo(() => {
+        updateCount.current += 1;
+        api.update(api.props);
+    }, [state.nodes.open]);
     /* Expose the tree api */
     useImperativeHandle(imperativeHandle, () => api);
     /* Change selection based on props */

package/dist/module/components/provider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/module/components/provider.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef } from "react";
+import { act, render } from "@testing-library/react";
+import { Tree } from "./tree";
+const data = [
+    {
+        id: "1",
+        name: "root",
+        children: [
+            { id: "2", name: "a" },
+            { id: "3", name: "b", children: [{ id: "4", name: "c" }] },
+        ],
+    },
+];
+test("imperative tree.update() props survive node toggles (#228)", () => {
+    const ref = createRef();
+    render(_jsx(Tree, { data: data, ref: ref, rowHeight: 24, openByDefault: false }));
+    const api = ref.current;
+    expect(api.rowHeight).toBe(24);
+    act(() => {
+        api.update(Object.assign(Object.assign({}, api.props), { rowHeight: 48 }));
+    });
+    expect(api.rowHeight).toBe(48);
+    /* Opening a node dispatches a redux action that changes state.nodes.open.
+       Before #337, the open-state effect re-ran api.update(treeProps), reverting
+       rowHeight to 24. */
+    act(() => {
+        api.open("1");
+    });
+    expect(api.rowHeight).toBe(48);
+});

package/dist/module/index.d.ts

@@ -1,4 +1,7 @@
 export { Tree } from "./components/tree";
+export { DropContainer } from "./components/list-outer-element";
+export { ListOuterElement } from "./components/list-outer-element";
+export { ListInnerElement } from "./components/list-inner-element";
 export * from "./types/handlers";
 export * from "./types/renderers";
 export * from "./types/state";

package/dist/module/index.js

@@ -1,5 +1,8 @@
 /* The Public Api */
 export { Tree } from "./components/tree";
+export { DropContainer } from "./components/list-outer-element";
+export { ListOuterElement } from "./components/list-outer-element";
+export { ListInnerElement } from "./components/list-inner-element";
 export * from "./types/handlers";
 export * from "./types/renderers";
 export * from "./types/state";

package/dist/module/types/tree-props.d.ts

@@ -2,7 +2,7 @@ import { BoolFunc } from "./utils";
 import * as handlers from "./handlers";
 import * as renderers from "./renderers";
 import { ElementType, MouseEventHandler } from "react";
-import { ListOnScrollProps } from "react-window";
+import { ListOnScrollProps, CommonProps as ReactWindowCommonProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
 import { useDragDropManager, DndProviderProps } from "react-dnd";
@@ -57,4 +57,6 @@ export interface TreeProps<T> {
         backend: unknown;
     }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
+    outerElementType?: ReactWindowCommonProps["outerElementType"];
+    innerElementType?: ReactWindowCommonProps["innerElementType"];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/main/index.js",
@@ -49,12 +49,18 @@
     "react-dom": ">= 16.14"
   },
   "devDependencies": {
+    "@testing-library/dom": "^9.3.0",
+    "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.0",
     "@types/react-window": "^1.8.8",
     "@types/use-sync-external-store": "^0.0.6",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "typescript": "^5.6.0"

package/src/components/default-container.tsx

@@ -226,8 +226,8 @@ export function DefaultContainer() {
         itemSize={tree.rowHeight}
         overscanCount={tree.overscanCount}
         itemKey={(index) => tree.visibleNodes[index]?.id || index}
-        outerElementType={ListOuterElement}
-        innerElementType={ListInnerElement}
+        outerElementType={tree.props.outerElementType ?? ListOuterElement}
+        innerElementType={tree.props.innerElementType ?? ListInnerElement}
         onScroll={tree.props.onScroll}
         onItemsRendered={tree.onItemsRendered.bind(tree)}
         ref={tree.list}

package/src/components/list-outer-element.tsx

@@ -24,7 +24,7 @@ export const ListOuterElement = forwardRef(function Outer(
   );
 });
 
-const DropContainer = () => {
+export const DropContainer = () => {
   const tree = useTreeApi();
   return (
     <div

package/src/components/provider.test.tsx

@@ -0,0 +1,44 @@
+import { createRef } from "react";
+import { act, render } from "@testing-library/react";
+import { Tree } from "./tree";
+import { TreeApi } from "../interfaces/tree-api";
+
+type Datum = { id: string; name: string; children?: Datum[] };
+
+const data: Datum[] = [
+  {
+    id: "1",
+    name: "root",
+    children: [
+      { id: "2", name: "a" },
+      { id: "3", name: "b", children: [{ id: "4", name: "c" }] },
+    ],
+  },
+];
+
+test("imperative tree.update() props survive node toggles (#228)", () => {
+  const ref = createRef<TreeApi<Datum> | undefined>();
+  render(
+    <Tree<Datum>
+      data={data}
+      ref={ref}
+      rowHeight={24}
+      openByDefault={false}
+    />
+  );
+  const api = ref.current!;
+  expect(api.rowHeight).toBe(24);
+
+  act(() => {
+    api.update({ ...api.props, rowHeight: 48 });
+  });
+  expect(api.rowHeight).toBe(48);
+
+  /* Opening a node dispatches a redux action that changes state.nodes.open.
+     Before #337, the open-state effect re-ran api.update(treeProps), reverting
+     rowHeight to 24. */
+  act(() => {
+    api.open("1");
+  });
+  expect(api.rowHeight).toBe(48);
+});

package/src/components/provider.tsx

@@ -57,7 +57,15 @@ export function TreeProvider<T>({
   useMemo(() => {
     updateCount.current += 1;
     api.update(treeProps);
-  }, [...Object.values(treeProps), state.nodes.open]);
+  }, [...Object.values(treeProps)]);
+
+  /* Rebuild visible nodes when open state changes, without clobbering
+     props set imperatively via api.update(). Bumping updateCount keeps
+     DataUpdates consumers (e.g. DefaultContainer) in sync. */
+  useMemo(() => {
+    updateCount.current += 1;
+    api.update(api.props);
+  }, [state.nodes.open]);
 
   /* Expose the tree api */
   useImperativeHandle(imperativeHandle, () => api);

package/src/index.ts

@@ -1,5 +1,8 @@
 /* The Public Api */
 export { Tree } from "./components/tree";
+export { DropContainer } from "./components/list-outer-element";
+export { ListOuterElement } from "./components/list-outer-element";
+export { ListInnerElement } from "./components/list-inner-element";
 export * from "./types/handlers";
 export * from "./types/renderers";
 export * from "./types/state";

package/src/types/tree-props.ts

@@ -2,7 +2,7 @@ import { BoolFunc } from "./utils";
 import * as handlers from "./handlers";
 import * as renderers from "./renderers";
 import { ElementType, MouseEventHandler } from "react";
-import { ListOnScrollProps } from "react-window";
+import { ListOnScrollProps, CommonProps as ReactWindowCommonProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
 import { useDragDropManager, DndProviderProps } from "react-dnd";
@@ -82,4 +82,8 @@ export interface TreeProps<T> {
     { backend: unknown }
   >["backend"];
   dndManager?: ReturnType<typeof useDragDropManager>;
+
+  /* Custom react-window outer/inner elements */
+  outerElementType?: ReactWindowCommonProps["outerElementType"];
+  innerElementType?: ReactWindowCommonProps["innerElementType"];
 }