Branch Select

A branch and tag picker. A Combobox underneath — repositories routinely have hundreds of branches, so search is not optional — with the default branch pinned first and tags labelled.

src/components/ui/branch-select.tsx

About

From the component's own source, where it was written.

A branch and tag picker.

A Combobox underneath — repositories routinely have hundreds of branches, so search is not optional — with the domain knowledge on top: the default branch is pinned first, protected branches are marked, and tags are labelled so they are not mistaken for branches.

Install

npx astralyx-ui add branch-select

Usage

import { BranchSelect } from '@/components/ui/branch-select'

<BranchSelect
  branches={[{ name: 'main', isDefault: true, protected: true }]}
  defaultValue="main"
  onValueChange={checkout}
/>

Composer

Change the props and the source below follows.

Props

size

tsx

<BranchSelect
  branches={branches}
  defaultValue="main"
  size="sm"
/>

Examples

With tags and protected branches

tsx

<BranchSelect branches={branches} defaultValue="main" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`BranchSelect`

Extends Omit<ComponentProps<typeof Combobox>, 'options' | 'size'>.

Prop	Type	Default	Description
defaultValue	string	—	—
value	string	—	Controlled and uncontrolled, same as Combobox.
error	boolean	—	—
disabled	boolean	—	—
variant	'default' \| 'secondary' \| 'ghost'	—	Matches Input and Select, so a form can be uniform.
onValueChange	(value: string) => void	—	Controlled and uncontrolled, same as Combobox.
placeholder	string	'Switch branch'	—
searchPlaceholder	string	—	—
emptyMessage	string	—	—
branches	BranchOption[]	required	{ name, kind?, isDefault?, protected? }
size	keyof typeof fieldSize	'sm'	—

`RefIcon`

The icon that belongs beside a ref of this kind.

Prop	Type	Default	Description
kind	'branch' \| 'tag'	—	—

Types

`BranchOption`

A branch and tag picker.

Field	Type	Description
name	string	—
kind?	'branch' \| 'tag'	—
isDefault?	boolean	—
protected?	boolean	—

Behaviour

Topic	Detail	Description
ordering	automatic	Default branch first, then branches, then tags — the order people scan in.