azure-devops-ui/Components/TooltipEx/Tooltip.min.js

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Tooltip.css";import*as React from"react";import{Callout}from"../../Callout";import{FocusWithin}from"../../FocusWithin";import{MouseWithin}from"../../MouseWithin";import{css,getFocusVisible,getSafeId,KeyCode,Mouse}from"../../Util";import{Location}from"../../Utilities/Position";!function(t){t[t.hidden=0]="hidden",t[t.visible=1]="visible",t[t.fadingout=2]="fadingout"}(TooltipStatus=TooltipStatus||{});var TooltipStatus,tooltipId=1,Tooltip=function(o){function t(t){var e=o.call(this,t)||this;return e.contentRef=React.createRef(),e.tooltipId="tooltip-".concat(tooltipId++),e.focus=!1,e.mouse=!1,e.showTooltip=function(t){var o,t=t.currentTarget;e.shouldShowTooltip(t)&&(o=void 0,e.props.anchorOrigin||(o=Mouse.position),e.mouse=!0,document.addEventListener("keydown",e.onKeyDown),e.setState({anchorElement:t,anchorOffset:{horizontal:8,vertical:8},anchorOrigin:{horizontal:Location.center,vertical:Location.end},anchorPoint:o,innerText:e.props.overflowOnly&&!e.props.text?t.innerText:void 0,tooltipStatus:TooltipStatus.visible,tooltipOrigin:{horizontal:Location.start,vertical:Location.start}}))},e.closeTooltip=function(){e.focus&&getFocusVisible()||e.state.tooltipStatus!==TooltipStatus.visible||(e.mouse=!1,document.removeEventListener("keydown",e.onKeyDown),e.setState({tooltipStatus:e.getDismissStatus()}))},e.onKeyDown=function(t){var o;t.which===KeyCode.escape&&e.state.tooltipStatus===TooltipStatus.visible&&e.closeTooltip(),t.which===KeyCode.ctrl&&e.state.tooltipStatus===TooltipStatus.visible&&(t=e.contentRef.current,o=null==(o=window.getSelection())?void 0:o.anchorNode,t&&o&&t.contains(o)||e.closeTooltip())},e.onAnimationEnd=function(){e.state.tooltipStatus===TooltipStatus.fadingout&&e.setState({tooltipStatus:TooltipStatus.hidden})},e.getDismissStatus=function(){return e.props.disabled?TooltipStatus.hidden:TooltipStatus.fadingout},e.shouldShowTooltip=function(t){return e.state.tooltipStatus===TooltipStatus.hidden&&!(e.props.overflowOnly&&!e.overflowDetected(t)||!(e.props.text||e.props.renderContent||t.innerText&&e.props.overflowOnly)||e.props.disabled)},e.overflowDetected=t.overflowDetected||overflowDetected,e.state={tooltipStatus:TooltipStatus.hidden},e}return __extends(t,o),t.prototype.render=function(){var u=this;return React.createElement(MouseWithin,{leaveDelay:50,enterDelay:this.props.delayMs,onMouseLeave:this.closeTooltip,onMouseEnter:this.showTooltip},function(o){var t,e,n=React.Children.only(u.props.children),i=u.props.id||u.tooltipId,s=u.state.tooltipStatus!==TooltipStatus.hidden&&!u.props.disabled&&u.state.anchorElement,r=n.props.onMouseEnter,a=n.props.onMouseLeave,l=n.props.onKeyDown,p=u.props.addAriaDescribedBy&&u.state.tooltipStatus!==TooltipStatus.hidden?getSafeId(i):void 0,c=__assign(__assign({},n.props),{onMouseEnter:function(t){o.onMouseEnter&&o.onMouseEnter(t),r&&r(t)},onMouseLeave:function(t){o.onMouseLeave&&o.onMouseLeave(t),a&&a(t)},onKeyDown:function(t){t.which===KeyCode.escape&&s&&u.setState({tooltipStatus:TooltipStatus.hidden}),l&&l(t)}}),p=(void 0===c["aria-describedby"]&&(c["aria-describedby"]=p),React.cloneElement(n,c,n.props.children));return u.props.showOnFocus&&(u.props.text||u.props.renderContent||u.props.overflowOnly)&&(t=n.props.onBlur,e=n.props.onFocus,p=React.createElement(FocusWithin,{onBlur:function(){u.focus=!1,u.mouse||u.closeTooltip(),t&&t()},onFocus:function(t){var o=t.currentTarget;u.shouldShowTooltip(o)&&(u.focus=!0,getFocusVisible())&&u.setState({anchorElement:t.target,anchorOffset:{horizontal:0,vertical:8},anchorOrigin:{horizontal:Location.center,vertical:Location.end},anchorPoint:void 0,innerText:u.props.overflowOnly&&!u.props.text?o.innerText:void 0,tooltipStatus:TooltipStatus.visible,tooltipOrigin:{horizontal:Location.center,vertical:Location.start}}),e&&e(t)},updateStateOnFocusChange:!1},p)),React.createElement(React.Fragment,null,p,s?React.createElement(Callout,{anchorElement:u.state.anchorElement,anchorOffset:u.props.anchorOffset||u.state.anchorOffset,anchorOrigin:u.props.anchorOrigin||u.state.anchorOrigin,anchorPoint:u.state.anchorPoint,calloutOrigin:u.props.tooltipOrigin||u.state.tooltipOrigin,className:css(u.props.className,"bolt-tooltip",u.state.tooltipStatus===TooltipStatus.fadingout&&"bolt-tooltip-fade-out"),fixedLayout:u.props.fixedLayout,id:i,key:i,onAnimationEnd:u.onAnimationEnd,onMouseEnter:o.onMouseEnter,onMouseLeave:o.onMouseLeave,portalProps:{className:"bolt-tooltip-portal",bypassActiveElementFocusOnUnmount:!0},contentRef:u.contentRef,role:"tooltip"},React.createElement("div",{className:"bolt-tooltip-content body-m"},u.props.renderContent&&u.props.renderContent()||u.props.text||u.state.innerText)):null)})},t.prototype.componentWillUnmount=function(){document.removeEventListener("keydown",this.onKeyDown)},t.defaultProps={delayMs:250,showOnFocus:!0},t}(React.Component);function overflowDetected(t){return t.scrollWidth>Math.ceil(t.offsetWidth)}export{TooltipStatus,Tooltip};