@king-design/react 2.0.0-beta.0

package/components/tooltip/index.spec.js

@@ -0,0 +1,576 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Array$from2 from "@babel/runtime-corejs3/core-js/array/from";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { findDomFromVNode, Component } from 'intact-react';
+import BasicDemo from '~/components/tooltip/demos/basic';
+import PositionDemo from '~/components/tooltip/demos/position';
+import TriggerDemo from '~/components/tooltip/demos/trigger';
+import ContentDemo from '~/components/tooltip/demos/content';
+import ConfirmDemo from '~/components/tooltip/demos/confirm';
+import AlwaysDemo from '~/components/tooltip/demos/always';
+import { Tooltip } from './';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+describe('Tooltip', function () {
+  afterEach(function (done) {
+    unmount();
+    setTimeout(done, 500);
+  });
+  it('should show and hide content correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, element, _Array$from, first, second, disabled, content, content1, content2;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), element = _mount[1];
+            _Array$from = _Array$from2(element.querySelectorAll('span')), first = _Array$from[0], second = _Array$from[2], disabled = _Array$from[4];
+            dispatchEvent(first, 'mouseenter');
+            _context.next = 5;
+            return wait(0);
+
+          case 5:
+            content = getElement('.k-tooltip-content');
+            expect(content.textContent).eql('hello'); // should not show
+
+            dispatchEvent(second, 'mouseenter');
+            _context.next = 10;
+            return wait(0);
+
+          case 10:
+            content1 = getElement('.k-tooltip-content');
+            expect(content1).eql(content); // should not show if disabled
+
+            dispatchEvent(disabled, 'mouseenter');
+            _context.next = 15;
+            return wait(0);
+
+          case 15:
+            content2 = getElement('.k-tooltip-content');
+            expect(content2).eql(content); // should hide
+
+            dispatchEvent(first, 'mouseleave');
+            _context.next = 20;
+            return wait(400);
+
+          case 20:
+            expect(content.style.display).to.eql('none');
+
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should position correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, tooltipContent, arrow, at, _at$getBoundingClient, width, height, left, top, contains, eql;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(PositionDemo), instance = _mount2[0], element = _mount2[1];
+            tooltipContent = getElement('.k-tooltip-content');
+            arrow = tooltipContent.querySelector('.k-tooltip-arrow');
+            at = element.querySelector('.opera .k-btn');
+            _at$getBoundingClient = at.getBoundingClientRect(), width = _at$getBoundingClient.width, height = _at$getBoundingClient.height, left = _at$getBoundingClient.left, top = _at$getBoundingClient.top;
+
+            contains = function contains(name) {
+              return expect(arrow.classList.contains(name)).to.be.true;
+            };
+
+            eql = function eql(a, b) {
+              return expect(Math.floor(a)).to.eql(Math.floor(b));
+            };
+
+            instance.set('position', 'left');
+            _context2.next = 10;
+            return wait();
+
+          case 10:
+            contains('k-right');
+            eql(arrow.offsetTop, Math.round(tooltipContent.offsetHeight / 2 - arrow.offsetHeight / 2));
+            instance.set('position', 'right');
+            _context2.next = 15;
+            return wait();
+
+          case 15:
+            contains('k-left');
+            eql(arrow.offsetTop, Math.round(tooltipContent.offsetHeight / 2 - arrow.offsetHeight / 2));
+            instance.set('position', 'top');
+            _context2.next = 20;
+            return wait();
+
+          case 20:
+            contains('k-bottom');
+            eql(arrow.offsetLeft, Math.round(tooltipContent.offsetWidth / 2 - arrow.offsetWidth / 2));
+            instance.set('position', 'bottom');
+            _context2.next = 25;
+            return wait();
+
+          case 25:
+            contains('k-top');
+            eql(arrow.offsetLeft, Math.round(tooltipContent.offsetWidth / 2 - arrow.offsetWidth / 2));
+            instance.set('position', 'custom');
+            _context2.next = 30;
+            return wait();
+
+          case 30:
+            instance.getPosition = function () {
+              return {
+                my: 'left bottom',
+                at: 'left top'
+              };
+            };
+
+            instance.forceUpdate();
+            _context2.next = 34;
+            return wait();
+
+          case 34:
+            eql(arrow.offsetLeft, Math.round(width / 2 - arrow.offsetWidth / 2));
+
+            instance.getPosition = function () {
+              return {
+                my: 'left+100 bottom',
+                at: 'left top'
+              };
+            };
+
+            instance.forceUpdate();
+            _context2.next = 39;
+            return wait();
+
+          case 39:
+            eql(arrow.offsetLeft, 1);
+
+            instance.getPosition = function () {
+              return {
+                my: 'left top',
+                at: 'right top'
+              };
+            };
+
+            instance.forceUpdate();
+            _context2.next = 44;
+            return wait();
+
+          case 44:
+            eql(arrow.offsetTop, Math.floor(tooltipContent.offsetHeight / 2 - arrow.offsetHeight / 2));
+
+            instance.getPosition = function () {
+              return {
+                my: 'left top+30',
+                at: 'right top'
+              };
+            };
+
+            instance.forceUpdate();
+            _context2.next = 49;
+            return wait();
+
+          case 49:
+            eql(arrow.offsetTop, 1);
+
+          case 50:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should trigger correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, element, _element$querySelecto, click, content, content1;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(TriggerDemo), element = _mount3[1];
+            _element$querySelecto = element.querySelectorAll('.k-btn'), click = _element$querySelecto[1];
+            click.click();
+            _context3.next = 5;
+            return wait();
+
+          case 5:
+            content = getElement('.k-tooltip-content');
+            expect(content.textContent).to.matchSnapshot(); // should not hide
+
+            content.click();
+            _context3.next = 10;
+            return wait();
+
+          case 10:
+            content1 = getElement('.k-tooltip-content');
+            expect(content).eql(content1); // should hide when click document
+
+            document.body.click();
+            _context3.next = 15;
+            return wait(300);
+
+          case 15:
+            expect(content.style.display).to.eql('none');
+
+          case 16:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('should be hoverable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, element, _Array$from3, canHover, content, content1;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(TriggerDemo), element = _mount4[1];
+            _Array$from3 = _Array$from2(element.querySelectorAll('.k-btn')), canHover = _Array$from3[2];
+            dispatchEvent(canHover, 'mouseenter');
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            dispatchEvent(canHover, 'mouseleave');
+            _context4.next = 8;
+            return wait(300);
+
+          case 8:
+            content = getElement('.k-tooltip-content');
+            dispatchEvent(content, 'mouseenter');
+            _context4.next = 12;
+            return wait(300);
+
+          case 12:
+            content1 = getElement('.k-tooltip-content'); //  should not hide when hover from button to tooltip content    
+
+            expect(content1).eql(content);
+            dispatchEvent(canHover, 'mouseleave');
+            _context4.next = 17;
+            return wait(500);
+
+          case 17:
+            expect(content.style.display).to.eql('none');
+
+          case 18:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('should custom content correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount5, element, _Array$from4, btn, content;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(ContentDemo), element = _mount5[1];
+            _Array$from4 = _Array$from2(element.querySelectorAll('.k-btn')), btn = _Array$from4[0];
+            btn.click();
+            _context5.next = 5;
+            return wait(300);
+
+          case 5:
+            content = getElement('.k-tooltip-content'); // ignore the arrow, because it may change className to adapt to the direction
+
+            expect(content.querySelector('.k-slider').outerHTML).to.matchSnapshot();
+
+          case 7:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('should handle confirm tooltip corectly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount6, instance, element, cancelCb, okCb, content, _Array$from5, btn;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount6 = mount(ConfirmDemo), instance = _mount6[0], element = _mount6[1];
+            cancelCb = sinon.spy();
+            okCb = sinon.spy();
+
+            instance.refs.__test.on('cancel', cancelCb);
+
+            instance.refs.__test.on('ok', okCb);
+
+            dispatchEvent(element.children[0], 'click');
+            _context6.next = 8;
+            return wait();
+
+          case 8:
+            content = getElement('.k-tooltip-content');
+            expect(content.querySelector('.k-tooltip-buttons').outerHTML).to.matchSnapshot();
+            content.querySelector('.k-btn').click();
+            _context6.next = 13;
+            return wait(300);
+
+          case 13:
+            expect(content.style.display).eql('none');
+            dispatchEvent(element.firstElementChild, 'click');
+            _context6.next = 17;
+            return wait();
+
+          case 17:
+            content = getElement('.k-tooltip-content');
+            _Array$from5 = _Array$from2(content.querySelectorAll('.k-btn')), btn = _Array$from5[1];
+            btn.click();
+            _context6.next = 22;
+            return wait(300);
+
+          case 22:
+            expect(content.style.display).eql('none');
+            expect(cancelCb.callCount).eql(1);
+            expect(okCb.callCount).eql(1);
+
+          case 25:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('should always show tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, element, content;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount7 = mount(AlwaysDemo), element = _mount7[1];
+            content = getElement('.k-tooltip-content');
+            expect(content.textContent).eql('hello');
+            document.body.click();
+            _context7.next = 6;
+            return wait(300);
+
+          case 6:
+            expect(getElement('.k-tooltip-content')).eql(content);
+            element.querySelector('span').click();
+            _context7.next = 10;
+            return wait(300);
+
+          case 10:
+            expect(getElement('.k-tooltip-content')).eql(content);
+            dispatchEvent(content, 'mouseleave');
+            _context7.next = 14;
+            return wait(500);
+
+          case 14:
+            expect(getElement('.k-tooltip-content')).eql(content);
+
+          case 15:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  }))); // it('should hide tooltip when v-show is false in Vue', async () => {
+  //     interface IData {
+  //         show: boolean
+  //     }
+  //     const Test = {
+  //         template: `
+  //             <div>
+  //                 <Tooltip content="hello" v-show="show">
+  //                     <div style="font-size: 12px;">hover</div>
+  //                 </Tooltip>
+  //             </div>
+  //         `,
+  //         components: {
+  //             Tooltip: Tooltip as any
+  //         },
+  //         data(): IData {
+  //             return {show: true};
+  //         }
+  //     };
+  //     const container = document.createElement('div');
+  //     document.body.appendChild(container);
+  //     const app = new Vue({
+  //         render: h => h(
+  //             'Test', 
+  //             {ref: 'test'}),
+  //         components: {Test},
+  //     }).$mount(container);
+  //     expect(app.$el.outerHTML).to.matchSnapshot();
+  //     (app.$refs.test as any).show = true;
+  //     await wait();
+  //     expect(app.$el.innerHTML).to.matchSnapshot();
+  //     (app.$refs.test as any).show = false;
+  //     await wait();
+  //     expect(app.$el.innerHTML).to.matchSnapshot();
+  //     app.$destroy();
+  //     document.body.removeChild(app.$el);
+  // });
+  // it('should change value on click when we use tooltip on radio in Vue', async () => {
+  //     const container = document.createElement('div');
+  //     document.body.appendChild(container);
+  //     const app = new Vue({
+  //         template: `
+  //             <div>
+  //                 <Tooltip content="hello">
+  //                     <Radio v-model="a" trueValue="1">test</Radio>
+  //                 </Tooltip>
+  //                 <Tooltip content="hello">
+  //                     <Radio v-model="a" trueValue="2">test</Radio>
+  //                 </Tooltip>
+  //             </div>
+  //         `,
+  //         components: {
+  //             Tooltip:  Tooltip as any, 
+  //             Radio: Radio as any,
+  //         },
+  //         data: {
+  //             a: '1',
+  //         }
+  //     }).$mount(container);
+  //     const [, radio2] = Array.from<HTMLElement>(app.$el.querySelectorAll('input'));
+  //     // If we run call click on label, the snapshots of demos is very weird.
+  //     // I don't known why. So we call it on input.
+  //     radio2.click();
+  //     expect(app.a).to.eql('2');
+  //     await wait();
+  //     app.$destroy();
+  //     document.body.removeChild(app.$el);
+  // });
+
+  it('should hide layer when we have disabled Tooltip and also hide on next updating', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, i, content;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context8;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context8 = [this]).call(_context8, args)) || this;
+                _this.Tooltip = Tooltip;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const Tooltip = this.Tooltip;\n                <div>\n                    <Tooltip disabled={this.get('disabled')}\n                        content=\"hello\"\n                    >\n                        <div ref=\"test\">test</div>\n                    </Tooltip>\n                </div>\n            ";
+
+            Demo.defaults = function () {
+              return {
+                disabled: false
+              };
+            };
+
+            _mount8 = mount(Demo), i = _mount8[0];
+            dispatchEvent(i.refs.test, 'mouseenter');
+            _context9.next = 7;
+            return wait();
+
+          case 7:
+            content = getElement('.k-tooltip-content');
+            expect(content.textContent).eql('hello');
+            i.set('disabled', true);
+            _context9.next = 12;
+            return wait(300);
+
+          case 12:
+            content = getElement('.k-tooltip-content');
+            expect(content).eql(undefined);
+            i.set('disabled', false);
+            _context9.next = 17;
+            return wait();
+
+          case 17:
+            content = getElement('.k-tooltip-content');
+            expect(content).eql(undefined);
+
+          case 19:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('should not detect collison when target is not in viewport', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, i, content;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context10;
+
+                var _this2;
+
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+
+                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+                _this2.Tooltip = Tooltip;
+                return _this2;
+              }
+
+              var _proto = Demo.prototype;
+
+              _proto.mounted = function mounted() {
+                var element = findDomFromVNode(this.$lastInput, true);
+                var windowHeight = window.innerHeight || document.documentElement.clientHeight;
+                element.parentNode.style.height = windowHeight * 2 + "px";
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const Tooltip = this.Tooltip;\n                <div>\n                    <Tooltip v-model=\"show\" content=\"hello\">\n                        <div ref=\"test\">test</div>\n                    </Tooltip>\n                </div>\n            ";
+
+            Demo.defaults = function () {
+              return {
+                show: false
+              };
+            };
+
+            _mount9 = mount(Demo), i = _mount9[0];
+            _context11.next = 6;
+            return wait(500);
+
+          case 6:
+            window.scrollTo(0, 10000);
+            i.set('show', true);
+            _context11.next = 10;
+            return wait(500);
+
+          case 10:
+            content = getElement('.k-tooltip-content');
+            expect(content.getBoundingClientRect().top < 0).to.be.true;
+
+          case 12:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee9);
+  })));
+});
+
+export {normalize} from 'intact-react';

package/components/tooltip/styles.d.ts

@@ -0,0 +1,7 @@
+import '../../styles/global';
+export declare type Theme = 'dark' | 'light';
+export declare const themes: Theme[];
+export default function makeStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/tooltip/styles.js

@@ -0,0 +1,82 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js/object/keys";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  padding: '8px 12px',
+
+  get color() {
+    return theme.color.text;
+  },
+
+  bgColor: '#fff',
+  lineHeight: 1.4,
+  maxWidth: '300px',
+  // arrow
+  arrow: {
+    borderColor: 'rgba(191, 191, 191, .5)',
+    width: '8px'
+  },
+  // confirm
+  confirm: {
+    gaps: '8px'
+  },
+  // dark
+  dark: {
+    get bgColor() {
+      return theme.color.text;
+    },
+
+    color: '#fff',
+
+    get arrowBorderColor() {
+      return theme.color.text;
+    }
+
+  },
+  smallPadding: '4px'
+};
+var tooltip;
+setDefault(function () {
+  tooltip = deepDefaults(theme, {
+    tooltip: defaults
+  }).tooltip;
+});
+export var themes = ['dark', 'light'];
+var directionMap = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+export default function makeStyles() {
+  var arrowLong = tooltip.arrow.width;
+  var arrowShort = "calc(" + arrowLong + " - 2px)"; // use &.k-tooltip-content to override css in dropdown menu
+
+  return /*#__PURE__*/css("&.k-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:break-word;pointer-events:none;&.k-hoverable,&.k-always{pointer-events:all;}.k-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.k-top,&.k-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.k-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.k-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.k-left,&.k-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.k-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.k-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
+    var _context;
+
+    var borderColor;
+    var bgColor;
+    var color;
+
+    if (theme === 'dark') {
+      borderColor = tooltip.dark.arrowBorderColor;
+      bgColor = tooltip.dark.bgColor;
+      color = tooltip.dark.color;
+    } else {
+      borderColor = tooltip.arrow.borderColor;
+      bgColor = tooltip.bgColor;
+      color = tooltip.color;
+    }
+
+    return /*#__PURE__*/css("&.k-", theme, "{background:", bgColor, ";color:", color, ";.k-tooltip-arrow{", _mapInstanceProperty(_context = _Object$keys(directionMap)).call(_context, function (direction) {
+      var borderDirection = directionMap[direction];
+      return /*#__PURE__*/css("&.k-", direction, "{border-", borderDirection, "-color:", borderColor, ";&:before{border-", borderDirection, "-color:", bgColor, ";}}");
+    }), ";}}");
+  }), ".k-tooltip-buttons{padding-top:", tooltip.confirm.gaps, ";.k-btn:last-of-type{margin-left:", tooltip.confirm.gaps, ";}}&.k-small{padding:", tooltip.smallPadding, ";}}");
+}
+
+export {normalize} from 'intact-react';

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,31 @@
+import { TypeDefs, Children } from 'intact-react';
+import { Dropdown, DropdownProps, DropdownEvents, DropdownBlocks } from '../dropdown/dropdown';
+import { Theme } from './styles';
+import type { Events } from '../types';
+export interface TooltipProps extends DropdownProps {
+    showArrow?: boolean;
+    theme?: Theme;
+    hoverable?: boolean;
+    always?: boolean;
+    confirm?: boolean;
+    okText?: string;
+    cancelText?: string;
+    size?: 'small' | 'default';
+    content?: Children;
+}
+export interface TooltipEvents extends DropdownEvents {
+    ok: [];
+    cancel: [];
+}
+export interface TooltipBlocks extends DropdownBlocks {
+}
+export declare class Tooltip<T extends TooltipProps = TooltipProps, E extends TooltipEvents = TooltipEvents, B extends TooltipBlocks = TooltipBlocks> extends Dropdown<T, E, B> {
+    static typeDefs: Required<TypeDefs<TooltipProps>>;
+    static defaults: () => Partial<TooltipProps>;
+    static events: Events<TooltipEvents>;
+    protected alwaysPortal: boolean;
+    hide(immediately: boolean): void;
+}
+
+
+export {normalize} from 'intact-react';