feat: expose additional base props#723
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis pull request upgrades the Base UI library dependency from version 1.2.0 to 1.3.0 and synchronizes component implementations across the codebase. Changes include: migrating Drawer component imports from Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
rohanchkrabrty
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx`:
- Line 22: The ScrollAreaScrollbar component currently forces keepMounted
(creating invisible interactive hitboxes); make keepMounted a configurable prop
on the component (e.g., add keepMounted?: boolean to the component props and
default it to false), replace the hardcoded keepMounted usage with the prop
(pass props.keepMounted into the underlying Scrollbar/primitive where
keepMounted was hardcoded), and update any callsites to pass true where the old
behavior is required; also ensure CSS for hidden states still sets
pointer-events appropriately (or document that enabling keepMounted may require
pointer-events:none when hidden) so hidden scrollbars don't intercept clicks.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 47691794-ee57-4c02-ad4d-52475c648c59
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
apps/www/src/components/playground/drawer-examples.tsxapps/www/src/content/docs/components/drawer/demo.tspackages/raystack/components/alert-dialog/alert-dialog.tsxpackages/raystack/components/combobox/combobox.tsxpackages/raystack/components/dialog/dialog.tsxpackages/raystack/components/drawer/__tests__/drawer.test.tsxpackages/raystack/components/drawer/drawer-content.tsxpackages/raystack/components/drawer/drawer-misc.tsxpackages/raystack/components/drawer/drawer-root.tsxpackages/raystack/components/drawer/drawer.tsxpackages/raystack/components/menu/menu.tsxpackages/raystack/components/popover/popover.tsxpackages/raystack/components/scroll-area/scroll-area-scrollbar.tsxpackages/raystack/components/tooltip/tooltip.tsxpackages/raystack/package.json
| return ( | ||
| <ScrollAreaPrimitive.Scrollbar | ||
| orientation={orientation} | ||
| keepMounted |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Verify forced mounting and where ScrollAreaScrollbar is instantiated without override.
rg -n --type=tsx 'keepMounted|ScrollAreaScrollbar\s+orientation=' \
packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx \
packages/raystack/components/scroll-area/scroll-area.tsx
# Verify hidden-state CSS still allows pointer interactions.
rg -n --type=css 'scrollbar|opacity:\s*0|pointer-events' \
packages/raystack/components/scroll-area/scroll-area.module.cssRepository: raystack/apsara
Length of output: 86
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# List files to verify they exist
echo "=== Files to verify ==="
fd -e tsx -e css packages/raystack/components/scroll-area/
# Read scroll-area-scrollbar.tsx around Line 22
echo -e "\n=== scroll-area-scrollbar.tsx (Lines 1-35) ==="
cat -n packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx | head -35
# Read the CSS file
echo -e "\n=== scroll-area.module.css (full content) ==="
cat -n packages/raystack/components/scroll-area/scroll-area.module.css
# Check scroll-area.tsx for ScrollAreaScrollbar usage
echo -e "\n=== scroll-area.tsx (full content) ==="
cat -n packages/raystack/components/scroll-area/scroll-area.tsxRepository: raystack/apsara
Length of output: 569
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# List files in the directory correctly
echo "=== Files in scroll-area directory ==="
fd . 'packages/raystack/components/scroll-area/'
# Read scroll-area-scrollbar.tsx
echo -e "\n=== scroll-area-scrollbar.tsx ==="
cat -n packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx
# Read scroll-area.module.css
echo -e "\n=== scroll-area.module.css ==="
cat -n packages/raystack/components/scroll-area/scroll-area.module.css
# Read scroll-area.tsx
echo -e "\n=== scroll-area.tsx ==="
cat -n packages/raystack/components/scroll-area/scroll-area.tsxRepository: raystack/apsara
Length of output: 4782
Hardcoded keepMounted creates invisible interactive hitboxes on hidden scrollbars.
At Line 22, keepMounted is hardcoded with no option to override per-instance. Combined with your CSS where hidden modes use opacity: 0 (lines 71–73) while keeping pointer-events: auto (line 26), invisible scrollbars remain in the DOM and can intercept clicks near edges.
Make keepMounted configurable instead of forced:
Proposed fix
export function ScrollAreaScrollbar({
className,
orientation = 'vertical',
type = 'hover',
+ keepMounted = false,
...props
}: ScrollAreaScrollbarProps) {
return (
<ScrollAreaPrimitive.Scrollbar
orientation={orientation}
- keepMounted
+ keepMounted={keepMounted}
className={cx(styles.scrollbar, styles[`scrollbar-${type}`], className)}
{...props}
>📝 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.
| keepMounted | |
| export function ScrollAreaScrollbar({ | |
| className, | |
| orientation = 'vertical', | |
| type = 'hover', | |
| keepMounted = false, | |
| ...props | |
| }: ScrollAreaScrollbarProps) { | |
| return ( | |
| <ScrollAreaPrimitive.Scrollbar | |
| orientation={orientation} | |
| keepMounted={keepMounted} | |
| className={cx(styles.scrollbar, styles[`scrollbar-${type}`], className)} | |
| {...props} | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx` at line
22, The ScrollAreaScrollbar component currently forces keepMounted (creating
invisible interactive hitboxes); make keepMounted a configurable prop on the
component (e.g., add keepMounted?: boolean to the component props and default it
to false), replace the hardcoded keepMounted usage with the prop (pass
props.keepMounted into the underlying Scrollbar/primitive where keepMounted was
hardcoded), and update any callsites to pass true where the old behavior is
required; also ensure CSS for hidden states still sets pointer-events
appropriately (or document that enabling keepMounted may require
pointer-events:none when hidden) so hidden scrollbars don't intercept clicks.
2 participants
Summary
@base-ui/reactpackage and migrate Drawer to the stable APIscrollbarVisibilityprop to ScrollArea scrollbar