Dropdown

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

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, Dropdown } from "@lenso/ui";7import { ActionItem, Popup, Shortcut, styles } from "./_shared";8
9export function WithIcons() {10  return (11    <Dropdown>12      <Dropdown.Trigger render={<Button aria-label="Menu" variant="secondary" />}>13        Actions14      </Dropdown.Trigger>15      <Popup>16        <ActionItem17          label="New file"18          icon={<SquarePlus {...stylex.props(styles.icon)} />}19          shortcut={<Shortcut letter="N" />}20          onClick={() => console.log("Selected: new-file")}21        />22        <ActionItem23          label="Open 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          icon={<FloppyDisk {...stylex.props(styles.icon)} />}31          shortcut={<Shortcut letter="S" />}32          onClick={() => console.log("Selected: save-file")}33        />34        <ActionItem35          label="Delete file"36          variant="danger"37          icon={<TrashBin {...stylex.props(styles.dangerIcon)} />}38          shortcut={<Shortcut letter="D" shift />}39          onClick={() => console.log("Selected: delete-file")}40        />41      </Popup>42    </Dropdown>43  );44}

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, Dropdown } from "@lenso/ui";7import { ActionItem, Popup, Shortcut, styles } from "./_shared";8
9export function WithDescriptions() {10  return (11    <Dropdown>12      <Dropdown.Trigger render={<Button aria-label="Menu" variant="secondary" />}>13        Actions14      </Dropdown.Trigger>15      <Popup>16        <ActionItem17          label="New file"18          description="Create a new file"19          icon={<SquarePlus {...stylex.props(styles.icon)} />}20          shortcut={<Shortcut letter="N" />}21          onClick={() => console.log("Selected: new-file")}22        />23        <ActionItem24          label="Open file"25          description="Open an existing file"26          icon={<FolderOpen {...stylex.props(styles.icon)} />}27          shortcut={<Shortcut letter="O" />}28          onClick={() => console.log("Selected: open-file")}29        />30        <ActionItem31          label="Save file"32          description="Save the current file"33          icon={<FloppyDisk {...stylex.props(styles.icon)} />}34          shortcut={<Shortcut letter="S" />}35          onClick={() => console.log("Selected: save-file")}36        />37        <ActionItem38          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      </Popup>46    </Dropdown>47  );48}

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, Dropdown } from "@lenso/ui";7import { ActionItem, Popup, Shortcut, styles } from "./_shared";8
9export function WithDisabledItems() {10  return (11    <Dropdown>12      <Dropdown.Trigger render={<Button isIconOnly aria-label="Menu" variant="secondary" />}>13        <Bars />14      </Dropdown.Trigger>15      <Popup xstyle={styles.disabledWidth}>16        <Dropdown.Section>17          <Dropdown.Section.Label>Actions</Dropdown.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        </Dropdown.Section>33        <Dropdown.Separator />34        <Dropdown.Section>35          <Dropdown.Section.Label>Danger zone</Dropdown.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        </Dropdown.Section>46      </Popup>47    </Dropdown>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, Dropdown } from "@lenso/ui";7import { ActionItem, Popup, Shortcut, styles } from "./_shared";8
9export function WithSections() {10  return (11    <Dropdown>12      <Dropdown.Trigger render={<Button isIconOnly aria-label="Menu" variant="secondary" />}>13        <EllipsisVertical />14      </Dropdown.Trigger>15      <Popup>16        <Dropdown.Section>17          <Dropdown.Section.Label>Actions</Dropdown.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        </Dropdown.Section>33        <Dropdown.Separator />34        <Dropdown.Section>35          <Dropdown.Section.Label>Danger zone</Dropdown.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        </Dropdown.Section>45      </Popup>46    </Dropdown>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, Dropdown, 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    <Dropdown.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      <Dropdown.CheckboxItemIndicator keepMounted xstyle={styles.selectionIndicator}>29        <Checkmark />30      </Dropdown.CheckboxItemIndicator>31      <MenuItem.Label>{label}</MenuItem.Label>32    </Dropdown.CheckboxItem>33  );34  return (35    <Dropdown open={open} onOpenChange={setOpen}>36      <Dropdown.Trigger render={<Button aria-label="Menu" variant="secondary" />}>37        Preferred Fruits38      </Dropdown.Trigger>39      <Popup xstyle={styles.wide}>40        <Dropdown.Section>41          <Dropdown.Section.Label>Select a fruit</Dropdown.Section.Label>42          {fruit("apple", "Apple")}43          {fruit("banana", "Banana")}44          {fruit("cherry", "Cherry")}45        </Dropdown.Section>46        {fruit("orange", "Orange")}47        {fruit("pear", "Pear")}48      </Popup>49    </Dropdown>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, Dropdown, 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      <Dropdown open={open} onOpenChange={setOpen}>19        <Dropdown.Trigger render={<Button aria-label="Menu" variant="secondary" />}>20          Actions21        </Dropdown.Trigger>22        <Popup>23          {(["bold", "italic", "underline"] as const).map((value) => (24            <Dropdown.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              <Dropdown.CheckboxItemIndicator keepMounted xstyle={styles.selectionIndicator}>42                <Checkmark />43              </Dropdown.CheckboxItemIndicator>44            </Dropdown.CheckboxItem>45          ))}46        </Popup>47      </Dropdown>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, Dropdown } 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        Dropdown is: <strong>{open ? "open" : "closed"}</strong>15      </p>16      <Dropdown open={open} onOpenChange={setOpen}>17        <Dropdown.Trigger render={<Button aria-label="Menu" variant="secondary" />}>18          Actions19        </Dropdown.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      </Dropdown>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, Dropdown, 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    <Dropdown.RadioItem key={value} value={value} closeOnClick>12      <Dropdown.RadioItemIndicator keepMounted xstyle={styles.selectionIndicator}>13        <Checkmark />14      </Dropdown.RadioItemIndicator>15      <MenuItem.Label>{label}</MenuItem.Label>16    </Dropdown.RadioItem>17  );18  return (19    <Dropdown>20      <Dropdown.Trigger render={<Button aria-label="Menu" variant="secondary" />}>21        Fruit22      </Dropdown.Trigger>23      <Popup xstyle={styles.wide}>24        <Dropdown.RadioGroup value={selected} onValueChange={setSelected}>25          <Dropdown.Section>26            <Dropdown.Section.Label>Select a fruit</Dropdown.Section.Label>27            {fruit("apple", "Apple")}28            {fruit("banana", "Banana")}29            {fruit("cherry", "Cherry")}30          </Dropdown.Section>31          {fruit("orange", "Orange")}32          {fruit("pear", "Pear")}33        </Dropdown.RadioGroup>34      </Popup>35    </Dropdown>36  );37}

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, Dropdown, 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    <Dropdown.RadioItem key={value} value={value} closeOnClick>30      <Dropdown.RadioItemIndicator keepMounted xstyle={styles.selectionIndicator}>31        {customCheckmarkIcon}32      </Dropdown.RadioItemIndicator>33      <MenuItem.Label>{label}</MenuItem.Label>34    </Dropdown.RadioItem>35  );36  return (37    <Dropdown>38      <Dropdown.Trigger render={<Button aria-label="Menu" variant="secondary" />}>39        Fruits40      </Dropdown.Trigger>41      <Popup xstyle={styles.wide}>42        <Dropdown.RadioGroup value={selected} onValueChange={setSelected}>43          <Dropdown.Section>44            <Dropdown.Section.Label>Select a fruit</Dropdown.Section.Label>45            {fruit("apple", "Apple")}46            {fruit("banana", "Banana")}47            {fruit("cherry", "Cherry")}48          </Dropdown.Section>49          {fruit("orange", "Orange")}50          {fruit("pear", "Pear")}51        </Dropdown.RadioGroup>52      </Popup>53    </Dropdown>54  );55}

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

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

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

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

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, Dropdown, 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    <Dropdown>14      <Dropdown.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      </Dropdown.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        <Dropdown.Item label="Settings">36          <div {...stylex.props(styles.itemRow)}>37            <MenuItem.Label>Settings</MenuItem.Label>38            <Gear {...stylex.props(styles.smallIcon)} />39          </div>40        </Dropdown.Item>41        <Dropdown.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        </Dropdown.Item>47        <Dropdown.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        </Dropdown.Item>53      </Popup>54    </Dropdown>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, Dropdown } 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    <Dropdown19      open={open}20      onOpenChange={(next, details) => {21        if (details.reason === "trigger-press" && pointerActive.current) return;22        setOpen(next);23      }}24    >25      <Dropdown.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      </Dropdown.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    </Dropdown>49  );50}

1"use client";2
3// Adapted from HeroUI v3.2.6 custom-styles, Apache-2.0.4import { Button, Dropdown } from "@lenso/ui";5import { ActionItem, Popup, styles } from "./_shared";6
7export function CustomStyles() {8  return (9    <Dropdown>10      <Dropdown.Trigger render={<Button variant="secondary" />}>Actions</Dropdown.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    </Dropdown>17  );18}