react-tooltip 4.5.1 → 5.0.0-beta.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.
Files changed (110) hide show
  1. package/.editorconfig +25 -0
  2. package/.eslintrc.json +94 -0
  3. package/.gitattributes +3 -0
  4. package/.github/FUNDING.yml +13 -0
  5. package/.github/workflows/lint.yaml +35 -0
  6. package/.github/workflows/pull-request.yaml +11 -0
  7. package/.github/workflows/release.yaml +30 -0
  8. package/.husky/pre-commit +6 -0
  9. package/.prettierrc.json +10 -0
  10. package/.stylelintrc.json +19 -0
  11. package/.vscode/settings.json +27 -0
  12. package/bower.json +26 -0
  13. package/build/dist/react-tooltip.cjs.js +2909 -0
  14. package/build/dist/react-tooltip.cjs.min.js +6 -0
  15. package/build/dist/react-tooltip.css +73 -0
  16. package/build/dist/react-tooltip.esm.js +2901 -0
  17. package/build/dist/react-tooltip.esm.min.js +6 -0
  18. package/build/dist/react-tooltip.min.css +1 -0
  19. package/build/dist/react-tooltip.umd.js +2913 -0
  20. package/build/dist/react-tooltip.umd.min.js +6 -0
  21. package/build/index.css +79 -0
  22. package/build/index.html +19 -0
  23. package/build/index.js +36190 -0
  24. package/cli.js +30 -0
  25. package/contributing.md +40 -0
  26. package/dist/react-tooltip-tokens.css +8 -0
  27. package/dist/react-tooltip.cjs.js +2932 -0
  28. package/dist/react-tooltip.cjs.min.js +6 -0
  29. package/dist/react-tooltip.css +73 -0
  30. package/dist/react-tooltip.d.ts +21 -120
  31. package/dist/react-tooltip.esm.js +2924 -0
  32. package/dist/react-tooltip.esm.min.js +6 -0
  33. package/dist/react-tooltip.min.css +1 -0
  34. package/dist/react-tooltip.umd.js +2936 -0
  35. package/dist/react-tooltip.umd.min.js +6 -0
  36. package/docs/README.md +50 -0
  37. package/docs/babel.config.js +3 -0
  38. package/docs/docs/examples/_category_.json +7 -0
  39. package/docs/docs/examples/basic-examples.mdx +68 -0
  40. package/docs/docs/examples/children.mdx +67 -0
  41. package/docs/docs/examples/content.mdx +80 -0
  42. package/docs/docs/examples/delay.mdx +84 -0
  43. package/docs/docs/examples/events.mdx +85 -0
  44. package/docs/docs/examples/get-content.mdx +58 -0
  45. package/docs/docs/examples/html.mdx +75 -0
  46. package/docs/docs/examples/multiline.mdx +91 -0
  47. package/docs/docs/examples/offset.mdx +69 -0
  48. package/docs/docs/examples/place.mdx +55 -0
  49. package/docs/docs/examples/state.mdx +331 -0
  50. package/docs/docs/examples/styling.mdx +388 -0
  51. package/docs/docs/examples/variant.mdx +100 -0
  52. package/docs/docs/getting-started.mdx +100 -0
  53. package/docs/docs/options.mdx +105 -0
  54. package/docs/docs/upgrade-guide/_category_.json +7 -0
  55. package/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx +119 -0
  56. package/docs/docs/upgrade-guide/changelog-v4-v5.md +86 -0
  57. package/docs/docusaurus.config.js +135 -0
  58. package/docs/package.json +47 -0
  59. package/docs/sidebars.js +33 -0
  60. package/docs/src/components/HomepageFeatures/index.tsx +71 -0
  61. package/docs/src/components/HomepageFeatures/styles.module.css +11 -0
  62. package/docs/src/css/custom.css +74 -0
  63. package/docs/src/pages/index.module.css +35 -0
  64. package/docs/src/pages/index.tsx +45 -0
  65. package/docs/src/pages/markdown-page.md +7 -0
  66. package/docs/static/.nojekyll +0 -0
  67. package/docs/static/img/Octocat.jpg +0 -0
  68. package/docs/static/img/Octocat.png +0 -0
  69. package/docs/static/img/Octocat.svg +9 -0
  70. package/docs/static/img/android-chrome-192x192.png +0 -0
  71. package/docs/static/img/android-chrome-512x512.png +0 -0
  72. package/docs/static/img/apple-touch-icon.png +0 -0
  73. package/docs/static/img/docusaurus.png +0 -0
  74. package/docs/static/img/favicon-16x16.png +0 -0
  75. package/docs/static/img/favicon-32x32.png +0 -0
  76. package/docs/static/img/favicon-old.ico +0 -0
  77. package/docs/static/img/favicon.ico +0 -0
  78. package/docs/static/img/github.svg +1 -0
  79. package/docs/static/img/happy-face-tooltip.png +0 -0
  80. package/docs/static/img/happy-face-tooltip.svg +21 -0
  81. package/docs/static/img/logo-dinossaur.svg +1 -0
  82. package/docs/static/img/logo.png +0 -0
  83. package/docs/static/img/logo.svg +21 -0
  84. package/docs/static/img/only-tooltip-top.png +0 -0
  85. package/docs/static/img/only-tooltip-top.svg +4 -0
  86. package/docs/static/img/only-tooltip.png +0 -0
  87. package/docs/static/img/only-tooltip.svg +4 -0
  88. package/docs/static/img/site.webmanifest +1 -0
  89. package/docs/static/img/undraw_docusaurus_mountain.svg +171 -0
  90. package/docs/static/img/undraw_docusaurus_react.svg +170 -0
  91. package/docs/static/img/undraw_docusaurus_tree.svg +40 -0
  92. package/docs/tsconfig.json +7 -0
  93. package/docs/yarn.lock +7599 -0
  94. package/example-v5/package.json +21 -0
  95. package/example-v5/public/index.html +20 -0
  96. package/example-v5/public/manifest.json +8 -0
  97. package/example-v5/src/App.jsx +908 -0
  98. package/example-v5/src/index.css +238 -0
  99. package/example-v5/src/index.js +15 -0
  100. package/example-v5/src/index.scss +251 -0
  101. package/package.json +94 -146
  102. package/public/index.html +19 -0
  103. package/rollup.config.dev.js +88 -0
  104. package/rollup.config.prod.js +104 -0
  105. package/rollup.config.types.js +17 -0
  106. package/tsconfig.json +109 -0
  107. package/dist/index.es.js +0 -3185
  108. package/dist/index.es.js.map +0 -1
  109. package/dist/index.js +0 -3192
  110. package/dist/index.js.map +0 -1
@@ -0,0 +1,6 @@
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e),r={exports:{}},o={};!function(){var e=n.default,t=Symbol.for("react.element"),r=Symbol.for("react.portal"),i=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),l=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),d=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),m=Symbol.for("react.offscreen"),h=Symbol.iterator;var g=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function v(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];b("error",e,n)}function b(e,t,n){var r=g.ReactDebugCurrentFrame.getStackAddendum();""!==r&&(t+="%s",n=n.concat([r]));var o=n.map((function(e){return String(e)}));o.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,o)}var w;function x(e){return e.displayName||"Context"}function S(e){if(null==e)return null;if("number"==typeof e.tag&&v("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case i:return"Fragment";case r:return"Portal";case l:return"Profiler";case a:return"StrictMode";case f:return"Suspense";case p:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case c:return x(e)+".Consumer";case s:return x(e._context)+".Provider";case u:return function(e,t,n){var r=e.displayName;if(r)return r;var o=t.displayName||t.name||"";return""!==o?n+"("+o+")":n}(e,e.render,"ForwardRef");case d:var t=e.displayName||null;return null!==t?t:S(e.type)||"Memo";case y:var n=e,o=n._payload,m=n._init;try{return S(m(o))}catch(e){return null}}return null}w=Symbol.for("react.module.reference");var _,R,k,T,O,j,E,P=Object.assign,A=0;function N(){}N.__reactDisabledLog=!0;var L,C=g.ReactCurrentDispatcher;function $(e,t,n){if(void 0===L)try{throw Error()}catch(e){var r=e.stack.trim().match(/\n( *(at )?)/);L=r&&r[1]||""}return"\n"+L+e}var D,F=!1,I="function"==typeof WeakMap?WeakMap:Map;function W(e,t){if(!e||F)return"";var n,r=D.get(e);if(void 0!==r)return r;F=!0;var o,i=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=C.current,C.current=null,function(){if(0===A){_=console.log,R=console.info,k=console.warn,T=console.error,O=console.group,j=console.groupCollapsed,E=console.groupEnd;var e={configurable:!0,enumerable:!0,value:N,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}A++}();try{if(t){var a=function(){throw Error()};if(Object.defineProperty(a.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(a,[])}catch(e){n=e}Reflect.construct(e,[],a)}else{try{a.call()}catch(e){n=e}e.call(a.prototype)}}else{try{throw Error()}catch(e){n=e}e()}}catch(t){if(t&&n&&"string"==typeof t.stack){for(var l=t.stack.split("\n"),s=n.stack.split("\n"),c=l.length-1,u=s.length-1;c>=1&&u>=0&&l[c]!==s[u];)u--;for(;c>=1&&u>=0;c--,u--)if(l[c]!==s[u]){if(1!==c||1!==u)do{if(c--,--u<0||l[c]!==s[u]){var f="\n"+l[c].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&D.set(e,f),f}}while(c>=1&&u>=0);break}}}finally{F=!1,C.current=o,function(){if(0==--A){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:P({},e,{value:_}),info:P({},e,{value:R}),warn:P({},e,{value:k}),error:P({},e,{value:T}),group:P({},e,{value:O}),groupCollapsed:P({},e,{value:j}),groupEnd:P({},e,{value:E})})}A<0&&v("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=i}var p=e?e.displayName||e.name:"",d=p?$(p):"";return"function"==typeof e&&D.set(e,d),d}function H(e,t,n){if(null==e)return"";if("function"==typeof e)return W(e,!(!(r=e.prototype)||!r.isReactComponent));var r;if("string"==typeof e)return $(e);switch(e){case f:return $("Suspense");case p:return $("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return W(e.render,!1);case d:return H(e.type,t,n);case y:var o=e,i=o._payload,a=o._init;try{return H(a(i),t,n)}catch(e){}}return""}D=new I;var M=Object.prototype.hasOwnProperty,U={},B=g.ReactDebugCurrentFrame;function V(e){if(e){var t=e._owner,n=H(e.type,e._source,t?t.type:null);B.setExtraStackFrame(n)}else B.setExtraStackFrame(null)}var q=Array.isArray;function z(e){return q(e)}function Y(e){return""+e}function X(e){if(function(e){try{return Y(e),!1}catch(e){return!0}}(e))return v("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),Y(e)}var J,K,Z,G=g.ReactCurrentOwner,Q={key:!0,ref:!0,__self:!0,__source:!0};Z={};function ee(e,n,r,o,i){var a,l={},s=null,c=null;for(a in void 0!==r&&(X(r),s=""+r),function(e){if(M.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(n)&&(X(n.key),s=""+n.key),function(e){if(M.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}(n)&&(c=n.ref,function(e,t){if("string"==typeof e.ref&&G.current&&t&&G.current.stateNode!==t){var n=S(G.current.type);Z[n]||(v('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',S(G.current.type),e.ref),Z[n]=!0)}}(n,i)),n)M.call(n,a)&&!Q.hasOwnProperty(a)&&(l[a]=n[a]);if(e&&e.defaultProps){var u=e.defaultProps;for(a in u)void 0===l[a]&&(l[a]=u[a])}if(s||c){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;s&&function(e,t){var n=function(){J||(J=!0,v("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}(l,f),c&&function(e,t){var n=function(){K||(K=!0,v("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};n.isReactWarning=!0,Object.defineProperty(e,"ref",{get:n,configurable:!0})}(l,f)}return function(e,n,r,o,i,a,l){var s={$$typeof:t,type:e,key:n,ref:r,props:l,_owner:a,_store:{}};return Object.defineProperty(s._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(s,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(s,"_source",{configurable:!1,enumerable:!1,writable:!1,value:i}),Object.freeze&&(Object.freeze(s.props),Object.freeze(s)),s}(e,s,c,i,o,G.current,l)}var te,ne=g.ReactCurrentOwner,re=g.ReactDebugCurrentFrame;function oe(e){if(e){var t=e._owner,n=H(e.type,e._source,t?t.type:null);re.setExtraStackFrame(n)}else re.setExtraStackFrame(null)}function ie(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}function ae(){if(ne.current){var e=S(ne.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}te=!1;var le={};function se(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var n=function(e){var t=ae();if(!t){var n="string"==typeof e?e:e.displayName||e.name;n&&(t="\n\nCheck the top-level render call using <"+n+">.")}return t}(t);if(!le[n]){le[n]=!0;var r="";e&&e._owner&&e._owner!==ne.current&&(r=" It was passed a child from "+S(e._owner.type)+"."),oe(e),v('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',n,r),oe(null)}}}function ce(e,t){if("object"==typeof e)if(z(e))for(var n=0;n<e.length;n++){var r=e[n];ie(r)&&se(r,t)}else if(ie(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var t=h&&e[h]||e["@@iterator"];return"function"==typeof t?t:null}(e);if("function"==typeof o&&o!==e.entries)for(var i,a=o.call(e);!(i=a.next()).done;)ie(i.value)&&se(i.value,t)}}function ue(e){var t,n=e.type;if(null!=n&&"string"!=typeof n){if("function"==typeof n)t=n.propTypes;else{if("object"!=typeof n||n.$$typeof!==u&&n.$$typeof!==d)return;t=n.propTypes}if(t){var r=S(n);!function(e,t,n,r,o){var i=Function.call.bind(M);for(var a in e)if(i(e,a)){var l=void 0;try{if("function"!=typeof e[a]){var s=Error((r||"React class")+": "+n+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[a]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw s.name="Invariant Violation",s}l=e[a](t,a,r,n,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){l=e}!l||l instanceof Error||(V(o),v("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",r||"React class",n,a,typeof l),V(null)),l instanceof Error&&!(l.message in U)&&(U[l.message]=!0,V(o),v("Failed %s type: %s",n,l.message),V(null))}}(t,e.props,"prop",r,e)}else if(void 0!==n.PropTypes&&!te){te=!0,v("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",S(n)||"Unknown")}"function"!=typeof n.getDefaultProps||n.getDefaultProps.isReactClassApproved||v("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function fe(e,n,r,o,h,g){var b=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===l||e===a||e===f||e===p||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===d||e.$$typeof===s||e.$$typeof===c||e.$$typeof===u||e.$$typeof===w||void 0!==e.getModuleId)}(e);if(!b){var x="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(x+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var _,R=function(e){return void 0!==e?"\n\nCheck your code at "+e.fileName.replace(/^.*[\\\/]/,"")+":"+e.lineNumber+".":""}(h);x+=R||ae(),null===e?_="null":z(e)?_="array":void 0!==e&&e.$$typeof===t?(_="<"+(S(e.type)||"Unknown")+" />",x=" Did you accidentally export a JSX literal instead of a component?"):_=typeof e,v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",_,x)}var k=ee(e,n,r,h,g);if(null==k)return k;if(b){var T=n.children;if(void 0!==T)if(o)if(z(T)){for(var O=0;O<T.length;O++)ce(T[O],e);Object.freeze&&Object.freeze(T)}else v("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else ce(T,e)}return e===i?function(e){for(var t=Object.keys(e.props),n=0;n<t.length;n++){var r=t[n];if("children"!==r&&"key"!==r){oe(e),v("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",r),oe(null);break}}null!==e.ref&&(oe(e),v("Invalid attribute `ref` supplied to `React.Fragment`."),oe(null))}(k):ue(k),k}var pe=function(e,t,n){return fe(e,t,n,!1)},de=function(e,t,n){return fe(e,t,n,!0)};o.Fragment=i,o.jsx=pe,o.jsxs=de}(),r.exports=o;var i,a={exports:{}};
2
+ /*!
3
+ Copyright (c) 2018 Jed Watson.
4
+ Licensed under the MIT License (MIT), see
5
+ http://jedwatson.github.io/classnames
6
+ */i=a,function(){var e={}.hasOwnProperty;function t(){for(var n=[],r=0;r<arguments.length;r++){var o=arguments[r];if(o){var i=typeof o;if("string"===i||"number"===i)n.push(o);else if(Array.isArray(o)){if(o.length){var a=t.apply(null,o);a&&n.push(a)}}else if("object"===i){if(o.toString!==Object.prototype.toString&&!o.toString.toString().includes("[native code]")){n.push(o.toString());continue}for(var l in o)e.call(o,l)&&o[l]&&n.push(l)}}}return n.join(" ")}i.exports?(t.default=t,i.exports=t):window.classNames=t}();var l=a.exports;const s=(e,t,n)=>{let r;return function(){const o=this,i=arguments,a=()=>{r=null,n||e.apply(o,i)},l=n&&!r;clearTimeout(r),r=setTimeout(a,t),l&&e.apply(o,i)}},c=({content:e})=>r.exports.jsx("span",{dangerouslySetInnerHTML:{__html:e}});function u(e){return e.split("-")[0]}function f(e){return e.split("-")[1]}function p(e){return["top","bottom"].includes(u(e))?"x":"y"}function d(e){return"y"===e?"height":"width"}function y(e,t,n){let{reference:r,floating:o}=e;const i=r.x+r.width/2-o.width/2,a=r.y+r.height/2-o.height/2,l=p(t),s=d(l),c=r[s]/2-o[s]/2,y="x"===l;let m;switch(u(t)){case"top":m={x:i,y:r.y-o.height};break;case"bottom":m={x:i,y:r.y+r.height};break;case"right":m={x:r.x+r.width,y:a};break;case"left":m={x:r.x-o.width,y:a};break;default:m={x:r.x,y:r.y}}switch(f(t)){case"start":m[l]-=c*(n&&y?-1:1);break;case"end":m[l]+=c*(n&&y?-1:1)}return m}function m(e){return"number"!=typeof e?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(e):{top:e,right:e,bottom:e,left:e}}function h(e){return{...e,top:e.y,left:e.x,right:e.x+e.width,bottom:e.y+e.height}}async function g(e,t){var n;void 0===t&&(t={});const{x:r,y:o,platform:i,rects:a,elements:l,strategy:s}=e,{boundary:c="clippingAncestors",rootBoundary:u="viewport",elementContext:f="floating",altBoundary:p=!1,padding:d=0}=t,y=m(d),g=l[p?"floating"===f?"reference":"floating":f],v=h(await i.getClippingRect({element:null==(n=await(null==i.isElement?void 0:i.isElement(g)))||n?g:g.contextElement||await(null==i.getDocumentElement?void 0:i.getDocumentElement(l.floating)),boundary:c,rootBoundary:u,strategy:s})),b=h(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===f?{...a.floating,x:r,y:o}:a.reference,offsetParent:await(null==i.getOffsetParent?void 0:i.getOffsetParent(l.floating)),strategy:s}):a[f]);return{top:v.top-b.top+y.top,bottom:b.bottom-v.bottom+y.bottom,left:v.left-b.left+y.left,right:b.right-v.right+y.right}}const v=Math.min,b=Math.max;function w(e,t,n){return b(e,v(t,n))}const x={left:"right",right:"left",bottom:"top",top:"bottom"};function S(e){return e.replace(/left|right|bottom|top/g,(e=>x[e]))}const _={start:"end",end:"start"};function R(e){return e.replace(/start|end/g,(e=>_[e]))}const k=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n;const{placement:r,middlewareData:o,rects:i,initialPlacement:a,platform:l,elements:s}=t,{mainAxis:c=!0,crossAxis:y=!0,fallbackPlacements:m,fallbackStrategy:h="bestFit",flipAlignment:v=!0,...b}=e,w=u(r),x=m||(w===a||!v?[S(a)]:function(e){const t=S(e);return[R(e),t,R(t)]}(a)),_=[a,...x],k=await g(t,b),T=[];let O=(null==(n=o.flip)?void 0:n.overflows)||[];if(c&&T.push(k[w]),y){const{main:e,cross:t}=function(e,t,n){void 0===n&&(n=!1);const r=f(e),o=p(e),i=d(o);let a="x"===o?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return t.reference[i]>t.floating[i]&&(a=S(a)),{main:a,cross:S(a)}}(r,i,await(null==l.isRTL?void 0:l.isRTL(s.floating)));T.push(k[e],k[t])}if(O=[...O,{placement:r,overflows:T}],!T.every((e=>e<=0))){var j,E;const e=(null!=(j=null==(E=o.flip)?void 0:E.index)?j:0)+1,t=_[e];if(t)return{data:{index:e,overflows:O},reset:{placement:t}};let n="bottom";switch(h){case"bestFit":{var P;const e=null==(P=O.map((e=>[e,e.overflows.filter((e=>e>0)).reduce(((e,t)=>e+t),0)])).sort(((e,t)=>e[1]-t[1]))[0])?void 0:P[0].placement;e&&(n=e);break}case"initialPlacement":n=a}if(r!==n)return{reset:{placement:n}}}return{}}}};const T=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){const{x:n,y:r}=t,o=await async function(e,t){const{placement:n,platform:r,elements:o}=e,i=await(null==r.isRTL?void 0:r.isRTL(o.floating)),a=u(n),l=f(n),s="x"===p(n),c=["left","top"].includes(a)?-1:1,d=i&&s?-1:1,y="function"==typeof t?t(e):t;let{mainAxis:m,crossAxis:h,alignmentAxis:g}="number"==typeof y?{mainAxis:y,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...y};return l&&"number"==typeof g&&(h="end"===l?-1*g:g),s?{x:h*d,y:m*c}:{x:m*c,y:h*d}}(t,e);return{x:n+o.x,y:r+o.y,data:o}}}};function O(e){return e&&e.document&&e.location&&e.alert&&e.setInterval}function j(e){if(null==e)return window;if(!O(e)){const t=e.ownerDocument;return t&&t.defaultView||window}return e}function E(e){return j(e).getComputedStyle(e)}function P(e){return O(e)?"":e?(e.nodeName||"").toLowerCase():""}function A(){const e=navigator.userAgentData;return null!=e&&e.brands?e.brands.map((e=>e.brand+"/"+e.version)).join(" "):navigator.userAgent}function N(e){return e instanceof j(e).HTMLElement}function L(e){return e instanceof j(e).Element}function C(e){if("undefined"==typeof ShadowRoot)return!1;return e instanceof j(e).ShadowRoot||e instanceof ShadowRoot}function $(e){const{overflow:t,overflowX:n,overflowY:r,display:o}=E(e);return/auto|scroll|overlay|hidden/.test(t+r+n)&&!["inline","contents"].includes(o)}function D(e){return["table","td","th"].includes(P(e))}function F(e){const t=/firefox/i.test(A()),n=E(e),r=n.backdropFilter||n.WebkitBackdropFilter;return"none"!==n.transform||"none"!==n.perspective||!!r&&"none"!==r||t&&"filter"===n.willChange||t&&!!n.filter&&"none"!==n.filter||["transform","perspective"].some((e=>n.willChange.includes(e)))||["paint","layout","strict","content"].some((e=>{const t=n.contain;return null!=t&&t.includes(e)}))}function I(){return!/^((?!chrome|android).)*safari/i.test(A())}function W(e){return["html","body","#document"].includes(P(e))}const H=Math.min,M=Math.max,U=Math.round;function B(e,t,n){var r,o,i,a;void 0===t&&(t=!1),void 0===n&&(n=!1);const l=e.getBoundingClientRect();let s=1,c=1;t&&N(e)&&(s=e.offsetWidth>0&&U(l.width)/e.offsetWidth||1,c=e.offsetHeight>0&&U(l.height)/e.offsetHeight||1);const u=L(e)?j(e):window,f=!I()&&n,p=(l.left+(f&&null!=(r=null==(o=u.visualViewport)?void 0:o.offsetLeft)?r:0))/s,d=(l.top+(f&&null!=(i=null==(a=u.visualViewport)?void 0:a.offsetTop)?i:0))/c,y=l.width/s,m=l.height/c;return{width:y,height:m,top:d,right:p+y,bottom:d+m,left:p,x:p,y:d}}function V(e){return(t=e,(t instanceof j(t).Node?e.ownerDocument:e.document)||window.document).documentElement;var t}function q(e){return L(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function z(e){return B(V(e)).left+q(e).scrollLeft}function Y(e,t,n){const r=N(t),o=V(t),i=B(e,r&&function(e){const t=B(e);return U(t.width)!==e.offsetWidth||U(t.height)!==e.offsetHeight}(t),"fixed"===n);let a={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(r||!r&&"fixed"!==n)if(("body"!==P(t)||$(o))&&(a=q(t)),N(t)){const e=B(t,!0);l.x=e.x+t.clientLeft,l.y=e.y+t.clientTop}else o&&(l.x=z(o));return{x:i.left+a.scrollLeft-l.x,y:i.top+a.scrollTop-l.y,width:i.width,height:i.height}}function X(e){if("html"===P(e))return e;const t=e.assignedSlot||e.parentNode||(C(e)?e.host:null)||V(e);return C(t)?t.host:t}function J(e){return N(e)&&"fixed"!==E(e).position?e.offsetParent:null}function K(e){const t=j(e);let n=J(e);for(;n&&D(n)&&"static"===E(n).position;)n=J(n);return n&&("html"===P(n)||"body"===P(n)&&"static"===E(n).position&&!F(n))?t:n||function(e){let t=X(e);for(;N(t)&&!W(t);){if(F(t))return t;t=X(t)}return null}(e)||t}function Z(e){if(N(e))return{width:e.offsetWidth,height:e.offsetHeight};const t=B(e);return{width:t.width,height:t.height}}function G(e){const t=X(e);return W(t)?e.ownerDocument.body:N(t)&&$(t)?t:G(t)}function Q(e,t){var n;void 0===t&&(t=[]);const r=G(e),o=r===(null==(n=e.ownerDocument)?void 0:n.body),i=j(r),a=o?[i].concat(i.visualViewport||[],$(r)?r:[]):r,l=t.concat(a);return o?l:l.concat(Q(a))}function ee(e,t,n){return"viewport"===t?h(function(e,t){const n=j(e),r=V(e),o=n.visualViewport;let i=r.clientWidth,a=r.clientHeight,l=0,s=0;if(o){i=o.width,a=o.height;const e=I();(e||!e&&"fixed"===t)&&(l=o.offsetLeft,s=o.offsetTop)}return{width:i,height:a,x:l,y:s}}(e,n)):L(t)?function(e,t){const n=B(e,!1,"fixed"===t),r=n.top+e.clientTop,o=n.left+e.clientLeft;return{top:r,left:o,x:o,y:r,right:o+e.clientWidth,bottom:r+e.clientHeight,width:e.clientWidth,height:e.clientHeight}}(t,n):h(function(e){var t;const n=V(e),r=q(e),o=null==(t=e.ownerDocument)?void 0:t.body,i=M(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=M(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0);let l=-r.scrollLeft+z(e);const s=-r.scrollTop;return"rtl"===E(o||n).direction&&(l+=M(n.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:l,y:s}}(V(e)))}const te={getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:r,strategy:o}=e;const i="clippingAncestors"===n?function(e){let t=Q(e).filter((e=>L(e)&&"body"!==P(e))),n=e,r=null;for(;L(n)&&!W(n);){const e=E(n);"static"===e.position&&r&&["absolute","fixed"].includes(r.position)&&!F(n)?t=t.filter((e=>e!==n)):r=e,n=X(n)}return t}(t):[].concat(n),a=[...i,r],l=a[0],s=a.reduce(((e,n)=>{const r=ee(t,n,o);return e.top=M(r.top,e.top),e.right=H(r.right,e.right),e.bottom=H(r.bottom,e.bottom),e.left=M(r.left,e.left),e}),ee(t,l,o));return{width:s.right-s.left,height:s.bottom-s.top,x:s.left,y:s.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{rect:t,offsetParent:n,strategy:r}=e;const o=N(n),i=V(n);if(n===i)return t;let a={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if((o||!o&&"fixed"!==r)&&(("body"!==P(n)||$(i))&&(a=q(n)),N(n))){const e=B(n,!0);l.x=e.x+n.clientLeft,l.y=e.y+n.clientTop}return{...t,x:t.x-a.scrollLeft+l.x,y:t.y-a.scrollTop+l.y}},isElement:L,getDimensions:Z,getOffsetParent:K,getDocumentElement:V,getElementRects:e=>{let{reference:t,floating:n,strategy:r}=e;return{reference:Y(t,K(n),r),floating:{...Z(n),x:0,y:0}}},getClientRects:e=>Array.from(e.getClientRects()),isRTL:e=>"rtl"===E(e).direction},ne=(e,t,n)=>(async(e,t,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:i=[],platform:a}=n,l=i.filter(Boolean),s=await(null==a.isRTL?void 0:a.isRTL(t));if(null==a&&console.error(["Floating UI: `platform` property was not passed to config. If you","want to use Floating UI on the web, install @floating-ui/dom","instead of the /core package. Otherwise, you can create your own","`platform`: https://floating-ui.com/docs/platform"].join(" ")),l.filter((e=>{let{name:t}=e;return"autoPlacement"===t||"flip"===t})).length>1)throw new Error(["Floating UI: duplicate `flip` and/or `autoPlacement` middleware","detected. This will lead to an infinite loop. Ensure only one of","either has been passed to the `middleware` array."].join(" "));e&&t||console.error(["Floating UI: The reference and/or floating element was not defined","when `computePosition()` was called. Ensure that both elements have","been created and can be measured."].join(" "));let c=await a.getElementRects({reference:e,floating:t,strategy:o}),{x:u,y:f}=y(c,r,s),p=r,d={},m=0;for(let n=0;n<l.length;n++){const{name:i,fn:h}=l[n],{x:g,y:v,data:b,reset:w}=await h({x:u,y:f,initialPlacement:r,placement:p,strategy:o,middlewareData:d,rects:c,platform:a,elements:{reference:e,floating:t}});u=null!=g?g:u,f=null!=v?v:f,d={...d,[i]:{...d[i],...b}},m>50&&console.warn(["Floating UI: The middleware lifecycle appears to be running in an","infinite loop. This is usually caused by a `reset` continually","being returned without a break condition."].join(" ")),w&&m<=50&&(m++,"object"==typeof w&&(w.placement&&(p=w.placement),w.rects&&(c=!0===w.rects?await a.getElementRects({reference:e,floating:t,strategy:o}):w.rects),({x:u,y:f}=y(c,p,s))),n=-1)}return{x:u,y:f,placement:p,strategy:o,middlewareData:d}})(e,t,{platform:te,...n}),re=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:n=null,place:r="top",offset:o=10})=>{if(null===e)return console.error("The reference element for tooltip was not defined: ",e),{tooltipStyles:{},tooltipArrowStyles:{}};if(null===t)return{tooltipStyles:{},tooltipArrowStyles:{}};const i=[T(Number(o)),k(),(a={padding:5},void 0===a&&(a={}),{name:"shift",options:a,async fn(e){const{x:t,y:n,placement:r}=e,{mainAxis:o=!0,crossAxis:i=!1,limiter:l={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...s}=a,c={x:t,y:n},f=await g(e,s),d=p(u(r)),y="x"===d?"y":"x";let m=c[d],h=c[y];if(o){const e="y"===d?"bottom":"right";m=w(m+f["y"===d?"top":"left"],m,m-f[e])}if(i){const e="y"===y?"bottom":"right";h=w(h+f["y"===y?"top":"left"],h,h-f[e])}const v=l.fn({...e,[d]:m,[y]:h});return{...v,data:{x:v.x-t,y:v.y-n}}}})];var a;return n?(i.push((e=>({name:"arrow",options:e,async fn(t){const{element:n,padding:r=0}=null!=e?e:{},{x:o,y:i,placement:a,rects:l,platform:s}=t;if(null==n)return console.warn("Floating UI: No `element` was passed to the `arrow` middleware."),{};const c=m(r),u={x:o,y:i},y=p(a),h=f(a),g=d(y),v=await s.getDimensions(n),b="y"===y?"top":"left",x="y"===y?"bottom":"right",S=l.reference[g]+l.reference[y]-u[y]-l.floating[g],_=u[y]-l.reference[y],R=await(null==s.getOffsetParent?void 0:s.getOffsetParent(n));let k=R?"y"===y?R.clientHeight||0:R.clientWidth||0:0;0===k&&(k=l.floating[g]);const T=S/2-_/2,O=c[b],j=k-v[g]-c[x],E=k/2-v[g]/2+T,P=w(O,E,j),A=("start"===h?c[b]:c[x])>0&&E!==P&&l.reference[g]<=l.floating[g];return{[y]:u[y]-(A?E<O?O-E:j-E:0),data:{[y]:P,centerOffset:E-P}}}}))({element:n})),ne(e,t,{placement:r,middleware:i}).then((({x:e,y:t,placement:n,middlewareData:r})=>{const o={left:`${e}px`,top:`${t}px`},{x:i,y:a}=r.arrow;return{tooltipStyles:o,tooltipArrowStyles:{left:null!=i?`${i}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",[{top:"bottom",right:"left",bottom:"top",left:"right"}[n.split("-")[0]]]:"-4px"}}}))):ne(e,t,{placement:"bottom",middleware:i}).then((({x:e,y:t})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{}})))};var oe={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",show:"styles-module_show__2NboJ",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const ie=({id:t=e.useId(),className:n,classNameArrow:o,variant:i="dark",anchorId:a,place:u="top",offset:f=10,events:p=["hover"],wrapper:d="div",children:y=null,delayShow:m=0,delayHide:h=0,isHtmlContent:g=!1,content:v,isOpen:b,setIsOpen:w})=>{const x=e.createRef(),S=e.createRef(),_=e.useRef(),R=e.useRef(),[k,T]=e.useState({}),[O,j]=e.useState({}),[E,P]=e.useState(!1),A=e=>{w?w(e):void 0===b&&P(e)},N=()=>{w?w(!b):void 0===b&&P((e=>!e))},L=s((()=>{m?(_.current&&clearTimeout(_.current),_.current=setTimeout((()=>{A(!0)}),m)):A(!0),R.current&&clearTimeout(R.current)}),50),C=s((()=>{h?(R.current&&clearTimeout(R.current),R.current=setTimeout((()=>{A(!1)}),h)):A(!1),E&&_.current?clearTimeout(_.current):!E&&_.current&&(R.current=setTimeout((()=>{A(!1)}),2*m))}),50);return e.useEffect((()=>{const e=document.querySelector(`#${a}`);if(!e)return()=>{};const t=[];return p.find((e=>"click"===e))&&t.push({event:"click",listener:N}),p.find((e=>"hover"===e))&&t.push({event:"mouseenter",listener:L},{event:"mouseleave",listener:C},{event:"focus",listener:L},{event:"blur",listener:C}),t.forEach((({event:t,listener:n})=>{null==e||e.addEventListener(t,n)})),()=>{t.forEach((({event:t,listener:n})=>{null==e||e.removeEventListener(t,n)}))}}),[a,p,h,m]),e.useEffect((()=>{const e=document.querySelector(`#${a}`);return re({place:u,offset:f,elementReference:e,tooltipReference:x.current,tooltipArrowReference:S.current}).then((e=>{Object.keys(e.tooltipStyles).length&&T(e.tooltipStyles),Object.keys(e.tooltipArrowStyles).length&&j(e.tooltipArrowStyles)})),()=>{_.current=void 0,R.current=void 0}}),[E,b,a]),r.exports.jsxs(d,{id:t,role:"tooltip",className:l(oe.tooltip,oe[i],n,{[oe.show]:b||E}),style:k,ref:x,children:[y||(g?r.exports.jsx(c,{content:v}):v),r.exports.jsx("div",{className:l(oe.arrow,o),style:O,ref:S})]})},ae=["place","content","html","variant","offset","wrapper","events","delay-show","delay-hide"];exports.Tooltip=({id:t,anchorId:n,content:o,html:i,className:a,classNameArrow:l,variant:s="dark",place:c="top",offset:u=10,wrapper:f="div",children:p=null,events:d=["hover"],delayShow:y=0,delayHide:m=0,getContent:h,isOpen:g,setIsOpen:v})=>{const[b,w]=e.useState(o||i),[x,S]=e.useState(c),[_,R]=e.useState(s),[k,T]=e.useState(u),[O,j]=e.useState(y),[E,P]=e.useState(m),[A,N]=e.useState(f),[L,C]=e.useState(d),[$,D]=e.useState(Boolean(i)),F=e=>{const t=Object.keys(e);let n=null;const r={place:e=>{S(e)},content:e=>{D(!0),w(h?h(e):e)},html:e=>{D(!0),w(h?h(e):e)},variant:e=>{R(e)},offset:e=>{T(e)},wrapper:e=>{N(e)},events:e=>{const t=e.split(" ");C(t)},"delay-show":e=>{j(Number(e))},"delay-hide":e=>{P(Number(e))}};t.forEach((t=>{n=t.replace("data-tooltip-",""),ae.includes(n)&&r[n](e[t])}))};e.useEffect((()=>{if(!n)return()=>{};const e=document.querySelector(`#${n}`);if(!e)return()=>{};o&&h&&w(h(o));const t=new MutationObserver((t=>{t.forEach((t=>{if("attributes"===t.type){const n=(({element:e,attributeName:t})=>({[t]:e.getAttribute(t)}))({element:e,attributeName:t.attributeName});F(n)}}))}));t.observe(e,{attributes:!0,childList:!1,subtree:!1});const r=(e=>null==e?void 0:e.getAttributeNames().reduce(((t,n)=>(n.includes("data-tooltip-")&&(t[n]=null==e?void 0:e.getAttribute(n)),t)),{}))(e);return F(r),()=>{t.disconnect()}}),[n]);const I={id:t,anchorId:n,className:a,classNameArrow:l,content:b,isHtmlContent:$,place:x,variant:_,offset:k,wrapper:A,events:L,delayShow:O,delayHide:E,isOpen:g,setIsOpen:v};return p?r.exports.jsx(ie,{...I,children:p}):r.exports.jsx(ie,{...I})};
@@ -0,0 +1,73 @@
1
+ :root {
2
+ --rt-color-white: #fff;
3
+ --rt-color-dark: #222;
4
+ --rt-color-success: #8dc572;
5
+ --rt-color-error: #be6464;
6
+ --rt-color-warning: #f0ad4e;
7
+ --rt-color-info: #337ab7;
8
+ }
9
+
10
+ .styles-module_tooltip__mnnfp {
11
+ visibility: hidden;
12
+ width: max-content;
13
+ position: absolute;
14
+ top: 0;
15
+ left: 0;
16
+ padding: 8px 16px;
17
+ border-radius: 3px;
18
+ font-size: 90%;
19
+ pointer-events: none;
20
+ opacity: 0;
21
+ transition: opacity 0.3s ease-out;
22
+ will-change: opacity, visibility;
23
+ }
24
+
25
+ .styles-module_arrow__K0L3T {
26
+ position: absolute;
27
+ background: var(--rt-color-dark);
28
+ width: 8px;
29
+ height: 8px;
30
+ transform: rotate(45deg);
31
+ }
32
+
33
+ .styles-module_show__2NboJ {
34
+ visibility: visible;
35
+ opacity: 0.9;
36
+ }
37
+
38
+ /** Types variant **/
39
+ .styles-module_dark__xNqje,
40
+ .styles-module_dark__xNqje .styles-module_arrow__K0L3T {
41
+ background: var(--rt-color-dark);
42
+ color: var(--rt-color-white);
43
+ }
44
+
45
+ .styles-module_light__Z6W-X,
46
+ .styles-module_light__Z6W-X .styles-module_arrow__K0L3T {
47
+ background-color: var(--rt-color-white);
48
+ color: var(--rt-color-dark);
49
+ }
50
+
51
+ .styles-module_success__A2AKt,
52
+ .styles-module_success__A2AKt .styles-module_arrow__K0L3T {
53
+ background-color: var(--rt-color-success);
54
+ color: var(--rt-color-white);
55
+ }
56
+
57
+ .styles-module_warning__SCK0X,
58
+ .styles-module_warning__SCK0X .styles-module_arrow__K0L3T {
59
+ background-color: var(--rt-color-warning);
60
+ color: var(--rt-color-white);
61
+ }
62
+
63
+ .styles-module_error__JvumD,
64
+ .styles-module_error__JvumD .styles-module_arrow__K0L3T {
65
+ background-color: var(--rt-color-error);
66
+ color: var(--rt-color-white);
67
+ }
68
+
69
+ .styles-module_info__BWdHW,
70
+ .styles-module_info__BWdHW .styles-module_arrow__K0L3T {
71
+ background-color: var(--rt-color-info);
72
+ color: var(--rt-color-white);
73
+ }
@@ -1,124 +1,25 @@
1
- import * as React from 'react';
1
+ import { PlacesType, VariantType, WrapperType, ChildrenType, EventsType } from 'components/Tooltip/TooltipTypes';
2
2
 
3
- interface Offset {
4
- top?: number;
5
- right?: number;
6
- left?: number;
7
- bottom?: number;
3
+ interface ITooltipController {
4
+ className?: string
5
+ classNameArrow?: string
6
+ content?: string | number
7
+ html?: string
8
+ place?: PlacesType
9
+ offset?: number
10
+ id?: string
11
+ variant?: VariantType
12
+ anchorId?: string
13
+ wrapper?: WrapperType
14
+ children?: ChildrenType
15
+ events?: EventsType[]
16
+ delayShow?: number
17
+ delayHide?: number
18
+ getContent?: function
19
+ isOpen?: boolean
20
+ setIsOpen?: (value: boolean) => void
8
21
  }
9
22
 
10
- type Place = 'top' | 'right' | 'bottom' | 'left';
11
- type Type = 'dark' | 'success' | 'warning' | 'error' | 'info' | 'light';
12
- type Effect = 'float' | 'solid';
23
+ declare const TooltipController: ({ id, anchorId, content, html, className, classNameArrow, variant, place, offset, wrapper, children, events, delayShow, delayHide, getContent, isOpen, setIsOpen, }: ITooltipController) => JSX.Element;
13
24
 
14
- type VoidFunc = (...args: any[]) => void;
15
- type GetContentFunc = (toolTipStr: string) => React.ReactNode;
16
- type GetContent = GetContentFunc | [GetContentFunc, number];
17
-
18
- export interface TooltipProps {
19
- children?: React.ReactNode;
20
- uuid?: string;
21
- // Placement of tooltip
22
- place?: Place;
23
- // Tooltip styling theme
24
- type?: Type;
25
- // Behavior of tooltip
26
- effect?: Effect;
27
- // Global tooltip offset, e.g., offset={{ top: 10, left: 5 }}
28
- offset?: Offset;
29
- // Support <br /> to make explicitly multiline tooltip comments
30
- multiline?: boolean;
31
- // Add 1px white border
32
- border?: boolean;
33
- // A custom class name to use for the border
34
- borderClass?: string;
35
- // Popup text color
36
- textColor?: string;
37
- // Popup background color
38
- backgroundColor?: string;
39
- // Popup border color
40
- borderColor?: string;
41
- // Popup arrow color
42
- arrowColor?: string;
43
- // Whether to inject the style header into the page
44
- // dynamically (violates CSP style-src, but is a convenient default);
45
- // default = true
46
- insecure?: boolean;
47
- // Extra style class
48
- class?: string;
49
- // Extra style class
50
- className?: string;
51
- // HTML id attribute
52
- id?: string;
53
- // Inject raw HTML? (This is a security risk)
54
- html?: boolean;
55
- // Time delay for hiding popup
56
- delayHide?: number;
57
- // Time delay for updating popup
58
- delayUpdate?: number;
59
- // Time delay for showing popup
60
- delayShow?: number;
61
- // Custom event to trigger tooltip
62
- event?: keyof HTMLElementEventMap | string;
63
- // Custom event to hide tooltip
64
- // (this requires the event prop as well)
65
- eventOff?: keyof HTMLElementEventMap | string;
66
- // When set to true, custom event's propagation
67
- // mode will be captue
68
- isCapture?: boolean;
69
- // Global event to hide tooltip
70
- globalEventOff?: keyof HTMLElementEventMap | string;
71
- // Function to dynamically generate the tooltip content
72
- getContent?: GetContent;
73
- // Callback after tooltip is shown
74
- afterShow?: VoidFunc;
75
- // Callback after tooltip is hidden
76
- afterHide?: VoidFunc;
77
- // Callback to override the tooltip position
78
- overridePosition?: (
79
- position: { left: number; top: number },
80
- currentEvent: Event,
81
- currentTarget: EventTarget,
82
- // node is the ref argument, and the wrapper
83
- // is restricted to: div | span
84
- refNode: null | HTMLDivElement | HTMLSpanElement,
85
- place: Place,
86
- desiredPlace: Place,
87
- effect: Effect,
88
- offset: Offset
89
- ) => { left: number; top: number };
90
- // Manually disable the tooltip behavior
91
- disable?: boolean;
92
- // Hide the tooltip when scrolling;
93
- // default = true
94
- scrollHide?: boolean;
95
- // Hide the tooltip when risizing the window;
96
- // default = true
97
- resizeHide?: boolean;
98
- // The tooltip parent component;
99
- // default = 'div'
100
- wrapper?: 'div' | 'span';
101
- // Listen to body events vs. individual events
102
- bodyMode?: boolean;
103
- // List of potential custom events to trigger the popup (in body mode)
104
- possibleCustomEvents?: string;
105
- // List of potential custom events to hide the popup (in body mode)
106
- possibleCustomEventsOff?: string;
107
- // Should the tooltip by clickable?
108
- clickable?: boolean;
109
- // Aria role for the tooltip
110
- role?: string;
111
- // Padding attribute
112
- padding?: string;
113
- // Set internal style as optional
114
- disableInternalStyle?: boolean;
115
- }
116
-
117
- // ReactTooltip component is the default export
118
- // You can overview demo examples here: https://bddeu.csb.app
119
- export default class ReactTooltip extends React.Component<TooltipProps> {
120
- // static methods
121
- static show: (target: Element) => {};
122
- static hide: (target?: Element) => {};
123
- static rebuild: () => {};
124
- }
25
+ export { TooltipController as Tooltip };