@styleless-ui/react/esm/Menu/Menu.js

Completely unstyled, headless and accessible React UI components.

var e=this&&this.__assign||function(){return e=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},e.apply(this,arguments)},t=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r},r=this&&this.__spreadArray||function(e,t,r){if(r||2===arguments.length)for(var n,i=0,u=t.length;i<u;i++)!n&&i in t||(n||(n=Array.prototype.slice.call(t,0,i)),n[i]=t[i]);return e.concat(n||Array.prototype.slice.call(t))};import{jsx as n}from"react/jsx-runtime";import*as i from"react";import u from"../FocusTrap";import{SystemKeys as l}from"../internals";import o from"../Popper";import{componentWithForwardedRef as c,contains as a,useDeterministicId as d,useDirection as s,useEventCallback as f,useEventListener as v,useForkedRefs as p}from"../utils";import m from"./context";import{Root as h}from"./slots";var g=c((function(c,g){var y,b,A=c.id,k=c.className,R=c.children,S=c.alignment,w=void 0===S?"start":S,O=c.anchorElement,T=c.keepMounted,E=c.disabledKeySearch,I=void 0!==E&&E,x=c.open,M=void 0!==x&&x,P=c.onOutsideClick,j=c.onEscapeKeyUp,_=c.shouldActivateKeyboardNavigation,C=t(c,["id","className","children","alignment","anchorElement","keepMounted","disabledKeySearch","open","onOutsideClick","onEscapeKeyUp","shouldActivateKeyboardNavigation"]),N=i.useContext(m),F=i.useRef(null),K=p(g,F),L=void 0===T?null!==(y=null==N?void 0:N.keepMounted)&&void 0!==y&&y:T,U=d(A,"styleless-ui__menu"),D=i.useRef(void 0!==O).current,G=i.useState(null),H=G[0],q=G[1],V=i.useState(null),W=V[0],z=V[1],B=i.useState(M),J=B[0],Q=B[1],X=null!==(b=s(F))&&void 0!==b?b:"ltr",Y=i.useRef(!1),Z=i.useRef(!1),$=i.useRef(!0),ee=i.useRef(-1),te=i.useRef(),re=i.useRef([]),ne=[],ie=function(e){return function(t){t.current&&(e.some((function(e){return e.current===t.current}))||e.push(t))}}(ne),ue={ref:F,activeElement:H,activeSubTrigger:W,isMenuActive:J,keepMounted:L,shouldActivateFirstSubItemRef:Y,setActiveSubTrigger:z,registerItem:ie,setIsMenuActive:Q,setActiveElement:function(e){null==N||N.setIsMenuActive(!1),q(e),z(null)}};if(i.useEffect((function(){M?Q(!0):(q(null),Q(!1),Z.current=!1)}),[M]),"undefined"!=typeof document){v({target:document,eventType:"click",handler:f((function(e){e.target&&F.current&&F.current!==e.target&&(a(F.current,e.target)||(q(null),z(null),null==P||P(e)))}))},M&&J);var le=function(e){z(null!=e?e:H),Q(!1),Y.current=!0};v({target:document,eventType:"keyup",handler:f((function(e){var t=[l.ENTER,l.SPACE].includes(e.key);e.key===te.current&&($.current=!0),t&&H&&(H.click(),H.hasAttribute("aria-haspopup")&&le(H)),null==j||j(e)}))},M&&J),v({target:document,eventType:"keydown",handler:f((function(e){var t,n,i,u,o,c,a,d;if(null==_||_){var s=l.UP===e.key,f=l.DOWN===e.key,v=("rtl"===X?l.LEFT:l.RIGHT)===e.key,p=("rtl"===X?l.RIGHT:l.LEFT)===e.key,m=!(s||f||v||p),h=function(e,t,n){var i;void 0===n&&(n=[]);var u=ne[e];if(!u)return null;if(n.includes(e))return null;if("true"===(null===(i=u.current)||void 0===i?void 0:i.getAttribute("aria-disabled"))){var l=(t?e+1:e-1+ne.length)%ne.length;return h(l,t,r(r([],n,!0),[e],!1))}return u},g=null!=H?H:null;if(f||s){if(e.preventDefault(),N&&N.isMenuActive)return N.setActiveSubTrigger(null);var y=ne.findIndex((function(e){return e.current===g}));f?g=null!==(n=null===(t=h((y+1)%ne.length,!0))||void 0===t?void 0:t.current)&&void 0!==n?n:null:s&&(g=null!==(u=null===(i=h(((-1===y?0:y)-1+ne.length)%ne.length,!1))||void 0===i?void 0:i.current)&&void 0!==u?u:null)}if(null==g||g.scrollIntoView(!1),q(g),(null==g?void 0:g.hasAttribute("aria-haspopup"))&&v?le(g):N&&p&&(N.shouldActivateFirstSubItemRef.current=!1,N.setActiveElement(N.activeSubTrigger),N.setIsMenuActive(!0),N.setActiveSubTrigger(null)),m&&!I&&$.current){var b=te.current===e.key?re.current:ne.reduce((function(t,n,i){var u,l;if("true"===(null===(u=n.current)||void 0===u?void 0:u.getAttribute("aria-disabled")))return t;var o=null===(l=n.current)||void 0===l?void 0:l.textContent;if((null==o?void 0:o.toLowerCase().trim()[0])===e.key.toLowerCase()){var c=[n,i];return r(r([],t,!0),[c],!1)}return t}),[]);if(b.length){var A=b.findIndex((function(e){return e[0].current===g})),k=void 0;k=A>=0?null===(o=b[(A+1)%b.length])||void 0===o?void 0:o[1]:null===(c=b[0])||void 0===c?void 0:c[1],q(void 0!==k&&null!==(d=null===(a=ne[k])||void 0===a?void 0:a.current)&&void 0!==d?d:null)}$.current=!1,te.current=e.key,re.current=b,window.clearTimeout(ee.current),ee.current=window.setTimeout((function(){te.current=void 0,re.current=[]}),2e3)}}}))},M&&J)}var oe=function(e){if(K(e),e&&M&&N&&N.shouldActivateFirstSubItemRef.current&&!Z.current){var t=e.querySelector("[role*='menuitem']");t&&(q(t),Z.current=!0)}},ce=function(e){var t=e.overflow,r=e.elementRects,n=e.placement;if("rtl"===X){var i="middle"===w?"left":"left-".concat(w),u="middle"===w?"right":"right-".concat(w);return n===i?{placement:n}:t.left+r.popperRect.width<=0?{placement:i}:{placement:u}}i="middle"===w?"right":"right-".concat(w),u="middle"===w?"left":"left-".concat(w);return n===i?{placement:n}:t.right+r.popperRect.width<=0?{placement:i}:{placement:u}},ae="function"==typeof R?R({open:M}):R,de="function"==typeof k?k({open:M}):k,se=function(){return n(u,e({enabled:M},{children:n("div",e({},C,{ref:oe,id:U,"data-slot":h,className:de,tabIndex:-1,"data-open":M?"":void 0},{children:n(m.Provider,e({value:ue},{children:ae}))}))}))};return D?O?n(o,e({keepMounted:L,open:M,anchorElement:O,computationMiddlewareOrder:"afterAutoPlacement",computationMiddleware:ce,offset:0,alignment:w,autoPlacement:{excludeSides:["top","bottom"]}},{children:se()})):null:L||!L&&M?se():null}));export default g;