List presence

import { useState } from "react";
import {
  Button, ListPresence, ListRow, useFlip, useHeldOrder,
} from "@arcadia/ui";

function Chats() {
  const [chats, setChats] = useState(NAMES.slice(0, 4));
  const [held, setHeld] = useState(false);
  const order = useHeldOrder(chats, held);
  const list = useFlip<HTMLDivElement>(order.join("\n"), { enter: "above" });
  const fresh = NAMES.find((n) => !chats.includes(n));
  return (
    <div data-demo="list-presence" {...sx("cmp-presence-stage", styles.stage, cmp.rowsSidebar)}>
      <div {...sx("cmp-bar", cmp.bar)}>
        <Button variant="secondary" size="sm" disabled={!fresh} onClick={() => fresh && setChats([fresh, ...chats])}>New</Button>
        <Button variant="secondary" size="sm" disabled={chats.length < 2} onClick={() => setChats(chats.filter((_, i) => i !== 1))}>Archive</Button>
        <Button variant="secondary" size="sm" onClick={() => setChats([chats.at(-1)!, ...chats.slice(0, -1)])}>Bump</Button>
      </div>
      <div ref={list} onPointerEnter={() => setHeld(true)} onPointerLeave={() => setHeld(false)} {...sx("cmp-rows", cmp.rows)}>
        <ListPresence root={list}>
          {order.map((n) => <ListRow key={n} data-flip-key={n} size="lg" leading="chat" label={n} interactive={false} />)}
        </ListPresence>
      </div>
    </div>
  );
}

export function Thumb() {
  return (
    <div {...sx("cmp-rows", cmp.rows, cmp.rowsNarrow)}>
      {NAMES.slice(0, 2).map((n) => <ListRow key={n} size="lg" leading="chat" label={n} interactive={false} />)}
    </div>
  );
}

function Usage() {
  const order = useHeldOrder(ids, pointerInList);
  const list = useFlip<HTMLDivElement>(order.join("\n"), { enter: "above" });
  return (
    <div ref={list}>
      <ListPresence root={list}>{order.map((id) => <Row key={id} data-flip-key={id} />)}</ListPresence>
    </div>
  );
}
const ids: string[] = [];
const pointerInList = false;
function Row(_: { "data-flip-key": string }) { return null; }

export default function ListPresencePage() {
  return (
    <>
      <Specimen code={SRC.Chats} size="compact" surface="sidebar"><Chats /></Specimen>
      <Section title="Usage">
        <CodeBlock code={displaySnippet(SRC.Usage)} />
        <P>
          A list&apos;s rows come, go and change places without a jump. Each row carries its key as `data-flip-key`.
          `useFlip` glides a row that changed places over `--duration-reorder` on `--ease-settle`, and with `enter` a row
          that is new arrives on Enter, from `above` or `below`, as its slot unfolds over `--duration-fold`. `ListPresence` keeps a row whose key left drawn while it
          fades where it stands over `--duration-exit`, then folds its slot shut over `--duration-fold-close`, so the rows
          after it and whatever follows the list move up together.
        </P>
        <P>
          Past eight rows at once, while the page is hidden and under reduced motion, rows snap: a sort or a filter moves
          too much to follow, and a reduced-motion leave keeps only its short fade. Pass `instant` for a bulk change.
        </P>
      </Section>
      <Section title="Holding still">
        <Sub title="Under the pointer" id="under-the-pointer" lead="`useHeldOrder(order, hold)` keeps the rows where they are while `hold` is set: the pointer is in the list, or a row's menu is open. Rows still arrive and leave while it holds.">
          <P>
            It gives way 600ms after `hold` lets go, as one change, so the rows glide once to the live order. A list that
            re-sorts by activity waits for the pointer to leave before it moves a row out from under it.
          </P>
        </Sub>
      </Section>
    </>
  );
}

export function Notes() {
  return (
    <Section title="Accessibility">
      <P>
        A row that is leaving is `inert` at once, so a click or Tab never lands on what is going. Every move is a
        transform or opacity on a row already in its place; focus and the reading order follow the live list.
      </P>
    </Section>
  );
}