feat: React 19 migration - 4

[rohanchkrabrty]

Summary

• Removes React.forwardRef() wrappers from 10 components, using ref-as-prop (React 19 Case A/B pattern)
• Updates type annotations from ComponentPropsWithoutRef/HTMLAttributes → ComponentProps
• Sets correct displayName on all exported components matching their public export names
• Replaces named React imports with specific named imports (no default import React)

Components migrated:

• image
• indicator
• input-field
• label
• link
• list
• menu
• menubar
• meter
• navbar

Summary by CodeRabbit

Release Notes

• Refactor
  • Refactored component architecture and improved type system consistency across form, menu, navigation, and meter components for enhanced maintainability and long-term stability.
  • Note: Several components no longer support direct ref forwarding. If your application uses refs with these components, verify compatibility and consider alternative implementation approaches as needed.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Mar 24, 2026 5:40am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 50b847e9-7aee-4bbd-b8fb-5b612e16bc4a

📥 Commits

Reviewing files that changed from the base of the PR and between 9d4cf92 and 446c2c2.

📒 Files selected for processing (18)

• packages/raystack/components/image/image.tsx
• packages/raystack/components/indicator/indicator.tsx
• packages/raystack/components/input-field/input-field.tsx
• packages/raystack/components/label/label.tsx
• packages/raystack/components/link/link.tsx
• packages/raystack/components/list/list.tsx
• packages/raystack/components/menu/cell.tsx
• packages/raystack/components/menu/menu-content.tsx
• packages/raystack/components/menu/menu-item.tsx
• packages/raystack/components/menu/menu-misc.tsx
• packages/raystack/components/menu/menu-root.tsx
• packages/raystack/components/menu/menu-trigger.tsx
• packages/raystack/components/menubar/menubar.tsx
• packages/raystack/components/meter/meter-misc.tsx
• packages/raystack/components/meter/meter-root.tsx
• packages/raystack/components/meter/meter-track.tsx
• packages/raystack/components/navbar/navbar-root.tsx
• packages/raystack/components/navbar/navbar-sections.tsx

---

📝 Walkthrough

Walkthrough

This PR refactors React components across the Raystack library by removing forwardRef wrappers, updating prop type inheritance from ComponentPropsWithoutRef/HTMLAttributes to ComponentProps, and standardizing displayName assignments. The changes modernize type definitions while preserving rendering logic and control flow.

Changes

Cohort / File(s)	Summary
Image & Label Type Updates packages/raystack/components/image/image.tsx, packages/raystack/components/label/label.tsx	Switched imports and type inheritance to use ComponentProps<'img'>/ComponentProps<'label'> instead of ImgHTMLAttributes/HTMLAttributes, removing explicit optional prop declarations. Added Label.displayName = 'Label'.
Indicator & Quote Normalization packages/raystack/components/indicator/indicator.tsx	Updated IndicatorProps from ComponentPropsWithoutRef<"div"> to ComponentProps<'div'>, converted string literals to single quotes throughout.
InputField & Link forwardRef Removal packages/raystack/components/input-field/input-field.tsx, packages/raystack/components/link/link.tsx	Replaced forwardRef with plain function components, updated prop types to ComponentProps<'input'>/ComponentProps<'a'>, removed ref forwarding from underlying elements, normalized quotes.
List Prop & DisplayName Updates packages/raystack/components/list/list.tsx	Updated all List*Props interfaces from ComponentPropsWithoutRef<...> to ComponentProps<...>, changed displayName values to namespaced forms (e.g., 'List.Header' instead of 'ListHeader').
Menu Cell & Item forwardRef Removal packages/raystack/components/menu/cell.tsx, packages/raystack/components/menu/menu-item.tsx	Removed forwardRef wrappers, updated CellProps/MenuItemProps to use ComponentProps<'div'>, removed ref={ref} from rendered elements.
Menu Content & Trigger Refactoring packages/raystack/components/menu/menu-content.tsx, packages/raystack/components/menu/menu-trigger.tsx	Replaced forwardRef components with function components; updated MenuSubContent.displayName to 'Menu.SubmenuContent' and MenuSubTrigger.displayName to 'Menu.SubmenuTrigger'; adjusted internal focus/submenu handling.
Menu Misc & Root Restructuring packages/raystack/components/menu/menu-misc.tsx, packages/raystack/components/menu/menu-root.tsx	Removed forwardRef from MenuGroup, MenuLabel, MenuSeparator, MenuEmptyState; changed MenuContext from .Provider syntax to component-style rendering; updated displayName to 'Menu.Submenu'.
Menubar & Meter Root Updates packages/raystack/components/menubar/menubar.tsx, packages/raystack/components/meter/meter-root.tsx	Removed forwardRef from MenubarRoot and MeterRoot, updated prop types to ComponentProps<...>, changed MeterRoot.displayName to 'Meter'.
Meter Track & Misc Components packages/raystack/components/meter/meter-track.tsx, packages/raystack/components/meter/meter-misc.tsx	Removed forwardRef from MeterTrack, MeterLabel, MeterValue; updated displayName values to namespaced forms ('Meter.Track', 'Meter.Label', 'Meter.Value').
Navbar Root & Sections packages/raystack/components/navbar/navbar-root.tsx, packages/raystack/components/navbar/navbar-sections.tsx	Updated NavbarRootProps/NavbarStart|Center|EndProps from ComponentPropsWithoutRef<...> to ComponentProps<...>, changed component signatures to accept ref in props instead of via forwardRef.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related issues

• raystack/apsara#626: PR updates List component prop types from ComponentPropsWithoutRef to ComponentProps, aligning with ref-support modernization efforts.

Possibly related PRs

• raystack/apsara#708: Performs the same React 19 migration pattern—removing forwardRef wrappers and switching to ComponentProps with displayName updates.
• raystack/apsara#710: Applies identical refactoring across component library—removing forwardRef, updating prop types, and adjusting displayNames.
• raystack/apsara#652: Migrates DropdownMenu to the new Menu API, directly affected by Menu component refactoring in this PR.

Suggested reviewers

• rohilsurana
• paanSinghCoder
• rsbh

---

🐰 Hops with glee, quill in paw

No more refs to forward through the frame,
Just plain functions—simple, no refName!
Types now speak with ComponentProps' tongue,
Quotes dance single, displayNames are sung.
From ref callbacks to cleaner refrains,
This rabbit rejoices in type-safe gains! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch migrate-react-19-4

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[paanSinghCoder]

@rohanchkrabrty Can we please revert the Navbar changes in this PR as another PR for Navbar is open. I will take react 19 migration for Navbar myself after that PR is merged.