Skip to content

Add outerElementType/innerElementType props to Tree#339

Merged
TrevorBurnham merged 1 commit into
jameskerr:mainfrom
TrevorBurnham:feat/outer-inner-element-types
May 17, 2026
Merged

Add outerElementType/innerElementType props to Tree#339
TrevorBurnham merged 1 commit into
jameskerr:mainfrom
TrevorBurnham:feat/outer-inner-element-types

Conversation

@TrevorBurnham

@TrevorBurnham TrevorBurnham commented May 15, 2026

Copy link
Copy Markdown
Collaborator

Summary

Lets consumers supply custom react-window outer/inner wrappers via props, without having to fork DefaultContainer. Also exports the default ListOuterElement, ListInnerElement, and DropContainer so a custom outer element can reuse the existing drop-target behavior.

When the new props aren't supplied, behavior is unchanged.

<Tree
  outerElementType={MyOuterWithStickyHeader}
  innerElementType={MyInner}
  ...
/>

This is the title feature cherry-picked out of #318. That PR also bundled a new padding model, a scrollTo rewrite, a useDndManager hook, and fork-publishing chores — each worth discussing separately, but none belong here. The author hasn't responded since 2025-10 and is shipping their own published fork, so I'm porting just the cleanly-scoped piece.

Closes #318 in spirit (credit to @jorgedanisc for the original).

Test plan

  • yarn test passes in modules/react-arborist
  • yarn build succeeds
  • Spot-check that omitting both props still renders normally
  • Spot-check a custom outerElementType that composes <DropContainer /> + {children} works

Lets consumers supply custom react-window outer/inner wrappers
without forking the whole DefaultContainer. The defaults
(ListOuterElement, ListInnerElement) are now also exported,
along with DropContainer, so a custom outer can compose the
existing drop-target behavior.

Cherry-picked from the title feature of jameskerr#318.
Copilot AI review requested due to automatic review settings May 15, 2026 18:53

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds opt-in customization points to Tree so consumers can supply custom react-window outer/inner wrapper components via props, while preserving current defaults when not provided. Also exposes the default list wrapper components publicly so custom wrappers can reuse existing behavior (e.g., drop-target overlay).

Changes:

  • Extend TreeProps with outerElementType and innerElementType typed from react-window.
  • Pass the new props through to FixedSizeList, defaulting to existing ListOuterElement/ListInnerElement.
  • Export DropContainer, ListOuterElement, and ListInnerElement from the package public API.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
modules/react-arborist/src/types/tree-props.ts Adds outerElementType/innerElementType to TreeProps for react-window wrapper customization.
modules/react-arborist/src/components/default-container.tsx Wires the new props into FixedSizeList with nullish-coalescing fallbacks to current defaults.
modules/react-arborist/src/components/list-outer-element.tsx Exports DropContainer so custom outer wrappers can reuse the existing overlay behavior.
modules/react-arborist/src/index.ts Re-exports the default list wrapper components as part of the public API.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread modules/react-arborist/src/types/tree-props.ts
@TrevorBurnham TrevorBurnham merged commit 35b1e3a into jameskerr:main May 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants