Collection switcher

Moves between the collections of a workspace, flat or nested, with the default one marked and never removable; in entity mode, a compact switcher for a shop or a studio.

Web · ✓Mobile · ✓Desktop · ✓BetaNavigation

import { CollectionSwitcher } from "@krizaka/ui/collection-switcher";

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Akinaza's multi-shop switcher and the collections of a workspace (ADR-006, krizaka-ui#740).

When to use

To move between the collections (folders, albums, lists) of a workspace, the current one being the URL's.
In the shell, mode="entity", to switch the shop or studio an owner is working on.

When not to use

For the sections of one page.Use instead: Tabs
For a long list of records to read and sort.Use instead: Data table

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { CollectionSwitcher } from "@krizaka/ui/collection-switcher";

Examples

A list

Collections with counts, the default one marked, a remove action and a create row.

Nested

Collections under a parent, opened together.

Shop switcher

A compact button for the shell: switch the shop or studio.

Props

The collections of a workspace — or the shops of an account — to move between; the default one marked and never removable.

Prop	Type	Default	Description
`collections`required	`readonly CollectionItem[]`	—	The collections, flat; `parentId` nests them in the `tree` layout.
`defaultLabel`required	`string`	—	The mark on the default collection (“Default”), passed translated.
`label`required	`string`	—	The accessible name (“Collections”) — passed translated.
`value`required	`string \| null`	—	The current one (read from the URL), or `null`.
`className`	`string`	—	Classes merged last, on the switcher.
`createLabel`	`string`	—	The create row's words (“New collection”), passed translated.
`href`	`((id: string) => string)`	—	Gives each row of the `list` layout a real address (open in a new tab, SSR); a click still calls `onValueChange`.
`layout`	`"list" \| "tree"`	`list`	`list`: a flat list. `tree`: the nesting by `parentId`, as nested lists (every row stays a link or a button, in the tab order).
`mode`	`"collection" \| "entity"`	`collection`	`collection`: the list or the tree itself. `entity`: a compact button showing the current one that opens it, to switch shop or studio from the shell.
`onCreate`	`(() => void)`	—	Adds a collection: a row at the end. Without it there is none.
`onRemove`	`((id: string) => void)`	—	Removes a collection — never offered on the default one. Without it there is no remove action.
`onValueChange`	`((id: string) => void)`	—	The viewer chooses a collection: navigate (push the URL).
`removeLabel`	`((name: string) => string)`	—	The remove button's accessible name for a collection (“Remove Archive”), passed translated.

Accessibility

A nav named by label; the current row has aria-current="page".
The default collection is said in text (defaultLabel), not by colour; each remove button is named for its collection.

Keyboard

Keys	Action
`Tab`	Moves through the rows and their remove buttons, in the order of the list.
`Enter / Space`	Chooses a collection; in entity mode, opens and closes the list.
`Escape`	Closes the entity list and returns to its button.

Best practices

The current collection is the route's: read value from the URL and navigate in onValueChange, or give href so each row is a real link.
Mark one collection isDefault: it carries the defaultLabel and has no remove action; the server refuses its removal with DEFAULT_COLLECTION.
Nest only when it helps (layout="tree" with parentId); a list reads faster.

Generated from the code of @krizaka/ui 3.66.0: its meta.ts, its examples and its types.Edit this documentation on GitHub