Open History to see the last commit
1import type { RuntimeMode } from "@t3tools/contracts";
2import { memo, useRef } from "react";
3import { EllipsisIcon } from "lucide-react";
4import { Menu, MenuPopup, MenuTrigger } from "../ui/menu";
5import { ComposerControl, ComposerControlIcon } from "./ComposerControl";
6import { focusRequestedPermission, useComposerMenuProps } from "./composerEventScope";
7import { useComposerMenuState } from "./useComposerMenuState";
8import { ComposerPermissionsSection, type RuntimeModeOption } from "./ComposerFooterControls";
9
10export const CompactComposerControlsMenu = memo(function CompactComposerControlsMenu(props: {
11 runtimeMode: RuntimeMode;
12 runtimeModeOptions: ReadonlyArray<RuntimeModeOption>;
13 showPermissions: boolean;
14 size?: "sm" | "xs";
15 /** Close the portaled popup when its trigger hides. */
16 hidden?: boolean;
17 onRuntimeModeChange: (mode: RuntimeMode) => void;
18}) {
19 const composerFloatingLayerProps = useComposerMenuProps();
20 const size = props.size ?? "sm";
21 const [open, setOpen] = useComposerMenuState(props.hidden);
22 const triggerRef = useRef<HTMLButtonElement>(null);
23
24 return (
25 <Menu
26 open={open}
27 onOpenChange={setOpen}
28 onOpenChangeComplete={(isOpen) => focusRequestedPermission(isOpen, triggerRef.current)}
29 >
30 <MenuTrigger
31 render={
32 <ComposerControl
33 ref={triggerRef}
34 size={size}
35 className="shrink-0"
36 aria-label="More composer controls"
37 data-composer-shortcut={props.showPermissions ? "composer.mode" : undefined}
38 />
39 }
40 >
41 <ComposerControlIcon icon={EllipsisIcon} size={size} />
42 </MenuTrigger>
43 <MenuPopup align="start" {...composerFloatingLayerProps}>
44 {props.showPermissions ? (
45 <ComposerPermissionsSection
46 runtimeMode={props.runtimeMode}
47 runtimeModeOptions={props.runtimeModeOptions}
48 onRuntimeModeChange={props.onRuntimeModeChange}
49 />
50 ) : null}
51 </MenuPopup>
52 </Menu>
53 );
54});