[duncanmcclean]

This pull request lets addons reuse the CMS relationship components while providing their own selection and creation UI.

Use case

The use case is Runway's new Eloquent Relationship fieldtype. For morph relationships, related records can belong to different resources—for example, a comment might belong to either a post or a video. The selector needs a resource switcher alongside search, and creation targets that aren’t necessarily blueprints.

This PR provides the generic UI hooks needed to implement that on the Runway side, without needing to copy components from cms.

Usage

The following components are now exported from @statamic/cms: RelationshipInput, RelationshipSelector, RelationshipSelectField, RelationshipCreateButton and InlineCreateForm.

RelationshipInput has a selector slot inside its existing selector stack. The slot receives select(ids) and close() callbacks. Call both to apply a selection and dismiss the stack, or only close() to cancel. Without the slot, the ordinary selector is used.

<RelationshipInput v-bind="inputProps">
    <template #selector="{ select, close }">
        <CustomSelector
            @selected="ids => { select(ids); close(); }"
            @closed="close"
        />
    </template>
</RelationshipInput>

RelationshipSelector has a toolbar slot alongside its existing search and filter controls:

<RelationshipSelector v-bind="selectorProps">
    <template #toolbar>
        <Select v-model="resource" :options="resources" />
    </template>
</RelationshipSelector>

The toolbar uses 20% of the available width on wide selectors and 40% on narrow selectors, with search filling the remainder. Selectors without custom toolbar controls keep their existing search sizing.

RelationshipCreateButton accepts a translated menuLabel, and each creation target can provide translated label and hint values alongside its url. These fall back to the existing “Choose Blueprint”, blueprint and parent_title values. Zero targets show no create control, one opens creation directly, and multiple show the menu.

RelationshipInput forwards createMenuLabel to the button; relationship fieldtypes can supply it through meta.createMenuLabel.

Screenshots

---

Amp thread: https://ampcode.com/threads/T-2c2291ae-edc1-4e69-8693-c58a8e0a7963