UNPKG

monday-ui-react-core

Version:

Official monday.com UI resources for application development in React.js

3 lines (2 loc) 5.43 kB
import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as t,useRef as n,useState as r,useCallback as s,useMemo as a}from"react";import d from"classnames";import{camelCase as l}from"lodash-es";import{isForwardRef as p}from"react-is";import c from"../Dialog/Dialog.js";import g from"../DialogContentContainer/DialogContentContainer.js";import m from"../Tooltip/Tooltip.js";import u from"../../hooks/ssr/useIsomorphicLayoutEffect.js";import{backwardCompatibilityForProperties as f}from"../../helpers/backwardCompatibilityForProperties.js";import h from"../../hooks/useMergeRef.js";import{BUTTON_ICON_SIZE as T}from"../Button/ButtonConstants.js";import{withStaticProps as E}from"../../types/withStaticProps.js";import{MenuButtonSize as C,MenuButtonComponentPosition as v}from"./MenuButtonConstants.js";import{AnimationType as S}from"../../constants/dialog.js";import"../../constants/sizes.js";import"../../constants/positions.js";import{HideShowEvent as w}from"../Dialog/consts/dialog-show-hide-event.js";import{NOOP as j}from"../../utils/function-utils.js";import{getStyle as M}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as P,ComponentDefaultTestId as O}from"../../tests/testIds.js";import b from"./MenuButton.module.scss.js";import y from"../Icon/Icons/components/Menu.js";var I=[m.hideShowTriggers.MOUSE_ENTER],N=[w.CLICK,w.ENTER],A=[],D={main:8,secondary:0},R=t((function(t,E){var v=t.id,w=t.className,_=t.componentClassName,z=t.openDialogComponentClassName,L=t.children,B=t.component,H=void 0===B?y:B,K=t.componentPosition,U=void 0===K?R.componentPositions.START:K,k=t.size,x=void 0===k?C.SMALL:k,Y=t.open,F=void 0!==Y&&Y,W=t.onClick,X=void 0===W?j:W,V=t.zIndex,G=void 0===V?null:V,q=t.ariaLabel,J=void 0===q?"Menu":q,Q=t.closeDialogOnContentClick,Z=void 0!==Q&&Q,$=t.closeMenuOnItemClick,ee=t.dialogOffset,oe=void 0===ee?D:ee,ie=t.dialogPosition,te=void 0===ie?c.positions.BOTTOM_START:ie,ne=t.dialogClassName,re=t.dialogPaddingSize,se=void 0===re?g.sizes.MEDIUM:re,ae=t.dialogShowTriggerIgnoreClass,de=t.dialogHideTriggerIgnoreClass,le=t.onMenuHide,pe=void 0===le?j:le,ce=t.onMenuShow,ge=void 0===ce?j:ce,me=t.disabled,ue=void 0!==me&&me,fe=t.text,he=t.tooltipContent,Te=t.tooltipProps,Ee=t.disabledReason,Ce=t.tooltipTriggers,ve=void 0===Ce?[R.hideTriggers.MOUSE_LEAVE]:Ce,Se=t.tooltipPosition,we=void 0===Se?R.dialogPositions.RIGHT:Se,je=t.startingEdge,Me=void 0===je?"bottom":je,Pe=t.removeTabCloseTrigger,Oe=void 0!==Pe&&Pe,be=t.tooltipReferenceClassName,ye=t.hideWhenReferenceHidden,Ie=void 0!==ye&&ye,Ne=t.dialogContainerSelector,Ae=t.active,De=t.triggerElement,Re=void 0===De?"button":De,_e=t.showTooltipOnlyOnTriggerElement,ze=t["data-testid"],Le=n(null),Be=h(E,Le),He=r(F),Ke=e(He,2),Ue=Ke[0],ke=Ke[1],xe=null!=Ae?Ae:Ue,Ye=s((function(e){pe(),ke(!1);var o=Le.current;o&&e&&window.requestAnimationFrame((function(){o.focus()}))}),[pe]),Fe=s((function(e){var o="Escape"===(null==e?void 0:e.key);(o||$)&&e.propagate&&Ye(o)}),[$,Ye]),We=s((function(e,o){Ye(o===c.hideShowTriggers.ESCAPE_KEY)}),[Ye]),Xe=s((function(){ke(!0),ge()}),[ke,ge]),Ve=a((function(){var e=new Set([c.hideShowTriggers.CLICK_OUTSIDE,c.hideShowTriggers.TAB_KEY,c.hideShowTriggers.ESCAPE_KEY]);return Z&&(e.add(c.hideShowTriggers.CONTENT_CLICK),e.add(c.hideShowTriggers.ENTER)),Oe&&e.delete(c.hideShowTriggers.TAB_KEY),[i.Children.toArray(L).map((function(o){if(!i.isValidElement(o))return null;var t={};return o.type&&o.type.supportFocusOnMount&&(t.focusOnMount=!0,e.delete(c.hideShowTriggers.ESCAPE_KEY)),o.type&&o.type.isMenu&&(t.onClose=Fe),i.cloneElement(o,t)})),Array.from(e)]}),[L,Fe,Z,Oe]),Ge=e(Ve,2),qe=Ge[0],Je=Ge[1],Qe=a((function(){return 0===qe.length?null:i.createElement(g,{size:se,type:g.types.POPOVER},qe)}),[qe,se]),Ze=a((function(){return Object.assign(Object.assign({},D),oe)}),[oe]),$e=H,eo=a((function(){switch(x){case C.XXS:case C.XS:return 16;case C.SMALL:case C.MEDIUM:case C.LARGE:return T;default:return 24}}),[x]),oo=$e?i.createElement($e,{size:""+eo,role:"img","aria-hidden":"true"}):null;u((function(){ke(F)}),[F,ke]);var io=f([he,Ee]),to=f([w,_]),no="button"===Re?{ref:Be}:{active:xe,disabled:ue,ref:p(Re)?Be:void 0},ro=i.createElement(Re,Object.assign({id:v,"data-testid":ze||P(O.MENU_BUTTON,v),type:"button",className:d(b.wrapper,to,M(b,l("size-".concat(x))),o(o(o(o({},b.active,xe),M(b,z),Ue&&z),b.disabled,ue),b.text,fe)),"aria-haspopup":"true","aria-expanded":Ue,"aria-label":!fe&&J,onMouseUp:function(e){ue?e.currentTarget.blur():X(e)},"aria-disabled":ue},no),U===R.componentPositions.START&&oo,fe&&i.createElement("span",{className:b.innerText},fe),U===R.componentPositions.END&&oo),so=function(e){return i.createElement(c,{wrapperClassName:ne,position:te,containerSelector:Ne,startingEdge:Me,animationType:S.EXPAND,content:Qe,moveBy:Ze,showTrigger:ue?A:N,hideTrigger:Je,showTriggerIgnoreClass:ae,hideTriggerIgnoreClass:de,useDerivedStateFromProps:!0,onDialogDidShow:Xe,onDialogDidHide:We,zIndex:G,isOpen:Ue,hideWhenReferenceHidden:Ie},e)},ao=function(e){return i.createElement(m,Object.assign({content:io,position:we,showTrigger:I,hideTrigger:ve,referenceWrapperClassName:be,hideWhenReferenceHidden:Ie},Te),e)};return _e?so(ao(ro)):ao(so(ro))})),_=E(R,{sizes:C,paddingSizes:g.sizes,dialogPositions:c.positions,hideTriggers:c.hideShowTriggers,componentPositions:v});export{_ as default}; //# sourceMappingURL=MenuButton.js.map