@bothub-chat/ui/dist/components/menu/index.js

Bothub UI Components

import{__rest as e}from"tslib";import{jsx as t,jsxs as r}from"react/jsx-runtime";import n,{useState as o,useRef as i,useId as l,useCallback as s,useLayoutEffect as c,useEffect as d,useMemo as a}from"react";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import"../../utils/colors/calculateGrayScale.js";import"../../utils/colors/calculateAccentColors.js";import{findNearestScrollableParent as u}from"../../utils/findNearestScrollableParent.js";import{Button as p}from"../button/index.js";import{Portal as m}from"../portal/index.js";import{MenuContent as f,MenuContentScrollbarWrapper as v,MenuContentInner as g,MenuRoot as h,MenuTriggerWrapper as b}from"./styled.js";import{getMenuCoords as w}from"./utils/getMenuCoords.js";const C={top:0,left:0},E=E=>{var{children:O,trigger:P,buttonLabel:j="Меню",buttonProps:k,open:L,defaultOpen:W=!1,onOpenChange:x,closeOnContentClick:y=!1,closeOnScroll:N=!0,position:R="left",offset:S=8,viewportPadding:z=8,flip:A=!0,matchTriggerWidth:F=!1,disablePortal:T=!1,className:$}=E,B=e(E,["children","trigger","buttonLabel","buttonProps","open","defaultOpen","onOpenChange","closeOnContentClick","closeOnScroll","position","offset","viewportPadding","flip","matchTriggerWidth","disablePortal","className"]);const H=void 0!==L,[q,G]=o(W),M=H?L:q,[V,D]=o(C),[I,J]=o(!1),K=i(null),Q=i(null),U=i(null),X=l(),Y=l(),Z=s(e=>{H||G(e),null==x||x(e)},[H,x]),_=s(()=>{Z(!M)},[M,Z]),ee=s(()=>{var e;const t=K.current,r=Q.current;if(!t||!r)return!1;const n=t.getBoundingClientRect(),o=r.offsetWidth,i=r.offsetHeight;if(o<=0||i<=0)return!1;const l=w({triggerRect:n,dropdownWidth:o,dropdownHeight:i,position:R,offset:S,viewportPadding:z,flip:A,matchTriggerWidth:F});if(T&&Q.current){const t=Q.current.offsetParent,r=null!==(e=null==t?void 0:t.getBoundingClientRect())&&void 0!==e?e:{top:0,left:0};D(Object.assign({top:l.top-r.top,left:l.left-r.left},void 0!==l.minWidth&&{minWidth:l.minWidth}))}else D(l);return!0},[T,A,F,S,R,z]);c(()=>{if(!M)return J(!1),void D(C);J(!1);let e=0,t=0;const r=()=>{t+=1;ee()?J(!0):t<5&&(e=requestAnimationFrame(r))};return r(),()=>{cancelAnimationFrame(e)}},[M,ee]),d(()=>{var e;if(!M||!Q.current)return;const t=new ResizeObserver(()=>{ee()}),r=null!==(e=U.current)&&void 0!==e?e:Q.current;t.observe(r),Q.current&&Q.current!==r&&t.observe(Q.current);const n=()=>{ee()};return window.addEventListener("resize",n),window.addEventListener("scroll",n,!0),()=>{t.disconnect(),window.removeEventListener("resize",n),window.removeEventListener("scroll",n,!0)}},[M,ee]),d(()=>{if(!M)return;const e=e=>{var t,r;const n=e.target;(null===(t=K.current)||void 0===t?void 0:t.contains(n))||(null===(r=Q.current)||void 0===r?void 0:r.contains(n))||Z(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[M,Z]),d(()=>{if(!M)return;const e=e=>{"Escape"===e.key&&(e.stopPropagation(),Z(!1))};return document.addEventListener("keyup",e,!0),()=>{document.removeEventListener("keyup",e,!0)}},[M,Z]),d(()=>{if(!M||!N||!K.current)return;const e=u(K.current);if(!e)return;const t=()=>{Z(!1)};return e.addEventListener("scroll",t),()=>{e.removeEventListener("scroll",t)}},[N,M,Z]);const te=s(e=>{e.stopPropagation(),_()},[_]),re=a(()=>{var e;if(!P)return null;if(!n.isValidElement(P))return P;const t=P,r=t.props.onClick;return n.cloneElement(t,{id:null!==(e=t.props.id)&&void 0!==e?e:X,"aria-expanded":M,"aria-haspopup":"menu","aria-controls":M?Y:void 0,onClick:e=>{null==r||r(e),e.defaultPrevented||_()}})},[Y,M,_,P,X]),ne=T?n.Fragment:m,oe=M?t(f,{ref:Q,id:Y,role:"menu",$position:R,$disablePortal:T,$visible:I,style:Object.assign({top:V.top,left:V.left},void 0!==V.minWidth&&{minWidth:V.minWidth}),onClick:()=>{y&&Z(!1)},children:t(v,{children:t(g,{ref:U,children:O})})}):null;return r(h,Object.assign({className:$},B,{children:[t(b,{ref:K,children:null!=re?re:t(p,Object.assign({},k,{id:X,"aria-expanded":M,"aria-haspopup":"menu","aria-controls":M?Y:void 0,onClick:te,children:j}))}),oe&&t(ne,{children:oe})]}))};export{E as Menu};