Component

DisclosureSpill

It uses a native disclosure for an ordinary group of children, then spills the final child into a visible escape slot whenever the filing is closed. Open it again and the escaped child is filed back inside.

Possible use

It could be used to make a reviewer close a handoff card while letting the date escape for separate attention, or to give a presenter one agenda item that refuses to stay filed.

Reasonable alternative

A reasonable local alternative is a native details element that simply hides its children. Publishing a disclosure that ejects its final child is difficult to defend because closing a panel should not change where content lives.

01 / Preview

Try it yourself.

Close the filing

Title

Status

Owner

Date

Every child is safely filed. Closing risks one escape.

Close the filing. The last field leaves its paperwork behind.

Mechanism

1: Start with four children safely filed inside a native disclosure.
2: Close the filing with a click, Enter, or Space.
3: The final child spills into a separate escape slot.
4: Reopen the filing to put the child back where it started.

02 / Usage

Put it somewhere.

example.tsxTSX

import { DisclosureSpill } from "gra-ui";
import "gra-ui/styles.css";

export function UnstableFiling() {
  return (
    <DisclosureSpill>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </DisclosureSpill>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content filed inside the disclosure, with the final child designated as the escapee.