@progress/kendo-react-tooltip - npm Package Compare versions

Comparing version 8.2.0-develop.35 to 8.2.0-develop.36

dist/cdn/js/kendo-react-tooltip.js

@@ -8,2 +8,2 @@ /**
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-popup")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-react-popup"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactTooltip={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoReactPopup)}(this,(function(t,e,o,n,i,r){"use strict";function l(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var s=l(e),a=l(o);const p=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],c=t=>{if(null===t)return!1;let e=t;for(;e;){if(null!==e&&e.classList&&e.classList.contains("k-tooltip"))return!0;e=null!==e.parentNode&&e.parentNode}return p.filter((e=>e===t.className)).length>0},u={name:"@progress/kendo-react-tooltip",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},h=class t extends s.PureComponent{constructor(t){super(t),this.context=0,this.state={targetElement:null,open:!1,title:""},this.top=0,this.left=0,this.willOpen=!1,this.handleMouseOut=t=>{const{targetElement:e}=this.state,o=e?e.ownerDocument:document;let n=o&&o.elementFromPoint(t.clientX,t.clientY);c(n)||this.props.open||(clearInterval(this.updateIntervalId),this.willOpen=!1,this.onClose(t))},this.handleMouseOver=t=>{const e=t.target;!this.isVisible(e)||c(e)||e===this.state.targetElement||this.showToolTip(t)},this.handleBodyMousemove=t=>{this.top=t.clientY,this.left=t.clientX},this.onClose=t=>{i.dispatchEvent(this.props.onClose,t,this,void 0),this.setState({targetElement:null,open:!1,title:""})},this.setUpdateInterval=()=>{this.props.updateInterval&&(this.updateIntervalId=setInterval(this.onIntervalUpdate,this.props.updateInterval))},this.onIntervalUpdate=()=>{const t=this.state.targetElement;t&&(null===t.parentElement?this.onClose({target:t}):this.showToolTip({target:t}))},this.position=t=>{let e=(t=>null!==t?t.getBoundingClientRect():document.body.getBoundingClientRect())(this.state.targetElement);const o=((t,e,o,n,i)=>{switch(i){case"bottom":case"top":return"pointer"===n?t-e/2:o.left-e/2+o.width/2;case"left":return"pointer"===n?t-e-10:o.left-e-10;case"right":return"pointer"===n?t+10:o.right+10;default:return"pointer"===n?t<window.screen.availWidth/2?t-10:t-e+10:t<window.screen.availWidth/2?o.left:o.right-e}})(this.left,t.offsetWidth,e,this.props.anchorElement,this.props.position),n=((t,e,o,n,i)=>{switch(i){case"bottom":return"pointer"===n?t+10:e.bottom+10;case"left":case"right":return"pointer"===n?t-o/2:e.top-o/2+e.height/2;case"top":return"pointer"===n?t-o-10:e.top-o-10;default:return"pointer"===n?t<window.innerHeight/2?t+10:t-o-10:t<window.innerHeight/2?e.bottom+10:e.top-o-10}})(this.top,e,t.offsetHeight,this.props.anchorElement,this.props.position);return{left:o,top:n}},this.getTitle=t=>{for(;t;){if(null!==t.getAttribute("title")||t.titleExpando)return{title:t.getAttribute("title")||t.titleExpando,element:t};t=this.props.parentTitle&&t.parentElement||null}return{title:"",element:t}},this.calloutClassName=()=>{switch(this.props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return this.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},this.getCurrentZIndex=()=>this.context?this.context:100,i.validatePackage(u)}componentDidMount(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)}componentWillUnmount(){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove)}componentDidUpdate(){this.props.open&&this.props.targetElement&&this.showToolTip({target:this.props.targetElement})}render(){if(this.props.children){const{children:e,...o}=this.props;let n=null;return s.createElement("div",{onMouseOver:t=>{n&&n.handleMouseOver(t)},onMouseOut:t=>{n&&n.handleMouseOut(t)}},s.createElement(t,{ref:t=>n=t,...o}),e)}if(!1===this.props.open)return null;const{targetElement:e}=this.state,o=this.getCurrentZIndex();return e&&this.state.title&&e.ownerDocument&&a.createPortal(s.createElement("div",{ref:t=>{if(!t)return;let e;if(this.props.onPosition){const o={element:t,targetElement:this.state.targetElement,mouseTop:this.top,mouseLeft:this.left,anchorElement:this.props.anchorElement,position:this.props.position,target:this,syntheticEvent:null,nativeEvent:null};e=this.props.onPosition.call(void 0,o)}else e=this.position(t);t.style.left=e.left+"px",t.style.top=e.top+"px"},className:i.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",this.props.className),style:{zIndex:o,...this.props.style},tabIndex:0},s.createElement("div",{className:"k-child-animation-container"},s.createElement("div",{id:this.props.id,role:"tooltip",className:i.classNames("k-tooltip",this.props.tooltipClassName),style:{position:"relative",...this.props.tooltipStyle}},s.createElement("div",{className:"k-tooltip-content"},this.props.content&&s.createElement(this.props.content,{title:this.state.title,target:this.state.targetElement})||this.state.title),this.props.showCallout&&s.createElement("div",{ref:t=>{t&&(t.className=this.calloutClassName(),"auto"===this.props.position&&(this.left<window.screen.availWidth/2?t.style.left=this.props.setCalloutOnPositionAuto||"25%":t.style.left=this.props.setCalloutOnPositionAuto||"75%"))}})))),this.props.appendTo?this.props.appendTo:e.ownerDocument.body)}showToolTip(t){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),t.target.hasChildNodes()&&t.target.childNodes.forEach((e=>{"title"===e.nodeName&&(t.target.titleExpando=e.innerHTML,e.remove())}));const e=this.props.targetElement||t.target;let o=this.getTitle(e);o.title?(o.element&&(o.element.titleExpando=o.title,o.element.title=""),this.willOpen=!0,this.props.openDelay?this.openTimeoutId=window.setTimeout((()=>{this.willOpen&&this.setState({targetElement:e,open:!0,title:o.title},this.setUpdateInterval)}),this.props.openDelay):this.setState({targetElement:e,open:!0,title:o.title},this.setUpdateInterval),this.state.title!==o.title&&i.dispatchEvent(this.props.onOpen,t,this,void 0)):this.state.open&&this.onClose(t)}isVisible(t){return!this.props.filter||this.props.filter(t)}};h.propTypes={anchorElement:n.oneOf(["pointer","target"]),content:n.func,filter:n.func,openDelay:n.number,position:n.oneOf(["right","left","top","bottom","auto"]),updateInterval:n.number},h.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},h.contextType=i.ZIndexContext;let d=h;const m=s.forwardRef(((t,e)=>{const o=s.useRef(null),n=s.useRef(null),{alignment:r=f.alignment,orientation:l=f.orientation}=t;return s.useImperativeHandle(n,(()=>({props:t,element:o.current}))),s.useImperativeHandle(e,(()=>n.current)),s.createElement("div",{ref:o,className:i.classNames("k-popover-actions","k-actions",{[`k-actions-${r}`]:r,[`k-actions-${l}`]:l})},t.children)})),f={alignment:"stretched",orientation:"horizontal"};m.propTypes={alignment:n.oneOf(["start","center","end","stretched"]),orientation:n.oneOf(["horizontal","vertical"]),children:n.oneOfType([n.element,n.node])},m.displayName="KendoReactPopoverActionsBar";const v=t=>{if(t){const e=t.querySelectorAll(i.FOCUSABLE_ELEMENTS.join(", "));if(e.length)return e[0]}},g=t=>{const e=v(document.querySelector(".k-popover-inner")),o=(t=>{if(t){const e=t.querySelectorAll(i.FOCUSABLE_ELEMENTS.join(", "));if(e.length)return e[e.length-1]}})(document.querySelector(".k-popover-inner"));t.shiftKey&&t.target===e?(o&&o.focus(),t.preventDefault()):!t.shiftKey&&t.target===o&&(e&&e.focus(),t.preventDefault())},y={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},E={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},k={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},b={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},w=t=>s.Children.toArray(t).filter((t=>t&&t.type===m)),T=t=>s.Children.toArray(t).filter((t=>t&&t.type!==m)),O=s.forwardRef(((t,e)=>{i.validatePackage(u);const{callout:o=C.callout,position:n=C.position,collision:l=C.collision,title:a,children:p,show:c,anchor:h,appendTo:d,offset:m,animate:f,positionMode:O,scale:I,popoverClass:N,className:x,id:P,style:D,contentStyle:M,onPosition:R,onClose:A,onOpen:S,onKeyDown:z}=t,[K,j]=s.useState(!1),U="top"===n||"bottom"===n,L=t.margin||{vertical:o&&U?15:0,horizontal:o&&!U?15:0},q=k[n],B=b[n],H=s.useContext(i.ZIndexContext),F=H?H+2e3:12e3,W=s.useRef(null);s.useImperativeHandle(W,(()=>({props:t}))),s.useImperativeHandle(e,(()=>W.current));const Z=s.useCallback((t=>{if(setTimeout((()=>j(t.flipped))),R){const e={target:W.current,flipped:t.flipped,fitted:t.fitted};R.call(void 0,e)}}),[R,j]),V=s.useCallback((()=>{const t=v(document.querySelector(".k-popover-inner"));if(t&&t.focus(),S){const t={target:W.current};S.call(void 0,t)}}),[S]),X=s.useCallback((t=>{if(z&&"Escape"===t.key){const t={target:W.current,show:!1};z.call(void 0,t)}"Tab"===t.key&&g(t)}),[z]),Y=s.useCallback((t=>{if(A){const t={target:W.current};A.call(void 0,t)}t&&t.target&&t.target.props&&t.target.props.anchor&&t.target.props.anchor.focus()}),[A]),$={"k-popover":!0};Array.isArray(N)?N.forEach((t=>$[t]=!0)):"object"==typeof N?Object.keys(N).forEach((t=>{$[t]=N[t]})):N&&($[N]=!0);const _=K?E[n]:y[n],G=s.useMemo((()=>s.createElement(s.Fragment,null,a&&s.createElement("div",{className:"k-popover-header"},a),s.createElement("div",{className:"k-popover-body",style:M},T(p)),w(p))),[p,M,a]);return s.createElement(i.ZIndexContext.Provider,{value:F},s.createElement(r.Popup,{id:P,role:"tooltip",animate:f,collision:l,anchor:h,offset:m,margin:L,popupAlign:q,anchorAlign:B,appendTo:d,show:c,scale:I,positionMode:O,style:D,className:x,popupClass:$,onOpen:V,onClose:Y,onPosition:Z,onKeyDown:X},o&&n?s.createElement(s.Fragment,null,s.createElement("div",{className:i.classNames("k-popover-callout",_)}),s.createElement("div",{className:"k-popover-inner"},G)):G))})),C={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};O.propTypes={callout:n.bool,title:n.node,position:n.oneOf(["top","left","bottom","right"]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),anchor:function(t){const e=t.anchor;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed."):null},appendTo:function(t){const e=t.appendTo;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed."):null},positionMode:n.oneOf(["fixed","absolute"]),scale:n.number,offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popoverClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),style:n.object,onClose:n.func,onPosition:n.func,onOpen:n.func},O.displayName="KendoReactPopover",t.Popover=O,t.PopoverActionsBar=m,t.Tooltip=d}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-popup")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-react-popup"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactTooltip={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoReactPopup)}(this,(function(t,e,o,n,i,l){"use strict";function s(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var r=s(e),a=s(o);const p=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],c=t=>{if(null===t)return!1;let e=t;for(;e;){if(null!==e&&e.classList&&e.classList.contains("k-tooltip"))return!0;e=null!==e.parentNode&&e.parentNode}return p.filter((e=>e===t.className)).length>0},u={name:"@progress/kendo-react-tooltip",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},h=class t extends r.PureComponent{constructor(t){super(t),this.context=0,this.state={targetElement:null,open:!1,title:""},this.top=0,this.left=0,this.willOpen=!1,this.handleMouseOut=t=>{const{targetElement:e}=this.state,o=e?e.ownerDocument:document;let n=o&&o.elementFromPoint(t.clientX,t.clientY);c(n)||this.props.open||(clearInterval(this.updateIntervalId),this.willOpen=!1,this.onClose(t))},this.compareTargets=t=>this.state.targetElement===t.nativeEvent.target,this.handleEscape=t=>{const e=this.compareTargets(t);this.state.open&&e&&this.onClose(t)},this.handleTargetItemClick=t=>{const e=this.compareTargets(t);this.state.open&&e?this.onClose(t):this.showToolTip(t)},this.handleKeyDown=(t,e)=>{const o=t.key;"Escape"===t.key?this.handleEscape(t):e.includes(o)&&this.handleMouseOver(t)},this.handleMouseOver=t=>{const e=t.target;!this.isVisible(e)||c(e)||e===this.state.targetElement||this.showToolTip(t)},this.handleBodyMousemove=t=>{this.top=t.clientY,this.left=t.clientX},this.onClose=t=>{i.dispatchEvent(this.props.onClose,t,this,void 0),this.setState({targetElement:null,open:!1,title:""})},this.setUpdateInterval=()=>{this.props.updateInterval&&(this.updateIntervalId=setInterval(this.onIntervalUpdate,this.props.updateInterval))},this.onIntervalUpdate=()=>{const t=this.state.targetElement;t&&(null===t.parentElement?this.onClose({target:t}):this.showToolTip({target:t}))},this.position=t=>{let e=null!==(o=this.state.targetElement)?o.getBoundingClientRect():document.body.getBoundingClientRect();var o;const n=((t,e,o,n,i)=>{switch(i){case"bottom":case"top":return"pointer"===n?t-e/2:o.left-e/2+o.width/2;case"left":return"pointer"===n?t-e-10:o.left-e-10;case"right":return"pointer"===n?t+10:o.right+10;default:return"pointer"===n?t<window.screen.availWidth/2?t-10:t-e+10:t<window.screen.availWidth/2?o.left:o.right-e}})(this.left,t.offsetWidth,e,this.props.anchorElement,this.props.position),i=((t,e,o,n,i)=>{switch(i){case"bottom":return"pointer"===n?t+10:e.bottom+10;case"left":case"right":return"pointer"===n?t-o/2:e.top-o/2+e.height/2;case"top":return"pointer"===n?t-o-10:e.top-o-10;default:return"pointer"===n?t<window.innerHeight/2?t+10:t-o-10:t<window.innerHeight/2?e.bottom+10:e.top-o-10}})(this.top,e,t.offsetHeight,this.props.anchorElement,this.props.position);return{left:n,top:i}},this.getTitle=t=>{for(;t;){if(null!==t.getAttribute("title")||t.titleExpando)return{title:t.getAttribute("title")||t.titleExpando,element:t};t=this.props.parentTitle&&t.parentElement||null}return{title:"",element:t}},this.calloutClassName=()=>{switch(this.props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return this.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},this.getCurrentZIndex=()=>this.context?this.context:100,i.validatePackage(u)}componentDidMount(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)}componentWillUnmount(){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove)}componentDidUpdate(){this.props.open&&this.props.targetElement&&this.showToolTip({target:this.props.targetElement})}render(){if(this.props.children){const{children:e,showOption:o,...n}=this.props;let i=null;const l=void 0===(null==o?void 0:o.hover)||(null==o?void 0:o.hover),s=void 0!==(null==o?void 0:o.click)&&(null==o?void 0:o.click),a=void 0!==(null==o?void 0:o.focus)&&(null==o?void 0:o.focus),p=void 0!==(null==o?void 0:o.none)&&(null==o?void 0:o.none),c=(void 0!==(null==o?void 0:o.keys)?null==o?void 0:o.keys:[]).map((t=>"Space"===t?" ":t));return r.createElement("div",{onMouseOver:t=>{i&&!p&&l&&i.handleMouseOver(t)},onMouseOut:t=>{i&&!p&&l&&i.handleMouseOut(t)},onClick:t=>{i&&!p&&s&&i.handleTargetItemClick(t)},onFocus:t=>{i&&!p&&a&&i.handleMouseOver(t)},onKeyDown:t=>{(i&&!p&&c.length>0||i&&!p&&"Escape"===t.key)&&i.handleKeyDown(t,c)}},r.createElement(t,{ref:t=>i=t,...n}),e)}if(!1===this.props.open)return null;const{targetElement:e}=this.state,o=this.getCurrentZIndex();return e&&this.state.title&&e.ownerDocument&&a.createPortal(r.createElement("div",{ref:t=>{if(!t)return;let e;if(this.props.onPosition){const o={element:t,targetElement:this.state.targetElement,mouseTop:this.top,mouseLeft:this.left,anchorElement:this.props.anchorElement,position:this.props.position,target:this,syntheticEvent:null,nativeEvent:null};e=this.props.onPosition.call(void 0,o)}else e=this.position(t);t.style.left=e.left+"px",t.style.top=e.top+"px"},className:i.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",this.props.className),style:{zIndex:o,...this.props.style},tabIndex:0},r.createElement("div",{className:"k-child-animation-container"},r.createElement("div",{id:this.props.id,role:"tooltip",className:i.classNames("k-tooltip",this.props.tooltipClassName),style:{position:"relative",...this.props.tooltipStyle}},r.createElement("div",{className:"k-tooltip-content"},this.props.content&&r.createElement(this.props.content,{title:this.state.title,target:this.state.targetElement})||this.state.title),this.props.showCallout&&r.createElement("div",{ref:t=>{t&&(t.className=this.calloutClassName(),"auto"===this.props.position&&(this.left<window.screen.availWidth/2?t.style.left=this.props.setCalloutOnPositionAuto||"25%":t.style.left=this.props.setCalloutOnPositionAuto||"75%"))}})))),this.props.appendTo?this.props.appendTo:e.ownerDocument.body)}showToolTip(t){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),t.target.hasChildNodes()&&t.target.childNodes.forEach((e=>{"title"===e.nodeName&&(t.target.titleExpando=e.innerHTML,e.remove())}));const e=this.props.targetElement||t.target;let o=this.getTitle(e);o.title?(o.element&&(o.element.titleExpando=o.title,o.element.title=""),this.willOpen=!0,this.props.openDelay?this.openTimeoutId=window.setTimeout((()=>{this.willOpen&&this.setState({targetElement:e,open:!0,title:o.title},this.setUpdateInterval)}),this.props.openDelay):this.setState({targetElement:e,open:!0,title:o.title},this.setUpdateInterval),this.state.title!==o.title&&i.dispatchEvent(this.props.onOpen,t,this,void 0)):this.state.open&&this.onClose(t)}isVisible(t){return!this.props.filter||this.props.filter(t)}};h.propTypes={anchorElement:n.oneOf(["pointer","target"]),content:n.func,filter:n.func,openDelay:n.number,position:n.oneOf(["right","left","top","bottom","auto"]),updateInterval:n.number,showOption:n.object},h.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},h.contextType=i.ZIndexContext;let d=h;const m=r.forwardRef(((t,e)=>{const o=r.useRef(null),n=r.useRef(null),{alignment:l=f.alignment,orientation:s=f.orientation}=t;return r.useImperativeHandle(n,(()=>({props:t,element:o.current}))),r.useImperativeHandle(e,(()=>n.current)),r.createElement("div",{ref:o,className:i.classNames("k-popover-actions","k-actions",{[`k-actions-${l}`]:l,[`k-actions-${s}`]:s})},t.children)})),f={alignment:"stretched",orientation:"horizontal"};m.propTypes={alignment:n.oneOf(["start","center","end","stretched"]),orientation:n.oneOf(["horizontal","vertical"]),children:n.oneOfType([n.element,n.node])},m.displayName="KendoReactPopoverActionsBar";const v=t=>{if(t){const e=t.querySelectorAll(i.FOCUSABLE_ELEMENTS.join(", "));if(e.length)return e[0]}},g=t=>{const e=v(document.querySelector(".k-popover-inner")),o=(t=>{if(t){const e=t.querySelectorAll(i.FOCUSABLE_ELEMENTS.join(", "));if(e.length)return e[e.length-1]}})(document.querySelector(".k-popover-inner"));t.shiftKey&&t.target===e?(o&&o.focus(),t.preventDefault()):!t.shiftKey&&t.target===o&&(e&&e.focus(),t.preventDefault())},y={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},E={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},k={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},b={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},T=t=>r.Children.toArray(t).filter((t=>t&&t.type===m)),w=t=>r.Children.toArray(t).filter((t=>t&&t.type!==m)),O=r.forwardRef(((t,e)=>{i.validatePackage(u);const{callout:o=C.callout,position:n=C.position,collision:s=C.collision,title:a,children:p,show:c,anchor:h,appendTo:d,offset:m,animate:f,positionMode:O,scale:I,popoverClass:N,className:x,id:P,style:D,contentStyle:M,onPosition:R,onClose:A,onOpen:K,onKeyDown:S}=t,[j,z]=r.useState(!1),U="top"===n||"bottom"===n,L=t.margin||{vertical:o&&U?15:0,horizontal:o&&!U?15:0},q=k[n],B=b[n],H=r.useContext(i.ZIndexContext),F=H?H+2e3:12e3,W=r.useRef(null);r.useImperativeHandle(W,(()=>({props:t}))),r.useImperativeHandle(e,(()=>W.current));const Z=r.useCallback((t=>{if(setTimeout((()=>z(t.flipped))),R){const e={target:W.current,flipped:t.flipped,fitted:t.fitted};R.call(void 0,e)}}),[R,z]),V=r.useCallback((()=>{const t=v(document.querySelector(".k-popover-inner"));if(t&&t.focus(),K){const t={target:W.current};K.call(void 0,t)}}),[K]),X=r.useCallback((t=>{if(S&&"Escape"===t.key){const t={target:W.current,show:!1};S.call(void 0,t)}"Tab"===t.key&&g(t)}),[S]),Y=r.useCallback((t=>{if(A){const t={target:W.current};A.call(void 0,t)}t&&t.target&&t.target.props&&t.target.props.anchor&&t.target.props.anchor.focus()}),[A]),$={"k-popover":!0};Array.isArray(N)?N.forEach((t=>$[t]=!0)):"object"==typeof N?Object.keys(N).forEach((t=>{$[t]=N[t]})):N&&($[N]=!0);const _=j?E[n]:y[n],G=r.useMemo((()=>r.createElement(r.Fragment,null,a&&r.createElement("div",{className:"k-popover-header"},a),r.createElement("div",{className:"k-popover-body",style:M},w(p)),T(p))),[p,M,a]);return r.createElement(i.ZIndexContext.Provider,{value:F},r.createElement(l.Popup,{id:P,role:"tooltip",animate:f,collision:s,anchor:h,offset:m,margin:L,popupAlign:q,anchorAlign:B,appendTo:d,show:c,scale:I,positionMode:O,style:D,className:x,popupClass:$,onOpen:V,onClose:Y,onPosition:Z,onKeyDown:X},o&&n?r.createElement(r.Fragment,null,r.createElement("div",{className:i.classNames("k-popover-callout",_)}),r.createElement("div",{className:"k-popover-inner"},G)):G))})),C={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};O.propTypes={callout:n.bool,title:n.node,position:n.oneOf(["top","left","bottom","right"]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),anchor:function(t){const e=t.anchor;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed."):null},appendTo:function(t){const e=t.appendTo;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed."):null},positionMode:n.oneOf(["fixed","absolute"]),scale:n.number,offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popoverClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),style:n.object,onClose:n.func,onPosition:n.func,onOpen:n.func},O.displayName="KendoReactPopover",t.Popover=O,t.PopoverActionsBar=m,t.Tooltip=d}));

index.d.ts

@@ -325,2 +325,3 @@ /**
         updateInterval: PropTypes.Requireable<number>;
+        showOption: PropTypes.Requireable<object>;
     };
@@ -368,3 +369,10 @@ static defaultProps: {
     handleMouseOut: (event: any) => void;
+    private compareTargets;
+    private handleEscape;
     /**
+     * @hidden
+     */
+    handleTargetItemClick: (event: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    private handleKeyDown;
+    /**
      * Used on the `MouseOver` event to show the Tooltip.
@@ -460,2 +468,12 @@ */
     /**
+     * Specifies when the Тooltip will be rendered.
+     * The available options are:
+     * - `hover`&mdash;Shows the Tooltip when the mouse hovers over the target element(Set to `true` by default).
+     * - `click`&mdash;Shows the Tooltip when the target element is clicked(Set to `false` by default).
+     * - `focus`&mdash;Shows the Tooltip when the target element is focused(Set to `false` by default).
+     * - `keys`&mdash;Shows the Tooltip when the target element is focused and a specific key is pressed(Set to `false` by default).
+     * - `none`&mdash;Doesn't show the Tooltip(Set to `false` by default).
+     */
+    showOption?: TooltipShowOptions;
+    /**
      * Sets the content of the Tooltip ([see example]({% slug templates_tooltip %})).
@@ -533,2 +551,18 @@ */
 /**
+ * Specifies when the options of the [showTooltip]({slug: api_tooltip_tooltipprops}#toc-showoption) props.
+ * - `hover`&mdash;Shows the Tooltip when the mouse hovers over the target element(Set to `true` by default).
+ * - `click`&mdash;Shows the Tooltip when the target element is clicked(Set to `false` by default).
+ * - `focus`&mdash;Shows the Tooltip when the target element is focused(Set to `false` by default).
+ * - `keys`&mdash;Shows the Tooltip when the target element is focused and a specific key is pressed(Set to `false` by default).
+ * - `none`&mdash;Doesn't show the Tooltip(Set to `false` by default).
+ */
+declare type TooltipShowOptions = {
+    hover?: boolean;
+    click?: boolean;
+    focus?: boolean;
+    keys?: string[];
+    none?: boolean;
+};
+
+/**
  * @hidden
@@ -535,0 +569,0 @@ */

package.json

 {
   "name": "@progress/kendo-react-tooltip",
-  "version": "8.2.0-develop.35",
+  "version": "8.2.0-develop.36",
   "description": "React Tooltips library represents popups with information that is related to a UI element. KendoReact Tooltips package",
@@ -26,4 +26,4 @@ "author": "Progress",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "8.2.0-develop.35",
-    "@progress/kendo-react-popup": "8.2.0-develop.35",
+    "@progress/kendo-react-common": "8.2.0-develop.36",
+    "@progress/kendo-react-popup": "8.2.0-develop.36",
     "@progress/kendo-svg-icons": "^3.0.0",
@@ -30,0 +30,0 @@ "react": "^16.8.2 || ^17.0.0 || ^18.0.0",

tooltip/Tooltip.js

@@ -8,2 +8,2 @@ /**
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),f=require("react-dom"),l=require("prop-types"),r=require("@progress/kendo-react-common"),c=require("./utils.js"),g=require("../package-metadata.js");function d(p){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(s,t,e.get?e:{enumerable:!0,get:()=>p[t]})}}return s.default=p,Object.freeze(s)}const n=d(m),E=d(f),v=100,a=class a extends n.PureComponent{constructor(s){super(s),this.context=0,this.state={targetElement:null,open:!1,title:""},this.top=0,this.left=0,this.willOpen=!1,this.handleMouseOut=t=>{const{targetElement:e}=this.state,o=e?e.ownerDocument:document;let i=o&&o.elementFromPoint(t.clientX,t.clientY);c.isTooltipElement(i)||this.props.open||(clearInterval(this.updateIntervalId),this.willOpen=!1,this.onClose(t))},this.handleMouseOver=t=>{const e=t.target;!this.isVisible(e)||c.isTooltipElement(e)||e===this.state.targetElement||this.showToolTip(t)},this.handleBodyMousemove=t=>{this.top=t.clientY,this.left=t.clientX},this.onClose=t=>{r.dispatchEvent(this.props.onClose,t,this,void 0),this.setState({targetElement:null,open:!1,title:""})},this.setUpdateInterval=()=>{this.props.updateInterval&&(this.updateIntervalId=setInterval(this.onIntervalUpdate,this.props.updateInterval))},this.onIntervalUpdate=()=>{const t=this.state.targetElement;t&&(t.parentElement===null?this.onClose({target:t}):this.showToolTip({target:t}))},this.position=t=>{let e=c.getDomRect(this.state.targetElement);const o=c.getLeftPosition(this.left,t.offsetWidth,e,this.props.anchorElement,this.props.position),i=c.getTopPosition(this.top,e,t.offsetHeight,this.props.anchorElement,this.props.position);return{left:o,top:i}},this.getTitle=t=>{for(;t;){if(t.getAttribute("title")!==null||t.titleExpando)return{title:t.getAttribute("title")||t.titleExpando,element:t};t=this.props.parentTitle&&t.parentElement||null}return{title:"",element:t}},this.calloutClassName=()=>{switch(this.props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return this.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},this.getCurrentZIndex=()=>this.context?this.context:v,r.validatePackage(g.packageMetadata)}componentDidMount(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)}componentWillUnmount(){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove)}componentDidUpdate(){this.props.open&&this.props.targetElement&&this.showToolTip({target:this.props.targetElement})}render(){if(this.props.children){const{children:e,...o}=this.props;let i=null;return n.createElement("div",{onMouseOver:h=>{i&&i.handleMouseOver(h)},onMouseOut:h=>{i&&i.handleMouseOut(h)}},n.createElement(a,{ref:h=>i=h,...o}),e)}if(this.props.open===!1)return null;const{targetElement:s}=this.state,t=this.getCurrentZIndex();return s&&this.state.title&&s.ownerDocument&&E.createPortal(n.createElement("div",{ref:e=>{if(!e)return;let o;if(this.props.onPosition){const i={element:e,targetElement:this.state.targetElement,mouseTop:this.top,mouseLeft:this.left,anchorElement:this.props.anchorElement,position:this.props.position,target:this,syntheticEvent:null,nativeEvent:null};o=this.props.onPosition.call(void 0,i)}else o=this.position(e);e.style.left=o.left+"px",e.style.top=o.top+"px"},className:r.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",this.props.className),style:{zIndex:t,...this.props.style},tabIndex:0},n.createElement("div",{className:"k-child-animation-container"},n.createElement("div",{id:this.props.id,role:"tooltip",className:r.classNames("k-tooltip",this.props.tooltipClassName),style:{position:"relative",...this.props.tooltipStyle}},n.createElement("div",{className:"k-tooltip-content"},this.props.content&&n.createElement(this.props.content,{title:this.state.title,target:this.state.targetElement})||this.state.title),this.props.showCallout&&n.createElement("div",{ref:e=>{e&&(e.className=this.calloutClassName(),this.props.position==="auto"&&(this.left<window.screen.availWidth/2?e.style.left=this.props.setCalloutOnPositionAuto||"25%":e.style.left=this.props.setCalloutOnPositionAuto||"75%"))}})))),this.props.appendTo?this.props.appendTo:s.ownerDocument.body)}showToolTip(s){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),s.target.hasChildNodes()&&s.target.childNodes.forEach(o=>{o.nodeName==="title"&&(s.target.titleExpando=o.innerHTML,o.remove())});const t=this.props.targetElement||s.target;let e=this.getTitle(t);if(!e.title){this.state.open&&this.onClose(s);return}e.element&&(e.element.titleExpando=e.title,e.element.title=""),this.willOpen=!0,this.props.openDelay?this.openTimeoutId=window.setTimeout(()=>{this.willOpen&&this.setState({targetElement:t,open:!0,title:e.title},this.setUpdateInterval)},this.props.openDelay):this.setState({targetElement:t,open:!0,title:e.title},this.setUpdateInterval),this.state.title!==e.title&&r.dispatchEvent(this.props.onOpen,s,this,void 0)}isVisible(s){return!this.props.filter||this.props.filter(s)}};a.propTypes={anchorElement:l.oneOf(["pointer","target"]),content:l.func,filter:l.func,openDelay:l.number,position:l.oneOf(["right","left","top","bottom","auto"]),updateInterval:l.number},a.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},a.contextType=r.ZIndexContext;let u=a;exports.Tooltip=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),k=require("react-dom"),r=require("prop-types"),c=require("@progress/kendo-react-common"),d=require("./utils.js"),I=require("../package-metadata.js");function E(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const t in u)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(u,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>u[t]})}}return i.default=u,Object.freeze(i)}const l=E(y),C=E(k),b=100,h=class h extends l.PureComponent{constructor(i){super(i),this.context=0,this.state={targetElement:null,open:!1,title:""},this.top=0,this.left=0,this.willOpen=!1,this.handleMouseOut=t=>{const{targetElement:s}=this.state,e=s?s.ownerDocument:document;let a=e&&e.elementFromPoint(t.clientX,t.clientY);d.isTooltipElement(a)||this.props.open||(clearInterval(this.updateIntervalId),this.willOpen=!1,this.onClose(t))},this.compareTargets=t=>this.state.targetElement===t.nativeEvent.target,this.handleEscape=t=>{const s=this.compareTargets(t);this.state.open&&s&&this.onClose(t)},this.handleTargetItemClick=t=>{const s=this.compareTargets(t);if(this.state.open&&s){this.onClose(t);return}this.showToolTip(t)},this.handleKeyDown=(t,s)=>{const e=t.key;t.key==="Escape"?this.handleEscape(t):s.includes(e)&&this.handleMouseOver(t)},this.handleMouseOver=t=>{const s=t.target;!this.isVisible(s)||d.isTooltipElement(s)||s===this.state.targetElement||this.showToolTip(t)},this.handleBodyMousemove=t=>{this.top=t.clientY,this.left=t.clientX},this.onClose=t=>{c.dispatchEvent(this.props.onClose,t,this,void 0),this.setState({targetElement:null,open:!1,title:""})},this.setUpdateInterval=()=>{this.props.updateInterval&&(this.updateIntervalId=setInterval(this.onIntervalUpdate,this.props.updateInterval))},this.onIntervalUpdate=()=>{const t=this.state.targetElement;t&&(t.parentElement===null?this.onClose({target:t}):this.showToolTip({target:t}))},this.position=t=>{let s=d.getDomRect(this.state.targetElement);const e=d.getLeftPosition(this.left,t.offsetWidth,s,this.props.anchorElement,this.props.position),a=d.getTopPosition(this.top,s,t.offsetHeight,this.props.anchorElement,this.props.position);return{left:e,top:a}},this.getTitle=t=>{for(;t;){if(t.getAttribute("title")!==null||t.titleExpando)return{title:t.getAttribute("title")||t.titleExpando,element:t};t=this.props.parentTitle&&t.parentElement||null}return{title:"",element:t}},this.calloutClassName=()=>{switch(this.props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return this.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},this.getCurrentZIndex=()=>this.context?this.context:b,c.validatePackage(I.packageMetadata)}componentDidMount(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)}componentWillUnmount(){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove)}componentDidUpdate(){this.props.open&&this.props.targetElement&&this.showToolTip({target:this.props.targetElement})}render(){if(this.props.children){const{children:s,showOption:e,...a}=this.props;let n=null;const f=(e==null?void 0:e.hover)!==void 0?e==null?void 0:e.hover:!0,v=(e==null?void 0:e.click)!==void 0?e==null?void 0:e.click:!1,T=(e==null?void 0:e.focus)!==void 0?e==null?void 0:e.focus:!1,p=(e==null?void 0:e.none)!==void 0?e==null?void 0:e.none:!1,g=((e==null?void 0:e.keys)!==void 0?e==null?void 0:e.keys:[]).map(o=>o==="Space"?" ":o);return l.createElement("div",{onMouseOver:o=>{n&&!p&&f&&n.handleMouseOver(o)},onMouseOut:o=>{n&&!p&&f&&n.handleMouseOut(o)},onClick:o=>{n&&!p&&v&&n.handleTargetItemClick(o)},onFocus:o=>{n&&!p&&T&&n.handleMouseOver(o)},onKeyDown:o=>{(n&&!p&&g.length>0||n&&!p&&o.key==="Escape")&&n.handleKeyDown(o,g)}},l.createElement(h,{ref:o=>n=o,...a}),s)}if(this.props.open===!1)return null;const{targetElement:i}=this.state,t=this.getCurrentZIndex();return i&&this.state.title&&i.ownerDocument&&C.createPortal(l.createElement("div",{ref:s=>{if(!s)return;let e;if(this.props.onPosition){const a={element:s,targetElement:this.state.targetElement,mouseTop:this.top,mouseLeft:this.left,anchorElement:this.props.anchorElement,position:this.props.position,target:this,syntheticEvent:null,nativeEvent:null};e=this.props.onPosition.call(void 0,a)}else e=this.position(s);s.style.left=e.left+"px",s.style.top=e.top+"px"},className:c.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",this.props.className),style:{zIndex:t,...this.props.style},tabIndex:0},l.createElement("div",{className:"k-child-animation-container"},l.createElement("div",{id:this.props.id,role:"tooltip",className:c.classNames("k-tooltip",this.props.tooltipClassName),style:{position:"relative",...this.props.tooltipStyle}},l.createElement("div",{className:"k-tooltip-content"},this.props.content&&l.createElement(this.props.content,{title:this.state.title,target:this.state.targetElement})||this.state.title),this.props.showCallout&&l.createElement("div",{ref:s=>{s&&(s.className=this.calloutClassName(),this.props.position==="auto"&&(this.left<window.screen.availWidth/2?s.style.left=this.props.setCalloutOnPositionAuto||"25%":s.style.left=this.props.setCalloutOnPositionAuto||"75%"))}})))),this.props.appendTo?this.props.appendTo:i.ownerDocument.body)}showToolTip(i){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),i.target.hasChildNodes()&&i.target.childNodes.forEach(e=>{e.nodeName==="title"&&(i.target.titleExpando=e.innerHTML,e.remove())});const t=this.props.targetElement||i.target;let s=this.getTitle(t);if(!s.title){this.state.open&&this.onClose(i);return}s.element&&(s.element.titleExpando=s.title,s.element.title=""),this.willOpen=!0,this.props.openDelay?this.openTimeoutId=window.setTimeout(()=>{this.willOpen&&this.setState({targetElement:t,open:!0,title:s.title},this.setUpdateInterval)},this.props.openDelay):this.setState({targetElement:t,open:!0,title:s.title},this.setUpdateInterval),this.state.title!==s.title&&c.dispatchEvent(this.props.onOpen,i,this,void 0)}isVisible(i){return!this.props.filter||this.props.filter(i)}};h.propTypes={anchorElement:r.oneOf(["pointer","target"]),content:r.func,filter:r.func,openDelay:r.number,position:r.oneOf(["right","left","top","bottom","auto"]),updateInterval:r.number,showOption:r.object},h.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},h.contextType=c.ZIndexContext;let m=h;exports.Tooltip=m;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112659

increased by6.42%

Lines of code

1326

increased by5.24%

No dependency changes