feat: migrate base-ui to @base-ui/react and simplify scroll masks #11
Conversation
|
@2hu12 is attempting to deploy a commit to the SameerJS6's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughUpdated dependency and import targets from Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧬 Code graph analysis (1)registry/base-ui/scroll-area.tsx (1)
🔇 Additional comments (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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
components/ui/tabs.tsxpackage.jsonregistry/base-ui/scroll-area.tsx
🔇 Additional comments (5)
package.json (1)
21-21: Package migration looks correct.The dependency has been updated from the beta package to the stable v1.0.0 release with a caret version constraint. The caret (^) will allow automatic updates to compatible minor and patch versions while preventing major version changes.
Please verify the package migration compatibility using the web search results from the previous verification.
registry/base-ui/scroll-area.tsx (4)
5-5: Import path updated for package migration.The ScrollArea import has been updated to use the new package name, consistent with the migration in other files.
47-52: Touch version correctly updated with group class and simplified mask logic.The addition of the
groupclass is essential for the Tailwindgroup-data-*modifiers in ScrollMask to work correctly. The mask rendering logic has been simplified from state-based (showMask) to a direct check onmaskHeight > 0, which is cleaner and more straightforward.
70-70: Non-touch mask rendering correctly simplified.The mask rendering logic matches the touch version, maintaining consistency across both code paths.
116-167: The refactored ScrollMask component correctly relies ondata-overflow-y-start,data-overflow-y-end,data-overflow-x-start, anddata-overflow-x-endattributes. @base-ui/react ScrollArea automatically sets these attributes on the Root element based on scroll position and edge overflow state, as confirmed by the library documentation. The component implementation is sound.
| import * as React from "react"; | ||
|
|
||
| import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs"; | ||
| import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
@base-ui/react version 1.0.0 breaking changes from @base-ui-components/react beta
💡 Result:
Quick summary of breaking changes to expect when moving from the @base-ui-components/react beta series to @base-ui/react v1.0.0:
- Package rename: package moved from @base-ui-components/react → @base-ui/react (must change imports). [1]
- Event callback signature: many callbacks now receive an eventDetails object (e.g., onOpenChange(open, eventDetails) instead of onOpenChange(open, event, reason)). [1][2]
- Focus/prop renames:
- loop → loopFocus. [3]
- trackAnchor (boolean) → disableAnchorTracking (invert semantics). [3]
- Checkbox / form behavior changes:
- Checkbox unchecked value behavior changed (unchecked value no longer submitted unless using new uncheckedValue prop in some releases / checked-state handling refinements). [1][2]
- Checkbox Group: submission behavior changed (use value on Checkbox.Root for grouped submission). [2]
- Accordion API:
- Items must have explicit value (no longer infer by DOM index). openMultiple renamed to multiple. [1]
- initialFocus / finalFocus: initialFocus now must return element directly (support for functions; finalFocus added as function support) — change in how focus refs are supplied. [2]
- Event reason names refined (e.g., 'hover' → 'trigger-hover', 'click' → 'trigger-press', 'focus' → 'trigger-focus'). [2]
- Other component-level breaking changes introduced across beta releases (Collapsible render handling, Menu/Combobox prop changes, default tabIndex on parts, and accessibility/id behavior) — see changelogs for component-specific items you use. [1][2][3]
If you want, tell me which components/props you use and I’ll extract the exact migration steps and code diffs for them.
Sources: Base UI changelogs and release notes. [1] Base UI releases (v1.0.0 and changelog). [2] @base-ui-components/react beta changelogs (beta.3 / beta.0). [3] v1.0.0-beta.5 release notes.
🌐 Web query:
@base-ui/react Tabs API documentation stable release
💡 Result:
The stable Tabs API docs are on the official Base UI site: https://base-ui.com/react/components/tabs. See the component API reference there. [1][2]
Sources:
- Base UI — Tabs API reference. [1]
- Base UI — Quick start / Releases (package and release info). [2]
🌐 Web query:
@base-ui/react migration guide from beta to 1.0.0
💡 Result:
Summary migration checklist — beta → v1.0.0
- Update package name
- Replace old package (e.g. @base-ui-components/react) with @base-ui/react and reinstall. [1][2]
- Event API changes
- Callbacks now receive BaseUIChangeEventDetails (with event, reason, helpers). Update usages like onOpenChange(open, event) → onOpenChange(open, eventDetails). Review custom event handlers and types. [1]
- Rename/replace props
- trackAnchor → disableAnchorTracking (invert boolean semantics if you used trackAnchor={false}). [1]
- loop → loopFocus. [1]
- Component-specific breaking changes to check and update
- Accordion: items must have explicit value; fallback to composite index removed. If you relied on index inference, add explicit value props. openMultiple → multiple. [1]
- Autocomplete: onItemHighlighted now uses reason (not type); cols → grid. [1]
- Combobox / Select: itemToStringValue now applied to onFormSubmit; Select accepts null as a value. Verify form submit behavior. [1]
- Menu/Popover/Tooltip/NavigationMenu/Tabs/Toast/ToggleGroup: check release notes for fixed behaviors (focus, transitions, indicator positioning, falsy values handling) and adjust any code that relied on previous quirks. [1]
- Types and refs
- Some ref types and event/detail types were refined — update TypeScript types/imports to the new exported types (BaseUIChangeEventDetails / BaseUIGenericEventDetails). Run type-check and fix mismatches. [1]
- Styling/portal behavior
- Portals and portal root guidance unchanged, but review Quick Start notes (ensure your layout isolation for portals). [2]
- Tests and QA
- Run full test suite and accessibility checks; pay special attention to keyboard/focus interactions in Dialog, Menu, Popover, Tooltip and any components you heavily use (several focus/transition fixes were made). [1]
- Search changelogs for detailed per-component changes
- Review the 1.0.0 changelog and prior beta changelogs for any other breaking edits that affect components you use. Address each item in your codebase. [1]
Useful links
- Releases / changelog (v1.0.0 and betas) — use this to inspect component-by-component breaking changes. [1]
- Quick start / install (@base-ui/react) — installation and portal guidance. [2]
If you want, tell me which Base UI components you use and I’ll produce a focused diff/patch list to update your code.
Update code to handle @base-ui/react v1.0.0 breaking changes.
The package migration from @base-ui-components/react to @base-ui/react v1.0.0 includes significant breaking changes beyond the import path update:
- Event callback signatures changed: Callbacks now receive an
eventDetailsobject instead of separateeventandreasonparameters. Update any Tabs event handlers (e.g.,onOpenChange(open, eventDetails)instead ofonOpenChange(open, event, reason)). - Prop renames:
loop→loopFocus,trackAnchor→disableAnchorTracking(with inverted boolean semantics). - Event reason names refined: Check if custom event reason handling exists; names like 'hover' may have changed.
Review the official Base UI v1.0.0 migration guide and Tabs API documentation for the complete list of changes and update all Tabs usage accordingly.
🤖 Prompt for AI Agents
In components/ui/tabs.tsx around line 5, the import was updated but the
component usage still assumes pre-v1.0.0 Tabs API; update Tabs props and
handlers to match @base-ui/react v1.0.0: change any event handler signatures to
accept (open, eventDetails) instead of (open, event, reason) and adapt code to
read eventDetails.reason if needed; rename prop loop to loopFocus; replace
trackAnchor with disableAnchorTracking and invert its boolean semantics (e.g.,
trackAnchor={true} → disableAnchorTracking={false}); review any custom logic
that checks event reason strings and adjust to the new reason names from the
v1.0.0 migration guide.
| ref={ref} | ||
| data-slot="scroll-area" | ||
| className={cn("relative overflow-hidden", viewportClassName, className)} | ||
| className={cn("group relative overflow-hidden", viewportClassName, className)} |
There was a problem hiding this comment.
Remove incorrectly placed viewportClassName from Root.
The viewportClassName prop is applied to the Root component's className, but it should only be used on the Viewport component (line 64). This creates confusion about which element receives the viewport styles.
🔎 Proposed fix
- className={cn("group relative overflow-hidden", viewportClassName, className)}
+ className={cn("group relative overflow-hidden", className)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className={cn("group relative overflow-hidden", viewportClassName, className)} | |
| className={cn("group relative overflow-hidden", className)} |
🤖 Prompt for AI Agents
In registry/base-ui/scroll-area.tsx around line 58, the Root element is
mistakenly receiving the viewportClassName prop in its className; remove
viewportClassName from the Root className expression so Root only uses "group
relative overflow-hidden" plus className, and ensure the Viewport component
(around line 64) receives viewportClassName (merged via cn with any existing
Viewport classes) so viewport-specific styles apply only to the Viewport
element.
1 participant
remove JS scroll mask state computation in favor of computed data attrs from base-ui
Summary by CodeRabbit
Chores
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.