@progress/kendo-react-tooltip 8.2.0-develop.9 → 8.2.1-develop.1

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

@@ -5,4 +5,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 r(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=r(e),a=r(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:l=f.alignment,orientation:r=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-${l}`]:l,[`k-actions-${r}`]:r})},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={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},g={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},y={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},E={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},k=t=>s.Children.toArray(t).filter((t=>t&&t.type===m)),b=t=>s.Children.toArray(t).filter((t=>t&&t.type!==m)),w=s.forwardRef(((t,e)=>{i.validatePackage(u);const{callout:o=T.callout,position:n=T.position,collision:r=T.collision,title:a,children:p,show:c,anchor:h,appendTo:d,offset:m,animate:f,positionMode:w,scale:O,popoverClass:I,className:C,id:N,style:x,contentStyle:P,onPosition:R,onClose:D,onOpen:M}=t,[z,A]=s.useState(!1),j="top"===n||"bottom"===n,K=t.margin||{vertical:o&&j?15:0,horizontal:o&&!j?15:0},U=y[n],H=E[n],B=s.useContext(i.ZIndexContext),L=B?B+2e3:12e3,S=s.useRef(null);s.useImperativeHandle(S,(()=>({props:t}))),s.useImperativeHandle(e,(()=>S.current));const q=s.useCallback((t=>{if(setTimeout((()=>A(t.flipped))),R){const e={target:S.current,flipped:t.flipped,fitted:t.fitted};R.call(void 0,e)}}),[R,A]),W=s.useCallback((()=>{if(M){const t={target:S.current};M.call(void 0,t)}}),[M]),Z=s.useCallback((()=>{if(D){const t={target:S.current};D.call(void 0,t)}}),[D]),V={"k-popover":!0};Array.isArray(I)?I.forEach((t=>V[t]=!0)):"object"==typeof I?Object.keys(I).forEach((t=>{V[t]=I[t]})):I&&(V[I]=!0);const F=z?g[n]:v[n],X=s.useMemo((()=>s.createElement(s.Fragment,null,a&&s.createElement("div",{className:"k-popover-header"},a),s.createElement("div",{className:"k-popover-body",style:P},b(p)),k(p))),[p,P,a]);return s.createElement(i.ZIndexContext.Provider,{value:L},s.createElement(l.Popup,{id:N,role:"tooltip",animate:f,collision:r,anchor:h,offset:m,margin:K,popupAlign:U,anchorAlign:H,appendTo:d,show:c,scale:O,positionMode:w,style:x,className:C,popupClass:V,onOpen:W,onClose:Z,onPosition:q},o&&n?s.createElement(s.Fragment,null,s.createElement("div",{className:i.classNames("k-popover-callout",F)}),s.createElement("div",{className:"k-popover-inner"},X)):X))})),T={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};w.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},w.displayName="KendoReactPopover",t.Popover=w,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}));

package/index.d.mts

@@ -119,6 +119,20 @@ export declare interface PopoverHandle {
     props: PopoverProps;
 }
 
+/**
+ * Represents the object of the `KeyDown` Popover event.
+ */
+export declare interface PopoverKeyDownEvent {
+    /**
+     * An event target.
+     */
+    target: PopoverHandle;
+    /**
+     * A boolean value that indicates whether the Popover is visible.
+     */
+    show?: boolean;
+}
+
 /**
  * Defines the horizontal and the vertical margin offset of the component.
  */
@@ -287,6 +301,10 @@ export declare interface PopoverProps {
      * Fires after the Popover position is set.
      */
     onPosition?: (event: PopoverPositionEvent) => void;
+    /**
+     * Fires when the Popover is focused and a key is pressed.
+     */
+    onKeyDown?: (event: PopoverKeyDownEvent) => void;
     /**
      * @hidden
      */
@@ -304,6 +322,7 @@ export declare class Tooltip extends React_2.PureComponent<TooltipProps, Tooltip
         openDelay: PropTypes.Requireable<number>;
         position: PropTypes.Requireable<string>;
         updateInterval: PropTypes.Requireable<number>;
+        showOption: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         anchorElement: string;
@@ -346,6 +365,13 @@ export declare class Tooltip extends React_2.PureComponent<TooltipProps, Tooltip
      * The method is used on the MouseOut event to hide the Tooltip.
      */
     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.
      */
@@ -436,6 +462,16 @@ export declare interface TooltipProps {
      * Sets a class of the Tooltip animation container.
      */
     className?: string;
+    /**
+     * 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 %})).
      */
@@ -508,6 +544,22 @@ export declare interface TooltipProps {
     updateInterval?: number;
 }
 
+/**
+ * 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
  */

package/index.d.ts

@@ -119,6 +119,20 @@ export declare interface PopoverHandle {
     props: PopoverProps;
 }
 
+/**
+ * Represents the object of the `KeyDown` Popover event.
+ */
+export declare interface PopoverKeyDownEvent {
+    /**
+     * An event target.
+     */
+    target: PopoverHandle;
+    /**
+     * A boolean value that indicates whether the Popover is visible.
+     */
+    show?: boolean;
+}
+
 /**
  * Defines the horizontal and the vertical margin offset of the component.
  */
@@ -287,6 +301,10 @@ export declare interface PopoverProps {
      * Fires after the Popover position is set.
      */
     onPosition?: (event: PopoverPositionEvent) => void;
+    /**
+     * Fires when the Popover is focused and a key is pressed.
+     */
+    onKeyDown?: (event: PopoverKeyDownEvent) => void;
     /**
      * @hidden
      */
@@ -304,6 +322,7 @@ export declare class Tooltip extends React_2.PureComponent<TooltipProps, Tooltip
         openDelay: PropTypes.Requireable<number>;
         position: PropTypes.Requireable<string>;
         updateInterval: PropTypes.Requireable<number>;
+        showOption: PropTypes.Requireable<object>;
     };
     static defaultProps: {
         anchorElement: string;
@@ -346,6 +365,13 @@ export declare class Tooltip extends React_2.PureComponent<TooltipProps, Tooltip
      * The method is used on the MouseOut event to hide the Tooltip.
      */
     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.
      */
@@ -436,6 +462,16 @@ export declare interface TooltipProps {
      * Sets a class of the Tooltip animation container.
      */
     className?: string;
+    /**
+     * 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 %})).
      */
@@ -508,6 +544,22 @@ export declare interface TooltipProps {
     updateInterval?: number;
 }
 
+/**
+ * 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
  */

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-tooltip",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1720780450,
+  publishDate: 1723022995,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-tooltip",
-  "version": "8.2.0-develop.9",
+  "version": "8.2.1-develop.1",
   "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",
@@ -23,8 +23,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "8.2.0-develop.9",
-    "@progress/kendo-react-popup": "8.2.0-develop.9",
+    "@progress/kendo-react-common": "8.2.1-develop.1",
+    "@progress/kendo-react-popup": "8.2.1-develop.1",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/popover/Popover.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react"),e=require("prop-types"),p=require("@progress/kendo-react-common"),X=require("../package-metadata.js"),G=require("@progress/kendo-react-popup"),E=require("./PopoverActionsBar.js");function J(o){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(n,a,l.get?l:{enumerable:!0,get:()=>o[a]})}}return n.default=o,Object.freeze(n)}const t=J(U),Q=12e3,W=2e3,C=15,Y={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},$={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},ee={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},te={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},oe=o=>t.Children.toArray(o).filter(n=>n&&n.type===E.PopoverActionsBar),ne=o=>t.Children.toArray(o).filter(n=>n&&n.type!==E.PopoverActionsBar),h=t.forwardRef((o,n)=>{p.validatePackage(X.packageMetadata);const{callout:a=b.callout,position:l=b.position,collision:T=b.collision,title:u,children:d,show:A,anchor:z,appendTo:R,offset:N,animate:j,positionMode:x,scale:I,popoverClass:i,className:w,id:S,style:_,contentStyle:g,onPosition:f,onClose:m,onOpen:v}=o,[D,y]=t.useState(!1),P=l==="top"||l==="bottom",M=o.margin||{vertical:a&&P?C:0,horizontal:a&&!P?C:0},q=ee[l],B=te[l],O=t.useContext(p.ZIndexContext),Z=O?O+W:Q,c=t.useRef(null);t.useImperativeHandle(c,()=>({props:o})),t.useImperativeHandle(n,()=>c.current);const F=t.useCallback(r=>{if(setTimeout(()=>y(r.flipped)),f){const H={target:c.current,flipped:r.flipped,fitted:r.fitted};f.call(void 0,H)}},[f,y]),V=t.useCallback(()=>{if(v){const r={target:c.current};v.call(void 0,r)}},[v]),K=t.useCallback(()=>{if(m){const r={target:c.current};m.call(void 0,r)}},[m]),s={"k-popover":!0};Array.isArray(i)?i.forEach(r=>s[r]=!0):typeof i=="object"?Object.keys(i).forEach(r=>{s[r]=i[r]}):i&&(s[i]=!0);const L=D?$[l]:Y[l],k=t.useMemo(()=>t.createElement(t.Fragment,null,u&&t.createElement("div",{className:"k-popover-header"},u),t.createElement("div",{className:"k-popover-body",style:g},ne(d)),oe(d)),[d,g,u]);return t.createElement(p.ZIndexContext.Provider,{value:Z},t.createElement(G.Popup,{id:S,role:"tooltip",animate:j,collision:T,anchor:z,offset:N,margin:M,popupAlign:q,anchorAlign:B,appendTo:R,show:A,scale:I,positionMode:x,style:_,className:w,popupClass:s,onOpen:V,onClose:K,onPosition:F},a&&l?t.createElement(t.Fragment,null,t.createElement("div",{className:p.classNames("k-popover-callout",L)}),t.createElement("div",{className:"k-popover-inner"},k)):k))}),b={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};h.propTypes={callout:e.bool,title:e.node,position:e.oneOf(["top","left","bottom","right"]),show:e.bool,animate:e.oneOfType([e.bool,e.shape({openDuration:e.number,closeDuration:e.number})]),anchor:function(o){const n=o.anchor;return n&&typeof n.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed."):null},appendTo:function(o){const n=o.appendTo;return n&&typeof n.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed."):null},positionMode:e.oneOf(["fixed","absolute"]),scale:e.number,offset:e.shape({left:e.number,top:e.number}),children:e.oneOfType([e.element,e.node]),className:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),id:e.string,popoverClass:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),style:e.object,onClose:e.func,onPosition:e.func,onOpen:e.func};h.displayName="KendoReactPopover";exports.Popover=h;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),e=require("prop-types"),u=require("@progress/kendo-react-common"),Q=require("../package-metadata.js"),W=require("@progress/kendo-react-popup"),w=require("./PopoverActionsBar.js"),T=require("./utils.js");function Y(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const l in n)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(n,l);Object.defineProperty(r,l,a.get?a:{enumerable:!0,get:()=>n[l]})}}return r.default=n,Object.freeze(r)}const t=Y(J),$=12e3,ee=2e3,A=15,te={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},oe={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},ne={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},re={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},ae=n=>t.Children.toArray(n).filter(r=>r&&r.type===w.PopoverActionsBar),le=n=>t.Children.toArray(n).filter(r=>r&&r.type!==w.PopoverActionsBar),y=t.forwardRef((n,r)=>{u.validatePackage(Q.packageMetadata);const{callout:l=b.callout,position:a=b.position,collision:z=b.collision,title:d,children:f,show:R,anchor:N,appendTo:j,offset:D,animate:x,positionMode:I,scale:S,popoverClass:c,className:q,id:F,style:_,contentStyle:P,onPosition:m,onClose:v,onOpen:g,onKeyDown:h}=n,[M,k]=t.useState(!1),O=a==="top"||a==="bottom",B=n.margin||{vertical:l&&O?A:0,horizontal:l&&!O?A:0},K=ne[a],Z=re[a],C=t.useContext(u.ZIndexContext),V=C?C+ee:$,s=t.useRef(null);t.useImperativeHandle(s,()=>({props:n})),t.useImperativeHandle(r,()=>s.current);const L=t.useCallback(o=>{if(setTimeout(()=>k(o.flipped)),m){const i={target:s.current,flipped:o.flipped,fitted:o.fitted};m.call(void 0,i)}},[m,k]),H=t.useCallback(()=>{const o=T.getFirstFocusableElement(document.querySelector(".k-popover-inner"));if(o&&o.focus(),g){const i={target:s.current};g.call(void 0,i)}},[g]),U=t.useCallback(o=>{if(h&&o.key==="Escape"){const i={target:s.current,show:!1};h.call(void 0,i)}o.key==="Tab"&&T.handleFocusTrap(o)},[h]),X=t.useCallback(o=>{if(v){const i={target:s.current};v.call(void 0,i)}o&&o.target&&o.target.props&&o.target.props.anchor&&o.target.props.anchor.focus()},[v]),p={"k-popover":!0};Array.isArray(c)?c.forEach(o=>p[o]=!0):typeof c=="object"?Object.keys(c).forEach(o=>{p[o]=c[o]}):c&&(p[c]=!0);const G=M?oe[a]:te[a],E=t.useMemo(()=>t.createElement(t.Fragment,null,d&&t.createElement("div",{className:"k-popover-header"},d),t.createElement("div",{className:"k-popover-body",style:P},le(f)),ae(f)),[f,P,d]);return t.createElement(u.ZIndexContext.Provider,{value:V},t.createElement(W.Popup,{id:F,role:"tooltip",animate:x,collision:z,anchor:N,offset:D,margin:B,popupAlign:K,anchorAlign:Z,appendTo:j,show:R,scale:S,positionMode:I,style:_,className:q,popupClass:p,onOpen:H,onClose:X,onPosition:L,onKeyDown:U},l&&a?t.createElement(t.Fragment,null,t.createElement("div",{className:u.classNames("k-popover-callout",G)}),t.createElement("div",{className:"k-popover-inner"},E)):E))}),b={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};y.propTypes={callout:e.bool,title:e.node,position:e.oneOf(["top","left","bottom","right"]),show:e.bool,animate:e.oneOfType([e.bool,e.shape({openDuration:e.number,closeDuration:e.number})]),anchor:function(n){const r=n.anchor;return r&&typeof r.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed."):null},appendTo:function(n){const r=n.appendTo;return r&&typeof r.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed."):null},positionMode:e.oneOf(["fixed","absolute"]),scale:e.number,offset:e.shape({left:e.number,top:e.number}),children:e.oneOfType([e.element,e.node]),className:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),id:e.string,popoverClass:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),style:e.object,onClose:e.func,onPosition:e.func,onOpen:e.func};y.displayName="KendoReactPopover";exports.Popover=y;

package/popover/Popover.mjs

@@ -8,116 +8,130 @@
 "use client";
 import * as o from "react";
 import e from "prop-types";
-import { validatePackage as X, ZIndexContext as C, classNames as q } from "@progress/kendo-react-common";
-import { packageMetadata as G } from "../package-metadata.mjs";
-import { Popup as J } from "@progress/kendo-react-popup";
-import { PopoverActionsBar as k } from "./PopoverActionsBar.mjs";
-const Q = 12e3, W = 2e3, E = 15, Y = {
+import { validatePackage as G, ZIndexContext as C, classNames as J } from "@progress/kendo-react-common";
+import { packageMetadata as Q } from "../package-metadata.mjs";
+import { Popup as W } from "@progress/kendo-react-popup";
+import { PopoverActionsBar as T } from "./PopoverActionsBar.mjs";
+import { getFirstFocusableElement as Y, handleFocusTrap as $ } from "./utils.mjs";
+const ee = 12e3, oe = 2e3, O = 15, te = {
   top: "k-callout-s",
   left: "k-callout-e",
   bottom: "k-callout-n",
   right: "k-callout-w"
-}, $ = {
+}, ne = {
   top: "k-callout-n",
   left: "k-callout-w",
   bottom: "k-callout-s",
   right: "k-callout-e"
-}, ee = {
+}, re = {
   top: { vertical: "bottom", horizontal: "center" },
   left: { vertical: "center", horizontal: "right" },
   bottom: { vertical: "top", horizontal: "center" },
   right: { vertical: "center", horizontal: "left" }
-}, oe = {
+}, le = {
   top: { vertical: "top", horizontal: "center" },
   left: { vertical: "center", horizontal: "left" },
   bottom: { vertical: "bottom", horizontal: "center" },
   right: { vertical: "center", horizontal: "right" }
-}, te = (r) => o.Children.toArray(r).filter((t) => t && t.type === k), ne = (r) => o.Children.toArray(r).filter((t) => t && t.type !== k), O = o.forwardRef((r, t) => {
-  X(G);
+}, ae = (r) => o.Children.toArray(r).filter((n) => n && n.type === T), ie = (r) => o.Children.toArray(r).filter((n) => n && n.type !== T), A = o.forwardRef((r, n) => {
+  G(Q);
   const {
-    callout: s = v.callout,
-    position: l = v.position,
-    collision: T = v.collision,
-    title: p,
-    children: u,
-    show: A,
-    anchor: z,
-    appendTo: N,
-    offset: R,
-    animate: x,
-    positionMode: I,
-    scale: w,
+    callout: p = g.callout,
+    position: l = g.position,
+    collision: w = g.collision,
+    title: u,
+    children: f,
+    show: z,
+    anchor: N,
+    appendTo: R,
+    offset: x,
+    animate: D,
+    positionMode: F,
+    scale: I,
     popoverClass: a,
-    className: j,
-    id: D,
-    style: F,
-    contentStyle: h,
-    onPosition: f,
-    onClose: d,
-    onOpen: m
-  } = r, [V, b] = o.useState(!1), g = l === "top" || l === "bottom", Z = r.margin || {
-    vertical: s && g ? E : 0,
-    horizontal: s && !g ? E : 0
-  }, _ = ee[l], B = oe[l], y = o.useContext(C), M = y ? y + W : Q, i = o.useRef(null);
-  o.useImperativeHandle(i, () => ({ props: r })), o.useImperativeHandle(t, () => i.current);
-  const S = o.useCallback(
-    (n) => {
-      if (setTimeout(() => b(n.flipped)), f) {
-        const U = { target: i.current, flipped: n.flipped, fitted: n.fitted };
-        f.call(void 0, U);
+    className: K,
+    id: j,
+    style: S,
+    contentStyle: y,
+    onPosition: d,
+    onClose: m,
+    onOpen: h,
+    onKeyDown: v
+  } = r, [V, b] = o.useState(!1), P = l === "top" || l === "bottom", Z = r.margin || {
+    vertical: p && P ? O : 0,
+    horizontal: p && !P ? O : 0
+  }, _ = re[l], B = le[l], k = o.useContext(C), M = k ? k + oe : ee, c = o.useRef(null);
+  o.useImperativeHandle(c, () => ({ props: r })), o.useImperativeHandle(n, () => c.current);
+  const L = o.useCallback(
+    (t) => {
+      if (setTimeout(() => b(t.flipped)), d) {
+        const i = { target: c.current, flipped: t.flipped, fitted: t.fitted };
+        d.call(void 0, i);
       }
     },
-    [f, b]
-  ), K = o.useCallback(
+    [d, b]
+  ), H = o.useCallback(
     () => {
-      if (m) {
-        const n = { target: i.current };
-        m.call(void 0, n);
+      const t = Y(document.querySelector(".k-popover-inner"));
+      if (t && t.focus(), h) {
+        const i = { target: c.current };
+        h.call(void 0, i);
       }
     },
-    [m]
-  ), L = o.useCallback(
-    () => {
-      if (d) {
-        const n = { target: i.current };
-        d.call(void 0, n);
+    [h]
+  ), U = o.useCallback(
+    (t) => {
+      if (v && t.key === "Escape") {
+        const i = { target: c.current, show: !1 };
+        v.call(void 0, i);
       }
+      t.key === "Tab" && $(t);
     },
-    [d]
-  ), c = { "k-popover": !0 };
-  Array.isArray(a) ? a.forEach((n) => c[n] = !0) : typeof a == "object" ? Object.keys(a).forEach((n) => {
-    c[n] = a[n];
-  }) : a && (c[a] = !0);
-  const H = V ? $[l] : Y[l], P = o.useMemo(
-    () => /* @__PURE__ */ o.createElement(o.Fragment, null, p && /* @__PURE__ */ o.createElement("div", { className: "k-popover-header" }, p), /* @__PURE__ */ o.createElement("div", { className: "k-popover-body", style: h }, ne(u)), te(u)),
-    [u, h, p]
+    [v]
+  ), X = o.useCallback(
+    (t) => {
+      if (m) {
+        const i = { target: c.current };
+        m.call(void 0, i);
+      }
+      t && t.target && t.target.props && t.target.props.anchor && t.target.props.anchor.focus();
+    },
+    [m]
+  ), s = { "k-popover": !0 };
+  Array.isArray(a) ? a.forEach((t) => s[t] = !0) : typeof a == "object" ? Object.keys(a).forEach((t) => {
+    s[t] = a[t];
+  }) : a && (s[a] = !0);
+  const q = V ? ne[l] : te[l], E = o.useMemo(
+    () => /* @__PURE__ */ o.createElement(o.Fragment, null, u && /* @__PURE__ */ o.createElement("div", { className: "k-popover-header" }, u), /* @__PURE__ */ o.createElement("div", { className: "k-popover-body", style: y }, ie(f)), ae(f)),
+    [f, y, u]
   );
   return /* @__PURE__ */ o.createElement(C.Provider, { value: M }, /* @__PURE__ */ o.createElement(
-    J,
+    W,
     {
-      id: D,
+      id: j,
       role: "tooltip",
-      animate: x,
-      collision: T,
-      anchor: z,
-      offset: R,
+      animate: D,
+      collision: w,
+      anchor: N,
+      offset: x,
       margin: Z,
       popupAlign: _,
       anchorAlign: B,
-      appendTo: N,
-      show: A,
-      scale: w,
-      positionMode: I,
-      style: F,
-      className: j,
-      popupClass: c,
-      onOpen: K,
-      onClose: L,
-      onPosition: S
+      appendTo: R,
+      show: z,
+      scale: I,
+      positionMode: F,
+      style: S,
+      className: K,
+      popupClass: s,
+      onOpen: H,
+      onClose: X,
+      onPosition: L,
+      onKeyDown: U
     },
-    s && l ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", { className: q("k-popover-callout", H) }), /* @__PURE__ */ o.createElement("div", { className: "k-popover-inner" }, P)) : P
+    p && l ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", { className: J("k-popover-callout", q) }), /* @__PURE__ */ o.createElement("div", { className: "k-popover-inner" }, E)) : E
   ));
-}), v = {
+}), g = {
   callout: !0,
   position: "top",
   collision: {
@@ -125,7 +139,7 @@ const Q = 12e3, W = 2e3, E = 15, Y = {
     vertical: "none"
   }
 };
-O.propTypes = {
+A.propTypes = {
   callout: e.bool,
   title: e.node,
   position: e.oneOf(["top", "left", "bottom", "right"]),
@@ -138,14 +152,14 @@ O.propTypes = {
     })
   ]),
   anchor: function(r) {
-    const t = r.anchor;
-    return t && typeof t.nodeType != "number" ? new Error(
+    const n = r.anchor;
+    return n && typeof n.nodeType != "number" ? new Error(
       "Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed."
     ) : null;
   },
   appendTo: function(r) {
-    const t = r.appendTo;
-    return t && typeof t.nodeType != "number" ? new Error(
+    const n = r.appendTo;
+    return n && typeof n.nodeType != "number" ? new Error(
       "Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed."
     ) : null;
   },
@@ -178,7 +192,7 @@ O.propTypes = {
   onPosition: e.func,
   onOpen: e.func
 };
-O.displayName = "KendoReactPopover";
+A.displayName = "KendoReactPopover";
 export {
-  O as Popover
+  A as Popover
 };

package/popover/utils.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@progress/kendo-react-common"),r=e=>{if(e){const t=e.querySelectorAll(n.FOCUSABLE_ELEMENTS.join(", "));if(t.length)return t[0]}},l=e=>{if(e){const t=e.querySelectorAll(n.FOCUSABLE_ELEMENTS.join(", "));if(t.length)return t[t.length-1]}},s=e=>{const t=r(document.querySelector(".k-popover-inner")),o=l(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())};exports.getFirstFocusableElement=r;exports.getLastFocusableElement=l;exports.handleFocusTrap=s;

package/popover/utils.mjs

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import { FOCUSABLE_ELEMENTS as n } from "@progress/kendo-react-common";
+const r = (e) => {
+  if (e) {
+    const t = e.querySelectorAll(n.join(", "));
+    if (t.length)
+      return t[0];
+  }
+}, l = (e) => {
+  if (e) {
+    const t = e.querySelectorAll(n.join(", "));
+    if (t.length)
+      return t[t.length - 1];
+  }
+}, c = (e) => {
+  const t = r(document.querySelector(".k-popover-inner")), o = l(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());
+};
+export {
+  r as getFirstFocusableElement,
+  l as getLastFocusableElement,
+  c as handleFocusTrap
+};

package/tooltip/Tooltip.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"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;

package/tooltip/Tooltip.mjs

@@ -6,29 +6,42 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as n from "react";
-import * as m from "react-dom";
-import l from "prop-types";
-import { dispatchEvent as p, validatePackage as d, ZIndexContext as f, classNames as h } from "@progress/kendo-react-common";
-import { isTooltipElement as u, getDomRect as g, getLeftPosition as E, getTopPosition as v } from "./utils.mjs";
-import { packageMetadata as I } from "../package-metadata.mjs";
-const T = 100, r = class r extends n.PureComponent {
-  constructor(s) {
-    super(s), this.context = 0, this.state = {
+import * as l from "react";
+import * as T from "react-dom";
+import r from "prop-types";
+import { dispatchEvent as d, validatePackage as y, ZIndexContext as I, classNames as m } from "@progress/kendo-react-common";
+import { isTooltipElement as f, getDomRect as k, getLeftPosition as C, getTopPosition as x } from "./utils.mjs";
+import { packageMetadata as D } from "../package-metadata.mjs";
+const M = 100, h = class h extends l.PureComponent {
+  constructor(o) {
+    super(o), 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);
-      u(i) || this.props.open || (clearInterval(this.updateIntervalId), this.willOpen = !1, this.onClose(t));
+      const { targetElement: s } = this.state, e = s ? s.ownerDocument : document;
+      let a = e && e.elementFromPoint(t.clientX, t.clientY);
+      f(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 e = t.target;
-      !this.isVisible(e) || u(e) || e === this.state.targetElement || this.showToolTip(t);
+      const s = t.target;
+      !this.isVisible(s) || f(s) || s === this.state.targetElement || this.showToolTip(t);
     }, this.handleBodyMousemove = (t) => {
       this.top = t.clientY, this.left = t.clientX;
     }, this.onClose = (t) => {
-      p(this.props.onClose, t, this, void 0), this.setState({ targetElement: null, open: !1, title: "" });
+      d(this.props.onClose, t, this, void 0), this.setState({ targetElement: null, open: !1, title: "" });
     }, this.setUpdateInterval = () => {
       this.props.updateInterval && (this.updateIntervalId = setInterval(
         this.onIntervalUpdate,
@@ -38,21 +51,21 @@ const T = 100, r = class r extends n.PureComponent {
       const t = this.state.targetElement;
       t && (t.parentElement === null ? this.onClose({ target: t }) : this.showToolTip({ target: t }));
     }, this.position = (t) => {
-      let e = g(this.state.targetElement);
-      const o = E(
+      let s = k(this.state.targetElement);
+      const e = C(
         this.left,
         t.offsetWidth,
-        e,
+        s,
         this.props.anchorElement,
         this.props.position
-      ), i = v(
+      ), a = x(
         this.top,
-        e,
+        s,
         t.offsetHeight,
         this.props.anchorElement,
         this.props.position
       );
-      return { left: o, top: i };
+      return { left: e, top: a };
     }, this.getTitle = (t) => {
       for (; t; ) {
         if (t.getAttribute("title") !== null || t.titleExpando)
@@ -73,7 +86,7 @@ const T = 100, r = class r extends n.PureComponent {
         default:
           return this.top < window.innerHeight / 2 ? "k-callout k-callout-n" : "k-callout k-callout-s";
       }
-    }, this.getCurrentZIndex = () => this.context ? this.context : T, d(I);
+    }, this.getCurrentZIndex = () => this.context ? this.context : M, y(D);
   }
   /**
    * @hidden
@@ -98,36 +111,46 @@ const T = 100, r = class r extends n.PureComponent {
    */
   render() {
     if (this.props.children) {
-      const { children: e, ...o } = this.props;
-      let i = null;
-      return /* @__PURE__ */ n.createElement(
+      const { children: s, showOption: e, ...a } = this.props;
+      let n = null;
+      const c = (e == null ? void 0 : e.hover) !== void 0 ? e == null ? void 0 : e.hover : !0, E = (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, p = (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: (a) => {
-            i && i.handleMouseOver(a);
+          onMouseOver: (i) => {
+            n && !p && c && n.handleMouseOver(i);
+          },
+          onMouseOut: (i) => {
+            n && !p && c && n.handleMouseOut(i);
+          },
+          onClick: (i) => {
+            n && !p && E && n.handleTargetItemClick(i);
+          },
+          onFocus: (i) => {
+            n && !p && v && n.handleMouseOver(i);
           },
-          onMouseOut: (a) => {
-            i && i.handleMouseOut(a);
+          onKeyDown: (i) => {
+            (n && !p && u.length > 0 || n && !p && i.key === "Escape") && n.handleKeyDown(i, u);
           }
         },
-        /* @__PURE__ */ n.createElement(r, { ref: (a) => i = a, ...o }),
-        e
+        /* @__PURE__ */ l.createElement(h, { ref: (i) => n = i, ...a }),
+        s
       );
     }
     if (this.props.open === !1)
       return null;
-    const { targetElement: s } = this.state, t = this.getCurrentZIndex();
-    return s && this.state.title && s.ownerDocument && m.createPortal(
-      /* @__PURE__ */ n.createElement(
+    const { targetElement: o } = this.state, t = this.getCurrentZIndex();
+    return o && this.state.title && o.ownerDocument && T.createPortal(
+      /* @__PURE__ */ l.createElement(
         "div",
         {
-          ref: (e) => {
-            if (!e)
+          ref: (s) => {
+            if (!s)
               return;
-            let o;
+            let e;
             if (this.props.onPosition) {
-              const i = {
-                element: e,
+              const a = {
+                element: s,
                 targetElement: this.state.targetElement,
                 mouseTop: this.top,
                 mouseLeft: this.left,
@@ -137,12 +160,12 @@ const T = 100, r = class r extends n.PureComponent {
                 syntheticEvent: null,
                 nativeEvent: null
               };
-              o = this.props.onPosition.call(void 0, i);
+              e = this.props.onPosition.call(void 0, a);
             } else
-              o = this.position(e);
-            e.style.left = o.left + "px", e.style.top = o.top + "px";
+              e = this.position(s);
+            s.style.left = e.left + "px", s.style.top = e.top + "px";
           },
-          className: h(
+          className: m(
             "k-animation-container",
             "k-animation-container-fixed",
             "k-animation-container-shown",
@@ -154,67 +177,68 @@ const T = 100, r = class r extends n.PureComponent {
           },
           tabIndex: 0
         },
-        /* @__PURE__ */ n.createElement("div", { className: "k-child-animation-container" }, /* @__PURE__ */ n.createElement(
+        /* @__PURE__ */ l.createElement("div", { className: "k-child-animation-container" }, /* @__PURE__ */ l.createElement(
           "div",
           {
             id: this.props.id,
             role: "tooltip",
-            className: h(
+            className: m(
               "k-tooltip",
               this.props.tooltipClassName
             ),
             style: { position: "relative", ...this.props.tooltipStyle }
           },
-          /* @__PURE__ */ n.createElement("div", { className: "k-tooltip-content" }, this.props.content && /* @__PURE__ */ n.createElement(this.props.content, { title: this.state.title, target: this.state.targetElement }) || this.state.title),
-          this.props.showCallout && /* @__PURE__ */ n.createElement(
+          /* @__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: (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%"));
+              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 : s.ownerDocument.body
+      this.props.appendTo ? this.props.appendTo : o.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());
+  showToolTip(o) {
+    clearTimeout(this.openTimeoutId), clearInterval(this.updateIntervalId), o.target.hasChildNodes() && o.target.childNodes.forEach((e) => {
+      e.nodeName === "title" && (o.target.titleExpando = e.innerHTML, e.remove());
     });
-    const t = this.props.targetElement || s.target;
-    let e = this.getTitle(t);
-    if (!e.title) {
-      this.state.open && this.onClose(s);
+    const t = this.props.targetElement || o.target;
+    let s = this.getTitle(t);
+    if (!s.title) {
+      this.state.open && this.onClose(o);
       return;
     }
-    e.element && (e.element.titleExpando = e.title, e.element.title = ""), this.willOpen = !0, this.props.openDelay ? this.openTimeoutId = window.setTimeout(
+    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: e.title }, this.setUpdateInterval);
+        this.willOpen && this.setState({ targetElement: t, open: !0, title: s.title }, this.setUpdateInterval);
       },
       this.props.openDelay
-    ) : this.setState({ targetElement: t, open: !0, title: e.title }, this.setUpdateInterval), this.state.title !== e.title && p(this.props.onOpen, s, this, void 0);
+    ) : this.setState({ targetElement: t, open: !0, title: s.title }, this.setUpdateInterval), this.state.title !== s.title && d(this.props.onOpen, o, this, void 0);
   }
-  isVisible(s) {
-    return !this.props.filter || this.props.filter(s);
+  isVisible(o) {
+    return !this.props.filter || this.props.filter(o);
   }
 };
-r.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
-}, r.defaultProps = {
+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
-}, r.contextType = f;
-let c = r;
+}, h.contextType = I;
+let g = h;
 export {
-  c as Tooltip
+  g as Tooltip
 };