@progress/kendo-react-tooltip 13.4.0-develop.2 → 13.4.0-develop.3

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

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!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=class t extends r.PureComponent{constructor(){super(...arguments),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,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=>{const e=null!==(i=this.state.targetElement)?i.getBoundingClientRect():document.body.getBoundingClientRect(),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);var i;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}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,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)}};u.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},u.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},u.contextType=i.ZIndexContext;let h=u;const d=r.forwardRef((t,e)=>{const o=r.useRef(null),n=r.useRef(null),{alignment:l=m.alignment,orientation:s=m.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)}),m={alignment:"stretched",orientation:"horizontal"};d.propTypes={alignment:n.oneOf(["start","center","end","stretched"]),orientation:n.oneOf(["horizontal","vertical"]),children:n.oneOfType([n.element,n.node])},d.displayName="KendoReactPopoverActionsBar";const f=t=>{if(t){const e=t.querySelectorAll(i.FOCUSABLE_ELEMENTS.join(", "));if(e.length)return e[0]}},v=t=>{const e=f(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())},g={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},y={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},E={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},k={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},b=r.forwardRef((t,e)=>{const{autoFocus:o=!0,callout:n=T.callout,position:s=T.position,collision:a=T.collision,title:p,children:c,show:u,anchor:h,appendTo:m,offset:b,animate:w,positionMode:O,scale:C,popoverClass:I,className:N,id:x,style:P,contentStyle:D,onPosition:M,onClose:A,onOpen:R,onKeyDown:S}=t,[j,z]=r.useState(!1),K="top"===s||"bottom"===s,q=t.margin||{vertical:n&&K?15:0,horizontal:n&&!K?15:0},L=E[s],B=k[s],H=r.useContext(i.ZIndexContext),U=H?H+2e3:12e3,F=r.useRef(null);r.useImperativeHandle(F,()=>({props:t})),r.useImperativeHandle(e,()=>F.current);const W=r.useCallback(t=>{if(setTimeout(()=>z(t.flipped)),M){const e={target:F.current,flipped:t.flipped,fitted:t.fitted};M.call(void 0,e)}},[M,z]),Z=r.useCallback(()=>{if(o){const t=f(document.querySelector(".k-popover-inner"));t&&t.focus()}if(R){const t={target:F.current};R.call(void 0,t)}},[R]),V=r.useCallback(t=>{if(S&&"Escape"===t.key){const t={target:F.current,show:!1};S.call(void 0,t)}"Tab"===t.key&&v(t)},[S]),X=r.useCallback(t=>{if(A){const t={target:F.current};A.call(void 0,t)}t&&t.target&&t.target.props&&t.target.props.anchor&&t.target.props.anchor.focus()},[A]),Y={"k-popover":!0};Array.isArray(I)?I.forEach(t=>Y[t]=!0):"object"==typeof I?Object.keys(I).forEach(t=>{Y[t]=I[t]}):I&&(Y[I]=!0);const $=j?y[s]:g[s],_=r.useMemo(()=>r.createElement(r.Fragment,null,p&&r.createElement("div",{className:"k-popover-header"},p),r.createElement("div",{className:"k-popover-body",style:D},(t=>r.Children.toArray(t).filter(t=>t&&t.type!==d))(c)),(t=>r.Children.toArray(t).filter(t=>t&&t.type===d))(c)),[c,D,p]);return r.createElement(i.ZIndexContext.Provider,{value:U},r.createElement(l.Popup,{id:x,role:"tooltip",animate:w,collision:a,anchor:h,offset:b,margin:q,popupAlign:L,anchorAlign:B,appendTo:m,show:u,scale:C,positionMode:O,style:P,className:N,popupClass:Y,onOpen:Z,onClose:X,onPosition:W,onKeyDown:V},n&&s?r.createElement(r.Fragment,null,r.createElement("div",{className:i.classNames("k-popover-callout",$)}),r.createElement("div",{className:"k-popover-inner"},_)):_))}),T={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};b.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},b.displayName="KendoReactPopover",t.Popover=b,t.PopoverActionsBar=d,t.Tooltip=h});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(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"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactTooltip={},e.React,e.ReactDOM,e.PropTypes,e.KendoReactCommon,e.KendoReactPopup)}(this,function(e,t,o,n,r,l){"use strict";function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:function(){return e[o]}})}}),t.default=e,Object.freeze(t)}var i=a(t),c=a(o),s=a(n);const u=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],p=e=>{if(null===e)return!1;let t=e;for(;t;){if(null!==t&&t.classList&&t.classList.contains("k-tooltip"))return!0;t=null!==t.parentNode&&t.parentNode}return u.filter(t=>t===e.className).length>0},d={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},f=i.forwardRef((e,t)=>{const{showOption:o,open:n,targetElement:r,onOpen:l,onClose:a,onPosition:c,children:s,...u}=e;let p=null;const d=void 0===(null==o?void 0:o.hover)||(null==o?void 0:o.hover),f=void 0!==(null==o?void 0:o.click)&&(null==o?void 0:o.click),h=void 0!==(null==o?void 0:o.focus)&&(null==o?void 0:o.focus),v=void 0!==(null==o?void 0:o.none)&&(null==o?void 0:o.none),g=(void 0!==(null==o?void 0:o.keys)?null==o?void 0:o.keys:[]).map(e=>"Space"===e?" ":e);return i.createElement("div",{onMouseOver:e=>{p&&!v&&d&&p.handleMouseOver(e)},onMouseOut:e=>{p&&!v&&d&&p.handleMouseOut(e)},onClick:e=>{p&&!v&&f&&p.handleTargetItemClick(e)},onFocus:e=>{p&&!v&&h&&p.handleMouseOver(e)},onKeyDown:e=>{(p&&!v&&g.length>0||p&&!v&&"Escape"===e.key)&&p.handleKeyDown(e,g)}},i.createElement(m,{ref:e=>{p=e,t&&("function"==typeof t?t(e):t.current=e)},open:n,targetElement:r,onOpen:l,onClose:a,onPosition:c,...u}),s)});f.displayName="KendoReactTooltipWrapper";const m=i.memo(i.forwardRef((e,t)=>{const{anchorElement:o=d.anchorElement,openDelay:n=d.openDelay,position:l=d.position,showCallout:a=d.showCallout,parentTitle:s=d.parentTitle,open:u,targetElement:f,content:m,filter:h,updateInterval:v,onOpen:g,onClose:y,onPosition:k,appendTo:b,className:E,style:w,id:C,tooltipClassName:O,tooltipStyle:T,setCalloutOnPositionAuto:N}=e,R=i.useContext(r.ZIndexContext),[x,P]=i.useState(null),[I,A]=i.useState(!1),[D,K]=i.useState(""),S=i.useRef(0),M=i.useRef(0),j=i.useRef(void 0),z=i.useRef(void 0),q=i.useRef(!1),H=i.useRef(D),L=i.useRef(x),F=i.useRef(I);i.useEffect(()=>{L.current=x,F.current=I,H.current=D},[x,I,D]);const B=void 0!==u,W=e=>{let t=e;for(;t;){if(null!==t.getAttribute("title")||t.titleExpando)return{title:t.getAttribute("title")||t.titleExpando,element:t};t=s&&t.parentElement||null}return{title:"",element:null}},Z=()=>{switch(l){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 S.current<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},U=(e,t)=>{if(!t)return{left:0,top:0};const n=(e=>null!==e?e.getBoundingClientRect():document.body.getBoundingClientRect())(t),r=((e,t,o,n,r)=>{switch(r){case"bottom":case"top":return"pointer"===n?e-t/2:o.left-t/2+o.width/2;case"left":return"pointer"===n?e-t-10:o.left-t-10;case"right":return"pointer"===n?e+10:o.right+10;default:return"pointer"===n?e<window.screen.availWidth/2?e-10:e-t+10:e<window.screen.availWidth/2?o.left:o.right-t}})(M.current,e.offsetWidth,n,o,l),a=((e,t,o,n,r)=>{switch(r){case"bottom":return"pointer"===n?e+10:t.bottom+10;case"left":case"right":return"pointer"===n?e-o/2:t.top-o/2+t.height/2;case"top":return"pointer"===n?e-o-10:t.top-o-10;default:return"pointer"===n?e<window.innerHeight/2?e+10:e-o-10:e<window.innerHeight/2?t.bottom+10:t.top-o-10}})(S.current,n,e.offsetHeight,o,l);return{left:r,top:a}},V=e=>{r.dispatchEvent(y,e,void 0,void 0),P(null),A(!1),K("")},X=e=>{clearTimeout(j.current),clearInterval(z.current),e.target.hasChildNodes()&&e.target.childNodes.forEach(t=>{"title"===t.nodeName&&(e.target.titleExpando=t.innerHTML,t.remove())});const t=f||e.target,o=W(t),l=B?u:F.current;if(!o.title)return void(l&&V(e));o.element&&(o.element.titleExpando=o.title,o.element.title=""),q.current=!0;const a=()=>{P(t),A(!0),K(o.title),v&&(z.current=setInterval(()=>{const e=t;if(e)if(null===e.parentElement)V({target:e});else{const t=W(e);t.title&&t.title!==H.current&&K(t.title)}},v))};n?j.current=window.setTimeout(()=>{q.current&&a()},n):a(),H.current!==o.title&&r.dispatchEvent(g,e,void 0,void 0)},Y=e=>{const t=e.target;!(e=>!h||h(e))(t)||p(t)||t===L.current||X(e)},$=e=>{const t=L.current?L.current.ownerDocument:document,o=null==t?void 0:t.elementFromPoint(e.clientX,e.clientY);p(o)||u||(clearInterval(z.current),q.current=!1,V(e))},_=e=>L.current===e.nativeEvent.target,G=e=>{const t=_(e);(B?u:F.current)&&t?V(e):X(e)},J=(e,t)=>{const o=e.key;"Escape"===e.key?(e=>{const t=_(e);(B?u:F.current)&&t&&V(e)})(e):t.includes(o)&&Y(e)},Q=i.useCallback(e=>{S.current=e.clientY,M.current=e.clientX},[]);i.useEffect(()=>(document&&document.body.addEventListener("mousemove",Q),()=>{clearTimeout(j.current),clearInterval(z.current),document&&document.body.removeEventListener("mousemove",Q)}),[Q]),i.useEffect(()=>{if(u&&f){let e=f,t="",o=null;for(;e;){if(null!==e.getAttribute("title")||e.titleExpando){t=e.getAttribute("title")||e.titleExpando,o=e;break}e=s&&e.parentElement||null}t&&(o&&(o.titleExpando=t,o.title=""),P(f),A(!0),K(t))}else!1===u&&(P(null),A(!1),K(""))},[u,f,s]);const ee=i.useMemo(()=>({handleMouseOver:Y,handleMouseOut:$,handleTargetItemClick:G,handleKeyDown:J,props:e}),[e]);i.useImperativeHandle(t,()=>ee,[ee]);const te=R||100,oe=i.useCallback(e=>{if(!e)return;let t;if(k){const n={element:e,targetElement:x,mouseTop:S.current,mouseLeft:M.current,anchorElement:o,position:l,target:ee,syntheticEvent:null,nativeEvent:null};t=k(n)}else t=U(e,x);e.style.left=t.left+"px",e.style.top=t.top+"px"},[k,x,o,l,U,ee]),ne=i.useCallback(e=>{e&&(e.className=Z(),"auto"===l&&(M.current<window.screen.availWidth/2?e.style.left=N||"25%":e.style.left=N||"75%"))},[Z,l,N]);return!1===u?null:x&&D&&x.ownerDocument&&c.createPortal(i.createElement("div",{ref:oe,className:r.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",E),style:{zIndex:te,...w},tabIndex:0},i.createElement("div",{className:"k-child-animation-container"},i.createElement("div",{id:C,role:"tooltip",className:r.classNames("k-tooltip",O),style:{position:"relative",...T}},i.createElement("div",{className:"k-tooltip-content"},m&&i.createElement(m,{title:D,target:x})||D),a&&i.createElement("div",{ref:ne})))),b||x.ownerDocument.body)}));m.displayName="KendoReactTooltipCore";const h=i.forwardRef((e,t)=>e.children?i.createElement(f,{ref:t,...e}):i.createElement(m,{ref:t,...e}));h.displayName="KendoReactTooltip",h.propTypes={id:s.string,anchorElement:s.string,appendTo:s.any,position:s.oneOf(["auto","top","bottom","left","right"]),showCallout:s.bool,parentTitle:s.bool,content:s.any,open:s.bool,targetElement:s.any,filter:s.func,openDelay:s.number,updateInterval:s.number,onOpen:s.func,onClose:s.func,onPosition:s.func,className:s.string,style:s.object,tooltipClassName:s.string,tooltipStyle:s.object,setCalloutOnPositionAuto:s.string,showOption:s.shape({hover:s.bool,click:s.bool,focus:s.bool,none:s.bool,keys:s.arrayOf(s.string)}),children:s.node};const v=i.forwardRef((e,t)=>{const o=i.useRef(null),n=i.useRef(null),{alignment:l=g.alignment,orientation:a=g.orientation}=e;return i.useImperativeHandle(n,()=>({props:e,element:o.current})),i.useImperativeHandle(t,()=>n.current),i.createElement("div",{ref:o,className:r.classNames("k-popover-actions","k-actions",{[`k-actions-${l}`]:l,[`k-actions-${a}`]:a})},e.children)}),g={alignment:"stretched",orientation:"horizontal"};v.propTypes={alignment:n.oneOf(["start","center","end","stretched"]),orientation:n.oneOf(["horizontal","vertical"]),children:n.oneOfType([n.element,n.node])},v.displayName="KendoReactPopoverActionsBar";const y=e=>{if(e){const t=e.querySelectorAll(r.FOCUSABLE_ELEMENTS.join(", "));if(t.length)return t[0]}},k=e=>{const t=y(document.querySelector(".k-popover-inner")),o=(e=>{if(e){const t=e.querySelectorAll(r.FOCUSABLE_ELEMENTS.join(", "));if(t.length)return t[t.length-1]}})(document.querySelector(".k-popover-inner"));e.shiftKey&&e.target===t?(o&&o.focus(),e.preventDefault()):!e.shiftKey&&e.target===o&&(t&&t.focus(),e.preventDefault())},b={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"},w={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},C={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},O=i.forwardRef((e,t)=>{const{autoFocus:o=!0,callout:n=T.callout,position:a=T.position,collision:c=T.collision,title:s,children:u,show:p,anchor:d,appendTo:f,offset:m,animate:h,positionMode:g,scale:O,popoverClass:N,className:R,id:x,style:P,contentStyle:I,onPosition:A,onClose:D,onOpen:K,onKeyDown:S}=e,[M,j]=i.useState(!1),z="top"===a||"bottom"===a,q=e.margin||{vertical:n&&z?15:0,horizontal:n&&!z?15:0},H=w[a],L=C[a],F=i.useContext(r.ZIndexContext),B=F?F+2e3:12e3,W=i.useRef(null);i.useImperativeHandle(W,()=>({props:e})),i.useImperativeHandle(t,()=>W.current);const Z=i.useCallback(e=>{if(setTimeout(()=>j(e.flipped)),A){const t={target:W.current,flipped:e.flipped,fitted:e.fitted};A.call(void 0,t)}},[A,j]),U=i.useCallback(()=>{if(o){const e=y(document.querySelector(".k-popover-inner"));e&&e.focus()}if(K){const e={target:W.current};K.call(void 0,e)}},[K]),V=i.useCallback(e=>{if(S&&"Escape"===e.key){const e={target:W.current,show:!1};S.call(void 0,e)}"Tab"===e.key&&k(e)},[S]),X=i.useCallback(e=>{if(D){const e={target:W.current};D.call(void 0,e)}e&&e.target&&e.target.props&&e.target.props.anchor&&e.target.props.anchor.focus()},[D]),Y={"k-popover":!0};Array.isArray(N)?N.forEach(e=>Y[e]=!0):"object"==typeof N?Object.keys(N).forEach(e=>{Y[e]=N[e]}):N&&(Y[N]=!0);const $=M?E[a]:b[a],_=i.useMemo(()=>i.createElement(i.Fragment,null,s&&i.createElement("div",{className:"k-popover-header"},s),i.createElement("div",{className:"k-popover-body",style:I},(e=>i.Children.toArray(e).filter(e=>e&&e.type!==v))(u)),(e=>i.Children.toArray(e).filter(e=>e&&e.type===v))(u)),[u,I,s]);return i.createElement(r.ZIndexContext.Provider,{value:B},i.createElement(l.Popup,{id:x,role:"tooltip",animate:h,collision:c,anchor:d,offset:m,margin:q,popupAlign:H,anchorAlign:L,appendTo:f,show:p,scale:O,positionMode:g,style:P,className:R,popupClass:Y,onOpen:U,onClose:X,onPosition:Z,onKeyDown:V},n&&a?i.createElement(i.Fragment,null,i.createElement("div",{className:r.classNames("k-popover-callout",$)}),i.createElement("div",{className:"k-popover-inner"},_)):_))}),T={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(e){const t=e.anchor;return t&&"number"!=typeof t.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed."):null},appendTo:function(e){const t=e.appendTo;return t&&"number"!=typeof t.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",e.Popover=O,e.PopoverActionsBar=v,e.Tooltip=h});

package/package-metadata.mjs

@@ -8,6 +8,6 @@ export const packageMetadata = Object.freeze({
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
     publishDate: 0,
-    version: '13.4.0-develop.2',
+    version: '13.4.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-tooltip",
-  "version": "13.4.0-develop.2",
+  "version": "13.4.0-develop.3",
   "description": "React Tooltips library represents popups with information that is related to a UI element. KendoReact Tooltips package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,8 +26,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-common": "13.4.0-develop.2",
-    "@progress/kendo-react-popup": "13.4.0-develop.2",
+    "@progress/kendo-react-common": "13.4.0-develop.3",
+    "@progress/kendo-react-popup": "13.4.0-develop.3",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -56,7 +56,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1770288261,
+      "publishDate": 1770312410,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/popover/Popover.mjs

@@ -45,17 +45,17 @@ const $ = 12e3, ee = 2e3, O = 15, oe = {
     offset: x,
     animate: D,
     positionMode: I,
-    scale: K,
+    scale: _,
     popoverClass: a,
-    className: j,
-    id: S,
-    style: V,
+    className: K,
+    id: j,
+    style: S,
     contentStyle: b,
     onPosition: d,
     onClose: m,
     onOpen: h,
     onKeyDown: v
-  } = r, [Z, g] = t.useState(!1), P = l === "top" || l === "bottom", _ = r.margin || {
+  } = r, [V, g] = t.useState(!1), P = l === "top" || l === "bottom", Z = r.margin || {
     vertical: p && P ? O : 0,
     horizontal: p && !P ? O : 0
   }, B = ne[l], L = re[l], E = t.useContext(k), M = E ? E + ee : $, i = t.useRef(null);
@@ -103,28 +103,28 @@ const $ = 12e3, ee = 2e3, O = 15, oe = {
   Array.isArray(a) ? a.forEach((o) => s[o] = !0) : typeof a == "object" ? Object.keys(a).forEach((o) => {
     s[o] = a[o];
   }) : a && (s[a] = !0);
-  const G = Z ? te[l] : oe[l], C = t.useMemo(
+  const G = V ? te[l] : oe[l], C = t.useMemo(
     () => /* @__PURE__ */ t.createElement(t.Fragment, null, u && /* @__PURE__ */ t.createElement("div", { className: "k-popover-header" }, u), /* @__PURE__ */ t.createElement("div", { className: "k-popover-body", style: b }, ae(f)), le(f)),
     [f, b, u]
   );
   return /* @__PURE__ */ t.createElement(k.Provider, { value: M }, /* @__PURE__ */ t.createElement(
     Q,
     {
-      id: S,
+      id: j,
       role: "tooltip",
       animate: D,
       collision: z,
       anchor: F,
       offset: x,
-      margin: _,
+      margin: Z,
       popupAlign: B,
       anchorAlign: L,
       appendTo: R,
       show: N,
-      scale: K,
+      scale: _,
       positionMode: I,
-      style: V,
-      className: j,
+      style: S,
+      className: K,
       popupClass: s,
       onOpen: U,
       onClose: q,

package/tooltip/Tooltip.d.ts

@@ -5,107 +5,41 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { default as PropTypes } from 'prop-types';
-import { ZIndexContext } from '@progress/kendo-react-common';
 import { TooltipProps } from './TooltipProps.js';
 import * as React from 'react';
 /**
- * @hidden
+ * Imperative handle interface for Tooltip component.
+ * Exposed via ref for programmatic control.
  */
-interface TooltipState {
-    targetElement: HTMLElement | null;
-    open: boolean;
-    title: string;
-}
-/**
- * Represents the [KendoReact Tooltip component](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip).
- *
- * Accepts properties of type [TooltipProps](https://www.telerik.com/kendo-react-ui/components/tooltip/api/tooltipprops).
- */
-export declare class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        anchorElement: PropTypes.Requireable<string>;
-        content: PropTypes.Requireable<(...args: any[]) => any>;
-        filter: PropTypes.Requireable<(...args: any[]) => any>;
-        openDelay: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<string>;
-        updateInterval: PropTypes.Requireable<number>;
-        showOption: PropTypes.Requireable<object>;
-    };
+export interface TooltipHandle {
     /**
-     * The default properties of the Tooltip component.
-     */
-    static defaultProps: {
-        anchorElement: string;
-        openDelay: number;
-        position: string;
-        showCallout: boolean;
-        parentTitle: boolean;
-    };
-    /**
-     * @hidden
-     */
-    static contextType: React.Context<import('@progress/kendo-react-common').ZIndexContextType>;
-    /**
-     * @hidden
-     */
-    context: React.ContextType<typeof ZIndexContext>;
-    /**
-     * @hidden
-     */
-    readonly state: TooltipState;
-    private top;
-    private left;
-    private openTimeoutId?;
-    private updateIntervalId?;
-    private willOpen;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
+     * Used on the `MouseOver` event to show the Tooltip.
+     *
+     * @param event The mouse event object.
      */
-    componentDidUpdate(): void;
+    handleMouseOver: (event: any) => void;
     /**
      * The method is used on the MouseOut event to hide the Tooltip.
      *
      * @param event The mouse event object.
      */
     handleMouseOut: (event: any) => void;
-    private compareTargets;
-    private handleEscape;
     /**
-     * @hidden
+     * Handles click events on the target element.
      */
     handleTargetItemClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    private handleKeyDown;
     /**
-     * Used on the `MouseOver` event to show the Tooltip.
-     *
-     * @param event The mouse event object.
+     * Handles keyboard events.
      */
-    handleMouseOver: (event: any) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>, keys: string[]) => void;
     /**
-     * @hidden
+     * The props of the Tooltip component.
      */
-    render(): "" | React.JSX.Element | null;
-    private handleBodyMousemove;
-    private onClose;
-    private showToolTip;
-    private setUpdateInterval;
-    private onIntervalUpdate;
-    private isVisible;
-    private position;
-    private getTitle;
-    private calloutClassName;
-    private getCurrentZIndex;
+    readonly props: Readonly<TooltipProps>;
 }
-export {};
+/**
+ * Represents the [KendoReact Tooltip component](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip).
+ *
+ * Accepts properties of type [TooltipProps](https://www.telerik.com/kendo-react-ui/components/tooltip/api/tooltipprops).
+ */
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipHandle>>;

package/tooltip/Tooltip.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),I=require("react-dom"),r=require("prop-types"),h=require("@progress/kendo-react-common"),u=require("./utils.js");function E(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const o in c)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(c,o);Object.defineProperty(t,o,s.get?s:{enumerable:!0,get:()=>c[o]})}}return t.default=c,Object.freeze(t)}const l=E(y),k=E(I),C=100,p=class p extends l.PureComponent{constructor(){super(...arguments),this.context=0,this.state={targetElement:null,open:!1,title:""},this.top=0,this.left=0,this.willOpen=!1,this.handleMouseOut=t=>{const{targetElement:o}=this.state,s=o?o.ownerDocument:document,e=s&&s.elementFromPoint(t.clientX,t.clientY);u.isTooltipElement(e)||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 o=this.compareTargets(t);this.state.open&&o&&this.onClose(t)},this.handleTargetItemClick=t=>{const o=this.compareTargets(t);if(this.state.open&&o){this.onClose(t);return}this.showToolTip(t)},this.handleKeyDown=(t,o)=>{const s=t.key;t.key==="Escape"?this.handleEscape(t):o.includes(s)&&this.handleMouseOver(t)},this.handleMouseOver=t=>{const o=t.target;!this.isVisible(o)||u.isTooltipElement(o)||o===this.state.targetElement||this.showToolTip(t)},this.handleBodyMousemove=t=>{this.top=t.clientY,this.left=t.clientX},this.onClose=t=>{h.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=>{const o=u.getDomRect(this.state.targetElement),s=u.getLeftPosition(this.left,t.offsetWidth,o,this.props.anchorElement,this.props.position),e=u.getTopPosition(this.top,o,t.offsetHeight,this.props.anchorElement,this.props.position);return{left:s,top:e}},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:C}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,...d}=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,a=(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(i=>i==="Space"?" ":i);return l.createElement("div",{onMouseOver:i=>{n&&!a&&f&&n.handleMouseOver(i)},onMouseOut:i=>{n&&!a&&f&&n.handleMouseOut(i)},onClick:i=>{n&&!a&&v&&n.handleTargetItemClick(i)},onFocus:i=>{n&&!a&&T&&n.handleMouseOver(i)},onKeyDown:i=>{(n&&!a&&g.length>0||n&&!a&&i.key==="Escape")&&n.handleKeyDown(i,g)}},l.createElement(p,{ref:i=>{n=i},...d}),s)}if(this.props.open===!1)return null;const{targetElement:t}=this.state,o=this.getCurrentZIndex();return t&&this.state.title&&t.ownerDocument&&k.createPortal(l.createElement("div",{ref:s=>{if(!s)return;let e;if(this.props.onPosition){const d={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,d)}else e=this.position(s);s.style.left=e.left+"px",s.style.top=e.top+"px"},className:h.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",this.props.className),style:{zIndex:o,...this.props.style},tabIndex:0},l.createElement("div",{className:"k-child-animation-container"},l.createElement("div",{id:this.props.id,role:"tooltip",className:h.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:t.ownerDocument.body)}showToolTip(t){clearTimeout(this.openTimeoutId),clearInterval(this.updateIntervalId),t.target.hasChildNodes()&&t.target.childNodes.forEach(e=>{e.nodeName==="title"&&(t.target.titleExpando=e.innerHTML,e.remove())});const o=this.props.targetElement||t.target,s=this.getTitle(o);if(!s.title){this.state.open&&this.onClose(t);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:o,open:!0,title:s.title},this.setUpdateInterval)},this.props.openDelay):this.setState({targetElement:o,open:!0,title:s.title},this.setUpdateInterval),this.state.title!==s.title&&h.dispatchEvent(this.props.onOpen,t,this,void 0)}isVisible(t){return!this.props.filter||this.props.filter(t)}};p.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},p.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},p.contextType=h.ZIndexContext;let m=p;exports.Tooltip=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Te=require("react"),ke=require("react-dom"),ve=require("prop-types"),C=require("@progress/kendo-react-common"),h=require("./utils.js");function B(i){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const E=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(s,t,E.get?E:{enumerable:!0,get:()=>i[t]})}}return s.default=i,Object.freeze(s)}const o=B(Te),be=B(ke),l=B(ve),Re=100,I={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},le=o.forwardRef((i,s)=>{const{showOption:t,open:E,targetElement:m,onOpen:j,onClose:T,onPosition:u,children:g,...N}=i;let a=null;const k=(t==null?void 0:t.hover)!==void 0?t==null?void 0:t.hover:!0,A=(t==null?void 0:t.click)!==void 0?t==null?void 0:t.click:!1,L=(t==null?void 0:t.focus)!==void 0?t==null?void 0:t.focus:!1,f=(t==null?void 0:t.none)!==void 0?t==null?void 0:t.none:!1,O=((t==null?void 0:t.keys)!==void 0?t==null?void 0:t.keys:[]).map(c=>c==="Space"?" ":c);return o.createElement("div",{onMouseOver:c=>{a&&!f&&k&&a.handleMouseOver(c)},onMouseOut:c=>{a&&!f&&k&&a.handleMouseOut(c)},onClick:c=>{a&&!f&&A&&a.handleTargetItemClick(c)},onFocus:c=>{a&&!f&&L&&a.handleMouseOver(c)},onKeyDown:c=>{(a&&!f&&O.length>0||a&&!f&&c.key==="Escape")&&a.handleKeyDown(c,O)}},o.createElement(U,{ref:c=>{a=c,s&&(typeof s=="function"?s(c):s.current=c)},open:E,targetElement:m,onOpen:j,onClose:T,onPosition:u,...N}),g)});le.displayName="KendoReactTooltipWrapper";const U=o.memo(o.forwardRef((i,s)=>{const{anchorElement:t=I.anchorElement,openDelay:E=I.openDelay,position:m=I.position,showCallout:j=I.showCallout,parentTitle:T=I.parentTitle,open:u,targetElement:g,content:N,filter:a,updateInterval:k,onOpen:A,onClose:L,onPosition:f,appendTo:J,className:O,style:c,id:re,tooltipClassName:ce,tooltipStyle:ie,setCalloutOnPositionAuto:q}=i,ae=o.useContext(C.ZIndexContext),[d,x]=o.useState(null),[F,P]=o.useState(!1),[y,v]=o.useState(""),D=o.useRef(0),M=o.useRef(0),H=o.useRef(void 0),S=o.useRef(void 0),Z=o.useRef(!1),W=o.useRef(y),b=o.useRef(d),_=o.useRef(F);o.useEffect(()=>{b.current=d,_.current=F,W.current=y},[d,F,y]);const V=u!==void 0,Q=e=>{let n=e;for(;n;){if(n.getAttribute("title")!==null||n.titleExpando)return{title:n.getAttribute("title")||n.titleExpando,element:n};n=T&&n.parentElement||null}return{title:"",element:null}},se=e=>!a||a(e),ue=()=>ae||Re,$=()=>{switch(m){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 D.current<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},ee=(e,n)=>{if(!n)return{left:0,top:0};const r=h.getDomRect(n),z=h.getLeftPosition(M.current,e.offsetWidth,r,t,m),K=h.getTopPosition(D.current,r,e.offsetHeight,t,m);return{left:z,top:K}},R=e=>{C.dispatchEvent(L,e,void 0,void 0),x(null),P(!1),v("")},te=e=>{clearTimeout(H.current),clearInterval(S.current),e.target.hasChildNodes()&&e.target.childNodes.forEach(p=>{p.nodeName==="title"&&(e.target.titleExpando=p.innerHTML,p.remove())});const n=g||e.target,r=Q(n),z=V?u:_.current;if(!r.title){z&&R(e);return}r.element&&(r.element.titleExpando=r.title,r.element.title=""),Z.current=!0;const K=()=>{x(n),P(!0),v(r.title),k&&(S.current=setInterval(()=>{const p=n;if(p)if(p.parentElement===null)R({target:p});else{const Y=Q(p);Y.title&&Y.title!==W.current&&v(Y.title)}},k))};E?H.current=window.setTimeout(()=>{Z.current&&K()},E):K(),W.current!==r.title&&C.dispatchEvent(A,e,void 0,void 0)},ne=e=>{const n=e.target;!se(n)||h.isTooltipElement(n)||n===b.current||te(e)},fe=e=>{const n=b.current?b.current.ownerDocument:document,r=n==null?void 0:n.elementFromPoint(e.clientX,e.clientY);h.isTooltipElement(r)||u||(clearInterval(S.current),Z.current=!1,R(e))},oe=e=>b.current===e.nativeEvent.target,de=e=>{const n=oe(e);(V?u:_.current)&&n&&R(e)},me=e=>{const n=oe(e);if((V?u:_.current)&&n){R(e);return}te(e)},pe=(e,n)=>{const r=e.key;e.key==="Escape"?de(e):n.includes(r)&&ne(e)},X=o.useCallback(e=>{D.current=e.clientY,M.current=e.clientX},[]);o.useEffect(()=>(document&&document.body.addEventListener("mousemove",X),()=>{clearTimeout(H.current),clearInterval(S.current),document&&document.body.removeEventListener("mousemove",X)}),[X]),o.useEffect(()=>{if(u&&g){let e=g,n="",r=null;for(;e;){if(e.getAttribute("title")!==null||e.titleExpando){n=e.getAttribute("title")||e.titleExpando,r=e;break}e=T&&e.parentElement||null}n&&(r&&(r.titleExpando=n,r.title=""),x(g),P(!0),v(n))}else u===!1&&(x(null),P(!1),v(""))},[u,g,T]);const w=o.useMemo(()=>({handleMouseOver:ne,handleMouseOut:fe,handleTargetItemClick:me,handleKeyDown:pe,props:i}),[i]);o.useImperativeHandle(s,()=>w,[w]);const Ee=ue(),ge=o.useCallback(e=>{if(!e)return;let n;if(f){const r={element:e,targetElement:d,mouseTop:D.current,mouseLeft:M.current,anchorElement:t,position:m,target:w,syntheticEvent:null,nativeEvent:null};n=f(r)}else n=ee(e,d);e.style.left=n.left+"px",e.style.top=n.top+"px"},[f,d,t,m,ee,w]),ye=o.useCallback(e=>{e&&(e.className=$(),m==="auto"&&(M.current<window.screen.availWidth/2?e.style.left=q||"25%":e.style.left=q||"75%"))},[$,m,q]);return u===!1?null:d&&y&&d.ownerDocument&&be.createPortal(o.createElement("div",{ref:ge,className:C.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",O),style:{zIndex:Ee,...c},tabIndex:0},o.createElement("div",{className:"k-child-animation-container"},o.createElement("div",{id:re,role:"tooltip",className:C.classNames("k-tooltip",ce),style:{position:"relative",...ie}},o.createElement("div",{className:"k-tooltip-content"},N&&o.createElement(N,{title:y,target:d})||y),j&&o.createElement("div",{ref:ye})))),J||d.ownerDocument.body)}));U.displayName="KendoReactTooltipCore";const G=o.forwardRef((i,s)=>i.children?o.createElement(le,{ref:s,...i}):o.createElement(U,{ref:s,...i}));G.displayName="KendoReactTooltip";G.propTypes={id:l.string,anchorElement:l.string,appendTo:l.any,position:l.oneOf(["auto","top","bottom","left","right"]),showCallout:l.bool,parentTitle:l.bool,content:l.any,open:l.bool,targetElement:l.any,filter:l.func,openDelay:l.number,updateInterval:l.number,onOpen:l.func,onClose:l.func,onPosition:l.func,className:l.string,style:l.object,tooltipClassName:l.string,tooltipStyle:l.object,setCalloutOnPositionAuto:l.string,showOption:l.shape({hover:l.bool,click:l.bool,focus:l.bool,none:l.bool,keys:l.arrayOf(l.string)}),children:l.node};exports.Tooltip=G;

package/tooltip/Tooltip.mjs

@@ -5,69 +5,95 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as l from "react";
-import * as T from "react-dom";
-import r from "prop-types";
-import { dispatchEvent as m, ZIndexContext as y, classNames as d } from "@progress/kendo-react-common";
-import { isTooltipElement as f, getDomRect as I, getLeftPosition as k, getTopPosition as C } from "./utils.mjs";
-const x = 100, p = class p extends l.PureComponent {
-  constructor() {
-    super(...arguments), this.context = 0, this.state = {
-      targetElement: null,
-      open: !1,
-      title: ""
-    }, this.top = 0, this.left = 0, this.willOpen = !1, this.handleMouseOut = (t) => {
-      const { targetElement: o } = this.state, s = o ? o.ownerDocument : document, e = s && s.elementFromPoint(t.clientX, t.clientY);
-      f(e) || 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 o = this.compareTargets(t);
-      this.state.open && o && this.onClose(t);
-    }, this.handleTargetItemClick = (t) => {
-      const o = this.compareTargets(t);
-      if (this.state.open && o) {
-        this.onClose(t);
-        return;
+import * as o from "react";
+import * as Te from "react-dom";
+import * as l from "prop-types";
+import { ZIndexContext as ke, classNames as ee, dispatchEvent as te } from "@progress/kendo-react-common";
+import { getDomRect as ve, getLeftPosition as be, getTopPosition as Ce, isTooltipElement as ne } from "./utils.mjs";
+const Ie = 100, C = {
+  anchorElement: "pointer",
+  openDelay: 400,
+  position: "auto",
+  showCallout: !0,
+  parentTitle: !1
+}, oe = o.forwardRef((f, m) => {
+  const { showOption: n, open: I, targetElement: d, onOpen: A, onClose: y, onPosition: a, children: E, ...h } = f;
+  let c = null;
+  const T = (n == null ? void 0 : n.hover) !== void 0 ? n == null ? void 0 : n.hover : !0, L = (n == null ? void 0 : n.click) !== void 0 ? n == null ? void 0 : n.click : !1, S = (n == null ? void 0 : n.focus) !== void 0 ? n == null ? void 0 : n.focus : !1, s = (n == null ? void 0 : n.none) !== void 0 ? n == null ? void 0 : n.none : !1, R = ((n == null ? void 0 : n.keys) !== void 0 ? n == null ? void 0 : n.keys : []).map((i) => i === "Space" ? " " : i);
+  return /* @__PURE__ */ o.createElement(
+    "div",
+    {
+      onMouseOver: (i) => {
+        c && !s && T && c.handleMouseOver(i);
+      },
+      onMouseOut: (i) => {
+        c && !s && T && c.handleMouseOut(i);
+      },
+      onClick: (i) => {
+        c && !s && L && c.handleTargetItemClick(i);
+      },
+      onFocus: (i) => {
+        c && !s && S && c.handleMouseOver(i);
+      },
+      onKeyDown: (i) => {
+        (c && !s && R.length > 0 || c && !s && i.key === "Escape") && c.handleKeyDown(i, R);
+      }
+    },
+    /* @__PURE__ */ o.createElement(
+      z,
+      {
+        ref: (i) => {
+          c = i, m && (typeof m == "function" ? m(i) : m.current = i);
+        },
+        open: I,
+        targetElement: d,
+        onOpen: A,
+        onClose: y,
+        onPosition: a,
+        ...h
       }
-      this.showToolTip(t);
-    }, this.handleKeyDown = (t, o) => {
-      const s = t.key;
-      t.key === "Escape" ? this.handleEscape(t) : o.includes(s) && this.handleMouseOver(t);
-    }, this.handleMouseOver = (t) => {
-      const o = t.target;
-      !this.isVisible(o) || f(o) || o === this.state.targetElement || this.showToolTip(t);
-    }, this.handleBodyMousemove = (t) => {
-      this.top = t.clientY, this.left = t.clientX;
-    }, this.onClose = (t) => {
-      m(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) => {
-      const o = I(this.state.targetElement), s = k(
-        this.left,
-        t.offsetWidth,
-        o,
-        this.props.anchorElement,
-        this.props.position
-      ), e = C(
-        this.top,
-        o,
-        t.offsetHeight,
-        this.props.anchorElement,
-        this.props.position
-      );
-      return { left: s, top: e };
-    }, this.getTitle = (t) => {
+    ),
+    E
+  );
+});
+oe.displayName = "KendoReactTooltipWrapper";
+const z = o.memo(
+  o.forwardRef((f, m) => {
+    const {
+      anchorElement: n = C.anchorElement,
+      openDelay: I = C.openDelay,
+      position: d = C.position,
+      showCallout: A = C.showCallout,
+      parentTitle: y = C.parentTitle,
+      open: a,
+      targetElement: E,
+      content: h,
+      filter: c,
+      updateInterval: T,
+      onOpen: L,
+      onClose: S,
+      onPosition: s,
+      appendTo: B,
+      className: R,
+      style: i,
+      id: re,
+      tooltipClassName: ie,
+      tooltipStyle: ce,
+      setCalloutOnPositionAuto: F
+    } = f, ae = o.useContext(ke), [u, x] = o.useState(null), [H, N] = o.useState(!1), [g, k] = o.useState(""), D = o.useRef(0), P = o.useRef(0), Z = o.useRef(void 0), O = o.useRef(void 0), W = o.useRef(!1), V = o.useRef(g), v = o.useRef(u), M = o.useRef(H);
+    o.useEffect(() => {
+      v.current = u, M.current = H, V.current = g;
+    }, [u, H, g]);
+    const X = a !== void 0, U = (e) => {
+      let t = e;
       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;
+        t = y && t.parentElement || null;
       }
-      return { title: "", element: t };
-    }, this.calloutClassName = () => {
-      switch (this.props.position) {
+      return { title: "", element: null };
+    }, se = (e) => !c || c(e), ue = () => ae || Ie, q = () => {
+      switch (d) {
         case "bottom":
           return "k-callout k-callout-n";
         case "left":
@@ -77,165 +103,183 @@ const x = 100, p = class p extends l.PureComponent {
         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";
+          return D.current < window.innerHeight / 2 ? "k-callout k-callout-n" : "k-callout k-callout-s";
       }
-    }, this.getCurrentZIndex = () => this.context ? this.context : x;
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    document && document.body.addEventListener("mousemove", this.handleBodyMousemove);
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    clearTimeout(this.openTimeoutId), clearInterval(this.updateIntervalId), document && document.body.removeEventListener("mousemove", this.handleBodyMousemove);
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate() {
-    this.props.open && this.props.targetElement && this.showToolTip({ target: this.props.targetElement });
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    if (this.props.children) {
-      const { children: s, showOption: e, ...h } = this.props;
-      let n = null;
-      const c = (e == null ? void 0 : e.hover) !== void 0 ? e == null ? void 0 : e.hover : !0, g = (e == null ? void 0 : e.click) !== void 0 ? e == null ? void 0 : e.click : !1, v = (e == null ? void 0 : e.focus) !== void 0 ? e == null ? void 0 : e.focus : !1, a = (e == null ? void 0 : e.none) !== void 0 ? e == null ? void 0 : e.none : !1, u = ((e == null ? void 0 : e.keys) !== void 0 ? e == null ? void 0 : e.keys : []).map((i) => i === "Space" ? " " : i);
-      return /* @__PURE__ */ l.createElement(
-        "div",
-        {
-          onMouseOver: (i) => {
-            n && !a && c && n.handleMouseOver(i);
-          },
-          onMouseOut: (i) => {
-            n && !a && c && n.handleMouseOut(i);
-          },
-          onClick: (i) => {
-            n && !a && g && n.handleTargetItemClick(i);
-          },
-          onFocus: (i) => {
-            n && !a && v && n.handleMouseOver(i);
-          },
-          onKeyDown: (i) => {
-            (n && !a && u.length > 0 || n && !a && i.key === "Escape") && n.handleKeyDown(i, u);
-          }
-        },
-        /* @__PURE__ */ l.createElement(
-          p,
-          {
-            ref: (i) => {
-              n = i;
-            },
-            ...h
+    }, G = (e, t) => {
+      if (!t)
+        return { left: 0, top: 0 };
+      const r = ve(t), Y = be(P.current, e.offsetWidth, r, n, d), w = Ce(D.current, r, e.offsetHeight, n, d);
+      return { left: Y, top: w };
+    }, b = (e) => {
+      te(S, e, void 0, void 0), x(null), N(!1), k("");
+    }, J = (e) => {
+      clearTimeout(Z.current), clearInterval(O.current), e.target.hasChildNodes() && e.target.childNodes.forEach((p) => {
+        p.nodeName === "title" && (e.target.titleExpando = p.innerHTML, p.remove());
+      });
+      const t = E || e.target, r = U(t), Y = X ? a : M.current;
+      if (!r.title) {
+        Y && b(e);
+        return;
+      }
+      r.element && (r.element.titleExpando = r.title, r.element.title = ""), W.current = !0;
+      const w = () => {
+        x(t), N(!0), k(r.title), T && (O.current = setInterval(() => {
+          const p = t;
+          if (p)
+            if (p.parentElement === null)
+              b({ target: p });
+            else {
+              const _ = U(p);
+              _.title && _.title !== V.current && k(_.title);
+            }
+        }, T));
+      };
+      I ? Z.current = window.setTimeout(() => {
+        W.current && w();
+      }, I) : w(), V.current !== r.title && te(L, e, void 0, void 0);
+    }, Q = (e) => {
+      const t = e.target;
+      !se(t) || ne(t) || t === v.current || J(e);
+    }, fe = (e) => {
+      const t = v.current ? v.current.ownerDocument : document, r = t == null ? void 0 : t.elementFromPoint(e.clientX, e.clientY);
+      ne(r) || a || (clearInterval(O.current), W.current = !1, b(e));
+    }, $ = (e) => v.current === e.nativeEvent.target, me = (e) => {
+      const t = $(e);
+      (X ? a : M.current) && t && b(e);
+    }, de = (e) => {
+      const t = $(e);
+      if ((X ? a : M.current) && t) {
+        b(e);
+        return;
+      }
+      J(e);
+    }, pe = (e, t) => {
+      const r = e.key;
+      e.key === "Escape" ? me(e) : t.includes(r) && Q(e);
+    }, j = o.useCallback((e) => {
+      D.current = e.clientY, P.current = e.clientX;
+    }, []);
+    o.useEffect(() => (document && document.body.addEventListener("mousemove", j), () => {
+      clearTimeout(Z.current), clearInterval(O.current), document && document.body.removeEventListener("mousemove", j);
+    }), [j]), o.useEffect(() => {
+      if (a && E) {
+        let e = E, t = "", r = null;
+        for (; e; ) {
+          if (e.getAttribute("title") !== null || e.titleExpando) {
+            t = e.getAttribute("title") || e.titleExpando, r = e;
+            break;
           }
-        ),
-        s
-      );
-    }
-    if (this.props.open === !1)
-      return null;
-    const { targetElement: t } = this.state, o = this.getCurrentZIndex();
-    return t && this.state.title && t.ownerDocument && T.createPortal(
-      /* @__PURE__ */ l.createElement(
+          e = y && e.parentElement || null;
+        }
+        t && (r && (r.titleExpando = t, r.title = ""), x(E), N(!0), k(t));
+      } else a === !1 && (x(null), N(!1), k(""));
+    }, [a, E, y]);
+    const K = o.useMemo(
+      () => ({
+        handleMouseOver: Q,
+        handleMouseOut: fe,
+        handleTargetItemClick: de,
+        handleKeyDown: pe,
+        props: f
+      }),
+      [f]
+    );
+    o.useImperativeHandle(m, () => K, [K]);
+    const Ee = ue(), ge = o.useCallback(
+      (e) => {
+        if (!e)
+          return;
+        let t;
+        if (s) {
+          const r = {
+            element: e,
+            targetElement: u,
+            mouseTop: D.current,
+            mouseLeft: P.current,
+            anchorElement: n,
+            position: d,
+            target: K,
+            syntheticEvent: null,
+            nativeEvent: null
+          };
+          t = s(r);
+        } else
+          t = G(e, u);
+        e.style.left = t.left + "px", e.style.top = t.top + "px";
+      },
+      [s, u, n, d, G, K]
+    ), ye = o.useCallback(
+      (e) => {
+        e && (e.className = q(), d === "auto" && (P.current < window.screen.availWidth / 2 ? e.style.left = F || "25%" : e.style.left = F || "75%"));
+      },
+      [q, d, F]
+    );
+    return a === !1 ? null : u && g && u.ownerDocument && Te.createPortal(
+      /* @__PURE__ */ o.createElement(
         "div",
         {
-          ref: (s) => {
-            if (!s)
-              return;
-            let e;
-            if (this.props.onPosition) {
-              const h = {
-                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, h);
-            } else
-              e = this.position(s);
-            s.style.left = e.left + "px", s.style.top = e.top + "px";
-          },
-          className: d(
+          ref: ge,
+          className: ee(
             "k-animation-container",
             "k-animation-container-fixed",
             "k-animation-container-shown",
-            this.props.className
+            R
           ),
           style: {
-            zIndex: o,
-            ...this.props.style
+            zIndex: Ee,
+            ...i
           },
           tabIndex: 0
         },
-        /* @__PURE__ */ l.createElement("div", { className: "k-child-animation-container" }, /* @__PURE__ */ l.createElement(
+        /* @__PURE__ */ o.createElement("div", { className: "k-child-animation-container" }, /* @__PURE__ */ o.createElement(
           "div",
           {
-            id: this.props.id,
+            id: re,
             role: "tooltip",
-            className: d("k-tooltip", this.props.tooltipClassName),
-            style: { position: "relative", ...this.props.tooltipStyle }
+            className: ee("k-tooltip", ie),
+            style: { position: "relative", ...ce }
           },
-          /* @__PURE__ */ l.createElement("div", { className: "k-tooltip-content" }, this.props.content && /* @__PURE__ */ l.createElement(this.props.content, { title: this.state.title, target: this.state.targetElement }) || this.state.title),
-          this.props.showCallout && /* @__PURE__ */ 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%"));
-              }
-            }
-          )
+          /* @__PURE__ */ o.createElement("div", { className: "k-tooltip-content" }, h && o.createElement(h, { title: g, target: u }) || g),
+          A && /* @__PURE__ */ o.createElement("div", { ref: ye })
         ))
       ),
-      this.props.appendTo ? this.props.appendTo : t.ownerDocument.body
+      B || u.ownerDocument.body
     );
-  }
-  showToolTip(t) {
-    clearTimeout(this.openTimeoutId), clearInterval(this.updateIntervalId), t.target.hasChildNodes() && t.target.childNodes.forEach((e) => {
-      e.nodeName === "title" && (t.target.titleExpando = e.innerHTML, e.remove());
-    });
-    const o = this.props.targetElement || t.target, s = this.getTitle(o);
-    if (!s.title) {
-      this.state.open && this.onClose(t);
-      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: o, open: !0, title: s.title },
-        this.setUpdateInterval
-      );
-    }, this.props.openDelay) : this.setState({ targetElement: o, open: !0, title: s.title }, this.setUpdateInterval), this.state.title !== s.title && m(this.props.onOpen, t, this, void 0);
-  }
-  isVisible(t) {
-    return !this.props.filter || this.props.filter(t);
-  }
+  })
+);
+z.displayName = "KendoReactTooltipCore";
+const le = o.forwardRef((f, m) => f.children ? /* @__PURE__ */ o.createElement(oe, { ref: m, ...f }) : /* @__PURE__ */ o.createElement(z, { ref: m, ...f }));
+le.displayName = "KendoReactTooltip";
+le.propTypes = {
+  id: l.string,
+  anchorElement: l.string,
+  appendTo: l.any,
+  position: l.oneOf(["auto", "top", "bottom", "left", "right"]),
+  showCallout: l.bool,
+  parentTitle: l.bool,
+  content: l.any,
+  open: l.bool,
+  targetElement: l.any,
+  filter: l.func,
+  openDelay: l.number,
+  updateInterval: l.number,
+  onOpen: l.func,
+  onClose: l.func,
+  onPosition: l.func,
+  className: l.string,
+  style: l.object,
+  tooltipClassName: l.string,
+  tooltipStyle: l.object,
+  setCalloutOnPositionAuto: l.string,
+  showOption: l.shape({
+    hover: l.bool,
+    click: l.bool,
+    focus: l.bool,
+    none: l.bool,
+    keys: l.arrayOf(l.string)
+  }),
+  children: l.node
 };
-p.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
-}, p.defaultProps = {
-  anchorElement: "pointer",
-  openDelay: 400,
-  position: "auto",
-  showCallout: !0,
-  parentTitle: !1
-}, p.contextType = y;
-let E = p;
 export {
-  E as Tooltip
+  le as Tooltip
 };

package/tooltip/events.d.ts

@@ -6,11 +6,11 @@
  *-------------------------------------------------------------------------------------------
  */
 import { BaseEvent } from '@progress/kendo-react-common';
-import { Tooltip } from './Tooltip.js';
+import { TooltipHandle } from './Tooltip.js';
 import { TooltipPosition } from './utils.js';
-export interface TooltipEvent extends BaseEvent<Tooltip> {
+export interface TooltipEvent extends BaseEvent<TooltipHandle> {
 }
-export interface TooltipPositionEvent extends BaseEvent<Tooltip> {
+export interface TooltipPositionEvent extends BaseEvent<TooltipHandle> {
     /**
      * The Tooltip element. Useful to get the actual `width` and `height` of rendered Tooltip.
      */