…and Variable mode
A host with its own variable picker can render it inside wind's popover, keeping wind's
trigger, anchoring, chip, collapse, focus return and strings.
- RenderVariablePicker slot type in ui/variable-picker; onSelect commits and closes
- VariablePicker, InsertVariableAction and VariableValueControl take renderPicker; the actions
then need no variables
- VariableValueControl takes describeReference for the chip's label and type icon
- ReferenceChip's label widens to ReactNode
- createInsertVariableAction({ renderPicker }) wins over variables; picks still insert at the
caret or ask before replacing
- createVariableModeControl({ renderPicker, describeReference }) registers through
valueModes.definitions.variable.control
Summary
Lets a host render its own variable picker inside apollo-wind's popovers, for Insert variable and the Variable mode (MST-17134, D48). flow-workbench's canvas
VariablePicker(virtualization, an Assets tab,LiveBadge, node-source scoping) stays in flow-workbench. Wind keeps the trigger, popover, anchoring, chip, compact collapse, focus return, a11y and strings, and the host renders only what is inside.Components
RenderVariablePickerinui/variable-picker:({ value?, onSelect(value, item?), close }) => ReactNode.onSelectcommits and closes. The slot is rendered as an element, so it is only called once the popover mounts its content.VariablePickertakesrenderPickerand shows it in place of the search and tree. A host pick reachesonSelectas the host's item, or one made from the value, with the picked value as itsvalue.InsertVariableActionpassesrenderPickerthrough toVariablePicker;variablesbecomes optional when it is set.onInsertis unchanged.VariableValueControltakesrenderPicker, which is handed the bound reference asvalue, anddescribeReference(reference) => { label, icon? } | undefinedfor the chip's label and type icon. Returning nothing shows the raw reference.MetadataForm, through factories only:
createInsertVariableAction({ renderPicker }). It wins overvariables, and a host pick goes through the same path as a picked variable, so it still inserts at the caret or asks before replacing.createVariableModeControl({ renderPicker, describeReference })returns a control registration forFormPlugin.valueModes.definitions.variable.control, which the existing control lookup already prefers over the built-in.WeakMapper factory), so the props they pass stay stable across renders (D25).Decisions worth a look
FormPluginorFormContextfields. The ticket proposedFormPlugin.variablePicker. A host that only sometimes uses its own picker now passes it to the two factories instead, so the plugin surface does not grow. A host that wants both passes one shared constant.ReferenceChip'slabelwidens fromstringtoReactNode, since a host label can be a node. The default remove label falls back to "Remove" when the label is not a string.onInsert(value, item)keeps a requireditem. A host pick without an entry gets one made from the value, so existing handlers typed withitem: VariablePickerItemstill compile.Test plan
VariablePicker,InsertVariableAction,VariableValueControl: a host pick writes, closes and returns focus to the trigger;closewrites nothing; the slot is not called before openingdescribeReference: its label reaches the chip and the trigger's accessible name, its icon replaces the generic one, and an unknown reference falls back to the raw valuerenderPickerwins overvariables, and the Variable mode binds a host pick throughcreateVariableModeControlStack