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

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

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