@progress/kendo-react-tooltip 14.5.0-develop.8 → 15.0.0-develop.1
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/README.md +4 -4
- package/dist/cdn/js/kendo-react-tooltip.js +1 -1
- package/index.d.mts +2 -1
- package/index.d.ts +2 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -5
- package/popover/Popover.js +1 -1
- package/popover/Popover.mjs +82 -80
- package/tooltip/Tooltip.js +1 -1
- package/tooltip/Tooltip.mjs +75 -71
- package/tooltip/TooltipProps.d.ts +18 -0
- package/tooltip/theme-color.type.d.ts +11 -0
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
[](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip&utm_content=banner)
|
|
1
|
+
[](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip&utm_content=banner)
|
|
2
2
|
|
|
3
3
|
# KendoReact Tooltips Library for React
|
|
4
4
|
|
|
5
5
|
> **Important**
|
|
6
6
|
>
|
|
7
7
|
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip)—an enterprise-grade UI library with 120+ free and premium components.
|
|
8
|
-
> - This package contains free KendoReact components. You can use it even in production, no sign-up or license required. If you're looking for more free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
8
|
+
> - This package contains free KendoReact components. You can use it even in production, no sign-up or license required. If you're looking for more free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
|
|
9
9
|
> - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip).
|
|
10
10
|
> - The [30-day free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip) gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
|
|
11
11
|
|
|
@@ -100,7 +100,7 @@ import { Button } from '@progress/kendo-react-buttons'; // You can import any ot
|
|
|
100
100
|
|
|
101
101
|
The following table outlines the key resources available with KendoReact and KendoReact Free.
|
|
102
102
|
|
|
103
|
-
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
|
|
103
|
+
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
|
|
104
104
|
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
105
105
|
| React components | 50+ | 120+ |
|
|
106
106
|
| Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
|
|
@@ -123,7 +123,7 @@ For any issues you might encounter while working with the KendoReact Tooltip, us
|
|
|
123
123
|
## Resources
|
|
124
124
|
|
|
125
125
|
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip)
|
|
126
|
-
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/
|
|
126
|
+
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
|
|
127
127
|
- [Get Started with the KendoReact Tooltip](https://www.telerik.com/kendo-react-ui/components/tooltip/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip)
|
|
128
128
|
- [API Reference of the KendoReact Tooltip](https://www.telerik.com/kendo-react-ui/components/tooltip/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip)
|
|
129
129
|
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-tooltip)
|
|
@@ -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),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}=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),L=i.useRef(!1),q=i.useRef(D),H=i.useRef(x),F=i.useRef(I);i.useEffect(()=>{H.current=x,F.current=I,q.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=""),L.current=!0;const a=()=>{P(o.element||t),A(!0),K(o.title),h&&(z.current=setInterval(()=>{const e=t;if(e)if(null===e.parentElement)V({target:e});else{const t=W(e);t.title&&t.title!==q.current&&K(t.title)}},h))};n?j.current=window.setTimeout(()=>{L.current&&a()},n):a(),q.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===H.current||X(e)},$=e=>{const t=H.current?H.current.ownerDocument:document,o=null==t?void 0:t.elementFromPoint(e.clientX,e.clientY);u(o)||d||(clearInterval(z.current),L.current=!1,V(e))},_=e=>H.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,handleMouseLeave:$,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",T),style:{position:"relative",...O}},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 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]),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!==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:Y,onOpen:U,onClose:X,onPosition:Z,onKeyDown:V},n&&a?i.createElement(i.Fragment,null,i.createElement("div",{className:r.classNames("k-popover-callout",$)}),i.createElement("div",{className:"k-popover-inner"},_)):_))}),T={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};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});
|
|
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),y=(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&&y.length>0||p&&!h&&"Escape"===e.key)&&p.handleKeyDown(e,y)}},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:y,onClose:g,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),[D,A]=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),B=i.useRef(P),F=i.useRef(D);i.useEffect(()=>{B.current=P,F.current=D,H.current=K},[P,D,K]);const W=void 0!==d,$=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 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(g,e,void 0,void 0),I(null),A(!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=$(t),l=W?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=()=>{I(o.element||t),A(!0),S(o.title),h&&(L.current=setInterval(()=>{const e=t;if(e)if(null===e.parentElement)V({target:e});else{const t=$(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(y,e,void 0,void 0)},Y=e=>{const t=e.target;!(e=>!v||v(e))(t)||u(t)||t===B.current||X(e)},_=e=>{const t=B.current?B.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=>B.current===e.nativeEvent.target,J=e=>{const t=G(e);(W?d:F.current)&&t?V(e):X(e)},Q=(e,t)=>{const o=e.key;"Escape"===e.key?(e=>{const t=G(e);(W?d:F.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),A(!0),S(t))}else!1===d&&(I(null),A(!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=Z(),"auto"===l&&(j.current<window.screen.availWidth/2?e.style.left=N||"25%":e.style.left=N||"75%"))},[Z,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 y=e=>{if(e){const t=e.querySelectorAll(r.FOCUSABLE_ELEMENTS.join(", "));if(t.length)return t[0]}},g=e=>{const t=y(document.querySelector(".k-popover-inner")),o=(e=>{if(e){const t=e.querySelectorAll(r.FOCUSABLE_ELEMENTS.join(", "));if(t.length)return t[t.length-1]}})(document.querySelector(".k-popover-inner"));e.shiftKey&&e.target===t?(o&&o.focus(),e.preventDefault()):!e.shiftKey&&e.target===o&&(t&&t.focus(),e.preventDefault())},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=e=>i.Children.toArray(e).filter(e=>e&&e.type===v),T=e=>i.Children.toArray(e).filter(e=>e&&e.type!==v),O=i.forwardRef((e,t)=>{const{autoFocus:o=!0,callout:n=N.callout,position:a=N.position,collision:c=N.collision,title:s,children:u,show:p,anchor:d,appendTo:f,offset:m,animate:v,positionMode:h,scale:O,popoverClass:R,className:x,id:P,style:I,contentStyle:D,onPosition:A,onClose:K,onOpen:S,onKeyDown:M}=e,[j,z]=i.useState(!1),L="top"===a||"bottom"===a,q=e.margin||{vertical:n&&L?15:0,horizontal:n&&!L?15:0},H=E[a],B=w[a],F=i.useContext(r.ZIndexContext),W=F?F+2e3:12e3,$=i.useRef(null),Z=r.useId(P)||"k-popover-1",U=`${Z}-header`,V=`${Z}-body`;i.useImperativeHandle($,()=>({props:e})),i.useImperativeHandle(t,()=>$.current);const X=i.useCallback(e=>{if(setTimeout(()=>z(e.flipped)),A){const t={target:$.current,flipped:e.flipped,fitted:e.fitted};A.call(void 0,t)}},[A,z]),Y=i.useCallback(()=>{if(o){const e=y(document.querySelector(".k-popover-inner"));e&&e.focus()}if(S){const e={target:$.current};S.call(void 0,e)}},[S]),_=i.useCallback(e=>{if(M&&"Escape"===e.key){const e={target:$.current,show:!1};M.call(void 0,e)}"Tab"===e.key&&g(e)},[M]),G=i.useCallback(e=>{if(K){const e={target:$.current};K.call(void 0,e)}e&&e.target&&e.target.props&&e.target.props.anchor&&e.target.props.anchor.focus()},[K]),J={"k-popover":!0};Array.isArray(R)?R.forEach(e=>J[e]=!0):"object"==typeof R?Object.keys(R).forEach(e=>{J[e]=R[e]}):R&&(J[R]=!0);const Q=j?b[a]:k[a],ee=i.useMemo(()=>i.createElement(i.Fragment,null,s&&i.createElement("div",{className:"k-popover-header",id:U},s),i.createElement("div",{className:"k-popover-body",id:V,style:D},T(u)),C(u)),[u,D,s,U,V]);return i.createElement(r.ZIndexContext.Provider,{value:W},i.createElement(l.Popup,{id:P,role:"dialog",ariaLabelledBy:s?U:void 0,ariaDescribedBy:V,animate:v,collision:c,anchor:d,offset:m,margin:q,popupAlign:H,anchorAlign:B,appendTo:f,show:p,scale:O,positionMode:h,style:I,className:x,popupClass:J,onOpen:Y,onClose:G,onPosition:X,onKeyDown:_},n&&a?i.createElement(i.Fragment,null,i.createElement("div",{className:r.classNames("k-popover-callout",Q)}),i.createElement("div",{className:"k-popover-inner"},ee)):ee))}),N={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};O.propTypes={callout:n.bool,title:n.node,position:n.oneOf(["top","left","bottom","right"]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),anchor:function(e){const t=e.anchor;return t&&"number"!=typeof t.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popover`. Validation failed."):null},appendTo:function(e){const t=e.appendTo;return t&&"number"!=typeof t.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popover`. Validation failed."):null},positionMode:n.oneOf(["fixed","absolute"]),scale:n.number,offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popoverClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),style:n.object,onClose:n.func,onPosition:n.func,onOpen:n.func},O.displayName="KendoReactPopover",e.Popover=O,e.PopoverActionsBar=v,e.Tooltip=m});
|
package/index.d.mts
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
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, TooltipHandle, 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
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
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, TooltipHandle, 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: '
|
|
10
|
+
publishDate: 1779199807,
|
|
11
|
+
version: '15.0.0-develop.1',
|
|
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": "
|
|
3
|
+
"version": "15.0.0-develop.1",
|
|
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": "
|
|
30
|
-
"@progress/kendo-react-popup": "
|
|
31
|
-
"@progress/kendo-svg-icons": "^4.0.0",
|
|
29
|
+
"@progress/kendo-react-common": "15.0.0-develop.1",
|
|
30
|
+
"@progress/kendo-react-popup": "15.0.0-develop.1",
|
|
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": 1779199807,
|
|
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/popover/Popover.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 Y=require("react"),e=require("prop-types"),f=require("@progress/kendo-react-common"),ee=require("@progress/kendo-react-popup"),N=require("./PopoverActionsBar.js"),R=require("./utils.js");function oe(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const c in n)if(c!=="default"){const i=Object.getOwnPropertyDescriptor(n,c);Object.defineProperty(r,c,i.get?i:{enumerable:!0,get:()=>n[c]})}}return r.default=n,Object.freeze(r)}const t=oe(Y),te=12e3,ne=2e3,D=15,re={top:"k-callout-s",left:"k-callout-e",bottom:"k-callout-n",right:"k-callout-w"},le={top:"k-callout-n",left:"k-callout-w",bottom:"k-callout-s",right:"k-callout-e"},ae={top:{vertical:"bottom",horizontal:"center"},left:{vertical:"center",horizontal:"right"},bottom:{vertical:"top",horizontal:"center"},right:{vertical:"center",horizontal:"left"}},ce={top:{vertical:"top",horizontal:"center"},left:{vertical:"center",horizontal:"left"},bottom:{vertical:"bottom",horizontal:"center"},right:{vertical:"center",horizontal:"right"}},ie=n=>t.Children.toArray(n).filter(r=>r&&r.type===N.PopoverActionsBar),se=n=>t.Children.toArray(n).filter(r=>r&&r.type!==N.PopoverActionsBar),O=t.forwardRef((n,r)=>{const{autoFocus:c=!0,callout:i=k.callout,position:l=k.position,collision:j=k.collision,title:u,children:m,show:x,anchor:F,appendTo:S,offset:B,animate:_,positionMode:q,scale:K,popoverClass:a,className:Z,id:C,style:M,contentStyle:E,onPosition:v,onClose:b,onOpen:h,onKeyDown:y}=n,[V,T]=t.useState(!1),A=l==="top"||l==="bottom",L=n.margin||{vertical:i&&A?D:0,horizontal:i&&!A?D:0},H=ae[l],U=ce[l],I=t.useContext(f.ZIndexContext),X=I?I+ne:te,s=t.useRef(null),w=f.useId(C)||"k-popover-1",g=`${w}-header`,P=`${w}-body`;t.useImperativeHandle(s,()=>({props:n})),t.useImperativeHandle(r,()=>s.current);const $=t.useCallback(o=>{if(setTimeout(()=>T(o.flipped)),v){const p={target:s.current,flipped:o.flipped,fitted:o.fitted};v.call(void 0,p)}},[v,T]),G=t.useCallback(()=>{if(c){const o=R.getFirstFocusableElement(document.querySelector(".k-popover-inner"));o&&o.focus()}if(h){const o={target:s.current};h.call(void 0,o)}},[h]),J=t.useCallback(o=>{if(y&&o.key==="Escape"){const p={target:s.current,show:!1};y.call(void 0,p)}o.key==="Tab"&&R.handleFocusTrap(o)},[y]),Q=t.useCallback(o=>{if(b){const p={target:s.current};b.call(void 0,p)}o&&o.target&&o.target.props&&o.target.props.anchor&&o.target.props.anchor.focus()},[b]),d={"k-popover":!0};Array.isArray(a)?a.forEach(o=>d[o]=!0):typeof a=="object"?Object.keys(a).forEach(o=>{d[o]=a[o]}):a&&(d[a]=!0);const W=V?le[l]:re[l],z=t.useMemo(()=>t.createElement(t.Fragment,null,u&&t.createElement("div",{className:"k-popover-header",id:g},u),t.createElement("div",{className:"k-popover-body",id:P,style:E},se(m)),ie(m)),[m,E,u,g,P]);return t.createElement(f.ZIndexContext.Provider,{value:X},t.createElement(ee.Popup,{id:C,role:"dialog",ariaLabelledBy:u?g:void 0,ariaDescribedBy:P,animate:_,collision:j,anchor:F,offset:B,margin:L,popupAlign:H,anchorAlign:U,appendTo:S,show:x,scale:K,positionMode:q,style:M,className:Z,popupClass:d,onOpen:G,onClose:Q,onPosition:$,onKeyDown:J},i&&l?t.createElement(t.Fragment,null,t.createElement("div",{className:f.classNames("k-popover-callout",W)}),t.createElement("div",{className:"k-popover-inner"},z)):z))}),k={callout:!0,position:"top",collision:{horizontal:"none",vertical:"none"}};O.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};O.displayName="KendoReactPopover";exports.Popover=O;
|
package/popover/Popover.mjs
CHANGED
|
@@ -7,133 +7,135 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as t from "react";
|
|
9
9
|
import e from "prop-types";
|
|
10
|
-
import { ZIndexContext as
|
|
11
|
-
import { Popup as
|
|
12
|
-
import { PopoverActionsBar as
|
|
13
|
-
import { getFirstFocusableElement as
|
|
14
|
-
const
|
|
10
|
+
import { ZIndexContext as I, useId as W, classNames as Y } from "@progress/kendo-react-common";
|
|
11
|
+
import { Popup as ee } from "@progress/kendo-react-popup";
|
|
12
|
+
import { PopoverActionsBar as z } from "./PopoverActionsBar.mjs";
|
|
13
|
+
import { getFirstFocusableElement as oe, handleFocusTrap as te } from "./utils.mjs";
|
|
14
|
+
const ne = 12e3, re = 2e3, w = 15, le = {
|
|
15
15
|
top: "k-callout-s",
|
|
16
16
|
left: "k-callout-e",
|
|
17
17
|
bottom: "k-callout-n",
|
|
18
18
|
right: "k-callout-w"
|
|
19
|
-
},
|
|
19
|
+
}, ae = {
|
|
20
20
|
top: "k-callout-n",
|
|
21
21
|
left: "k-callout-w",
|
|
22
22
|
bottom: "k-callout-s",
|
|
23
23
|
right: "k-callout-e"
|
|
24
|
-
},
|
|
24
|
+
}, ie = {
|
|
25
25
|
top: { vertical: "bottom", horizontal: "center" },
|
|
26
26
|
left: { vertical: "center", horizontal: "right" },
|
|
27
27
|
bottom: { vertical: "top", horizontal: "center" },
|
|
28
28
|
right: { vertical: "center", horizontal: "left" }
|
|
29
|
-
},
|
|
29
|
+
}, se = {
|
|
30
30
|
top: { vertical: "top", horizontal: "center" },
|
|
31
31
|
left: { vertical: "center", horizontal: "left" },
|
|
32
32
|
bottom: { vertical: "bottom", horizontal: "center" },
|
|
33
33
|
right: { vertical: "center", horizontal: "right" }
|
|
34
|
-
},
|
|
34
|
+
}, ce = (r) => t.Children.toArray(r).filter((n) => n && n.type === z), pe = (r) => t.Children.toArray(r).filter((n) => n && n.type !== z), N = t.forwardRef((r, n) => {
|
|
35
35
|
const {
|
|
36
|
-
autoFocus:
|
|
37
|
-
callout:
|
|
38
|
-
position: l =
|
|
39
|
-
collision:
|
|
40
|
-
title:
|
|
41
|
-
children:
|
|
42
|
-
show:
|
|
43
|
-
anchor:
|
|
44
|
-
appendTo:
|
|
45
|
-
offset:
|
|
46
|
-
animate:
|
|
47
|
-
positionMode:
|
|
48
|
-
scale:
|
|
36
|
+
autoFocus: D = !0,
|
|
37
|
+
callout: u = g.callout,
|
|
38
|
+
position: l = g.position,
|
|
39
|
+
collision: F = g.collision,
|
|
40
|
+
title: c,
|
|
41
|
+
children: d,
|
|
42
|
+
show: R,
|
|
43
|
+
anchor: x,
|
|
44
|
+
appendTo: B,
|
|
45
|
+
offset: K,
|
|
46
|
+
animate: j,
|
|
47
|
+
positionMode: S,
|
|
48
|
+
scale: V,
|
|
49
49
|
popoverClass: a,
|
|
50
|
-
className:
|
|
51
|
-
id:
|
|
52
|
-
style:
|
|
53
|
-
contentStyle:
|
|
54
|
-
onPosition:
|
|
50
|
+
className: Z,
|
|
51
|
+
id: P,
|
|
52
|
+
style: _,
|
|
53
|
+
contentStyle: E,
|
|
54
|
+
onPosition: f,
|
|
55
55
|
onClose: m,
|
|
56
56
|
onOpen: h,
|
|
57
57
|
onKeyDown: v
|
|
58
|
-
} = r, [
|
|
59
|
-
vertical:
|
|
60
|
-
horizontal:
|
|
61
|
-
},
|
|
58
|
+
} = r, [L, k] = t.useState(!1), C = l === "top" || l === "bottom", M = r.margin || {
|
|
59
|
+
vertical: u && C ? w : 0,
|
|
60
|
+
horizontal: u && !C ? w : 0
|
|
61
|
+
}, H = ie[l], U = se[l], O = t.useContext(I), X = O ? O + re : ne, i = t.useRef(null), T = W(P) || "k-popover-1", y = `${T}-header`, b = `${T}-body`;
|
|
62
62
|
t.useImperativeHandle(i, () => ({ props: r })), t.useImperativeHandle(n, () => i.current);
|
|
63
|
-
const
|
|
63
|
+
const $ = t.useCallback(
|
|
64
64
|
(o) => {
|
|
65
|
-
if (setTimeout(() =>
|
|
66
|
-
const
|
|
65
|
+
if (setTimeout(() => k(o.flipped)), f) {
|
|
66
|
+
const s = {
|
|
67
67
|
target: i.current,
|
|
68
68
|
flipped: o.flipped,
|
|
69
69
|
fitted: o.fitted
|
|
70
70
|
};
|
|
71
|
-
|
|
71
|
+
f.call(void 0, s);
|
|
72
72
|
}
|
|
73
73
|
},
|
|
74
|
-
[
|
|
75
|
-
),
|
|
76
|
-
if (
|
|
77
|
-
const o =
|
|
74
|
+
[f, k]
|
|
75
|
+
), q = t.useCallback(() => {
|
|
76
|
+
if (D) {
|
|
77
|
+
const o = oe(document.querySelector(".k-popover-inner"));
|
|
78
78
|
o && o.focus();
|
|
79
79
|
}
|
|
80
80
|
if (h) {
|
|
81
81
|
const o = { target: i.current };
|
|
82
82
|
h.call(void 0, o);
|
|
83
83
|
}
|
|
84
|
-
}, [h]),
|
|
84
|
+
}, [h]), G = t.useCallback(
|
|
85
85
|
(o) => {
|
|
86
86
|
if (v && o.key === "Escape") {
|
|
87
|
-
const
|
|
88
|
-
v.call(void 0,
|
|
87
|
+
const s = { target: i.current, show: !1 };
|
|
88
|
+
v.call(void 0, s);
|
|
89
89
|
}
|
|
90
|
-
o.key === "Tab" &&
|
|
90
|
+
o.key === "Tab" && te(o);
|
|
91
91
|
},
|
|
92
92
|
[v]
|
|
93
|
-
),
|
|
93
|
+
), J = t.useCallback(
|
|
94
94
|
(o) => {
|
|
95
95
|
if (m) {
|
|
96
|
-
const
|
|
97
|
-
m.call(void 0,
|
|
96
|
+
const s = { target: i.current };
|
|
97
|
+
m.call(void 0, s);
|
|
98
98
|
}
|
|
99
99
|
o && o.target && o.target.props && o.target.props.anchor && o.target.props.anchor.focus();
|
|
100
100
|
},
|
|
101
101
|
[m]
|
|
102
|
-
),
|
|
103
|
-
Array.isArray(a) ? a.forEach((o) =>
|
|
104
|
-
|
|
105
|
-
}) : a && (
|
|
106
|
-
const
|
|
107
|
-
() => /* @__PURE__ */ t.createElement(t.Fragment, null,
|
|
108
|
-
[
|
|
102
|
+
), p = { "k-popover": !0 };
|
|
103
|
+
Array.isArray(a) ? a.forEach((o) => p[o] = !0) : typeof a == "object" ? Object.keys(a).forEach((o) => {
|
|
104
|
+
p[o] = a[o];
|
|
105
|
+
}) : a && (p[a] = !0);
|
|
106
|
+
const Q = L ? ae[l] : le[l], A = t.useMemo(
|
|
107
|
+
() => /* @__PURE__ */ t.createElement(t.Fragment, null, c && /* @__PURE__ */ t.createElement("div", { className: "k-popover-header", id: y }, c), /* @__PURE__ */ t.createElement("div", { className: "k-popover-body", id: b, style: E }, pe(d)), ce(d)),
|
|
108
|
+
[d, E, c, y, b]
|
|
109
109
|
);
|
|
110
|
-
return /* @__PURE__ */ t.createElement(
|
|
111
|
-
|
|
110
|
+
return /* @__PURE__ */ t.createElement(I.Provider, { value: X }, /* @__PURE__ */ t.createElement(
|
|
111
|
+
ee,
|
|
112
112
|
{
|
|
113
|
-
id:
|
|
114
|
-
role: "
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
113
|
+
id: P,
|
|
114
|
+
role: "dialog",
|
|
115
|
+
ariaLabelledBy: c ? y : void 0,
|
|
116
|
+
ariaDescribedBy: b,
|
|
117
|
+
animate: j,
|
|
118
|
+
collision: F,
|
|
119
|
+
anchor: x,
|
|
120
|
+
offset: K,
|
|
121
|
+
margin: M,
|
|
122
|
+
popupAlign: H,
|
|
123
|
+
anchorAlign: U,
|
|
124
|
+
appendTo: B,
|
|
125
|
+
show: R,
|
|
126
|
+
scale: V,
|
|
127
|
+
positionMode: S,
|
|
128
|
+
style: _,
|
|
129
|
+
className: Z,
|
|
130
|
+
popupClass: p,
|
|
131
|
+
onOpen: q,
|
|
132
|
+
onClose: J,
|
|
133
|
+
onPosition: $,
|
|
134
|
+
onKeyDown: G
|
|
133
135
|
},
|
|
134
|
-
|
|
136
|
+
u && l ? /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: Y("k-popover-callout", Q) }), /* @__PURE__ */ t.createElement("div", { className: "k-popover-inner" }, A)) : A
|
|
135
137
|
));
|
|
136
|
-
}),
|
|
138
|
+
}), g = {
|
|
137
139
|
callout: !0,
|
|
138
140
|
position: "top",
|
|
139
141
|
collision: {
|
|
@@ -141,7 +143,7 @@ const $ = 12e3, ee = 2e3, O = 15, oe = {
|
|
|
141
143
|
vertical: "none"
|
|
142
144
|
}
|
|
143
145
|
};
|
|
144
|
-
|
|
146
|
+
N.propTypes = {
|
|
145
147
|
callout: e.bool,
|
|
146
148
|
title: e.node,
|
|
147
149
|
position: e.oneOf(["top", "left", "bottom", "right"]),
|
|
@@ -176,7 +178,7 @@ A.propTypes = {
|
|
|
176
178
|
onPosition: e.func,
|
|
177
179
|
onOpen: e.func
|
|
178
180
|
};
|
|
179
|
-
|
|
181
|
+
N.displayName = "KendoReactPopover";
|
|
180
182
|
export {
|
|
181
|
-
|
|
183
|
+
N as Popover
|
|
182
184
|
};
|
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,18 +6,18 @@
|
|
|
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
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(
|
|
@@ -45,29 +45,29 @@ 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
73
|
onOpen: A,
|
|
@@ -76,15 +76,16 @@ const z = o.memo(
|
|
|
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,54 +109,54 @@ const z = o.memo(
|
|
|
108
109
|
}, G = (e, t) => {
|
|
109
110
|
if (!t)
|
|
110
111
|
return { left: 0, top: 0 };
|
|
111
|
-
const r =
|
|
112
|
-
return { left: Y, top:
|
|
113
|
-
},
|
|
114
|
-
|
|
112
|
+
const r = Ce(t), Y = be(P.current, e.offsetWidth, r, n, d), w = he(D.current, r, e.offsetHeight, n, d);
|
|
113
|
+
return { left: Y, top: w };
|
|
114
|
+
}, C = (e) => {
|
|
115
|
+
ne(S, e, void 0, void 0), x(null), N(!1), k("");
|
|
115
116
|
}, J = (e) => {
|
|
116
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
|
-
const
|
|
126
|
+
const w = () => {
|
|
126
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
|
-
W.current &&
|
|
139
|
-
},
|
|
138
|
+
h ? Z.current = window.setTimeout(() => {
|
|
139
|
+
W.current && w();
|
|
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
|
}, []);
|
|
@@ -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
|
-
handleMouseLeave:
|
|
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';
|