Action menu

import { ActionMenu, type ActionMenuEntry } from "@bosunkit/components/action-menu";
import { Button } from "@bosunkit/components/button";
import { TaskDialog } from "@bosunkit/components/task-dialog";
import { Copy, Download, Pencil, Trash2 } from "lucide-react";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const title: string = "Commands, nested exports and explicit deletion";
const entries: readonly ActionMenuEntry[] = [
  {kind:"group",id:"report",label:"Technical report",entries:[
    {id:"edit",label:"Edit report",icon:<Pencil />,description:"Change the title and report content."},
    {id:"duplicate",label:"Duplicate report",icon:<Copy />},
    {kind:"submenu",id:"download",label:"Download",icon:<Download />,entries:[{id:"pdf",label:"PDF document"},{id:"markdown",label:"Markdown source"}]},
    {id:"publish",label:"Publish report",description:"Review is required before publication.",disabled:true},
  ]},
  {kind:"separator",id:"divider"},
  {id:"delete",label:"Delete report",icon:<Trash2 />,destructive:true},
];
export default function Example(): ReactElement {
  const [result,setResult]: [string,Dispatch<SetStateAction<string>>] = useState("Choose a command to see its result. This example changes no saved report.");
  const [confirm,setConfirm]: [boolean,Dispatch<SetStateAction<boolean>>] = useState(false);
  function choose(id:string): void {
    if(id === "delete") { setConfirm(true); return; }
    const results: Readonly<Record<string,string>> = {edit:"Example editor requested.",duplicate:"Example duplicate requested.",pdf:"Example PDF download requested.",markdown:"Example Markdown download requested."};
    setResult(results[id] ?? "Command requested.");
  }
  return <div><ActionMenu label="Report actions" entries={entries} onSelect={choose} />
    <p role="status">{result}</p>
    <TaskDialog title="Delete the example report?" description="This demonstrates confirmation. No saved report is affected." open={confirm} onOpenChange={(open): void => { if (!open) ((): void => { setConfirm(false); })(); }}
      actions={<><Button variant="ghost" onClick={(): void => { setConfirm(false); }}>Keep report</Button><Button variant="danger" onClick={(): void => {setConfirm(false);setResult("Example deletion confirmed.");}}>Delete example</Button></>}>
      <p>Keep confirmation in the task that owns the report.</p>
    </TaskDialog>
  </div>;
}

import { ActionMenu } from "@bosunkit/components/action-menu";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const title: string = "Persistent checkboxes and mutually exclusive options";
export default function Example(): ReactElement {
  const [notes,setNotes]: [boolean,Dispatch<SetStateAction<boolean>>] = useState(true);
  const [figures,setFigures]: [boolean,Dispatch<SetStateAction<boolean>>] = useState(false);
  const [sort,setSort]: [string,Dispatch<SetStateAction<string>>] = useState("date");
  return <div><ActionMenu label="View options" entries={[
    {kind:"group",id:"include",label:"Include",entries:[{kind:"checkbox",id:"notes",label:"Source notes",checked:notes,onCheckedChange:setNotes},{kind:"checkbox",id:"figures",label:"Figure captions",checked:figures,onCheckedChange:setFigures}]},
    {kind:"separator",id:"divider"},
    {kind:"radio-group",id:"sort",label:"Sort by",value:sort,onValueChange:setSort,options:[{id:"date",label:"Publication date"},{id:"title",label:"Title"},{id:"category",label:"Category"}]},
  ]} /><p role="status">Notes {notes ? "shown" : "hidden"}; captions {figures ? "shown" : "hidden"}. Sorted by {sort === "date" ? "publication date" : sort}.</p></div>;
}

import { ActionMenu } from "@bosunkit/components/action-menu";
import { IconButton } from "@bosunkit/components/icon-button";
import { Ellipsis } from "lucide-react";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const title: string = "Named icon trigger and shortcut hints";
export default function Example(): ReactElement {
  const [result,setResult]: [string,Dispatch<SetStateAction<string>>] = useState("Shortcut hints describe commands registered by the application.");
  return <div><ActionMenu label="More document actions" triggerTooltip align="end"
    trigger={<IconButton label="More document actions" icon={<Ellipsis />} />}
    entries={[{id:"copy",label:"Copy link",shortcut:"Ctrl Shift C"},{id:"download",label:"Download source",shortcut:"Ctrl Shift D"}]}
    onSelect={(id:string): void => { setResult(id === "copy" ? "Example copy requested." : "Example download requested."); }} />
    <p role="status">{result}</p></div>;
}