refactor: use base ui useControlled for controlled state by Shreyag02 · Pull Request #966 · raystack/apsara

Shreyag02 · 2026-10-11T19:25:22Z

Summary

Use Base UI's useControlled for the controlled and uncontrolled state of Sidebar, Sidebar.Group, Select, DataView, Menu, ContextMenu and their submenus, Combobox value and inputValue, Command, CodeBlock, ColorPicker value and mode, and RangePicker value, in place of the hand-written merges. Tour, Reasoning, ChatPanel, PromptInput and CalendarPreview already use it, so this follows them instead of adding a new hook.
Behavior change: these props now pick controlled or uncontrolled on the first render and keep it, as Base UI components do. A prop that is undefined on the first render and set later is ignored, and a controlled prop that later becomes undefined no longer falls back to internal state. Base UI logs a warning in development for both. The Base UI roots under Select, Combobox and Command already did this for value, and the value Apsara reads now matches them.
Fix CodeBlock calling onCollapseChange with the wrong value when collapsed is controlled, and calling it twice per click in Strict Mode.
Pass '' to the language Select of CodeBlock.LanguageSelect until a CodeBlock.Code sets the value, so its trigger shows the language when CodeBlock has no value or defaultValue.
Add tests for controlled Menu and ContextMenu, the Menu and Select search value, the ColorPicker mode, and the CodeBlock fixes.

Closes #876

I have followed the pull request section of the contributing guide.

vercel · 2026-10-11T19:25:28Z

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

Project	Deployment	Actions	Updated
apsara	Ready	Preview	Oct 16, 2026 7:38am UTC

coderabbitai · 2026-10-11T19:25:34Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: 51020e79-f9f5-4196-92c5-44fe760b8d54

📥 Commits

Reviewing files that changed from the base of the PR and between 0baca36 and aa0d15b.

📒 Files selected for processing: 17

packages/react/components/calendar/range-picker.tsx
packages/react/components/code-block/__tests__/code-block.test.tsx
packages/react/components/code-block/code-block-language-select.tsx
packages/react/components/code-block/code-block-root.tsx
packages/react/components/color-picker/__tests__/color-picker.test.tsx
packages/react/components/color-picker/color-picker-root.tsx
packages/react/components/combobox/combobox-root.tsx
packages/react/components/command/command-root.tsx
packages/react/components/context-menu/__tests__/context-menu.test.tsx
packages/react/components/context-menu/context-menu-root.tsx
packages/react/components/data-view/data-view.tsx
packages/react/components/menu/__tests__/menu.test.tsx
packages/react/components/menu/menu-root.tsx
packages/react/components/select/__tests__/select.test.tsx
packages/react/components/select/select-root.tsx
packages/react/components/sidebar/sidebar-group.tsx
packages/react/components/sidebar/sidebar-root.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

Several React components now use Base UI’s useControlled hook to manage controlled and uncontrolled state. The changes cover selection and input values, menu open state, sidebar open state, and code-block collapse state. Existing callbacks remain in place. Added tests cover controlled and uncontrolled interactions in several components.

Suggested reviewers: rohanchkrabrty

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to aa0d1

No actionable regression remains identified; this PR is mergeable after normal checks.

Pre-merge checks: 4 · 3

Failed checks: 3 warnings

Check name	Explanation	Resolution
Linked Issues check	The linked issue requests a shared useControllableState hook in packages/raystack/hooks, but this pull request uses Base UI's existing useControlled instead.	Either implement the shared hook requested by issue `#876`, or update the issue linkage and description to explain why Base UI's useControlled satisfies the intended outcome.
Linked Issues check	Issue `#876` requires a shared `useControllableState` hook in `packages/raystack/hooks` and migration of Sidebar, Select, and DataView. The PR migrates those components, but the code imports Base UI's `…	Add the shared `useControllableState` hook in `packages/raystack/hooks` and migrate Sidebar, Select, and DataView to that hook, or update the linked issue to define Base UI's existing `useControlled` as the accepted implementation.
Docstring Coverage	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 17 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Out of Scope Changes check		The component migrations, behavior changes, bug fixes, and tests all match the pull request objectives and description.
Out of Scope Changes check		The additional component migrations use the same controlled/uncontrolled state-handling change described for issue `#876`. The CodeBlock callback and language-select fixes address behavior exposed by th…
Title check		The title clearly and concisely describes the main change: replacing hand-written controlled state handling with Base UI's useControlled.
Description check		The description accurately summarizes the useControlled migration, behavior changes, bug fixes, tests, and linked issue.

Full details: Out of Scope Changes check

Explanation

The additional component migrations use the same controlled/uncontrolled state-handling change described for issue #876. The CodeBlock callback and language-select fixes address behavior exposed by that migration. The added tests verify the changed state behavior. No unrelated change is established by the reviewed diff.

Full details: Linked Issues check

Explanation

Issue #876 requires a shared useControllableState hook in packages/raystack/hooks and migration of Sidebar, Select, and DataView. The PR migrates those components, but the code imports Base UI's useControlled from @base-ui/utils/useControlled and does not add the requested shared hook. The implementation therefore does not meet the issue's primary hook requirement.

Resolution

Add the shared useControllableState hook in packages/raystack/hooks and migrate Sidebar, Select, and DataView to that hook, or update the linked issue to define Base UI's existing useControlled as the accepted implementation.

Fix all pre-merge checks with AI

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.}

pkg-pr-new · 2026-10-11T19:26:26Z

Open in StackBlitz

pnpm add https://pkg.pr.new/@raystack/apsara@966

commit: aa0d15b

rohanchkrabrty · 2026-10-15T08:19:54Z

@@ -80,13 +81,16 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
  const resolvedRequired = required ?? fieldContext?.required;

  const [inputValue, setInputValue] = useState('');


Use useControlled for inputValue, with the inputValue and defaultInputValue props.

Fixed. inputValue uses useControlled with the inputValue and defaultInputValue props.

rohanchkrabrty · 2026-10-15T08:19:56Z

@@ -67,9 +68,12 @@ export const ColorPickerRoot = ({
  const [internalColor, setInternalColor] = useState(() =>


Use useControlled for value, the same as mode. Do the same for RangePicker value in calendar/range-picker.tsx:128.

Fixed. value uses useControlled in ColorPicker and in RangePicker.

# Conflicts: # packages/react/components/command/command-root.tsx # packages/react/components/select/select-root.tsx

…e picker value

refactor: use base ui useControlled for controlled state

9cec590

vercel Bot deployed to Preview October 11, 2026 19:27

View deployment

This was referenced Oct 11, 2026

fix: [combobox] filter items by inputValue and defaultInputValue #967

Open

fix: [select] pass searchValue to the autocomplete search input #968

Open

Shreyag02 added this pull request to stack #969 October 11, 2026 19:44

Shreyag02 removed this pull request from stack #969 October 11, 2026 19:46

Shreyag02 added this pull request to stack #970 October 11, 2026 19:48

Shreyag02 requested a review from rohanchkrabrty October 12, 2026 05:56

Shreyag02 self-assigned this Oct 12, 2026

rohanchkrabrty reviewed Oct 15, 2026

View reviewed changes

Shreyag02 added 2 commits October 16, 2026 13:04

Merge branch 'main' into refactor/use-controlled

1a87ef7

# Conflicts: # packages/react/components/command/command-root.tsx # packages/react/components/select/select-root.tsx

refactor: use useControlled for combobox input, color picker and rang…

aa0d15b

…e picker value

Shreyag02 requested a review from rohanchkrabrty October 16, 2026 07:36

vercel Bot deployed to Preview October 16, 2026 07:38

View deployment

Navigation Menu

Repository navigation

refactor: use base ui useControlled for controlled state - #966

refactor: use base ui useControlled for controlled state#966
Shreyag02 wants to merge 3 commits into
mainfrom
refactor/use-controlled

Shreyag02 commented Oct 11, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Oct 11, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 11, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 11, 2026 •

edited

Loading

Uh oh!

rohanchkrabrty Oct 15, 2026

Uh oh!

Shreyag02 Oct 16, 2026

Uh oh!

rohanchkrabrty Oct 15, 2026

Uh oh!

Shreyag02 Oct 16, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -80,13 +81,16 @@ export const ComboboxRoot = <Value extends unknown \| unknown[]>({
		const resolvedRequired = required ?? fieldContext?.required;

		const [inputValue, setInputValue] = useState('');

		@@ -67,9 +68,12 @@ export const ColorPickerRoot = ({
		const [internalColor, setInternalColor] = useState(() =>

Conversation

Shreyag02 commented Oct 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

vercel Bot commented Oct 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Oct 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Oct 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rohanchkrabrty Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

Shreyag02 Oct 16, 2026

Choose a reason for hiding this comment

Uh oh!

rohanchkrabrty Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

Shreyag02 Oct 16, 2026

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Shreyag02 commented Oct 11, 2026 •

edited

Loading

vercel Bot commented Oct 11, 2026 •

edited

Loading

coderabbitai Bot commented Oct 11, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 11, 2026 •

edited

Loading