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

React components for building web UI in Azure DevOps

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