LinkSelect

tcmts.registry.pages.LinkSelect · #odrosm3j · term · runs in the browser

handles onChange

A choice of pages, as a select (React Aria's, as the forge's history filter has): a library's versions, or a list's orders. Choosing one goes to it; the page's own is chosen. shown, its label is shown before it.

import { navigate } from "#codebase/tcmts/react";
import { Chevron } from "#codebase/tcmts/share";
import { Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue } from "react-aria-components";

export function LinkSelect({
  label,
  shown,
  selected,
  options,
}: {
  label: string;
  shown?: boolean;
  selected: string;
  options: { id: string; label: string; href: string }[];
}) {
  return (
    <Select
      aria-label={shown ? undefined : label}
      className="select linkselect"
      value={selected}
      onChange={(k) => {
        const to = options.find((o) => o.id === k);
        if (to && k !== selected) navigate(to.href);
      }}
    >
      {shown && <Label className="muted">{label}</Label>}
      <Button className="btn select-btn">
        <SelectValue />
        <Chevron />
      </Button>
      <Popover className="menu-pop" placement="bottom start" offset={4}>
        <ListBox className="menu" items={options}>
          {(o) => (
            <ListBoxItem id={o.id} textValue={o.label} className="opt">
              {o.label}
            </ListBoxItem>
          )}
        </ListBox>
      </Popover>
    </Select>
  );
}

uses

used by