Popover

import { Button, Classes, H6, PopoverNext } from "@clawscale/react";

export default function PopoverBasic() {
  return (
    <PopoverNext
      placement="bottom"
      popoverClassName={Classes.POPOVER_CONTENT_SIZING}
      content={
        <div>
          <H6>Pause ingest-orders?</H6>
          <p>Scheduled runs wait until you resume. 2 runs are queued.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
            <Button className={Classes.POPOVER_DISMISS} text="Cancel" />
            <Button className={Classes.POPOVER_DISMISS} intent="warning" text="Pause" />
          </div>
        </div>
      }
    >
      <Button icon="pause" text="Pause pipeline" />
    </PopoverNext>
  );
}

import { Button, Classes, POPOVER_NEXT_PLACEMENTS, PopoverNext } from "@clawscale/react";

export default function PopoverPlacement() {
  return (
    <div
      style={{
        display: "grid",
        gap: 8,
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
        width: "100%",
        maxWidth: 480,
      }}
    >
      {POPOVER_NEXT_PLACEMENTS.map((placement) => (
        <PopoverNext
          content={`placement="${placement}"`}
          fill
          key={placement}
          placement={placement}
          popoverClassName={Classes.POPOVER_CONTENT_SIZING}
        >
          <Button text={placement} />
        </PopoverNext>
      ))}
    </div>
  );
}

import { Button, Menu, MenuItem, PopoverNext } from "@clawscale/react";

const kinds = ["click", "click-target", "hover", "hover-target"] as const;

export default function PopoverInteraction() {
  const menu = (
    <Menu>
      <MenuItem icon="play" shouldDismissPopover={false} text="Run now" />
      <MenuItem icon="pause" shouldDismissPopover={false} text="Pause schedule" />
      <MenuItem icon="history" shouldDismissPopover={false} text="Run history" />
    </Menu>
  );
  return (
    <>
      {kinds.map((kind) => (
        <PopoverNext content={menu} interactionKind={kind} key={kind} placement="bottom">
          <Button endIcon="caret-down" text={kind} />
        </PopoverNext>
      ))}
    </>
  );
}

import { Button, Classes, InputGroup, PopoverNext } from "@clawscale/react";
import { useState } from "react";

export default function PopoverControlled() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <PopoverNext
      isOpen={isOpen}
      onInteraction={(nextOpen) => setIsOpen(nextOpen)}
      placement="bottom"
      popoverClassName={Classes.POPOVER_CONTENT_SIZING}
      content={
        <form
          style={{ display: "grid", gap: 12, width: 240 }}
          onSubmit={(event) => {
            event.preventDefault();
            setIsOpen(false);
          }}
        >
          <InputGroup aria-label="Dataset name" defaultValue="orders_daily" />
          <Button intent="primary" text="Rename dataset" type="submit" />
        </form>
      }
    >
      <Button icon="edit" text="Rename" />
    </PopoverNext>
  );
}

import { Button, Classes, PopoverNext } from "@clawscale/react";

const freshness = "orders_daily was refreshed 4 min ago.";

export default function PopoverMinimal() {
  return (
    <>
      <PopoverNext content={freshness} placement="bottom" popoverClassName={Classes.POPOVER_CONTENT_SIZING}>
        <Button text="Default" />
      </PopoverNext>
      <PopoverNext
        animation="minimal"
        arrow={false}
        content={freshness}
        placement="bottom"
        popoverClassName={Classes.POPOVER_CONTENT_SIZING}
      >
        <Button text="Minimal" />
      </PopoverNext>
    </>
  );
}

import { Button, Menu, MenuDivider, MenuItem, PopoverNext } from "@clawscale/react";

export default function PopoverDropdown() {
  return (
    <PopoverNext
      animation="minimal"
      arrow={false}
      placement="bottom-start"
      content={
        <Menu>
          <MenuItem icon="export" text="Export CSV" />
          <MenuItem icon="export" text="Export Parquet" />
          <MenuItem icon="clipboard" text="Copy as SQL" />
          <MenuDivider />
          <MenuItem icon="share" text="Share view" />
        </Menu>
      }
    >
      <Button endIcon="caret-down" icon="export" text="Export" />
    </PopoverNext>
  );
}

import { Button, Menu, MenuItem, PopoverNext } from "@clawscale/react";
import { useState } from "react";

const regions = ["us-east-1", "us-west-2", "eu-west-1", "ap-south-1"];

export default function PopoverMatchTargetWidth() {
  const [region, setRegion] = useState("eu-west-1");
  return (
    <div style={{ width: "100%", maxWidth: 280 }}>
      <PopoverNext
        animation="minimal"
        arrow={false}
        fill
        matchTargetWidth
        placement="bottom-start"
        content={
          <Menu>
            {regions.map((name) => (
              <MenuItem active={name === region} key={name} text={name} onClick={() => setRegion(name)} />
            ))}
          </Menu>
        }
      >
        <Button alignText="start" endIcon="caret-down" icon="globe" text={region} />
      </PopoverNext>
    </div>
  );
}