View stack | Arcadia Design

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

function Drill() {
  const [file, setFile] = useState<string | null>(null);
  return (
    <div {...sx("cmp-stack-pane", styles.pane)}>
      <ViewStack view={file ?? "list"} depth={file ? 1 : 0} rootStyle={styles.stack}>
        {file ? (
          <div {...sx("cmp-stack-view", styles.view)}>
            <div {...sx("cmp-bar", cmp.bar)}><Button variant="ghost" size="sm" icon="chevron-left" onClick={() => setFile(null)}>Back</Button></div>
            <p {...sx("cmp-stack-title", styles.title)}>{file}</p>
            <p {...sx("cmp-stack-body", styles.body)}>The file, opened from the list.</p>
          </div>
        ) : (
          <div {...sx("cmp-stack-view", styles.view)}>
            {FILES.map(f => <ListRow key={f} leading="file" label={f} onClick={() => setFile(f)} />)}
          </div>
        )}
      </ViewStack>
    </div>
  );
}

TSX

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

<ViewStack view={open ?? "list"} depth={open ? 1 : 0}>
  {open ? <File path={open} /> : <List />}
</ViewStack>

Views that replace one another in one place. view names the one showing; depth says how deep it is. A deeper view is a push: it comes in from the end as the old one sets back a third of the way and fades, over --duration-enter on --ease-enter. A shallower one is a pop, the mirror. The leaving view keeps its last face, scroll included, until it is gone, and both share one grid cell while they cross, so the stack never changes height.

Examples

Tabs

Views at the same depth swap: the new one rises --label-rise into place and fades in.

Profile

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

function Tabs() {
  const [tab, setTab] = useState(TABS[0]!);
  return (
    <div {...sx("cmp-stack-pane", styles.pane)}>
      <div {...sx("cmp-bar", cmp.bar)}>
        {TABS.map(t => <Button key={t} variant={t === tab ? "secondary" : "ghost"} size="sm" onClick={() => setTab(t)}>{t}</Button>)}
      </div>
      <ViewStack view={tab} rootStyle={styles.stack}>
        <div {...sx("cmp-stack-view", styles.view)}><p {...sx("cmp-stack-title", styles.title)}>{tab}</p></div>
      </ViewStack>
    </div>
  );
}

Knobs

The views are painted on the surface the stack sits on, so the one on top of a move hides the one under it. Set it where the stack sits on another surface.

--view-stack-surface: PaintDefault var(--bg-app); What each view is painted on (the surface the stack sits on, --bg-app by default): the view on top of a move hides the one under it.

The leaving view is inert and hidden from assistive tech the moment the move starts, so focus and the pointer land only on the new view and no input waits on the animation. Move focus into the new view yourself (its heading, or the row Back returns to). Reduced motion swaps the views at once.

ViewStack

viewrequired: string; Which view shows: a new value is a move to another view.
depth: numberDefault 0; How deep the view is (a list 0, the item it opened 1). Deeper than the last is a push: the new view comes in from the end as the old one sets back. Shallower is a pop, the mirror. The same depth is a swap: the new view rises in.
rootStyle: RootStyle<ViewStackKnobs>; Typed StyleX override: where the stack sits (it fills a flex or grid parent like a block) and its surface.
children: ReactNode; The view.

Rest props go to HTMLAttributes<HTMLDivElement>.

Usage

Examples

Tabs

Knobs

Accessibility

API reference

ViewStack