Menu

1// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 dropdown-default (Apache-2.0).5import { Button, Menu } from "@lenso/ui";6import { ActionItem, Popup } from "../../en/menu/_shared";7export function Default() {8  return (9    <Menu>10      <Menu.Trigger render={<Button aria-label="菜单" variant="secondary" />}>操作</Menu.Trigger>11      <Popup>12        <ActionItem label="新建文件" onClick={() => console.log("Selected: new-file")} />13        <ActionItem label="复制链接" onClick={() => console.log("Selected: copy-link")} />14        <ActionItem label="编辑文件" onClick={() => console.log("Selected: edit-file")} />15        <ActionItem16          label="删除文件"17          variant="danger"18          onClick={() => console.log("Selected: delete-file")}19        />20      </Popup>21    </Menu>22  );23}

1// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-icons, Apache-2.0.5import { FloppyDisk, FolderOpen, SquarePlus, TrashBin } from "@gravity-ui/icons";6import * as stylex from "@stylexjs/stylex";7import { Button, Menu } from "@lenso/ui";8import { ActionItem, Popup, Shortcut, styles } from "../../en/menu/_shared";9export function WithIcons() {10  return (11    <Menu>12      <Menu.Trigger render={<Button aria-label="菜单" variant="secondary" />}>操作</Menu.Trigger>13      <Popup>14        <ActionItem15          label="新建文件"16          icon={<SquarePlus {...stylex.props(styles.icon)} />}17          shortcut={<Shortcut letter="N" />}18          onClick={() => console.log("Selected: new-file")}19        />20        <ActionItem21          label="打开文件"22          icon={<FolderOpen {...stylex.props(styles.icon)} />}23          shortcut={<Shortcut letter="O" />}24          onClick={() => console.log("Selected: open-file")}25        />26        <ActionItem27          label="保存文件"28          icon={<FloppyDisk {...stylex.props(styles.icon)} />}29          shortcut={<Shortcut letter="S" />}30          onClick={() => console.log("Selected: save-file")}31        />32        <ActionItem33          label="删除文件"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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-descriptions, Apache-2.0.5import { FloppyDisk, FolderOpen, SquarePlus, TrashBin } from "@gravity-ui/icons";6import * as stylex from "@stylexjs/stylex";7import { Button, Menu } from "@lenso/ui";8import { ActionItem, Popup, Shortcut, styles } from "../../en/menu/_shared";9export function WithDescriptions() {10  return (11    <Menu>12      <Menu.Trigger render={<Button aria-label="菜单" variant="secondary" />}>操作</Menu.Trigger>13      <Popup>14        <ActionItem15          label="新建文件"16          description="创建新文件"17          icon={<SquarePlus {...stylex.props(styles.icon)} />}18          shortcut={<Shortcut letter="N" />}19          onClick={() => console.log("Selected: new-file")}20        />21        <ActionItem22          label="打开文件"23          description="打开已有文件"24          icon={<FolderOpen {...stylex.props(styles.icon)} />}25          shortcut={<Shortcut letter="O" />}26          onClick={() => console.log("Selected: open-file")}27        />28        <ActionItem29          label="保存文件"30          description="保存当前文件"31          icon={<FloppyDisk {...stylex.props(styles.icon)} />}32          shortcut={<Shortcut letter="S" />}33          onClick={() => console.log("Selected: save-file")}34        />35        <ActionItem36          label="删除文件"37          description="移至废纸篓"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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-disabled-items, Apache-2.0.5import { Bars, Pencil, SquarePlus, TrashBin } from "@gravity-ui/icons";6import * as stylex from "@stylexjs/stylex";7import { Button, Menu } from "@lenso/ui";8import { ActionItem, Popup, Shortcut, styles } from "../../en/menu/_shared";9export function WithDisabledItems() {10  return (11    <Menu>12      <Menu.Trigger render={<Button isIconOnly aria-label="菜单" variant="secondary" />}>13        <Bars />14      </Menu.Trigger>15      <Popup xstyle={styles.disabledWidth}>16        <Menu.Section>17          <Menu.Section.Label>操作</Menu.Section.Label>18          <ActionItem19            label="新建文件"20            description="创建新文件"21            icon={<SquarePlus {...stylex.props(styles.icon)} />}22            shortcut={<Shortcut letter="N" />}23            onClick={() => console.log("Selected: new-file")}24          />25          <ActionItem26            label="编辑文件"27            description="进行修改"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>危险区域</Menu.Section.Label>36          <ActionItem37            disabled38            label="删除文件"39            description="移至废纸篓"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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-sections, Apache-2.0.5import { EllipsisVertical, Pencil, SquarePlus, TrashBin } from "@gravity-ui/icons";6import * as stylex from "@stylexjs/stylex";7import { Button, Menu } from "@lenso/ui";8import { ActionItem, Popup, Shortcut, styles } from "../../en/menu/_shared";9export function WithSections() {10  return (11    <Menu>12      <Menu.Trigger render={<Button isIconOnly aria-label="菜单" variant="secondary" />}>13        <EllipsisVertical />14      </Menu.Trigger>15      <Popup>16        <Menu.Section>17          <Menu.Section.Label>操作</Menu.Section.Label>18          <ActionItem19            label="新建文件"20            description="创建新文件"21            icon={<SquarePlus {...stylex.props(styles.icon)} />}22            shortcut={<Shortcut letter="N" />}23            onClick={() => console.log("Selected: new-file")}24          />25          <ActionItem26            label="编辑文件"27            description="进行修改"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>危险区域</Menu.Section.Label>36          <ActionItem37            label="删除文件"38            description="移至废纸篓"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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-multiple-selection, Apache-2.0.5import { useState } from "react";6import { Button, Menu, MenuItem } from "@lenso/ui";7import { Checkmark, Popup, styles } from "../../en/menu/_shared";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="菜单" variant="secondary" />}>37        喜爱的水果38      </Menu.Trigger>39      <Popup xstyle={styles.wide}>40        <Menu.Section>41          <Menu.Section.Label>选择水果</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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 controlled, Apache-2.0.5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { Button, Menu, MenuItem } from "@lenso/ui";8import { Checkmark, Popup, styles } from "../../en/menu/_shared";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        已选：{selectedItems.length > 0 ? selectedItems.join(", ") : "无"}17      </p>18      <Menu open={open} onOpenChange={setOpen}>19        <Menu.Trigger render={<Button aria-label="菜单" variant="secondary" />}>操作</Menu.Trigger>20        <Popup>21          {(["bold", "italic", "underline"] as const).map((value) => (22            <Menu.CheckboxItem23              key={value}24              checked={selected.has(value)}25              closeOnClick={false}26              onKeyDown={(event) => {27                if (event.key === "Enter") setOpen(false);28              }}29              onCheckedChange={(checked) =>30                setSelected((previous) => {31                  const next = new Set(previous);32                  if (checked) next.add(value);33                  else next.delete(value);34                  return next;35                })36              }37            >38              <MenuItem.Label>{value.charAt(0).toUpperCase() + value.slice(1)}</MenuItem.Label>39              <Menu.CheckboxItemIndicator keepMounted xstyle={styles.selectionIndicator}>40                <Checkmark />41              </Menu.CheckboxItemIndicator>42            </Menu.CheckboxItem>43          ))}44        </Popup>45      </Menu>46    </div>47  );48}

1// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 controlled-open-state, Apache-2.0.5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { Button, Menu } from "@lenso/ui";8import { ActionItem, Popup, styles } from "../../en/menu/_shared";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 ? "打开" : "关闭"}</strong>15      </p>16      <Menu open={open} onOpenChange={setOpen}>17        <Menu.Trigger render={<Button aria-label="菜单" variant="secondary" />}>操作</Menu.Trigger>18        <Popup>19          <ActionItem label="新建文件" />20          <ActionItem label="打开文件" />21          <ActionItem label="保存文件" />22          <ActionItem label="删除文件" variant="danger" />23        </Popup>24      </Menu>25    </div>26  );27}

1// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-single-selection, Apache-2.0.5import { useState } from "react";6import { Button, Menu, MenuItem } from "@lenso/ui";7import { Checkmark, Popup, styles } from "../../en/menu/_shared";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="菜单" variant="secondary" />}>水果</Menu.Trigger>21      <Popup xstyle={styles.wide}>22        <Menu.RadioGroup value={selected} onValueChange={setSelected}>23          <Menu.Section>24            <Menu.Section.Label>选择水果</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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 single-with-custom-indicator, Apache-2.0.5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { Button, Menu, MenuItem } from "@lenso/ui";8import { Popup, styles } from "../../en/menu/_shared";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="菜单" variant="secondary" />}>水果</Menu.Trigger>39      <Popup xstyle={styles.wide}>40        <Menu.RadioGroup value={selected} onValueChange={setSelected}>41          <Menu.Section>42            <Menu.Section.Label>选择水果</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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-section-level-selection, Apache-2.0.5import { useState } from "react";6import { Button, Menu, MenuItem } from "@lenso/ui";7import { ActionItem, Checkmark, Dotmark, Popup, Shortcut, styles } from "../../en/menu/_shared";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="菜单" variant="secondary" />}>样式</Menu.Trigger>15      <Popup xstyle={styles.wide}>16        <Menu.Section>17          <Menu.Section.Label>操作</Menu.Section.Label>18          <ActionItem label="剪切" shortcut={<Shortcut letter="X" />} />19          <ActionItem label="复制" shortcut={<Shortcut letter="C" />} />20          <ActionItem label="粘贴" shortcut={<Shortcut letter="U" />} />21        </Menu.Section>22        <Menu.Separator />23        <Menu.Section>24          <Menu.Section.Label>文本样式</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>文本对齐</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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-keyboard-shortcuts, Apache-2.0.5import { Button, Menu } from "@lenso/ui";6import { ActionItem, Popup, Shortcut } from "../../en/menu/_shared";7export function WithKeyboardShortcuts() {8  return (9    <Menu>10      <Menu.Trigger render={<Button aria-label="菜单" variant="secondary" />}>操作</Menu.Trigger>11      <Popup>12        <ActionItem13          label="新建"14          shortcut={<Shortcut letter="N" />}15          onClick={() => console.log("Selected: new")}16        />17        <ActionItem18          label="打开"19          shortcut={<Shortcut letter="O" />}20          onClick={() => console.log("Selected: open")}21        />22        <ActionItem23          label="保存"24          shortcut={<Shortcut letter="S" />}25          onClick={() => console.log("Selected: save")}26        />27        <ActionItem28          label="删除"29          variant="danger"30          shortcut={<Shortcut letter="D" shift />}31          onClick={() => console.log("Selected: delete")}32        />33      </Popup>34    </Menu>35  );36}

1// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-submenus, Apache-2.0.5import * as stylex from "@stylexjs/stylex";6import { Button, Menu, IconChevronRight, MenuItem } from "@lenso/ui";7import { ActionItem, Popup, styles } from "../../en/menu/_shared";8export function WithSubmenus() {9  return (10    <Menu>11      <Menu.Trigger render={<Button aria-label="菜单" variant="secondary" />}>分享</Menu.Trigger>12      <Popup>13        <ActionItem label="复制链接" 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="分享">22            <MenuItem.Label>其他</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>邮件</MenuItem.Label>34                <MenuItem.SubmenuIndicator>35                  <IconChevronRight {...stylex.props(styles.smallIcon)} />36                </MenuItem.SubmenuIndicator>37              </Menu.SubmenuTrigger>38              <Popup>39                <ActionItem label="工作邮箱" />40                <ActionItem label="个人邮箱" />41              </Popup>42            </Menu.SubmenuRoot>43          </Popup>44        </Menu.SubmenuRoot>45      </Popup>46    </Menu>47  );48}

1// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 with-custom-submenu-indicator, Apache-2.0.5import { ArrowRight } from "@gravity-ui/icons";6import * as stylex from "@stylexjs/stylex";7import { Button, Menu, IconChevronRight, MenuItem } from "@lenso/ui";8import { ActionItem, Popup, styles } from "../../en/menu/_shared";9export function WithCustomSubmenuIndicator() {10  return (11    <Menu>12      <Menu.Trigger render={<Button aria-label="菜单" variant="secondary" />}>分享</Menu.Trigger>13      <Popup>14        <ActionItem label="复制链接" onClick={() => console.log("Selected: copy-link")} />15        <ActionItem label="Facebook" onClick={() => console.log("Selected: facebook")} />16        <Menu.SubmenuRoot>17          <Menu.SubmenuTrigger label="分享">18            <MenuItem.Label>更多选项</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>邮件</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="工作邮箱" />46                <ActionItem label="个人邮箱" />47              </Popup>48            </Menu.SubmenuRoot>49            <ActionItem label="Discord" />50          </Popup>51        </Menu.SubmenuRoot>52        <Menu.SubmenuRoot>53          <Menu.SubmenuTrigger label="其他">54            <MenuItem.Label>其他（默认指示器）</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// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 custom-trigger, Apache-2.0; original avatar asset retained.5import { ArrowRightFromSquare, Gear, Persons } from "@gravity-ui/icons";6import * as stylex from "@stylexjs/stylex";7import { Avatar, Menu, MenuItem } from "@lenso/ui";8import { ActionItem, Popup, styles } from "../../en/menu/_shared";9const avatar = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg";10export function CustomTrigger() {11  return (12    <Menu>13      <Menu.Trigger xstyle={styles.round} aria-label="Account menu">14        <Avatar>15          <Avatar.Image alt="Junior Garcia" src={avatar} />16          <Avatar.Fallback delay={600}>JD</Avatar.Fallback>17        </Avatar>18      </Menu.Trigger>19      <Popup>20        <div {...stylex.props(styles.profile)}>21          <div {...stylex.props(styles.profileRow)}>22            <Avatar size="sm">23              <Avatar.Image alt="Jane" src={avatar} />24              <Avatar.Fallback delay={600}>JD</Avatar.Fallback>25            </Avatar>26            <div {...stylex.props(styles.text)}>27              <p {...stylex.props(styles.profileName)}>Jane Doe</p>28              <p {...stylex.props(styles.profileEmail)}>[email protected]</p>29            </div>30          </div>31        </div>32        <ActionItem label="仪表盘" />33        <ActionItem label="个人资料" />34        <Menu.Item label="设置">35          <div {...stylex.props(styles.itemRow)}>36            <MenuItem.Label>设置</MenuItem.Label>37            <Gear {...stylex.props(styles.smallIcon)} />38          </div>39        </Menu.Item>40        <Menu.Item label="新建项目">41          <div {...stylex.props(styles.itemRow)}>42            <MenuItem.Label>创建团队</MenuItem.Label>43            <Persons {...stylex.props(styles.smallIcon)} />44          </div>45        </Menu.Item>46        <Menu.Item label="退出登录" variant="danger">47          <div {...stylex.props(styles.itemRow)}>48            <MenuItem.Label>退出登录</MenuItem.Label>49            <ArrowRightFromSquare {...stylex.props(styles.smallDangerIcon)} />50          </div>51        </Menu.Item>52      </Popup>53    </Menu>54  );55}

1// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 long-press-trigger, Apache-2.0.5import { useEffect, useRef, useState } from "react";6import { Button, Menu } from "@lenso/ui";7import { ActionItem, Popup } from "../../en/menu/_shared";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="菜单" 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        长按41      </Menu.Trigger>42      <Popup>43        <ActionItem label="新建文件" />44        <ActionItem label="打开文件" />45        <ActionItem label="保存文件" />46        <ActionItem label="删除文件" variant="danger" />47      </Popup>48    </Menu>49  );50}

1// Generated from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e); Apache-2.0.2"use client";3
4// Adapted from HeroUI v3.2.6 custom-styles, Apache-2.0.5import { Button, Menu } from "@lenso/ui";6import { ActionItem, Popup, styles } from "../../en/menu/_shared";7export function CustomStyles() {8  return (9    <Menu>10      <Menu.Trigger render={<Button variant="secondary" />}>操作</Menu.Trigger>11      <Popup xstyle={styles.customPopup}>12        <ActionItem label="重命名" xstyle={styles.customItem} />13        <ActionItem label="复制" xstyle={styles.customItem} />14        <ActionItem label="删除" variant="danger" xstyle={styles.customDangerItem} />15      </Popup>16    </Menu>17  );18}