@progress/kendo-react-tooltip 14.4.1 → 14.5.0-develop.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-tooltip.js +1 -1
- package/index.d.mts +3 -2
- package/index.d.ts +3 -2
- package/package-metadata.mjs +2 -2
- package/package.json +10 -5
- package/tooltip/Tooltip.d.ts +2 -2
- package/tooltip/Tooltip.js +1 -1
- package/tooltip/Tooltip.mjs +80 -76
- package/tooltip/TooltipProps.d.ts +18 -0
- package/tooltip/theme-color.type.d.ts +11 -0
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!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);const s=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],u=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 s.filter(t=>t===e.className).length>0},p={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},d=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),m=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&&m&&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(f,{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)});d.displayName="KendoReactTooltipWrapper";const f=i.memo(i.forwardRef((e,t)=>{const{anchorElement:o=p.anchorElement,openDelay:n=p.openDelay,position:l=p.position,showCallout:a=p.showCallout,parentTitle:s=p.parentTitle,open:d,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!==d,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?d: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)||u(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);u(o)||d||(clearInterval(z.current),q.current=!1,V(e))},_=e=>L.current===e.nativeEvent.target,G=e=>{const t=_(e);(B?d:F.current)&&t?V(e):X(e)},J=(e,t)=>{const o=e.key;"Escape"===e.key?(e=>{const t=_(e);(B?d: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(d&&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===d&&(P(null),A(!1),K(""))},[d,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===d?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)}));f.displayName="KendoReactTooltipCore";const m=i.forwardRef((e,t)=>e.children?i.createElement(d,{ref:t,...e}):i.createElement(f,{ref:t,...e}));m.displayName="KendoReactTooltip",m.propTypes={id:n.string,anchorElement:n.string,appendTo:n.any,position:n.oneOf(["auto","top","bottom","left","right"]),showCallout:n.bool,parentTitle:n.bool,content:n.any,open:n.bool,targetElement:n.any,filter:n.func,openDelay:n.number,updateInterval:n.number,onOpen:n.func,onClose:n.func,onPosition:n.func,className:n.string,style:n.object,tooltipClassName:n.string,tooltipStyle:n.object,setCalloutOnPositionAuto:n.string,showOption:n.shape({hover:n.bool,click:n.bool,focus:n.bool,none:n.bool,keys:n.arrayOf(n.string)}),children:n.node};const h=i.forwardRef((e,t)=>{const o=i.useRef(null),n=i.useRef(null),{alignment:l=v.alignment,orientation:a=v.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)}),v={alignment:"stretched",orientation:"horizontal"};h.propTypes={alignment:n.oneOf(["start","center","end","stretched"]),orientation:n.oneOf(["horizontal","vertical"]),children:n.oneOfType([n.element,n.node])},h.displayName="KendoReactPopoverActionsBar";const g=e=>{if(e){const t=e.querySelectorAll(r.FOCUSABLE_ELEMENTS.join(", "));if(t.length)return t[0]}},y=e=>{const t=g(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())},k={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},b={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"}},w={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},C=i.forwardRef((e,t)=>{const{autoFocus:o=!0,callout:n=O.callout,position:a=O.position,collision:c=O.collision,title:s,children:u,show:p,anchor:d,appendTo:f,offset:m,animate:v,positionMode:C,scale:T,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=E[a],L=w[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=g(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&&y(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?b[a]:k[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!==h))(u)),(e=>i.Children.toArray(e).filter(e=>e&&e.type===h))(u)),[u,I,s]);return i.createElement(r.ZIndexContext.Provider,{value:B},i.createElement(l.Popup,{id:x,role:"tooltip",animate:v,collision:c,anchor:d,offset:m,margin:q,popupAlign:H,anchorAlign:L,appendTo:f,show:p,scale:T,positionMode:C,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"},_)):_))}),O={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};C.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},C.displayName="KendoReactPopover",e.Popover=C,e.PopoverActionsBar=h,e.Tooltip=m});
|
|
15
|
+
!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);const s=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],u=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 s.filter(t=>t===e.className).length>0},p={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},d=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),m=void 0!==(null==o?void 0:o.click)&&(null==o?void 0:o.click),v=void 0!==(null==o?void 0:o.focus)&&(null==o?void 0:o.focus),h=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&&!h&&d&&p.handleMouseOver(e)},onMouseLeave:e=>{p&&!h&&d&&p.handleMouseLeave(e)},onClick:e=>{p&&!h&&m&&p.handleTargetItemClick(e)},onFocus:e=>{p&&!h&&v&&p.handleMouseOver(e)},onKeyDown:e=>{(p&&!h&&g.length>0||p&&!h&&"Escape"===e.key)&&p.handleKeyDown(e,g)}},i.createElement(f,{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)});d.displayName="KendoReactTooltipWrapper";const f=i.memo(i.forwardRef((e,t)=>{const{anchorElement:o=p.anchorElement,openDelay:n=p.openDelay,position:l=p.position,showCallout:a=p.showCallout,parentTitle:s=p.parentTitle,open:d,targetElement:f,content:m,filter:v,updateInterval:h,onOpen:g,onClose:y,onPosition:k,appendTo:b,className:E,style:w,id:C,tooltipClassName:T,tooltipStyle:O,setCalloutOnPositionAuto:N,themeColor:R}=e,x=i.useContext(r.ZIndexContext),[P,I]=i.useState(null),[A,D]=i.useState(!1),[K,S]=i.useState(""),M=i.useRef(0),j=i.useRef(0),z=i.useRef(void 0),L=i.useRef(void 0),q=i.useRef(!1),H=i.useRef(K),F=i.useRef(P),B=i.useRef(A);i.useEffect(()=>{F.current=P,B.current=A,H.current=K},[P,A,K]);const W=void 0!==d,Z=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}},$=()=>{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 M.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}})(j.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}})(M.current,n,e.offsetHeight,o,l);return{left:r,top:a}},V=e=>{r.dispatchEvent(y,e,void 0,void 0),I(null),D(!1),S("")},X=e=>{clearTimeout(z.current),clearInterval(L.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=Z(t),l=W?d:B.current;if(!o.title)return void(l&&V(e));o.element&&(o.element.titleExpando=o.title,o.element.title=""),q.current=!0;const a=()=>{I(o.element||t),D(!0),S(o.title),h&&(L.current=setInterval(()=>{const e=t;if(e)if(null===e.parentElement)V({target:e});else{const t=Z(e);t.title&&t.title!==H.current&&S(t.title)}},h))};n?z.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=>!v||v(e))(t)||u(t)||t===F.current||X(e)},_=e=>{const t=F.current?F.current.ownerDocument:document,o=null==t?void 0:t.elementFromPoint(e.clientX,e.clientY);u(o)||d||(clearInterval(L.current),q.current=!1,V(e))},G=e=>F.current===e.nativeEvent.target,J=e=>{const t=G(e);(W?d:B.current)&&t?V(e):X(e)},Q=(e,t)=>{const o=e.key;"Escape"===e.key?(e=>{const t=G(e);(W?d:B.current)&&t&&V(e)})(e):t.includes(o)&&Y(e)},ee=i.useCallback(e=>{M.current=e.clientY,j.current=e.clientX},[]);i.useEffect(()=>(document&&document.body.addEventListener("mousemove",ee),()=>{clearTimeout(z.current),clearInterval(L.current),document&&document.body.removeEventListener("mousemove",ee)}),[ee]),i.useEffect(()=>{if(d&&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=""),I(f),D(!0),S(t))}else!1===d&&(I(null),D(!1),S(""))},[d,f,s]);const te=i.useMemo(()=>({handleMouseOver:Y,handleMouseLeave:_,handleTargetItemClick:J,handleKeyDown:Q,props:e}),[e]);i.useImperativeHandle(t,()=>te,[te]);const oe=x||100,ne=i.useCallback(e=>{if(!e)return;let t;if(k){const n={element:e,targetElement:P,mouseTop:M.current,mouseLeft:j.current,anchorElement:o,position:l,target:te,syntheticEvent:null,nativeEvent:null};t=k(n)}else t=U(e,P);e.style.left=t.left+"px",e.style.top=t.top+"px"},[k,P,o,l,U,te]),re=i.useCallback(e=>{e&&(e.className=$(),"auto"===l&&(j.current<window.screen.availWidth/2?e.style.left=N||"25%":e.style.left=N||"75%"))},[$,l,N]);return!1===d?null:P&&K&&P.ownerDocument&&c.createPortal(i.createElement("div",{ref:ne,className:r.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",E),style:{zIndex:oe,...w},tabIndex:0},i.createElement("div",{className:"k-child-animation-container"},i.createElement("div",{id:C,role:"tooltip",className:r.classNames("k-tooltip",T,{[`k-tooltip-${R}`]:R}),style:{position:"relative",...O}},i.createElement("div",{className:"k-tooltip-content"},m&&i.createElement(m,{title:K,target:P})||K),a&&i.createElement("div",{ref:re})))),b||P.ownerDocument.body)}));f.displayName="KendoReactTooltipCore";const m=i.forwardRef((e,t)=>e.children?i.createElement(d,{ref:t,...e}):i.createElement(f,{ref:t,...e}));m.displayName="KendoReactTooltip",m.propTypes={id:n.string,anchorElement:n.string,appendTo:n.any,position:n.oneOf(["auto","top","bottom","left","right"]),showCallout:n.bool,parentTitle:n.bool,content:n.any,open:n.bool,targetElement:n.any,filter:n.func,openDelay:n.number,updateInterval:n.number,onOpen:n.func,onClose:n.func,onPosition:n.func,className:n.string,style:n.object,tooltipClassName:n.string,tooltipStyle:n.object,setCalloutOnPositionAuto:n.string,showOption:n.shape({hover:n.bool,click:n.bool,focus:n.bool,none:n.bool,keys:n.arrayOf(n.string)}),children:n.node,themeColor:n.oneOf(["base","inverse","info","success","warning","error"])};const v=i.forwardRef((e,t)=>{const o=i.useRef(null),n=i.useRef(null),{alignment:l=h.alignment,orientation:a=h.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)}),h={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 g=e=>{if(e){const t=e.querySelectorAll(r.FOCUSABLE_ELEMENTS.join(", "));if(t.length)return t[0]}},y=e=>{const t=g(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())},k={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},b={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"}},w={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},C=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:C,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,L=e.margin||{vertical:n&&z?15:0,horizontal:n&&!z?15:0},q=E[a],H=w[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]),$=i.useCallback(()=>{if(o){const e=g(document.querySelector(".k-popover-inner"));e&&e.focus()}if(K){const e={target:W.current};K.call(void 0,e)}},[K]),U=i.useCallback(e=>{if(S&&"Escape"===e.key){const e={target:W.current,show:!1};S.call(void 0,e)}"Tab"===e.key&&y(e)},[S]),V=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]),X={"k-popover":!0};Array.isArray(N)?N.forEach(e=>X[e]=!0):"object"==typeof N?Object.keys(N).forEach(e=>{X[e]=N[e]}):N&&(X[N]=!0);const Y=M?b[a]:k[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:L,popupAlign:q,anchorAlign:H,appendTo:f,show:p,scale:O,positionMode:C,style:P,className:R,popupClass:X,onOpen:$,onClose:V,onPosition:Z,onKeyDown:U},n&&a?i.createElement(i.Fragment,null,i.createElement("div",{className:r.classNames("k-popover-callout",Y)}),i.createElement("div",{className:"k-popover-inner"},_)):_))}),T={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};C.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},C.displayName="KendoReactPopover",e.Popover=C,e.PopoverActionsBar=v,e.Tooltip=m});
|
package/index.d.mts
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { Tooltip } from './tooltip/Tooltip.js';
|
|
8
|
+
import { Tooltip, TooltipHandle } from './tooltip/Tooltip.js';
|
|
9
9
|
import { TooltipProps } from './tooltip/TooltipProps';
|
|
10
|
+
import { TooltipThemeColor } from './tooltip/theme-color.type';
|
|
10
11
|
import { TooltipEvent, TooltipPositionEvent } from './tooltip/events';
|
|
11
12
|
import { TooltipPosition } from './tooltip/utils.js';
|
|
12
13
|
import { PopoverCollision } from './popover/interfaces/PopoverCollision';
|
|
@@ -24,4 +25,4 @@ import { Popover, PopoverHandle } from './popover/Popover.js';
|
|
|
24
25
|
import { PopoverActionsBar, PopoverActionsBarHandle } from './popover/PopoverActionsBar.js';
|
|
25
26
|
import { PopoverActionsBarProps } from './popover/interfaces/PopoverActionsBarProps';
|
|
26
27
|
import { PopoverCollisionType } from './popover/interfaces/PopoverCollisionType';
|
|
27
|
-
export { Tooltip, TooltipEvent, TooltipPositionEvent, TooltipProps, TooltipPosition, PopoverCollision, PopoverCollisionType, PopoverMargin, PopoverOffset, PopoverPosition, PopoverPositionMode, PopoverAnimation, PopoverOpenEvent, PopoverCloseEvent, PopoverKeyDownEvent, PopoverPositionEvent, PopoverProps, PopoverHandle, Popover, PopoverActionsBarProps, PopoverActionsBarHandle, PopoverActionsBar };
|
|
28
|
+
export { Tooltip, TooltipThemeColor, TooltipEvent, TooltipPositionEvent, TooltipProps, TooltipHandle, TooltipPosition, PopoverCollision, PopoverCollisionType, PopoverMargin, PopoverOffset, PopoverPosition, PopoverPositionMode, PopoverAnimation, PopoverOpenEvent, PopoverCloseEvent, PopoverKeyDownEvent, PopoverPositionEvent, PopoverProps, PopoverHandle, Popover, PopoverActionsBarProps, PopoverActionsBarHandle, PopoverActionsBar };
|
package/index.d.ts
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { Tooltip } from './tooltip/Tooltip.js';
|
|
8
|
+
import { Tooltip, TooltipHandle } from './tooltip/Tooltip.js';
|
|
9
9
|
import { TooltipProps } from './tooltip/TooltipProps';
|
|
10
|
+
import { TooltipThemeColor } from './tooltip/theme-color.type';
|
|
10
11
|
import { TooltipEvent, TooltipPositionEvent } from './tooltip/events';
|
|
11
12
|
import { TooltipPosition } from './tooltip/utils.js';
|
|
12
13
|
import { PopoverCollision } from './popover/interfaces/PopoverCollision';
|
|
@@ -24,4 +25,4 @@ import { Popover, PopoverHandle } from './popover/Popover.js';
|
|
|
24
25
|
import { PopoverActionsBar, PopoverActionsBarHandle } from './popover/PopoverActionsBar.js';
|
|
25
26
|
import { PopoverActionsBarProps } from './popover/interfaces/PopoverActionsBarProps';
|
|
26
27
|
import { PopoverCollisionType } from './popover/interfaces/PopoverCollisionType';
|
|
27
|
-
export { Tooltip, TooltipEvent, TooltipPositionEvent, TooltipProps, TooltipPosition, PopoverCollision, PopoverCollisionType, PopoverMargin, PopoverOffset, PopoverPosition, PopoverPositionMode, PopoverAnimation, PopoverOpenEvent, PopoverCloseEvent, PopoverKeyDownEvent, PopoverPositionEvent, PopoverProps, PopoverHandle, Popover, PopoverActionsBarProps, PopoverActionsBarHandle, PopoverActionsBar };
|
|
28
|
+
export { Tooltip, TooltipThemeColor, TooltipEvent, TooltipPositionEvent, TooltipProps, TooltipHandle, TooltipPosition, PopoverCollision, PopoverCollisionType, PopoverMargin, PopoverOffset, PopoverPosition, PopoverPositionMode, PopoverAnimation, PopoverOpenEvent, PopoverCloseEvent, PopoverKeyDownEvent, PopoverPositionEvent, PopoverProps, PopoverHandle, Popover, PopoverActionsBarProps, PopoverActionsBarHandle, PopoverActionsBar };
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
|
|
|
7
7
|
productName: 'KendoReact',
|
|
8
8
|
productCode: 'KENDOUIREACT',
|
|
9
9
|
productCodes: ['KENDOUIREACT'],
|
|
10
|
-
publishDate:
|
|
11
|
-
version: '14.
|
|
10
|
+
publishDate: 1778664256,
|
|
11
|
+
version: '14.5.0-develop.10',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-tooltip",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.5.0-develop.10",
|
|
4
4
|
"description": "React Tooltips library represents popups with information that is related to a UI element. KendoReact Tooltips package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-react-common": "14.
|
|
30
|
-
"@progress/kendo-react-popup": "14.
|
|
31
|
-
"@progress/kendo-svg-icons": "^4.0.0",
|
|
29
|
+
"@progress/kendo-react-common": "14.5.0-develop.10",
|
|
30
|
+
"@progress/kendo-react-popup": "14.5.0-develop.10",
|
|
31
|
+
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
32
32
|
"react": "^18.0.0 || ^19.0.0",
|
|
33
33
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
34
34
|
},
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"package": {
|
|
57
57
|
"productName": "KendoReact",
|
|
58
58
|
"productCode": "KENDOUIREACT",
|
|
59
|
-
"publishDate":
|
|
59
|
+
"publishDate": 1778664256,
|
|
60
60
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
61
61
|
}
|
|
62
62
|
},
|
|
@@ -66,5 +66,10 @@
|
|
|
66
66
|
},
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
|
+
},
|
|
70
|
+
"peerDependenciesMeta": {
|
|
71
|
+
"@progress/kendo-svg-icons": {
|
|
72
|
+
"optional": true
|
|
73
|
+
}
|
|
69
74
|
}
|
|
70
75
|
}
|
package/tooltip/Tooltip.d.ts
CHANGED
|
@@ -19,11 +19,11 @@ export interface TooltipHandle {
|
|
|
19
19
|
*/
|
|
20
20
|
handleMouseOver: (event: any) => void;
|
|
21
21
|
/**
|
|
22
|
-
* The method is used on the
|
|
22
|
+
* The method is used on the MouseLeave event to hide the Tooltip.
|
|
23
23
|
*
|
|
24
24
|
* @param event The mouse event object.
|
|
25
25
|
*/
|
|
26
|
-
|
|
26
|
+
handleMouseLeave: (event: any) => void;
|
|
27
27
|
/**
|
|
28
28
|
* Handles click events on the target element.
|
|
29
29
|
*/
|
package/tooltip/Tooltip.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ve=require("react"),ke=require("react-dom"),l=require("prop-types"),h=require("@progress/kendo-react-common"),R=require("./utils.js");function le(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const E=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(s,t,E.get?E:{enumerable:!0,get:()=>c[t]})}}return s.default=c,Object.freeze(s)}const o=le(ve),be=le(ke),Ce=100,I={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},re=o.forwardRef((c,s)=>{const{showOption:t,open:E,targetElement:m,onOpen:j,onClose:T,onPosition:u,children:g,...N}=c;let a=null;const v=(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,_=(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,x=((t==null?void 0:t.keys)!==void 0?t==null?void 0:t.keys:[]).map(i=>i==="Space"?" ":i);return o.createElement("div",{onMouseOver:i=>{a&&!f&&v&&a.handleMouseOver(i)},onMouseLeave:i=>{a&&!f&&v&&a.handleMouseLeave(i)},onClick:i=>{a&&!f&&A&&a.handleTargetItemClick(i)},onFocus:i=>{a&&!f&&_&&a.handleMouseOver(i)},onKeyDown:i=>{(a&&!f&&x.length>0||a&&!f&&i.key==="Escape")&&a.handleKeyDown(i,x)}},o.createElement(B,{ref:i=>{a=i,s&&(typeof s=="function"?s(i):s.current=i)},open:E,targetElement:m,onOpen:j,onClose:T,onPosition:u,...N}),g)});re.displayName="KendoReactTooltipWrapper";const B=o.memo(o.forwardRef((c,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:v,onOpen:A,onClose:_,onPosition:f,appendTo:$,className:x,style:i,id:ie,tooltipClassName:ce,tooltipStyle:ae,setCalloutOnPositionAuto:q,themeColor:G}=c,se=o.useContext(h.ZIndexContext),[d,O]=o.useState(null),[F,D]=o.useState(!1),[y,k]=o.useState(""),P=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),L=o.useRef(F);o.useEffect(()=>{b.current=d,L.current=F,W.current=y},[d,F,y]);const V=u!==void 0,J=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}},ue=e=>!a||a(e),fe=()=>se||Ce,Q=()=>{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 P.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=R.getDomRect(n),z=R.getLeftPosition(M.current,e.offsetWidth,r,t,m),K=R.getTopPosition(P.current,r,e.offsetHeight,t,m);return{left:z,top:K}},C=e=>{h.dispatchEvent(_,e,void 0,void 0),O(null),D(!1),k("")},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=J(n),z=V?u:L.current;if(!r.title){z&&C(e);return}r.element&&(r.element.titleExpando=r.title,r.element.title=""),Z.current=!0;const K=()=>{O(r.element||n),D(!0),k(r.title),v&&(S.current=setInterval(()=>{const p=n;if(p)if(p.parentElement===null)C({target:p});else{const Y=J(p);Y.title&&Y.title!==W.current&&k(Y.title)}},v))};E?H.current=window.setTimeout(()=>{Z.current&&K()},E):K(),W.current!==r.title&&h.dispatchEvent(A,e,void 0,void 0)},ne=e=>{const n=e.target;!ue(n)||R.isTooltipElement(n)||n===b.current||te(e)},de=e=>{const n=b.current?b.current.ownerDocument:document,r=n==null?void 0:n.elementFromPoint(e.clientX,e.clientY);R.isTooltipElement(r)||u||(clearInterval(S.current),Z.current=!1,C(e))},oe=e=>b.current===e.nativeEvent.target,me=e=>{const n=oe(e);(V?u:L.current)&&n&&C(e)},pe=e=>{const n=oe(e);if((V?u:L.current)&&n){C(e);return}te(e)},Ee=(e,n)=>{const r=e.key;e.key==="Escape"?me(e):n.includes(r)&&ne(e)},X=o.useCallback(e=>{P.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=""),O(g),D(!0),k(n))}else u===!1&&(O(null),D(!1),k(""))},[u,g,T]);const w=o.useMemo(()=>({handleMouseOver:ne,handleMouseLeave:de,handleTargetItemClick:pe,handleKeyDown:Ee,props:c}),[c]);o.useImperativeHandle(s,()=>w,[w]);const ge=fe(),ye=o.useCallback(e=>{if(!e)return;let n;if(f){const r={element:e,targetElement:d,mouseTop:P.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]),Te=o.useCallback(e=>{e&&(e.className=Q(),m==="auto"&&(M.current<window.screen.availWidth/2?e.style.left=q||"25%":e.style.left=q||"75%"))},[Q,m,q]);return u===!1?null:d&&y&&d.ownerDocument&&be.createPortal(o.createElement("div",{ref:ye,className:h.classNames("k-animation-container","k-animation-container-fixed","k-animation-container-shown",x),style:{zIndex:ge,...i},tabIndex:0},o.createElement("div",{className:"k-child-animation-container"},o.createElement("div",{id:ie,role:"tooltip",className:h.classNames("k-tooltip",ce,{[`k-tooltip-${G}`]:G}),style:{position:"relative",...ae}},o.createElement("div",{className:"k-tooltip-content"},N&&o.createElement(N,{title:y,target:d})||y),j&&o.createElement("div",{ref:Te})))),$||d.ownerDocument.body)}));B.displayName="KendoReactTooltipCore";const U=o.forwardRef((c,s)=>c.children?o.createElement(re,{ref:s,...c}):o.createElement(B,{ref:s,...c}));U.displayName="KendoReactTooltip";U.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,themeColor:l.oneOf(["base","inverse","info","success","warning","error"])};exports.Tooltip=U;
|
package/tooltip/Tooltip.mjs
CHANGED
|
@@ -6,31 +6,31 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as o from "react";
|
|
9
|
-
import * as
|
|
9
|
+
import * as ke from "react-dom";
|
|
10
10
|
import l from "prop-types";
|
|
11
|
-
import { ZIndexContext as
|
|
12
|
-
import { getDomRect as
|
|
13
|
-
const Ie = 100,
|
|
11
|
+
import { ZIndexContext as ve, classNames as te, dispatchEvent as ne } from "@progress/kendo-react-common";
|
|
12
|
+
import { getDomRect as Ce, getLeftPosition as be, getTopPosition as he, isTooltipElement as oe } from "./utils.mjs";
|
|
13
|
+
const Ie = 100, b = {
|
|
14
14
|
anchorElement: "pointer",
|
|
15
15
|
openDelay: 400,
|
|
16
16
|
position: "auto",
|
|
17
17
|
showCallout: !0,
|
|
18
18
|
parentTitle: !1
|
|
19
|
-
},
|
|
20
|
-
const { showOption: n, open:
|
|
19
|
+
}, le = o.forwardRef((f, m) => {
|
|
20
|
+
const { showOption: n, open: h, targetElement: d, onOpen: K, onClose: y, onPosition: a, children: E, ...I } = f;
|
|
21
21
|
let c = null;
|
|
22
|
-
const T = (n == null ? void 0 : n.hover) !== void 0 ? n == null ? void 0 : n.hover : !0,
|
|
22
|
+
const T = (n == null ? void 0 : n.hover) !== void 0 ? n == null ? void 0 : n.hover : !0, A = (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);
|
|
23
23
|
return /* @__PURE__ */ o.createElement(
|
|
24
24
|
"div",
|
|
25
25
|
{
|
|
26
26
|
onMouseOver: (i) => {
|
|
27
27
|
c && !s && T && c.handleMouseOver(i);
|
|
28
28
|
},
|
|
29
|
-
|
|
30
|
-
c && !s && T && c.
|
|
29
|
+
onMouseLeave: (i) => {
|
|
30
|
+
c && !s && T && c.handleMouseLeave(i);
|
|
31
31
|
},
|
|
32
32
|
onClick: (i) => {
|
|
33
|
-
c && !s &&
|
|
33
|
+
c && !s && A && c.handleTargetItemClick(i);
|
|
34
34
|
},
|
|
35
35
|
onFocus: (i) => {
|
|
36
36
|
c && !s && S && c.handleMouseOver(i);
|
|
@@ -45,46 +45,47 @@ const Ie = 100, C = {
|
|
|
45
45
|
ref: (i) => {
|
|
46
46
|
c = i, m && (typeof m == "function" ? m(i) : m.current = i);
|
|
47
47
|
},
|
|
48
|
-
open:
|
|
48
|
+
open: h,
|
|
49
49
|
targetElement: d,
|
|
50
|
-
onOpen:
|
|
50
|
+
onOpen: K,
|
|
51
51
|
onClose: y,
|
|
52
52
|
onPosition: a,
|
|
53
|
-
...
|
|
53
|
+
...I
|
|
54
54
|
}
|
|
55
55
|
),
|
|
56
56
|
E
|
|
57
57
|
);
|
|
58
58
|
});
|
|
59
|
-
|
|
59
|
+
le.displayName = "KendoReactTooltipWrapper";
|
|
60
60
|
const z = o.memo(
|
|
61
61
|
o.forwardRef((f, m) => {
|
|
62
62
|
const {
|
|
63
|
-
anchorElement: n =
|
|
64
|
-
openDelay:
|
|
65
|
-
position: d =
|
|
66
|
-
showCallout:
|
|
67
|
-
parentTitle: y =
|
|
63
|
+
anchorElement: n = b.anchorElement,
|
|
64
|
+
openDelay: h = b.openDelay,
|
|
65
|
+
position: d = b.position,
|
|
66
|
+
showCallout: K = b.showCallout,
|
|
67
|
+
parentTitle: y = b.parentTitle,
|
|
68
68
|
open: a,
|
|
69
69
|
targetElement: E,
|
|
70
|
-
content:
|
|
70
|
+
content: I,
|
|
71
71
|
filter: c,
|
|
72
72
|
updateInterval: T,
|
|
73
|
-
onOpen:
|
|
73
|
+
onOpen: A,
|
|
74
74
|
onClose: S,
|
|
75
75
|
onPosition: s,
|
|
76
76
|
appendTo: B,
|
|
77
77
|
className: R,
|
|
78
78
|
style: i,
|
|
79
|
-
id:
|
|
80
|
-
tooltipClassName:
|
|
81
|
-
tooltipStyle:
|
|
82
|
-
setCalloutOnPositionAuto: F
|
|
83
|
-
|
|
79
|
+
id: ie,
|
|
80
|
+
tooltipClassName: ce,
|
|
81
|
+
tooltipStyle: ae,
|
|
82
|
+
setCalloutOnPositionAuto: F,
|
|
83
|
+
themeColor: U
|
|
84
|
+
} = f, se = o.useContext(ve), [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), M = o.useRef(void 0), W = o.useRef(!1), V = o.useRef(g), v = o.useRef(u), O = o.useRef(H);
|
|
84
85
|
o.useEffect(() => {
|
|
85
|
-
v.current = u,
|
|
86
|
+
v.current = u, O.current = H, V.current = g;
|
|
86
87
|
}, [u, H, g]);
|
|
87
|
-
const X = a !== void 0,
|
|
88
|
+
const X = a !== void 0, $ = (e) => {
|
|
88
89
|
let t = e;
|
|
89
90
|
for (; t; ) {
|
|
90
91
|
if (t.getAttribute("title") !== null || t.titleExpando)
|
|
@@ -92,7 +93,7 @@ const z = o.memo(
|
|
|
92
93
|
t = y && t.parentElement || null;
|
|
93
94
|
}
|
|
94
95
|
return { title: "", element: null };
|
|
95
|
-
},
|
|
96
|
+
}, ue = (e) => !c || c(e), fe = () => se || Ie, q = () => {
|
|
96
97
|
switch (d) {
|
|
97
98
|
case "bottom":
|
|
98
99
|
return "k-callout k-callout-n";
|
|
@@ -108,59 +109,59 @@ const z = o.memo(
|
|
|
108
109
|
}, G = (e, t) => {
|
|
109
110
|
if (!t)
|
|
110
111
|
return { left: 0, top: 0 };
|
|
111
|
-
const r =
|
|
112
|
+
const r = Ce(t), Y = be(P.current, e.offsetWidth, r, n, d), w = he(D.current, r, e.offsetHeight, n, d);
|
|
112
113
|
return { left: Y, top: w };
|
|
113
|
-
},
|
|
114
|
-
|
|
114
|
+
}, C = (e) => {
|
|
115
|
+
ne(S, e, void 0, void 0), x(null), N(!1), k("");
|
|
115
116
|
}, J = (e) => {
|
|
116
|
-
clearTimeout(Z.current), clearInterval(
|
|
117
|
+
clearTimeout(Z.current), clearInterval(M.current), e.target.hasChildNodes() && e.target.childNodes.forEach((p) => {
|
|
117
118
|
p.nodeName === "title" && (e.target.titleExpando = p.innerHTML, p.remove());
|
|
118
119
|
});
|
|
119
|
-
const t = E || e.target, r =
|
|
120
|
+
const t = E || e.target, r = $(t), Y = X ? a : O.current;
|
|
120
121
|
if (!r.title) {
|
|
121
|
-
Y &&
|
|
122
|
+
Y && C(e);
|
|
122
123
|
return;
|
|
123
124
|
}
|
|
124
125
|
r.element && (r.element.titleExpando = r.title, r.element.title = ""), W.current = !0;
|
|
125
126
|
const w = () => {
|
|
126
|
-
x(t), N(!0), k(r.title), T && (
|
|
127
|
+
x(r.element || t), N(!0), k(r.title), T && (M.current = setInterval(() => {
|
|
127
128
|
const p = t;
|
|
128
129
|
if (p)
|
|
129
130
|
if (p.parentElement === null)
|
|
130
|
-
|
|
131
|
+
C({ target: p });
|
|
131
132
|
else {
|
|
132
|
-
const _ =
|
|
133
|
+
const _ = $(p);
|
|
133
134
|
_.title && _.title !== V.current && k(_.title);
|
|
134
135
|
}
|
|
135
136
|
}, T));
|
|
136
137
|
};
|
|
137
|
-
|
|
138
|
+
h ? Z.current = window.setTimeout(() => {
|
|
138
139
|
W.current && w();
|
|
139
|
-
},
|
|
140
|
+
}, h) : w(), V.current !== r.title && ne(A, e, void 0, void 0);
|
|
140
141
|
}, Q = (e) => {
|
|
141
142
|
const t = e.target;
|
|
142
|
-
!
|
|
143
|
-
},
|
|
143
|
+
!ue(t) || oe(t) || t === v.current || J(e);
|
|
144
|
+
}, me = (e) => {
|
|
144
145
|
const t = v.current ? v.current.ownerDocument : document, r = t == null ? void 0 : t.elementFromPoint(e.clientX, e.clientY);
|
|
145
|
-
|
|
146
|
-
},
|
|
147
|
-
const t =
|
|
148
|
-
(X ? a :
|
|
149
|
-
},
|
|
150
|
-
const t =
|
|
151
|
-
if ((X ? a :
|
|
152
|
-
|
|
146
|
+
oe(r) || a || (clearInterval(M.current), W.current = !1, C(e));
|
|
147
|
+
}, ee = (e) => v.current === e.nativeEvent.target, de = (e) => {
|
|
148
|
+
const t = ee(e);
|
|
149
|
+
(X ? a : O.current) && t && C(e);
|
|
150
|
+
}, pe = (e) => {
|
|
151
|
+
const t = ee(e);
|
|
152
|
+
if ((X ? a : O.current) && t) {
|
|
153
|
+
C(e);
|
|
153
154
|
return;
|
|
154
155
|
}
|
|
155
156
|
J(e);
|
|
156
|
-
},
|
|
157
|
+
}, Ee = (e, t) => {
|
|
157
158
|
const r = e.key;
|
|
158
|
-
e.key === "Escape" ?
|
|
159
|
+
e.key === "Escape" ? de(e) : t.includes(r) && Q(e);
|
|
159
160
|
}, j = o.useCallback((e) => {
|
|
160
161
|
D.current = e.clientY, P.current = e.clientX;
|
|
161
162
|
}, []);
|
|
162
163
|
o.useEffect(() => (document && document.body.addEventListener("mousemove", j), () => {
|
|
163
|
-
clearTimeout(Z.current), clearInterval(
|
|
164
|
+
clearTimeout(Z.current), clearInterval(M.current), document && document.body.removeEventListener("mousemove", j);
|
|
164
165
|
}), [j]), o.useEffect(() => {
|
|
165
166
|
if (a && E) {
|
|
166
167
|
let e = E, t = "", r = null;
|
|
@@ -174,18 +175,18 @@ const z = o.memo(
|
|
|
174
175
|
t && (r && (r.titleExpando = t, r.title = ""), x(E), N(!0), k(t));
|
|
175
176
|
} else a === !1 && (x(null), N(!1), k(""));
|
|
176
177
|
}, [a, E, y]);
|
|
177
|
-
const
|
|
178
|
+
const L = o.useMemo(
|
|
178
179
|
() => ({
|
|
179
180
|
handleMouseOver: Q,
|
|
180
|
-
|
|
181
|
-
handleTargetItemClick:
|
|
182
|
-
handleKeyDown:
|
|
181
|
+
handleMouseLeave: me,
|
|
182
|
+
handleTargetItemClick: pe,
|
|
183
|
+
handleKeyDown: Ee,
|
|
183
184
|
props: f
|
|
184
185
|
}),
|
|
185
186
|
[f]
|
|
186
187
|
);
|
|
187
|
-
o.useImperativeHandle(m, () =>
|
|
188
|
-
const
|
|
188
|
+
o.useImperativeHandle(m, () => L, [L]);
|
|
189
|
+
const ge = fe(), ye = o.useCallback(
|
|
189
190
|
(e) => {
|
|
190
191
|
if (!e)
|
|
191
192
|
return;
|
|
@@ -198,7 +199,7 @@ const z = o.memo(
|
|
|
198
199
|
mouseLeft: P.current,
|
|
199
200
|
anchorElement: n,
|
|
200
201
|
position: d,
|
|
201
|
-
target:
|
|
202
|
+
target: L,
|
|
202
203
|
syntheticEvent: null,
|
|
203
204
|
nativeEvent: null
|
|
204
205
|
};
|
|
@@ -207,26 +208,26 @@ const z = o.memo(
|
|
|
207
208
|
t = G(e, u);
|
|
208
209
|
e.style.left = t.left + "px", e.style.top = t.top + "px";
|
|
209
210
|
},
|
|
210
|
-
[s, u, n, d, G,
|
|
211
|
-
),
|
|
211
|
+
[s, u, n, d, G, L]
|
|
212
|
+
), Te = o.useCallback(
|
|
212
213
|
(e) => {
|
|
213
214
|
e && (e.className = q(), d === "auto" && (P.current < window.screen.availWidth / 2 ? e.style.left = F || "25%" : e.style.left = F || "75%"));
|
|
214
215
|
},
|
|
215
216
|
[q, d, F]
|
|
216
217
|
);
|
|
217
|
-
return a === !1 ? null : u && g && u.ownerDocument &&
|
|
218
|
+
return a === !1 ? null : u && g && u.ownerDocument && ke.createPortal(
|
|
218
219
|
/* @__PURE__ */ o.createElement(
|
|
219
220
|
"div",
|
|
220
221
|
{
|
|
221
|
-
ref:
|
|
222
|
-
className:
|
|
222
|
+
ref: ye,
|
|
223
|
+
className: te(
|
|
223
224
|
"k-animation-container",
|
|
224
225
|
"k-animation-container-fixed",
|
|
225
226
|
"k-animation-container-shown",
|
|
226
227
|
R
|
|
227
228
|
),
|
|
228
229
|
style: {
|
|
229
|
-
zIndex:
|
|
230
|
+
zIndex: ge,
|
|
230
231
|
...i
|
|
231
232
|
},
|
|
232
233
|
tabIndex: 0
|
|
@@ -234,13 +235,15 @@ const z = o.memo(
|
|
|
234
235
|
/* @__PURE__ */ o.createElement("div", { className: "k-child-animation-container" }, /* @__PURE__ */ o.createElement(
|
|
235
236
|
"div",
|
|
236
237
|
{
|
|
237
|
-
id:
|
|
238
|
+
id: ie,
|
|
238
239
|
role: "tooltip",
|
|
239
|
-
className:
|
|
240
|
-
|
|
240
|
+
className: te("k-tooltip", ce, {
|
|
241
|
+
[`k-tooltip-${U}`]: U
|
|
242
|
+
}),
|
|
243
|
+
style: { position: "relative", ...ae }
|
|
241
244
|
},
|
|
242
|
-
/* @__PURE__ */ o.createElement("div", { className: "k-tooltip-content" },
|
|
243
|
-
|
|
245
|
+
/* @__PURE__ */ o.createElement("div", { className: "k-tooltip-content" }, I && o.createElement(I, { title: g, target: u }) || g),
|
|
246
|
+
K && /* @__PURE__ */ o.createElement("div", { ref: Te })
|
|
244
247
|
))
|
|
245
248
|
),
|
|
246
249
|
B || u.ownerDocument.body
|
|
@@ -248,9 +251,9 @@ const z = o.memo(
|
|
|
248
251
|
})
|
|
249
252
|
);
|
|
250
253
|
z.displayName = "KendoReactTooltipCore";
|
|
251
|
-
const
|
|
252
|
-
|
|
253
|
-
|
|
254
|
+
const re = o.forwardRef((f, m) => f.children ? /* @__PURE__ */ o.createElement(le, { ref: m, ...f }) : /* @__PURE__ */ o.createElement(z, { ref: m, ...f }));
|
|
255
|
+
re.displayName = "KendoReactTooltip";
|
|
256
|
+
re.propTypes = {
|
|
254
257
|
id: l.string,
|
|
255
258
|
anchorElement: l.string,
|
|
256
259
|
appendTo: l.any,
|
|
@@ -278,8 +281,9 @@ le.propTypes = {
|
|
|
278
281
|
none: l.bool,
|
|
279
282
|
keys: l.arrayOf(l.string)
|
|
280
283
|
}),
|
|
281
|
-
children: l.node
|
|
284
|
+
children: l.node,
|
|
285
|
+
themeColor: l.oneOf(["base", "inverse", "info", "success", "warning", "error"])
|
|
282
286
|
};
|
|
283
287
|
export {
|
|
284
|
-
|
|
288
|
+
re as Tooltip
|
|
285
289
|
};
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import { TooltipEvent, TooltipPositionEvent } from './events';
|
|
9
|
+
import { TooltipThemeColor } from './theme-color.type';
|
|
9
10
|
import { TooltipPosition, TooltipShowOptions } from './utils.js';
|
|
10
11
|
/**
|
|
11
12
|
* Represents the props of the [KendoReact Tooltip component](https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip).
|
|
@@ -254,4 +255,21 @@ export interface TooltipProps {
|
|
|
254
255
|
* ```
|
|
255
256
|
*/
|
|
256
257
|
updateInterval?: number;
|
|
258
|
+
/**
|
|
259
|
+
* Configures the `themeColor` of the Tooltip.
|
|
260
|
+
*
|
|
261
|
+
* The available options are:
|
|
262
|
+
* - `base`
|
|
263
|
+
* - `inverse`
|
|
264
|
+
* - `info`
|
|
265
|
+
* - `success`
|
|
266
|
+
* - `warning`
|
|
267
|
+
* - `error`
|
|
268
|
+
*
|
|
269
|
+
* @example
|
|
270
|
+
* ```jsx
|
|
271
|
+
* <Tooltip themeColor="info" />
|
|
272
|
+
* ```
|
|
273
|
+
*/
|
|
274
|
+
themeColor?: TooltipThemeColor;
|
|
257
275
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Specifies the theme color of the Tooltip.
|
|
10
|
+
*/
|
|
11
|
+
export type TooltipThemeColor = 'base' | 'inverse' | 'info' | 'success' | 'warning' | 'error';
|