Menu

1"use client";2
3// Adapted from HeroUI v3.2.6 dropdown-default (Apache-2.0).4import { Button, Menu } from "@lenso/ui";5import { ActionItem, Popup } from "./_shared";6
7export function Default() {8  return (9    <Menu>10      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Actions</Menu.Trigger>11      <Popup>12        <ActionItem label="New file" onClick={() => console.log("Selected: new-file")} />13        <ActionItem label="Copy link" onClick={() => console.log("Selected: copy-link")} />14        <ActionItem label="Edit file" onClick={() => console.log("Selected: edit-file")} />15        <ActionItem16          label="Delete file"17          variant="danger"18          onClick={() => console.log("Selected: delete-file")}19        />20      </Popup>21    </Menu>22  );23}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-icons, Apache-2.0.4import { FloppyDisk, FolderOpen, SquarePlus, TrashBin } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Menu } from "@lenso/ui";7import { ActionItem, Popup, Shortcut, styles } from "./_shared";8
9export function WithIcons() {10  return (11    <Menu>12      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Actions</Menu.Trigger>13      <Popup>14        <ActionItem15          label="New file"16          icon={<SquarePlus {...stylex.props(styles.icon)} />}17          shortcut={<Shortcut letter="N" />}18          onClick={() => console.log("Selected: new-file")}19        />20        <ActionItem21          label="Open file"22          icon={<FolderOpen {...stylex.props(styles.icon)} />}23          shortcut={<Shortcut letter="O" />}24          onClick={() => console.log("Selected: open-file")}25        />26        <ActionItem27          label="Save file"28          icon={<FloppyDisk {...stylex.props(styles.icon)} />}29          shortcut={<Shortcut letter="S" />}30          onClick={() => console.log("Selected: save-file")}31        />32        <ActionItem33          label="Delete file"34          variant="danger"35          icon={<TrashBin {...stylex.props(styles.dangerIcon)} />}36          shortcut={<Shortcut letter="D" shift />}37          onClick={() => console.log("Selected: delete-file")}38        />39      </Popup>40    </Menu>41  );42}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-descriptions, Apache-2.0.4import { FloppyDisk, FolderOpen, SquarePlus, TrashBin } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Menu } from "@lenso/ui";7import { ActionItem, Popup, Shortcut, styles } from "./_shared";8
9export function WithDescriptions() {10  return (11    <Menu>12      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Actions</Menu.Trigger>13      <Popup>14        <ActionItem15          label="New file"16          description="Create a new file"17          icon={<SquarePlus {...stylex.props(styles.icon)} />}18          shortcut={<Shortcut letter="N" />}19          onClick={() => console.log("Selected: new-file")}20        />21        <ActionItem22          label="Open file"23          description="Open an existing file"24          icon={<FolderOpen {...stylex.props(styles.icon)} />}25          shortcut={<Shortcut letter="O" />}26          onClick={() => console.log("Selected: open-file")}27        />28        <ActionItem29          label="Save file"30          description="Save the current file"31          icon={<FloppyDisk {...stylex.props(styles.icon)} />}32          shortcut={<Shortcut letter="S" />}33          onClick={() => console.log("Selected: save-file")}34        />35        <ActionItem36          label="Delete file"37          description="Move to trash"38          variant="danger"39          icon={<TrashBin {...stylex.props(styles.dangerIcon)} />}40          shortcut={<Shortcut letter="D" shift />}41          onClick={() => console.log("Selected: delete-file")}42        />43      </Popup>44    </Menu>45  );46}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-disabled-items, Apache-2.0.4import { Bars, Pencil, SquarePlus, TrashBin } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Menu } from "@lenso/ui";7import { ActionItem, Popup, Shortcut, styles } from "./_shared";8
9export function WithDisabledItems() {10  return (11    <Menu>12      <Menu.Trigger render={<Button isIconOnly aria-label="Menu" variant="secondary" />}>13        <Bars />14      </Menu.Trigger>15      <Popup xstyle={styles.disabledWidth}>16        <Menu.Section>17          <Menu.Section.Label>Actions</Menu.Section.Label>18          <ActionItem19            label="New file"20            description="Create a new file"21            icon={<SquarePlus {...stylex.props(styles.icon)} />}22            shortcut={<Shortcut letter="N" />}23            onClick={() => console.log("Selected: new-file")}24          />25          <ActionItem26            label="Edit file"27            description="Make changes"28            icon={<Pencil {...stylex.props(styles.icon)} />}29            shortcut={<Shortcut letter="E" />}30            onClick={() => console.log("Selected: edit-file")}31          />32        </Menu.Section>33        <Menu.Separator />34        <Menu.Section>35          <Menu.Section.Label>Danger zone</Menu.Section.Label>36          <ActionItem37            disabled38            label="Delete file"39            description="Move to trash"40            variant="danger"41            icon={<TrashBin {...stylex.props(styles.dangerIcon)} />}42            shortcut={<Shortcut letter="D" shift />}43            onClick={() => console.log("Selected: delete-file")}44          />45        </Menu.Section>46      </Popup>47    </Menu>48  );49}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-sections, Apache-2.0.4import { EllipsisVertical, Pencil, SquarePlus, TrashBin } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Menu } from "@lenso/ui";7import { ActionItem, Popup, Shortcut, styles } from "./_shared";8
9export function WithSections() {10  return (11    <Menu>12      <Menu.Trigger render={<Button isIconOnly aria-label="Menu" variant="secondary" />}>13        <EllipsisVertical />14      </Menu.Trigger>15      <Popup>16        <Menu.Section>17          <Menu.Section.Label>Actions</Menu.Section.Label>18          <ActionItem19            label="New file"20            description="Create a new file"21            icon={<SquarePlus {...stylex.props(styles.icon)} />}22            shortcut={<Shortcut letter="N" />}23            onClick={() => console.log("Selected: new-file")}24          />25          <ActionItem26            label="Edit file"27            description="Make changes"28            icon={<Pencil {...stylex.props(styles.icon)} />}29            shortcut={<Shortcut letter="E" />}30            onClick={() => console.log("Selected: edit-file")}31          />32        </Menu.Section>33        <Menu.Separator />34        <Menu.Section>35          <Menu.Section.Label>Danger zone</Menu.Section.Label>36          <ActionItem37            label="Delete file"38            description="Move to trash"39            variant="danger"40            icon={<TrashBin {...stylex.props(styles.dangerIcon)} />}41            shortcut={<Shortcut letter="D" shift />}42            onClick={() => console.log("Selected: delete-file")}43          />44        </Menu.Section>45      </Popup>46    </Menu>47  );48}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-multiple-selection, Apache-2.0.4import { useState } from "react";5import { Button, Menu, MenuItem } from "@lenso/ui";6import { Checkmark, Popup, styles } from "./_shared";7
8export function WithMultipleSelection() {9  const [selected, setSelected] = useState(new Set(["apple"]));10  const [open, setOpen] = useState(false);11  const fruit = (value: string, label: string) => (12    <Menu.CheckboxItem13      key={value}14      checked={selected.has(value)}15      closeOnClick={false}16      onKeyDown={(event) => {17        if (event.key === "Enter") setOpen(false);18      }}19      onCheckedChange={(checked) =>20        setSelected((previous) => {21          const next = new Set(previous);22          if (checked) next.add(value);23          else next.delete(value);24          return next;25        })26      }27    >28      <Menu.CheckboxItemIndicator keepMounted xstyle={styles.selectionIndicator}>29        <Checkmark />30      </Menu.CheckboxItemIndicator>31      <MenuItem.Label>{label}</MenuItem.Label>32    </Menu.CheckboxItem>33  );34  return (35    <Menu open={open} onOpenChange={setOpen}>36      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>37        Preferred Fruits38      </Menu.Trigger>39      <Popup xstyle={styles.wide}>40        <Menu.Section>41          <Menu.Section.Label>Select a fruit</Menu.Section.Label>42          {fruit("apple", "Apple")}43          {fruit("banana", "Banana")}44          {fruit("cherry", "Cherry")}45        </Menu.Section>46        {fruit("orange", "Orange")}47        {fruit("pear", "Pear")}48      </Popup>49    </Menu>50  );51}

1"use client";2
3// Adapted from HeroUI v3.2.6 controlled, Apache-2.0.4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { Button, Menu, MenuItem } from "@lenso/ui";7import { Checkmark, Popup, styles } from "./_shared";8
9export function Controlled() {10  const [selected, setSelected] = useState(new Set(["bold"]));11  const [open, setOpen] = useState(false);12  const selectedItems = Array.from(selected);13  return (14    <div {...stylex.props(styles.controlled)}>15      <p {...stylex.props(styles.status)}>16        Selected: {selectedItems.length > 0 ? selectedItems.join(", ") : "None"}17      </p>18      <Menu open={open} onOpenChange={setOpen}>19        <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>20          Actions21        </Menu.Trigger>22        <Popup>23          {(["bold", "italic", "underline"] as const).map((value) => (24            <Menu.CheckboxItem25              key={value}26              checked={selected.has(value)}27              closeOnClick={false}28              onKeyDown={(event) => {29                if (event.key === "Enter") setOpen(false);30              }}31              onCheckedChange={(checked) =>32                setSelected((previous) => {33                  const next = new Set(previous);34                  if (checked) next.add(value);35                  else next.delete(value);36                  return next;37                })38              }39            >40              <MenuItem.Label>{value.charAt(0).toUpperCase() + value.slice(1)}</MenuItem.Label>41              <Menu.CheckboxItemIndicator keepMounted xstyle={styles.selectionIndicator}>42                <Checkmark />43              </Menu.CheckboxItemIndicator>44            </Menu.CheckboxItem>45          ))}46        </Popup>47      </Menu>48    </div>49  );50}

1"use client";2
3// Adapted from HeroUI v3.2.6 controlled-open-state, Apache-2.0.4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { Button, Menu } from "@lenso/ui";7import { ActionItem, Popup, styles } from "./_shared";8
9export function ControlledOpenState() {10  const [open, setOpen] = useState(false);11  return (12    <div {...stylex.props(styles.controlled)}>13      <p {...stylex.props(styles.status)}>14        Menu is: <strong>{open ? "open" : "closed"}</strong>15      </p>16      <Menu open={open} onOpenChange={setOpen}>17        <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>18          Actions19        </Menu.Trigger>20        <Popup>21          <ActionItem label="New file" />22          <ActionItem label="Open file" />23          <ActionItem label="Save file" />24          <ActionItem label="Delete file" variant="danger" />25        </Popup>26      </Menu>27    </div>28  );29}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-single-selection, Apache-2.0.4import { useState } from "react";5import { Button, Menu, MenuItem } from "@lenso/ui";6import { Checkmark, Popup, styles } from "./_shared";7
8export function WithSingleSelection() {9  const [selected, setSelected] = useState("apple");10  const fruit = (value: string, label: string) => (11    <Menu.RadioItem key={value} value={value} closeOnClick>12      <Menu.RadioItemIndicator keepMounted xstyle={styles.selectionIndicator}>13        <Checkmark />14      </Menu.RadioItemIndicator>15      <MenuItem.Label>{label}</MenuItem.Label>16    </Menu.RadioItem>17  );18  return (19    <Menu>20      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Fruit</Menu.Trigger>21      <Popup xstyle={styles.wide}>22        <Menu.RadioGroup value={selected} onValueChange={setSelected}>23          <Menu.Section>24            <Menu.Section.Label>Select a fruit</Menu.Section.Label>25            {fruit("apple", "Apple")}26            {fruit("banana", "Banana")}27            {fruit("cherry", "Cherry")}28          </Menu.Section>29          {fruit("orange", "Orange")}30          {fruit("pear", "Pear")}31        </Menu.RadioGroup>32      </Popup>33    </Menu>34  );35}

1"use client";2
3// Adapted from HeroUI v3.2.6 single-with-custom-indicator, Apache-2.0.4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { Button, Menu, MenuItem } from "@lenso/ui";7import { Popup, styles } from "./_shared";8
9export function SingleWithCustomIndicator() {10  const [selected, setSelected] = useState("apple");11  const customCheckmarkIcon = (12    <svg13      height="16"14      viewBox="0 0 16 16"15      width="16"16      xmlns="http://www.w3.org/2000/svg"17      aria-hidden="true"18    >19      <path20        {...stylex.props(styles.accent)}21        clipRule="evenodd"22        d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m3.1-8.55a.75.75 0 1 0-1.2-.9L7.419 8.858L6.03 7.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.13-.08z"23        fill="currentColor"24        fillRule="evenodd"25      />26    </svg>27  );28  const fruit = (value: string, label: string) => (29    <Menu.RadioItem key={value} value={value} closeOnClick>30      <Menu.RadioItemIndicator keepMounted xstyle={styles.selectionIndicator}>31        {customCheckmarkIcon}32      </Menu.RadioItemIndicator>33      <MenuItem.Label>{label}</MenuItem.Label>34    </Menu.RadioItem>35  );36  return (37    <Menu>38      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Fruits</Menu.Trigger>39      <Popup xstyle={styles.wide}>40        <Menu.RadioGroup value={selected} onValueChange={setSelected}>41          <Menu.Section>42            <Menu.Section.Label>Select a fruit</Menu.Section.Label>43            {fruit("apple", "Apple")}44            {fruit("banana", "Banana")}45            {fruit("cherry", "Cherry")}46          </Menu.Section>47          {fruit("orange", "Orange")}48          {fruit("pear", "Pear")}49        </Menu.RadioGroup>50      </Popup>51    </Menu>52  );53}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-section-level-selection, Apache-2.0.4import { useState } from "react";5import { Button, Menu, MenuItem } from "@lenso/ui";6import { ActionItem, Checkmark, Dotmark, Popup, Shortcut, styles } from "./_shared";7
8export function WithSectionLevelSelection() {9  const [textStyles, setTextStyles] = useState(new Set(["bold", "italic"]));10  const [textAlignment, setTextAlignment] = useState("left");11  const [open, setOpen] = useState(false);12  return (13    <Menu open={open} onOpenChange={setOpen}>14      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Styles</Menu.Trigger>15      <Popup xstyle={styles.wide}>16        <Menu.Section>17          <Menu.Section.Label>Actions</Menu.Section.Label>18          <ActionItem label="Cut" shortcut={<Shortcut letter="X" />} />19          <ActionItem label="Copy" shortcut={<Shortcut letter="C" />} />20          <ActionItem label="Paste" shortcut={<Shortcut letter="U" />} />21        </Menu.Section>22        <Menu.Separator />23        <Menu.Section>24          <Menu.Section.Label>Text Style</Menu.Section.Label>25          {(["bold", "italic", "underline"] as const).map((value) => (26            <Menu.CheckboxItem27              key={value}28              checked={textStyles.has(value)}29              aria-label={value.charAt(0).toUpperCase() + value.slice(1)}30              closeOnClick={false}31              onKeyDown={(event) => {32                if (event.key === "Enter") setOpen(false);33              }}34              onCheckedChange={(checked) =>35                setTextStyles((previous) => {36                  const next = new Set(previous);37                  if (checked) next.add(value);38                  else next.delete(value);39                  return next;40                })41              }42            >43              <Menu.CheckboxItemIndicator keepMounted xstyle={styles.selectionIndicator}>44                <Checkmark />45              </Menu.CheckboxItemIndicator>46              <MenuItem.Label>{value.charAt(0).toUpperCase() + value.slice(1)}</MenuItem.Label>47              <Shortcut letter={value === "underline" ? "U" : value.charAt(0).toUpperCase()} />48            </Menu.CheckboxItem>49          ))}50        </Menu.Section>51        <Menu.Separator />52        <Menu.Section>53          <Menu.Section.Label>Text Alignment</Menu.Section.Label>54          <Menu.RadioGroup value={textAlignment} onValueChange={setTextAlignment}>55            {(["left", "center", "right"] as const).map((value) => (56              <Menu.RadioItem57                key={value}58                value={value}59                aria-label={value.charAt(0).toUpperCase() + value.slice(1)}60                closeOnClick61              >62                <Menu.RadioItemIndicator keepMounted xstyle={styles.selectionIndicator}>63                  <Dotmark />64                </Menu.RadioItemIndicator>65                <MenuItem.Label>{value.charAt(0).toUpperCase() + value.slice(1)}</MenuItem.Label>66                <Shortcut67                  modifier="alt"68                  letter={value === "left" ? "A" : value === "center" ? "H" : "D"}69                />70              </Menu.RadioItem>71            ))}72          </Menu.RadioGroup>73        </Menu.Section>74      </Popup>75    </Menu>76  );77}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-keyboard-shortcuts, Apache-2.0.4import { Button, Menu } from "@lenso/ui";5import { ActionItem, Popup, Shortcut } from "./_shared";6
7export function WithKeyboardShortcuts() {8  return (9    <Menu>10      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Actions</Menu.Trigger>11      <Popup>12        <ActionItem13          label="New"14          shortcut={<Shortcut letter="N" />}15          onClick={() => console.log("Selected: new")}16        />17        <ActionItem18          label="Open"19          shortcut={<Shortcut letter="O" />}20          onClick={() => console.log("Selected: open")}21        />22        <ActionItem23          label="Save"24          shortcut={<Shortcut letter="S" />}25          onClick={() => console.log("Selected: save")}26        />27        <ActionItem28          label="Delete"29          variant="danger"30          shortcut={<Shortcut letter="D" shift />}31          onClick={() => console.log("Selected: delete")}32        />33      </Popup>34    </Menu>35  );36}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-submenus, Apache-2.0.4import * as stylex from "@stylexjs/stylex";5import { Button, Menu, IconChevronRight, MenuItem } from "@lenso/ui";6import { ActionItem, Popup, styles } from "./_shared";7
8export function WithSubmenus() {9  return (10    <Menu>11      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Share</Menu.Trigger>12      <Popup>13        <ActionItem label="Copy Link" onClick={() => console.log("Selected: copy-link")} />14        <ActionItem label="Facebook" onClick={() => console.log("Selected: facebook")} />15        <ActionItem16          label="X / Twitter"17          navigationLabel="Twitter"18          onClick={() => console.log("Selected: twitter")}19        />20        <Menu.SubmenuRoot>21          <Menu.SubmenuTrigger label="Share">22            <MenuItem.Label>Other</MenuItem.Label>23            <MenuItem.SubmenuIndicator>24              <IconChevronRight {...stylex.props(styles.smallIcon)} />25            </MenuItem.SubmenuIndicator>26          </Menu.SubmenuTrigger>27          <Popup>28            <ActionItem label="WhatsApp" />29            <ActionItem label="Telegram" />30            <ActionItem label="Discord" />31            <Menu.SubmenuRoot>32              <Menu.SubmenuTrigger>33                <MenuItem.Label>Email</MenuItem.Label>34                <MenuItem.SubmenuIndicator>35                  <IconChevronRight {...stylex.props(styles.smallIcon)} />36                </MenuItem.SubmenuIndicator>37              </Menu.SubmenuTrigger>38              <Popup>39                <ActionItem label="Work email" />40                <ActionItem label="Personal email" />41              </Popup>42            </Menu.SubmenuRoot>43          </Popup>44        </Menu.SubmenuRoot>45      </Popup>46    </Menu>47  );48}

1"use client";2
3// Adapted from HeroUI v3.2.6 with-custom-submenu-indicator, Apache-2.0.4import { ArrowRight } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Menu, IconChevronRight, MenuItem } from "@lenso/ui";7import { ActionItem, Popup, styles } from "./_shared";8
9export function WithCustomSubmenuIndicator() {10  return (11    <Menu>12      <Menu.Trigger render={<Button aria-label="Menu" variant="secondary" />}>Share</Menu.Trigger>13      <Popup>14        <ActionItem label="Copy Link" onClick={() => console.log("Selected: copy-link")} />15        <ActionItem label="Facebook" onClick={() => console.log("Selected: facebook")} />16        <Menu.SubmenuRoot>17          <Menu.SubmenuTrigger label="Share">18            <MenuItem.Label>More options</MenuItem.Label>19            <MenuItem.SubmenuIndicator>20              <ArrowRight {...stylex.props(styles.smallIcon)} />21            </MenuItem.SubmenuIndicator>22          </Menu.SubmenuTrigger>23          <Popup>24            <ActionItem label="WhatsApp" />25            <ActionItem label="Telegram" />26            <Menu.SubmenuRoot>27              <Menu.SubmenuTrigger>28                <MenuItem.Label>Email</MenuItem.Label>29                <MenuItem.SubmenuIndicator>30                  <svg31                    {...stylex.props(styles.smallIcon)}32                    fill="none"33                    stroke="currentColor"34                    strokeLinecap="round"35                    strokeLinejoin="round"36                    strokeWidth="2"37                    viewBox="0 0 24 24"38                    aria-hidden="true"39                  >40                    <path d="M9 18l6-6-6-6" />41                  </svg>42                </MenuItem.SubmenuIndicator>43              </Menu.SubmenuTrigger>44              <Popup>45                <ActionItem label="Work email" />46                <ActionItem label="Personal email" />47              </Popup>48            </Menu.SubmenuRoot>49            <ActionItem label="Discord" />50          </Popup>51        </Menu.SubmenuRoot>52        <Menu.SubmenuRoot>53          <Menu.SubmenuTrigger label="Other">54            <MenuItem.Label>Other (default indicator)</MenuItem.Label>55            <MenuItem.SubmenuIndicator>56              <IconChevronRight {...stylex.props(styles.smallIcon)} />57            </MenuItem.SubmenuIndicator>58          </Menu.SubmenuTrigger>59          <Popup>60            <ActionItem label="SMS" />61          </Popup>62        </Menu.SubmenuRoot>63      </Popup>64    </Menu>65  );66}

1"use client";2
3// Adapted from HeroUI v3.2.6 custom-trigger, Apache-2.0; original avatar asset retained.4import { ArrowRightFromSquare, Gear, Persons } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Avatar, Menu, MenuItem } from "@lenso/ui";7import { ActionItem, Popup, styles } from "./_shared";8
9const avatar = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg";10
11export function CustomTrigger() {12  return (13    <Menu>14      <Menu.Trigger xstyle={styles.round} aria-label="Account menu">15        <Avatar>16          <Avatar.Image alt="Junior Garcia" src={avatar} />17          <Avatar.Fallback delay={600}>JD</Avatar.Fallback>18        </Avatar>19      </Menu.Trigger>20      <Popup>21        <div {...stylex.props(styles.profile)}>22          <div {...stylex.props(styles.profileRow)}>23            <Avatar size="sm">24              <Avatar.Image alt="Jane" src={avatar} />25              <Avatar.Fallback delay={600}>JD</Avatar.Fallback>26            </Avatar>27            <div {...stylex.props(styles.text)}>28              <p {...stylex.props(styles.profileName)}>Jane Doe</p>29              <p {...stylex.props(styles.profileEmail)}>[email protected]</p>30            </div>31          </div>32        </div>33        <ActionItem label="Dashboard" />34        <ActionItem label="Profile" />35        <Menu.Item label="Settings">36          <div {...stylex.props(styles.itemRow)}>37            <MenuItem.Label>Settings</MenuItem.Label>38            <Gear {...stylex.props(styles.smallIcon)} />39          </div>40        </Menu.Item>41        <Menu.Item label="New project">42          <div {...stylex.props(styles.itemRow)}>43            <MenuItem.Label>Create Team</MenuItem.Label>44            <Persons {...stylex.props(styles.smallIcon)} />45          </div>46        </Menu.Item>47        <Menu.Item label="Logout" variant="danger">48          <div {...stylex.props(styles.itemRow)}>49            <MenuItem.Label>Log Out</MenuItem.Label>50            <ArrowRightFromSquare {...stylex.props(styles.smallDangerIcon)} />51          </div>52        </Menu.Item>53      </Popup>54    </Menu>55  );56}

1"use client";2
3// Adapted from HeroUI v3.2.6 long-press-trigger, Apache-2.0.4import { useEffect, useRef, useState } from "react";5import { Button, Menu } from "@lenso/ui";6import { ActionItem, Popup } from "./_shared";7
8export function LongPressTrigger() {9  const [open, setOpen] = useState(false);10  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);11  const pointerActive = useRef(false);12  const cancel = () => {13    clearTimeout(timer.current);14    timer.current = undefined;15  };16  useEffect(() => () => clearTimeout(timer.current), []);17  return (18    <Menu19      open={open}20      onOpenChange={(next, details) => {21        if (details.reason === "trigger-press" && pointerActive.current) return;22        setOpen(next);23      }}24    >25      <Menu.Trigger26        render={<Button aria-label="Menu" variant="secondary" />}27        onPointerDown={(event) => {28          if (event.button !== 0) return;29          pointerActive.current = true;30          cancel();31          timer.current = setTimeout(() => setOpen(true), 500);32        }}33        onPointerUp={cancel}34        onPointerCancel={cancel}35        onPointerLeave={cancel}36        onKeyDown={() => {37          pointerActive.current = false;38        }}39      >40        Long Press41      </Menu.Trigger>42      <Popup>43        <ActionItem label="New file" />44        <ActionItem label="Open file" />45        <ActionItem label="Save file" />46        <ActionItem label="Delete file" variant="danger" />47      </Popup>48    </Menu>49  );50}

1"use client";2
3// Adapted from HeroUI v3.2.6 custom-styles, Apache-2.0.4import { Button, Menu } from "@lenso/ui";5import { ActionItem, Popup, styles } from "./_shared";6
7export function CustomStyles() {8  return (9    <Menu>10      <Menu.Trigger render={<Button variant="secondary" />}>Actions</Menu.Trigger>11      <Popup xstyle={styles.customPopup}>12        <ActionItem label="Rename" xstyle={styles.customItem} />13        <ActionItem label="Duplicate" xstyle={styles.customItem} />14        <ActionItem label="Delete" variant="danger" xstyle={styles.customDangerItem} />15      </Popup>16    </Menu>17  );18}