Skip to content

fix(system-rsc): incorrect typing in extendVariants#5765

Merged
wingkwong merged 1 commit into
canaryfrom
fix/eng-2820
Oct 4, 2025
Merged

fix(system-rsc): incorrect typing in extendVariants#5765
wingkwong merged 1 commit into
canaryfrom
fix/eng-2820

Conversation

@wingkwong
Copy link
Copy Markdown
Member

@wingkwong wingkwong commented Oct 3, 2025

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

  • Bug Fixes

    • Corrects TypeScript typings for ref and as in @heroui/system-rsc, improving ref inference and prop compatibility for wrapped components and variant props. This enhances editor IntelliSense and prevents false type errors.
  • Chores

    • Adds a changeset entry to publish a patch release of @heroui/system-rsc, documenting the fix and linking related work.

@wingkwong wingkwong added this to the v2.8.5 milestone Oct 3, 2025
@wingkwong wingkwong requested a review from jrgarciadev as a code owner October 3, 2025 13:54
@linear
Copy link
Copy Markdown

linear Bot commented Oct 3, 2025

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Oct 3, 2025

🦋 Changeset detected

Latest commit: 6ea9cb6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 37 packages
Name Type
@heroui/system-rsc Patch
@heroui/code Patch
@heroui/divider Patch
@heroui/kbd Patch
@heroui/spacer Patch
@heroui/spinner Patch
@heroui/system Patch
@heroui/react Patch
@heroui/accordion Patch
@heroui/listbox Patch
@heroui/menu Patch
@heroui/table Patch
@heroui/button Patch
@heroui/select Patch
@heroui/toast Patch
@heroui/alert Patch
@heroui/autocomplete Patch
@heroui/calendar Patch
@heroui/checkbox Patch
@heroui/date-input Patch
@heroui/date-picker Patch
@heroui/drawer Patch
@heroui/dropdown Patch
@heroui/form Patch
@heroui/input-otp Patch
@heroui/input Patch
@heroui/modal Patch
@heroui/navbar Patch
@heroui/number-input Patch
@heroui/popover Patch
@heroui/radio Patch
@heroui/slider Patch
@heroui/snippet Patch
@heroui/tabs Patch
@heroui/tooltip Patch
@heroui/aria-utils Patch
@heroui/framer-utils Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 3, 2025

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

Project Deployment Preview Comments Updated (UTC)
heroui Ready Ready Preview Comment Oct 3, 2025 1:57pm
heroui-sb Ready Ready Preview Comment Oct 3, 2025 1:57pm

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Oct 3, 2025

Walkthrough

Introduces a changeset for a patch release and updates TypeScript declaration types in system-rsc to change ExtendVariants’ public type signature by adding InferRef for ref inference and adjusting props composition to intersect component props with variant-derived props.

Changes

Cohort / File(s) Summary
Release metadata
\.changeset/ten-socks-shave.md
Adds a patch changeset for @heroui/system-rsc referencing fixes to typing with ref and as, linked to issues/PRs #5753 and #5754.
Type declarations: ExtendVariants
packages/core/system-rsc/src/extend-variants.d.ts
Adds InferRef utility type to infer ref instance type. Modifies ExtendVariants return type to use PropsWithoutRef<CP & variant-props> and RefAttributes<InferRef>, replacing previous ReactElement-based ref and prop unioning approach.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Description Check ⚠️ Warning The pull request description only includes issue closures and retains all template headings without providing any actual content for the required sections, leaving the summary, behavior details, breaking change information, and additional context empty. Please complete each section of the template by adding a concise summary of the change, describe the current and new behavior, indicate if it is a breaking change, and provide any additional information to aid the review.
✅ Passed checks (2 passed)
Check name Status Explanation
Title Check ✅ Passed The title clearly states that the fix targets incorrect typing in the extendVariants utility within the system-rsc package and matches the changes made in the pull request.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/eng-2820

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

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/core/system-rsc/src/extend-variants.d.ts (1)

80-85: Strengthen InferRef fallback type
In src/extend-variants.d.ts (lines 80–85), change the final fallback of InferRef<C> from any to never so that RefAttributes<never> prohibits refs on components that don’t forward refs, surfacing incorrect ref usage at compile time.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c322411 and 6ea9cb6.

📒 Files selected for processing (2)
  • .changeset/ten-socks-shave.md (1 hunks)
  • packages/core/system-rsc/src/extend-variants.d.ts (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: Tests
  • GitHub Check: Continuous Release
  • GitHub Check: TypeScript
  • GitHub Check: Build
🔇 Additional comments (2)
.changeset/ten-socks-shave.md (1)

1-5: LGTM!

The changeset correctly documents a patch-level fix for typing issues with ref and as props, appropriately references the related issues, and follows the standard changeset format.

packages/core/system-rsc/src/extend-variants.d.ts (1)

106-111: Precise ref and props typing applied; confirm no dependent code breaks.

  • Stricter RefAttributes<InferRef<C>> replaces ReactElement, which may be a breaking change for consumers relying on generic refs. Verify existing usage and update dependent code as needed.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Oct 3, 2025

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5765

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5765

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5765

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5765

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5765

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5765

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5765

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5765

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5765

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5765

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5765

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5765

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5765

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5765

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5765

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5765

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5765

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5765

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5765

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5765

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5765

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5765

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5765

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5765

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5765

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5765

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5765

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5765

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5765

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5765

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5765

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5765

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5765

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5765

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5765

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5765

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5765

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5765

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5765

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5765

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5765

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5765

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5765

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5765

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5765

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5765

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5765

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5765

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5765

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5765

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5765

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5765

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5765

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5765

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5765

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5765

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5765

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5765

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5765

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5765

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5765

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5765

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5765

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5765

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5765

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5765

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5765

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5765

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5765

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5765

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5765

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5765

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5765

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5765

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5765

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5765

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5765

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5765

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5765

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5765

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5765

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5765

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5765

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5765

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5765

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5765

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5765

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5765

commit: 6ea9cb6

@wingkwong wingkwong merged commit 7537226 into canary Oct 4, 2025
10 checks passed
@wingkwong wingkwong deleted the fix/eng-2820 branch October 4, 2025 02:48
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.

[BUG] - extendedVariants incorrect typing: as [BUG] - extendVariants incorrect typing: ref

1 participant