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

Completely unstyled, headless and accessible React UI components.

"use strict";var __assign=this&&this.__assign||function(){return __assign=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},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,i)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=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},__spreadArray=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))},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});var jsx_runtime_1=require("react/jsx-runtime"),React=__importStar(require("react")),FocusTrap_1=__importDefault(require("../FocusTrap")),internals_1=require("../internals"),Popper_1=__importDefault(require("../Popper")),utils_1=require("../utils"),context_1=__importDefault(require("./context")),slots_1=require("./slots"),makeRegisterItem=function(e){return function(t){t.current&&(e.some((function(e){return e.current===t.current}))||e.push(t))}},MenuBase=function(e,t){var r,n,i=e.id,u=e.className,l=e.children,a=e.alignment,o=void 0===a?"start":a,s=e.anchorElement,c=e.keepMounted,d=e.disabledKeySearch,f=void 0!==d&&d,_=e.open,v=void 0!==_&&_,p=e.onOutsideClick,m=e.onEscapeKeyUp,y=e.shouldActivateKeyboardNavigation,h=__rest(e,["id","className","children","alignment","anchorElement","keepMounted","disabledKeySearch","open","onOutsideClick","onEscapeKeyUp","shouldActivateKeyboardNavigation"]),g=React.useContext(context_1.default),b=React.useRef(null),R=(0,utils_1.useForkedRefs)(t,b),A=void 0===c?null!==(r=null==g?void 0:g.keepMounted)&&void 0!==r&&r:c,S=(0,utils_1.useDeterministicId)(i,"styleless-ui__menu"),k=React.useRef(void 0!==s).current,O=React.useState(null),x=O[0],j=O[1],M=React.useState(null),w=M[0],E=M[1],T=React.useState(v),I=T[0],P=T[1],K=null!==(n=(0,utils_1.useDirection)(b))&&void 0!==n?n:"ltr",D=React.useRef(!1),C=React.useRef(!1),F=React.useRef(!0),q=React.useRef(-1),L=React.useRef(),N=React.useRef([]),B=[],U=makeRegisterItem(B),G={ref:b,activeElement:x,activeSubTrigger:w,isMenuActive:I,keepMounted:A,shouldActivateFirstSubItemRef:D,setActiveSubTrigger:E,registerItem:U,setIsMenuActive:P,setActiveElement:function(e){null==g||g.setIsMenuActive(!1),j(e),E(null)}};if(React.useEffect((function(){v?P(!0):(j(null),P(!1),C.current=!1)}),[v]),"undefined"!=typeof document){(0,utils_1.useEventListener)({target:document,eventType:"click",handler:(0,utils_1.useEventCallback)((function(e){e.target&&b.current&&b.current!==e.target&&((0,utils_1.contains)(b.current,e.target)||(j(null),E(null),null==p||p(e)))}))},v&&I);var H=function(e){E(null!=e?e:x),P(!1),D.current=!0};(0,utils_1.useEventListener)({target:document,eventType:"keyup",handler:(0,utils_1.useEventCallback)((function(e){var t=[internals_1.SystemKeys.ENTER,internals_1.SystemKeys.SPACE].includes(e.key);e.key===L.current&&(F.current=!0),t&&x&&(x.click(),x.hasAttribute("aria-haspopup")&&H(x)),null==m||m(e)}))},v&&I),(0,utils_1.useEventListener)({target:document,eventType:"keydown",handler:(0,utils_1.useEventCallback)((function(e){var t,r,n,i,u,l,a,o;if(null==y||y){var s=internals_1.SystemKeys.UP===e.key,c=internals_1.SystemKeys.DOWN===e.key,d=("rtl"===K?internals_1.SystemKeys.LEFT:internals_1.SystemKeys.RIGHT)===e.key,_=("rtl"===K?internals_1.SystemKeys.RIGHT:internals_1.SystemKeys.LEFT)===e.key,v=!(s||c||d||_),p=function(e,t,r){var n;void 0===r&&(r=[]);var i=B[e];if(!i)return null;if(r.includes(e))return null;if("true"===(null===(n=i.current)||void 0===n?void 0:n.getAttribute("aria-disabled"))){var u=(t?e+1:e-1+B.length)%B.length;return p(u,t,__spreadArray(__spreadArray([],r,!0),[e],!1))}return i},m=null!=x?x:null;if(c||s){if(e.preventDefault(),g&&g.isMenuActive)return g.setActiveSubTrigger(null);var h=B.findIndex((function(e){return e.current===m}));c?m=null!==(r=null===(t=p((h+1)%B.length,!0))||void 0===t?void 0:t.current)&&void 0!==r?r:null:s&&(m=null!==(i=null===(n=p(((-1===h?0:h)-1+B.length)%B.length,!1))||void 0===n?void 0:n.current)&&void 0!==i?i:null)}if(null==m||m.scrollIntoView(!1),j(m),(null==m?void 0:m.hasAttribute("aria-haspopup"))&&d?H(m):g&&_&&(g.shouldActivateFirstSubItemRef.current=!1,g.setActiveElement(g.activeSubTrigger),g.setIsMenuActive(!0),g.setActiveSubTrigger(null)),v&&!f&&F.current){var b=L.current===e.key?N.current:B.reduce((function(t,r,n){var i,u;if("true"===(null===(i=r.current)||void 0===i?void 0:i.getAttribute("aria-disabled")))return t;var l=null===(u=r.current)||void 0===u?void 0:u.textContent;if((null==l?void 0:l.toLowerCase().trim()[0])===e.key.toLowerCase()){var a=[r,n];return __spreadArray(__spreadArray([],t,!0),[a],!1)}return t}),[]);if(b.length){var R=b.findIndex((function(e){return e[0].current===m})),A=void 0;A=R>=0?null===(u=b[(R+1)%b.length])||void 0===u?void 0:u[1]:null===(l=b[0])||void 0===l?void 0:l[1],j(void 0!==A&&null!==(o=null===(a=B[A])||void 0===a?void 0:a.current)&&void 0!==o?o:null)}F.current=!1,L.current=e.key,N.current=b,window.clearTimeout(q.current),q.current=window.setTimeout((function(){L.current=void 0,N.current=[]}),2e3)}}}))},v&&I)}var W=function(e){if(R(e),e&&v&&g&&g.shouldActivateFirstSubItemRef.current&&!C.current){var t=e.querySelector("[role*='menuitem']");t&&(j(t),C.current=!0)}},V=function(e){var t=e.overflow,r=e.elementRects,n=e.placement;if("rtl"===K){var i="middle"===o?"left":"left-".concat(o),u="middle"===o?"right":"right-".concat(o);return n===i?{placement:n}:t.left+r.popperRect.width<=0?{placement:i}:{placement:u}}i="middle"===o?"right":"right-".concat(o),u="middle"===o?"left":"left-".concat(o);return n===i?{placement:n}:t.right+r.popperRect.width<=0?{placement:i}:{placement:u}},z="function"==typeof l?l({open:v}):l,J="function"==typeof u?u({open:v}):u,Q=function(){return(0,jsx_runtime_1.jsx)(FocusTrap_1.default,__assign({enabled:v},{children:(0,jsx_runtime_1.jsx)("div",__assign({},h,{ref:W,id:S,"data-slot":slots_1.Root,className:J,tabIndex:-1,"data-open":v?"":void 0},{children:(0,jsx_runtime_1.jsx)(context_1.default.Provider,__assign({value:G},{children:z}))}))}))};return k?s?(0,jsx_runtime_1.jsx)(Popper_1.default,__assign({keepMounted:A,open:v,anchorElement:s,computationMiddlewareOrder:"afterAutoPlacement",computationMiddleware:V,offset:0,alignment:o,autoPlacement:{excludeSides:["top","bottom"]}},{children:Q()})):null:A||!A&&v?Q():null},Menu=(0,utils_1.componentWithForwardedRef)(MenuBase);exports.default=Menu;