@radix-ui/themes/dist/esm/components/dropdown-menu.js

[](https://radix-ui.com/themes)

"use client";import*as o from"react";import s from"classnames";import*as t from"@radix-ui/react-dropdown-menu";import{Slottable as W}from"@radix-ui/react-slot";import{ScrollArea as c}from"./scroll-area.js";import{dropdownMenuContentPropDefs as u,dropdownMenuItemPropDefs as L,dropdownMenuCheckboxItemPropDefs as O,dropdownMenuRadioItemPropDefs as V}from"./dropdown-menu.props.js";import{extractProps as P,requireReactElement as j}from"../helpers/index.js";import{Theme as f,useThemeContext as z}from"./theme.js";import{ChevronDownIcon as A,ThickCheckIcon as C,ThickChevronRightIcon as F}from"./icons.js";const I=e=>o.createElement(t.Root,{...e});I.displayName="DropdownMenu.Root";const h=o.forwardRef(({children:e,...r},n)=>o.createElement(t.Trigger,{...r,ref:n,asChild:!0},j(e)));h.displayName="DropdownMenu.Trigger";const b=o.createContext({}),g=o.forwardRef((e,r)=>{const n=z(),{size:d=u.size.default,variant:p=u.variant.default,highContrast:i=u.highContrast.default}=e,{className:a,children:m,color:M,container:w,forceMount:D,...k}=P(e,u),l=M||n.accentColor;return o.createElement(t.Portal,{container:w,forceMount:D},o.createElement(f,{asChild:!0},o.createElement(t.Content,{"data-accent-color":l,align:"start",sideOffset:4,collisionPadding:10,...k,asChild:!1,ref:r,className:s("rt-PopperContent","rt-BaseMenuContent","rt-DropdownMenuContent",a)},o.createElement(c,{type:"auto"},o.createElement("div",{className:s("rt-BaseMenuViewport","rt-DropdownMenuViewport")},o.createElement(b.Provider,{value:o.useMemo(()=>({size:d,variant:p,color:l,highContrast:i}),[d,p,l,i])},m))))))});g.displayName="DropdownMenu.Content";const y=o.forwardRef(({className:e,...r},n)=>o.createElement(t.Label,{...r,asChild:!1,ref:n,className:s("rt-BaseMenuLabel","rt-DropdownMenuLabel",e)}));y.displayName="DropdownMenu.Label";const v=o.forwardRef((e,r)=>{const{className:n,children:d,color:p=L.color.default,shortcut:i,...a}=e;return o.createElement(t.Item,{"data-accent-color":p,...a,ref:r,className:s("rt-reset","rt-BaseMenuItem","rt-DropdownMenuItem",n)},o.createElement(W,null,d),i&&o.createElement("div",{className:"rt-BaseMenuShortcut rt-DropdownMenuShortcut"},i))});v.displayName="DropdownMenu.Item";const R=o.forwardRef(({className:e,...r},n)=>o.createElement(t.Group,{...r,asChild:!1,ref:n,className:s("rt-BaseMenuGroup","rt-DropdownMenuGroup",e)}));R.displayName="DropdownMenu.Group";const S=o.forwardRef(({className:e,...r},n)=>o.createElement(t.RadioGroup,{...r,asChild:!1,ref:n,className:s("rt-BaseMenuRadioGroup","rt-DropdownMenuRadioGroup",e)}));S.displayName="DropdownMenu.RadioGroup";const x=o.forwardRef((e,r)=>{const{children:n,className:d,color:p=V.color.default,...i}=e;return o.createElement(t.RadioItem,{...i,asChild:!1,ref:r,"data-accent-color":p,className:s("rt-BaseMenuItem","rt-BaseMenuRadioItem","rt-DropdownMenuItem","rt-DropdownMenuRadioItem",d)},n,o.createElement(t.ItemIndicator,{className:"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator"},o.createElement(C,{className:"rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon"})))});x.displayName="DropdownMenu.RadioItem";const T=o.forwardRef((e,r)=>{const{children:n,className:d,shortcut:p,color:i=O.color.default,...a}=e;return o.createElement(t.CheckboxItem,{...a,asChild:!1,ref:r,"data-accent-color":i,className:s("rt-BaseMenuItem","rt-BaseMenuCheckboxItem","rt-DropdownMenuItem","rt-DropdownMenuCheckboxItem",d)},n,o.createElement(t.ItemIndicator,{className:"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator"},o.createElement(C,{className:"rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon"})),p&&o.createElement("div",{className:"rt-BaseMenuShortcut rt-DropdownMenuShortcut"},p))});T.displayName="DropdownMenu.CheckboxItem";const N=e=>o.createElement(t.Sub,{...e});N.displayName="DropdownMenu.Sub";const E=o.forwardRef((e,r)=>{const{className:n,children:d,...p}=e;return o.createElement(t.SubTrigger,{...p,asChild:!1,ref:r,className:s("rt-BaseMenuItem","rt-BaseMenuSubTrigger","rt-DropdownMenuItem","rt-DropdownMenuSubTrigger",n)},d,o.createElement("div",{className:"rt-BaseMenuShortcut rt-DropdownMenuShortcut"},o.createElement(F,{className:"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon"})))});E.displayName="DropdownMenu.SubTrigger";const G=o.forwardRef((e,r)=>{const{size:n,variant:d,color:p,highContrast:i}=o.useContext(b),{className:a,children:m,container:M,forceMount:w,...D}=P({size:n,variant:d,color:p,highContrast:i,...e},u);return o.createElement(t.Portal,{container:M,forceMount:w},o.createElement(f,{asChild:!0},o.createElement(t.SubContent,{"data-accent-color":p,alignOffset:-Number(n)*4,sideOffset:1,collisionPadding:10,...D,asChild:!1,ref:r,className:s("rt-PopperContent","rt-BaseMenuContent","rt-BaseMenuSubContent","rt-DropdownMenuContent","rt-DropdownMenuSubContent",a)},o.createElement(c,{type:"auto"},o.createElement("div",{className:s("rt-BaseMenuViewport","rt-DropdownMenuViewport")},m)))))});G.displayName="DropdownMenu.SubContent";const B=o.forwardRef(({className:e,...r},n)=>o.createElement(t.Separator,{...r,asChild:!1,ref:n,className:s("rt-BaseMenuSeparator","rt-DropdownMenuSeparator",e)}));B.displayName="DropdownMenu.Separator";export{T as CheckboxItem,g as Content,R as Group,v as Item,y as Label,S as RadioGroup,x as RadioItem,I as Root,B as Separator,N as Sub,G as SubContent,E as SubTrigger,h as Trigger,A as TriggerIcon};
//# sourceMappingURL=dropdown-menu.js.map