Add outerElementType/innerElementType props to Tree

modules/react-arborist/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}

modules/react-arborist/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

modules/react-arborist/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";

modules/react-arborist/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"];
 }