# FilterMenu

> One filterable popover list for every "pick from many" trigger: a branch or tag picker whose items are links, and label, assignee or milestone pickers whose radios or checkboxes post as a form when the popover closes.

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

Renders a trigger and its native popover: links in `navigate` mode, a form posted to `action` by
its Save button in `single` and `multiple`. Mapping `@sdxc/ui/app/filter-menu` in the browser
entry runs FilterMenuList: typing filters, arrows walk, and closing a changed picker posts.

## Examples

```tsx
<FilterMenu id="ref-picker" mode="navigate" tabs trigger={<><GitBranchIcon /> main</>}
	groups={[{ label: "Branches", items: branches }, { label: "Tags", items: tags }]}
	filterAction="/delta/branches" footer={<a href="/delta/branches">View all branches</a>} labels={labels} />
```

```tsx
<FilterMenu id="labels" mode="multiple" name="label" action={`/issues/${id}/labels`}
	trigger="Labels" groups={[{ label: "Labels", items: labels }]} labels={copy} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `trigger` | `RemixNode` | The trigger's content, such as a branch icon and the current branch's name. |

Also accepts everything in `PopoverProps`.


### FilterMenu.Popover

Renders the popover alone, for a trigger the page already has, such as a property row's edit button targeting `id`.

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | The popover's id, which the trigger, or any `popovertarget`, opens. |
| `mode` | `"navigate" \| "single" \| "multiple"` | Whether rows are links, radios or checkboxes. |
| `groups` | `Group[]` | Every choice, sent whole to the island so filtering never waits on the server. |
| `tabs?` | `boolean` | Draws the groups as tabs (Branches \| Tags) instead of stacked sections. |
| `name?` | `string` | The field name radios and checkboxes post under; required for `single` and `multiple`. |
| `action?` | `string` | Where `single` and `multiple` post. Defaults to the current address. |
| `target?` | `string` | The named `<Frame>` the post loads into, so only that frame reloads. |
| `filterAction?` | `string` | A page that filters with `?q=`, which the filter field submits to without script. |
| `query?` | `string` | The filter already applied, as the `filterAction` page read it. |
| `limit?` | `number` | How many matches the list draws before one closing "more" row. @default 100 |
| `footer?` | `RemixNode` | A closing link or action, such as "View all branches". |
| `placement?` | `Popover.Placement` | The trigger's side the popover opens on above phone widths. @default "bottom-start" |
| `labels` | `Labels` | Every string the menu shows, so it reads in any language. |

Also accepts everything in `Omit<TagProps<"div">, "id" | "children" | "popover">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Mode` | `"navigate" \| "single" \| "multiple"` | `"navigate"` makes every item a link (a branch picker); `"single"` and `"multiple"` make them radios or checkboxes named `name`, posted to `action` when the popover closes. |