Skip to content

feat: pass a details object to change callbacks - #979

Open
rohanchkrabrty wants to merge 3 commits into
mainfrom
feat/change-event-details
Open

rohanchkrabrty wants to merge 3 commits into
mainfrom
feat/change-event-details

Conversation

@rohanchkrabrty

@rohanchkrabrty rohanchkrabrty commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Change callbacks pass a second argument after the value. Components that wrap Base UI forward Base UI's eventDetails: Accordion onValueChange, Select onValueChange and onOpenChange, Combobox onValueChange and onInputValueChange, Menu and ContextMenu onInputValueChange, Sidebar.Group and Reasoning onOpenChange. When a callback calls eventDetails.cancel(), these components keep their current state, as Base UI does.

  • Components that own their state pass a details object with reason and event, built by a new shared helper, createChangeDetails in packages/react/shared/change-details.ts (type ChangeDetails): Sidebar onOpenChange, CodeBlock onCollapseChange, ChatPanel onModeChange, DataView onViewChange, and onOpenChange on Editor.SlashMenu, Editor.Mentions and PromptInput.Mentions.

  • Breaking: TextArea onValueChange passes Base UI eventDetails (built with createChangeEventDetails('none', event.nativeEvent)) in place of the React ChangeEvent. ColorPicker onValueChange passes details.mode, and FilterChip onValueChange passes details.operation, in place of a string second argument. The upgrading page has the old and new signatures.

  • Docs: props tables for every changed callback, the TextArea, ColorPicker and FilterChip pages, and the consumer skill.

  • Tests: existing assertions check the second argument. Accordion, DataView and Reasoning get one test each, and Select gets one for cancel().

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

Decisions

  • details has the shape of Base UI's generic event details: reason, event (a plain Event when there is no native one), plus the component's own fields. It has no cancel(), because these components do not let a callback cancel the change.
  • Sidebar, ColorPicker and FilterChip own their state, so they pass details, the same as the other components that own their state.
  • Reasons reuse Base UI's names. Sidebar, CodeBlock and ChatPanel buttons use trigger-press. ColorPicker uses the Slider reasons (track-press, drag, keyboard, input-change). FilterChip forwards the reason from its Select or CalendarPreview, and uses none for the text input. DataView forwards the Tabs reason.
  • The Editor and PromptInput suggestion menus derive open from the editor state, so their reason is always none.
  • A Base UI callback that fires without a Base UI event gets details from createChangeEventDetails: Reasoning auto-open while streaming (none), the Menu search reset on close (input-clear, as Base UI Combobox does), and Combobox chip removal (chip-remove-press, with a plain Event, because the chip's onRemove gets no event).
  • TextArea renders a native <textarea>, so cancel() on its eventDetails does not stop the change.
  • useSidebar().setOpen and useDataView().setActiveView take optional details. Without them, the reason is none.
  • Callbacks that are not in the proposal keep one argument, for example CodeBlock onValueChange, ColorPicker onModeChange, FilterChip onOperationChange and Select onSearch. No new types are exported from the package.

Overlap with open PRs

@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
apsara Ready Ready Preview Oct 20, 2026 9:06am UTC

@coderabbitai

coderabbitai Bot commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 13 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: d0a84b82-1e5e-4f5a-9e44-20c563dc0612
📥 Commits

Reviewing files that changed from the base of the PR and between 2cfaa03 and 5b27067.

📒 Files selected for processing: 67
  • .agents/skills/apsara/references/composition.md
  • apps/www/src/content/docs/(overview)/upgrading.mdx
  • apps/www/src/content/docs/ai-elements/chat-panel/props.ts
  • apps/www/src/content/docs/ai-elements/prompt-input/props.ts
  • apps/www/src/content/docs/ai-elements/reasoning/props.ts
  • apps/www/src/content/docs/components/accordion/props.ts
  • apps/www/src/content/docs/components/code-block/props.ts
  • apps/www/src/content/docs/components/color-picker/index.mdx
  • apps/www/src/content/docs/components/color-picker/props.ts
  • apps/www/src/content/docs/components/combobox/props.ts
  • apps/www/src/content/docs/components/context-menu/props.ts
  • apps/www/src/content/docs/components/editor/props.ts
  • apps/www/src/content/docs/components/filter-chip/index.mdx
  • apps/www/src/content/docs/components/filter-chip/props.ts
  • apps/www/src/content/docs/components/menu/props.ts
  • apps/www/src/content/docs/components/select/props.ts
  • apps/www/src/content/docs/components/sidebar/props.ts
  • apps/www/src/content/docs/components/textarea/index.mdx
  • apps/www/src/content/docs/components/textarea/props.ts
  • apps/www/src/content/docs/dataview/props.ts
  • packages/react/components/accordion/__tests__/accordion.test.tsx
  • packages/react/components/accordion/accordion-root.tsx
  • packages/react/components/chat-panel/__tests__/chat-panel.test.tsx
  • packages/react/components/chat-panel/chat-panel-context.tsx
  • packages/react/components/chat-panel/chat-panel-parts.tsx
  • packages/react/components/chat-panel/chat-panel-root.tsx
  • packages/react/components/chat-panel/chat-panel-trigger.tsx
  • packages/react/components/code-block/__tests__/code-block.test.tsx
  • packages/react/components/code-block/code-block-misc.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-alpha.tsx
  • packages/react/components/color-picker/color-picker-area.tsx
  • packages/react/components/color-picker/color-picker-hue.tsx
  • packages/react/components/color-picker/color-picker-input.tsx
  • packages/react/components/color-picker/color-picker-root.tsx
  • packages/react/components/combobox/__tests__/combobox.test.tsx
  • packages/react/components/combobox/combobox-input.tsx
  • packages/react/components/combobox/combobox-root.tsx
  • packages/react/components/context-menu/context-menu-content.tsx
  • packages/react/components/context-menu/context-menu-root.tsx
  • packages/react/components/data-view/__tests__/data-view.test.tsx
  • packages/react/components/data-view/components/view-switcher.tsx
  • packages/react/components/data-view/data-view.tsx
  • packages/react/components/data-view/data-view.types.tsx
  • packages/react/components/editor/core/mention-registry.ts
  • packages/react/components/editor/core/use-suggestion-menu.ts
  • packages/react/components/editor/editor-mentions.tsx
  • packages/react/components/editor/editor-slash-menu.tsx
  • packages/react/components/filter-chip/__tests__/filter-chip.test.tsx
  • packages/react/components/filter-chip/filter-chip.tsx
  • packages/react/components/menu/__tests__/menu.test.tsx
  • packages/react/components/menu/menu-content.tsx
  • packages/react/components/menu/menu-root.tsx
  • packages/react/components/prompt-input/__tests__/prompt-input-mentions.test.tsx
  • packages/react/components/prompt-input/prompt-input-mentions.tsx
  • packages/react/components/reasoning/__tests__/reasoning.test.tsx
  • packages/react/components/reasoning/reasoning.tsx
  • packages/react/components/select/__tests__/select.test.tsx
  • packages/react/components/select/select-root.tsx
  • packages/react/components/sidebar/__tests__/sidebar.test.tsx
  • packages/react/components/sidebar/sidebar-group.tsx
  • packages/react/components/sidebar/sidebar-root.tsx
  • packages/react/components/sidebar/sidebar-trigger.tsx
  • packages/react/components/text-area/__tests__/text-area.test.tsx
  • packages/react/components/text-area/text-area.tsx
  • packages/react/shared/change-details.ts
  • 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

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

Copy link
Copy Markdown

Open in StackBlitz

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

commit: 5b27067

@rohanchkrabrty
rohanchkrabrty force-pushed the feat/change-event-details branch from d888724 to 5b27067 Compare October 20, 2026 08:56
@rohanchkrabrty rohanchkrabrty changed the title feat: pass a details object to every change callback feat: pass a details object to change callbacks Oct 20, 2026

This branch was successfully deployed

1 active deployment
Preview — 5b27067f Deployed Oct 20, 2026 by vercel[bot]
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.

1 participant