koval-ui/dist/src/lib/Menu/Menu.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),f=require("classnames"),a=require("@floating-ui/react-dom"),m=require("css-vars-hook"),V=require("../../internal/Portal/Portal.cjs"),v=require("../../internal/hooks/useDismiss.cjs"),S=require("../../internal/hooks/useFocusTrap.cjs"),E=require("../../internal/hooks/useInternalRef.cjs"),s=require("./Menu.module.css.cjs"),o=require("./Variants.cjs"),P=["bottom","left","right","top","bottom-end","bottom-start","left-start","left-end","right-start","right-end","top-start","top-end"],h=t.forwardRef(({children:p,className:g,isOpen:i=!1,content:q,referenceClassName:b,onToggle:u=()=>{},trapFocus:j=!0,alignWidth:x=!0,variant:c=o.Variants.plain,allowedPlacements:R=P,...y},w)=>{const d=E.useInternalRef(w),[r,n]=t.useState(i);t.useEffect(()=>{n(i)},[i,n]),t.useEffect(()=>{u(r)},[r,u]);const{refs:l,floatingStyles:M}=a.useFloating({strategy:"fixed",whileElementsMounted:a.autoUpdate,middleware:[x&&a.size({apply({rects:O,elements:T}){Object.assign(T.floating.style,{width:`${O.reference.width}px`})}}),a.offset(18),a.autoPlacement({allowedPlacements:R})]}),{LocalRoot:N}=m.useLocalTheme(),{getTheme:D}=m.useRootTheme(),F=t.useCallback(()=>{n(!1)},[n]);return v.useDismiss(F,d,r),S.useFocusTrap(l.floating.current,r,j),e.jsxs(t.Fragment,{children:[e.jsx("div",{ref:l.setReference,className:f(s.default.reference,b),children:p}),r&&e.jsx(V.Portal,{children:e.jsx("div",{ref:l.setFloating,style:M,className:s.default.floating,children:e.jsx(N,{className:s.default.provider,theme:D(),children:e.jsx("div",{...y,ref:d,className:f(s.default.menu,{[s.default.bordered]:c===o.Variants.bordered,[s.default.plain]:c===o.Variants.plain},g),children:q})})})})]})});h.displayName="Menu";exports.Menu=h;
//# sourceMappingURL=Menu.cjs.map