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.

Return a row, null for none, or undefined to keep the default. Navigation can keep the default while interacting and return its current page at rest.

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

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

The glide is decoration: an aria-hidden span with no role and no focus. The list states the highlight itself, through aria-activedescendant, aria-selected or focus, so assistive tech never depends on it.

Under reduced motion it jumps to the next row instead of gliding; the short fade stays. In forced colours it draws a Highlight outline, since system colours replace its fill.

↑ ↓: In the example, move the highlight; the glide follows

items: stringDefault ".ui-menu-item, .ui-row, .ui-tray-option"; The rows it lands on: a selector matched inside the list. Default: menu items, list rows and tray options.
target: (list: HTMLElement, fallback: HTMLElement | null) => HTMLElement | null | undefined; Picks the lit row where the default doesn't fit. Return a row, null for none, or undefined to fall back to the default: the row under the pointer when the pointer moved last, otherwise the row with data-highlighted, otherwise the row with keyboard focus. The second argument is that default row, so a navigation list can preserve it and supply its selection at rest.
rootStyle: RootStyle<GlideKnobs>; Typed StyleX override: layout and the movement knobs.

Usage

Examples

In a tray

Choosing the row

Customising

Accessibility

API reference

Glide