Repository navigation
feat: pass a details object to change callbacks - #979
rohanchkrabrty wants to merge 3 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reachedYou'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. View limit details
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 |
commit: |
d888724 to
5b27067
Compare
rohanchkrabrty
changed the title
| /** Callback fired when the value changes. The value is a `string[]` with `multiple`. */ | ||
| onValueChange?: ( | ||
| value: string | string[], | ||
| eventDetails: { reason: string; event: Event } |
There was a problem hiding this comment.
suggestion: The wrappers now honor eventDetails.cancel() (commit 2, plus the new Select test), but this type only shows reason and event, so readers won't know they can veto a change. Could we add cancel here and on line 29, and in the Combobox, Menu, ContextMenu, Accordion, Reasoning and Sidebar.Group tables?
| eventDetails: { reason: string; event: Event } | |
| eventDetails: { reason: string; event: Event; cancel: () => void } |
| @@ -0,0 +1,30 @@ | |||
| import type { BaseUIGenericEventDetails } from '@base-ui/react/types'; | |||
There was a problem hiding this comment.
suggestion: This PR adds @base-ui/react/internals/createBaseUIEventDetails and /internals/reasons imports in five more files (TextArea, Reasoning, Combobox input, Menu, ContextMenu); main only had them in CalendarPreview.
| File | Line | Status |
|---|---|---|
| packages/react/components/calendar-preview/calendar-preview-trigger.tsx | 2 | Already on main |
| packages/react/components/text-area/text-area.tsx | 3 | Added by #979 |
| packages/react/components/reasoning/reasoning.tsx | 4 | Added by #979 |
| packages/react/components/combobox/combobox-input.tsx | 4 | Added by #979 |
| packages/react/components/menu/menu-root.tsx | 7 | Added by #979 |
| packages/react/components/context-menu/context-menu-root.tsx | 7 | Added by #979 |
They resolve because Base UI lists them in exports, but they're internal, not public API. Since this file is now the shared home for details, could we re-export createChangeEventDetails and REASONS from here, so a Base UI change is a one-file fix?
|
|
||
| export type FilterChipValue = FilterValueType | FilterValueType[] | Date; | ||
|
|
||
| export type FilterChipChangeReason = |
There was a problem hiding this comment.
question: FilterChipChangeReason mixes Base UI reason names (from Select) with CalendarPreview's own select/input/clear/reset/scale.
On the date path details.event is always a placeholder, because CalendarPreviewChangeDetails has no event. Is bringing CalendarPreview's details in line with the new shape planned as a follow-up? If not, a short note on the FilterChip page would help anyone switching on reason.
| onOpenChange={(next, eventDetails) => { | ||
| userToggledRef.current = true; | ||
| setOpen(next); | ||
| setOpen(next, eventDetails); | ||
| }} |
There was a problem hiding this comment.
question: userToggledRef is set before the cancel check, so a canceled toggle still counts as "the user took over", and the panel won't auto-collapse when streaming ends. If someone cancels to keep the panel open during streaming, that seems surprising. Should we set it only when the toggle goes through?
| onOpenChange={(next, eventDetails) => { | |
| userToggledRef.current = true; | |
| setOpen(next); | |
| setOpen(next, eventDetails); | |
| }} | |
| onOpenChange={(next, eventDetails) => { | |
| setOpen(next, eventDetails); | |
| if (!eventDetails.isCanceled) userToggledRef.current = true; | |
| }} |
Summary
Change callbacks pass a second argument after the value. Components that wrap Base UI forward Base UI's
eventDetails: AccordiononValueChange, SelectonValueChangeandonOpenChange, ComboboxonValueChangeandonInputValueChange, Menu and ContextMenuonInputValueChange, Sidebar.Group and ReasoningonOpenChange. When a callback callseventDetails.cancel(), these components keep their current state, as Base UI does.Components that own their state pass a
detailsobject withreasonandevent, built by a new shared helper,createChangeDetailsinpackages/react/shared/change-details.ts(typeChangeDetails): SidebaronOpenChange, CodeBlockonCollapseChange, ChatPanelonModeChange, DataViewonViewChange, andonOpenChangeon Editor.SlashMenu, Editor.Mentions and PromptInput.Mentions.Breaking: TextArea
onValueChangepasses Base UIeventDetails(built withcreateChangeEventDetails('none', event.nativeEvent)) in place of the ReactChangeEvent. ColorPickeronValueChangepassesdetails.mode, and FilterChiponValueChangepassesdetails.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
detailshas the shape of Base UI's generic event details:reason,event(a plainEventwhen there is no native one), plus the component's own fields. It has nocancel(), because these components do not let a callback cancel the change.details, the same as the other components that own their state.trigger-press. ColorPicker uses the Slider reasons (track-press,drag,keyboard,input-change). FilterChip forwards the reason from its Select or CalendarPreview, and usesnonefor the text input. DataView forwards the Tabs reason.openfrom the editor state, so theirreasonis alwaysnone.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 plainEvent, because the chip'sonRemovegets no event).<textarea>, socancel()on itseventDetailsdoes not stop the change.useSidebar().setOpenanduseDataView().setActiveViewtake optional details. Without them, the reason isnone.onValueChange, ColorPickeronModeChange, FilterChiponOperationChangeand SelectonSearch. No new types are exported from the package.Overlap with open PRs
select-root.tsx,combobox-root.tsx,combobox-input.tsxand the Select and Combobox tests and docs. feat: [combobox] use base ui chips, clear, empty, and status #954 replaces the Combobox chip path that buildschip-remove-pressdetails here.*-content.tsx, the input callback in each*-root.tsx, andonInputValueChangein bothprops.tsfiles. Expect small conflicts.