Glide

import { useState } from "react";
import { Glide, ListRow } from "@arcadia/ui";

function Picker() {
  const [active, setActive] = useState(0);
  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
    if (!step) return;
    e.preventDefault();
    setActive((i) => (i + step + COMMANDS.length) % COMMANDS.length);
  };
  return (
    <div
      {...sx("cmp-rows", cmp.rows, cmp.rowsPicker)}
      data-width="picker"
      role="listbox"
      aria-label="Commands"
      tabIndex={0}
      aria-activedescendant={`glide-${COMMANDS[active]!.id}`}
      onKeyDown={onKeyDown}
    >
      <Glide />
      {COMMANDS.map((c, i) => (
        <ListRow
          key={c.id}
          id={`glide-${c.id}`}
          role="option"
          aria-selected={i === active}
          tabIndex={-1}
          leading={c.icon}
          label={c.label}
          description={c.description}
          emphasis
          highlighted={i === active}
          onPointerMove={() => setActive(i)}
        />
      ))}
    </div>
  );
}

Move the pointer over the rows, or focus the list and use the arrows.

TSX

import { Glide, ListRow } from "@arcadia/ui";

<div role="listbox" aria-label="Models">
  <Glide />
  <ListRow role="option" label="Large model" highlighted />
  <ListRow role="option" label="Small model" />
</div>

One highlight per list, gliding from row to row instead of each row lighting its own: it moves over 150ms on --ease-pop and appears or leaves with a 100ms fade where it stands, and the first light of a list lands in place. Render it as the list's first child. The list becomes its positioning box, and its rows stop drawing their own hover and highlight; a row's "you are here" fill stays.

It follows the row under the pointer while the pointer moved last, and otherwise the row with data-highlighted (a ListRow's highlighted, a menu's keyboard highlight), then the row with keyboard focus. Its fill is the row's --glide-fill (--glide-fill-kbd while the keyboard drives), so a keyboard highlight is a step stronger and a danger row tints it; its corner is the row's. Every Menu renders one, so pickers and action menus already glide.

Examples

In a tray

TrayBody takes glide for the pickers docked to a composer.

Add context

import { useState } from "react";
import { ListRow, Tray, TrayBody, TrayHeader, TrayTitle } from "@arcadia/ui";

function InATray() {
  const [active, setActive] = useState(0);
  return (
    <span {...sx("cmp-rows", cmp.rows, cmp.rowsPicker)} data-width="picker">
      <Tray motion="static" aria-label="Add context">
        <TrayHeader><TrayTitle>Add context</TrayTitle></TrayHeader>
        <TrayBody glide role="listbox" aria-label="Context">
          {["Files and folders", "Recent changes", "Terminal output"].map((label, i) => (
            <ListRow key={label} role="option" aria-selected={i === active} label={label} highlighted={i === active}
              onPointerMove={() => setActive(i)} />
          ))}
        </TrayBody>
      </Tray>
    </span>
  );
}

Choosing the row

target receives the list and its default highlighted row.

Use the morph duration and curve for navigation; menus keep the quick default.

Takes	Default	Sets
`Ref<Duration>`	`GLIDE`	Travel duration (150ms by default).
`Ref<Easing>`	`var(--ease-pop)`	Travel curve (the popup curve by default).
`Ref<Duration>`	`var(--glide-duration)`	Travel duration when the resting selection moves (a `target`'s row, not the pointer's): the glide's own by default.
`Ref<Easing>`	`var(--glide-ease)`	Travel curve when the resting selection moves: the glide's own by default.

Usage

Examples

In a tray

Choosing the row

Customising

Accessibility

API reference