# MergeBox

> The box at the end of a pull request that answers "can I merge, and if not, why?": one ruled row per precondition (reviews, checks, conflicts), then a split merge button whose method menu is a native radio group.

```ts
import { MergeBox } from "@sdxc/ui/app";
```

Renders the precondition rows, then the merge control or the outcome. While the request can't
merge, both halves of the split button stay on screen, disabled, and the sentence naming why is
their `aria-describedby`. The method menu is a native popover of radios posting `method`, and
the button names the chosen method through CSS, so the box needs no island at all.

## Examples

```tsx
<MergeBox
	state="ready"
	action={href("pulls.merge", { number })}
	rows={{
		reviews: { tone: "success", title: t("pr.approved", { count: 1 }) },
		checks: { tone: "success", title: t("pr.checksPassed"), children: <CheckRuns runs={runs} labels={checkLabels} /> },
		conflicts: { tone: "success", title: t("pr.noConflicts") },
	}}
	labels={mergeLabels}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `state` | `"ready" \| "blocked" \| "conflicts" \| "merged" \| "closed"` | Enables the merge button only at `ready`, and swaps it for the outcome once settled. |
| `rows?` | `Rows` | The preconditions shown above the button; an omitted row is left out. |
| `methods?` | `Method[]` | The methods offered. @default ["merge", "squash", "rebase"] |
| `defaultMethod?` | `"merge" \| "squash" \| "rebase"` | The method chosen when the box renders. Defaults to the first of `methods`. |
| `action` | `string` | Where the form posts; the body carries `method` and any `fields`. |
| `fields?` | `RemixNode` | Extra hidden fields posted with the merge, such as a CSRF token. |
| `followUp?` | `RemixNode` | What follows a settled pull request, such as a "Delete branch" form. |
| `labels` | `Labels` | Every string the box shows, so it reads in any language. |

Also accepts everything in `Omit<TagProps<"section">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `State` | `"ready" \| "blocked" \| "conflicts" \| "merged" \| "closed"` | Where the pull request stands: `ready` can merge, `blocked` waits on a review or a check, `conflicts` needs the branch updated, and `merged` and `closed` are settled. |
| `Method` | `"merge" \| "squash" \| "rebase"` | How the branch lands: a merge commit, one squashed commit, or rebased commits. |
| `Tone` | `"success" \| "warning" \| "danger" \| "neutral"` | The tone a row reads in: met is `success`, waiting `warning`, failing `danger`. |