Overlays provider

OverlaysProvider holds the stack of open overlays. Overlay2 and every component built on it use the stack to decide which overlay handles focus, escape and outside clicks. ClawscaleProvider includes it.

Usage#

import { OverlaysProvider } from "@clawscale/react";

Apps that use ClawscaleProvider never render it themselves. Without any provider, Overlay2 falls back to a global stack and logs an error in development.

Examples#

Stacked overlays#

Only the top overlay reacts to escape and keeps focus. When it closes, focus returns to the overlay below it.

core/overlays-provider/stacked.tsx

import { Alert, Button, Dialog, DialogBody, DialogFooter } from "@clawscale/react";
import { useState } from "react";

export default function OverlaysProviderStacked() {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isAlertOpen, setIsAlertOpen] = useState(false);
  const deletePipeline = () => {
    setIsAlertOpen(false);
    setIsDialogOpen(false);
  };
  return (
    <>
      <Button icon="edit" text="Edit pipeline" onClick={() => setIsDialogOpen(true)} />
      <Dialog icon="data-lineage" isOpen={isDialogOpen} onClose={() => setIsDialogOpen(false)} title="ingest-orders">
        <DialogBody>
          <p>Open the alert, then press Escape twice. The alert closes first, then this dialog.</p>
        </DialogBody>
        <DialogFooter
          actions={<Button intent="danger" text="Delete pipeline" onClick={() => setIsAlertOpen(true)} />}
        />
      </Dialog>
      <Alert
        canEscapeKeyCancel
        cancelButtonText="Cancel"
        confirmButtonText="Delete"
        icon="trash"
        intent="danger"
        isOpen={isAlertOpen}
        onCancel={() => setIsAlertOpen(false)}
        onConfirm={deletePipeline}
      >
        <p>Delete ingest-orders and its 312 run records?</p>
      </Alert>
    </>
  );
}

Separate React roots#

Content rendered in its own React root does not see the provider. Wrap it in a new OverlaysProvider. The Toast page shows this for OverlayToaster.create.

Props interface#

OverlaysProvider takes only children.

interface OverlaysProviderProps@clawscale/react

Props	Description
`children`required	`React.ReactNode` The component subtree which will have access to this overlay stack context.