Unfold

JuniperAtlasWren

What follows moves with it

import { useState } from "react";
import { Button, Unfold } from "@arcadia/ui";

function Pinned() {
  const [open, setOpen] = useState(true);
  return (
    <div data-demo="unfold" {...sx("cmp-unfold-stage", styles.stage)}>
      <div {...sx("cmp-bar", cmp.bar, open && styles.turned)}>
        <Button variant="secondary" size="sm" iconEnd="chevron-right" aria-expanded={open} onClick={() => setOpen(!open)}>Pinned</Button>
      </div>
      <Unfold open={open}><Tiles /></Unfold>
      <span {...sx("cmp-unfold-below", styles.below)}>What follows moves with it</span>
    </div>
  );
}

TSX

import { Unfold } from "@arcadia/ui";

function Usage() {
  return <Unfold open={pinned.length > 0}>

The kit's one fold: a block that unfolds to its content's height and folds back to none. A disclosure's body, a settings group's card and a pinned grid all fold on it, and Collapsible, DisclosureRow and SettingsGroup render through it. Its one grid row eases between 0fr and 1fr, so nothing is measured, and the cell clips, so the content's own padding folds with it.

It opens over --duration-fold (200ms) and closes over --duration-fold-close (160ms), both on --ease-enter, while the content fades in over --duration-fast and out over --duration-exit. The content stays drawn while the fold closes over it, then unmounts. A chevron beside it turns with it: chevron-right and Icon's --icon-turn. Nothing moves on the first render.

It is the one kind of motion that moves what is below it, so open or close one only on the user's own action. Everything that arrives or leaves inside it still uses opacity and transform.

Instant

A change the user didn't make one at a time snaps: a hydrated page, a collapse of everything, a find-in-page match, a fold out of view.

A bulk change snaps

import { useState } from "react";
import { Button, Unfold } from "@arcadia/ui";

function Instant() {
  const [open, setOpen] = useState(false);
  return (
    <div data-demo="unfold-instant" {...sx("cmp-unfold-stage", styles.stage)}>
      <div {...sx("cmp-bar", cmp.bar)}>
        <Button variant="secondary" size="sm" onClick={() => setOpen(!open)}>{open ? "Collapse all" : "Expand all"}</Button>
      </div>
      <Unfold open={open} instant><Tiles /></Unfold>
      <span {...sx("cmp-unfold-below", styles.below)}>A bulk change snaps</span>
    </div>
  );
}

Pass instant for the change, or set data-instant on an ancestor for a whole region. A fold wholly out of the window snaps on its own.

Found in page

keepMounted keeps the folded content in the page as hidden="until-found": find in page reaches it, and a match calls onFound, which opens it at once.

Without it the folded content unmounts, which is what a long list of folds wants.

While folded or folding the content is inert and hidden from assistive tech, so Tab never lands inside a block of zero height; kept mounted, it is hidden="until-found" instead. Reduced motion snaps between the two heights and keeps the short fade; the transition still ends, so anything waiting on it runs.

openrequired: boolean; Shown at its full height, or folded to none. Changing it eases the height between the two.
keepMounted: boolean; Keep it mounted while folded, as hidden="until-found": find in page reaches it and calls onFound.
onFound: () => void; A find-in-page match inside: open it (at once).
instant: boolean; This change snaps (hydration, bulk, a jump), as every change under data-instant does.
clip: boolean; false: unclipped while open (for one that only closes at once).
rootStyle: RootStyle; Typed StyleX override: where it sits.
children: ReactNode; What unfolds: drawn while the fold closes over it, then unmounted.

Rest props go to HTMLAttributes<HTMLDivElement>.

Usage

Instant

Found in page

Accessibility

API reference

Unfold