Skip to content

fix: export HeaderProps type from react-aria-components#9613

Merged
reidbarber merged 1 commit intoadobe:mainfrom
RobHannay:fix/export-header-props
Feb 6, 2026
Merged

fix: export HeaderProps type from react-aria-components#9613
reidbarber merged 1 commit intoadobe:mainfrom
RobHannay:fix/export-header-props

Conversation

@RobHannay
Copy link
Contributor

@RobHannay RobHannay commented Feb 5, 2026

Summary

  • Export HeaderProps type from the main index.ts entry point

Problem

When wrapping the Header component (e.g., with a styling library), TypeScript needs to infer and emit the type in declaration files. For example:

export const DropdownMenuSectionHeader = styled(Header, { ... });

TypeScript tries to express something like:

export const DropdownMenuSectionHeader: StyledComponent<HeaderProps, ...>

But HeaderProps is defined internally in react-aria-components without being exported from the package entry point:

// In react-aria-components/dist/types.d.ts
interface HeaderProps extends HTMLAttributes<HTMLElement>, DOMRenderProps<'header', undefined> {}
export const Header: (props: HeaderProps & RefAttributes<HTMLElement>) => ReactElement | null;

This produces the error:

Exported variable 'DropdownMenuSectionHeader' has or is using name 'HeaderProps' 
from external module "react-aria-components/dist/types" but cannot be named. ts(4023)

Why It Worked Before

Previously, HeaderProps extended only HTMLAttributes<HTMLElement> - a built-in type from @types/react that's universally available. TypeScript could inline or reference these portable types without needing to name HeaderProps itself.

In 1.15.0, HeaderProps now extends DOMRenderProps<'header', undefined> - a type internal to react-aria-components. TypeScript can't express the component's props without referencing HeaderProps, but since HeaderProps isn't exported, it can't be named in declaration files.

Why It Matters for Libraries

Libraries that emit declaration files require all exported types to be nameable - TypeScript needs to be able to write valid type references that consumers can resolve. When a type depends on an unexported internal type from a dependency, TypeScript throws TS4023.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@RobHannay
Copy link
Contributor Author

fwiw my workaround is just to manually type my exported header like { className ... etc, so I can unblock upgrading

@RobHannay
Copy link
Contributor Author

RobHannay commented Feb 5, 2026

In fact, ComponentProps<typeof Header> works too

@reidbarber reidbarber added this pull request to the merge queue Feb 6, 2026
Merged via the queue into adobe:main with commit 64e60eb Feb 6, 2026
28 checks passed
@yihuiliao yihuiliao added the no testing Does not require manual testing during testing session label Feb 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

no testing Does not require manual testing during testing session ready for review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants