@king-design/intact 2.1.0 → 2.1.2

package/components/tooltip/index.spec.ts

@@ -6,8 +6,10 @@ 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 {Radio} from '../radio';
+import {Dialog} from '../dialog';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+import { tooltip as tooltipTheme } from './styles';
+import { Select, Option } from '../select';
 
 describe('Tooltip', () => {
     afterEach((done) => {
@@ -352,4 +354,88 @@ describe('Tooltip', () => {
         console.log(JSON.stringify(content.getBoundingClientRect()));
         expect(content.getBoundingClientRect().top < 0).to.be.true;
     });
+
+    it('should add className', async () => {
+        class Demo extends Component {
+            static template = `
+                const Tooltip = this.Tooltip;
+                <div>
+                    <Tooltip content="hello" class="a">
+                        <div ref="test" class="b">test</div>
+                    </Tooltip>
+                </div>
+            `;
+            Tooltip = Tooltip;
+        }
+
+        const [instance, element] = mount(Demo);
+        const trigger = instance.refs.test;
+        expect(trigger.className).to.eql('b a');
+
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const dropdown = getElement('.k-tooltip-content')!;
+        expect(dropdown.classList.contains('a')).to.be.true;
+    });
+
+    it('should fix the width in small container', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Tooltip, Dialog} = this;
+                <div style="text-align: right; position: relative; width: 300px;">
+                    <Tooltip content="这是一段很长的描述文字，这是一段很长的描述文字" container={dom => dom}>
+                        <span class="trigger">test</span>
+                    </Tooltip>
+                </div>
+            `
+            private Tooltip = Tooltip;
+            private Dialog = Dialog;
+        }
+
+        const [instance, element] = mount(Demo);
+        const trigger = element.querySelector<HTMLDivElement>('.trigger')!;
+        const expecedWidth = parseInt(tooltipTheme.maxWidth);
+
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const content = getElement('.k-tooltip-content')!;
+        const width = content.offsetWidth;
+        expect(width).to.eql(expecedWidth);
+
+        dispatchEvent(trigger, 'mouseleave');
+        await wait();
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const newWidth = content.offsetWidth;
+        expect(newWidth).to.eql(width);
+    });
+
+    it('should not impact select when wrap select with tooltip', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Tooltip, Select, Option} = this;
+                <Tooltip>
+                    <Select>
+                        <Option value="1">Option 1</Option>
+                        <Option value="2">Option 2</Option>
+                    </Select>
+                </Tooltip>
+            `
+            private Tooltip = Tooltip;
+            private Select = Select;
+            private Option = Option;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'mouseenter');
+        await wait();
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const menu = getElement(".k-select-menu")!;
+        dispatchEvent(element, 'mouseleave');
+        await wait(500);
+
+        expect(menu.style.display).to.eql('');
+    });
 });

package/components/tooltip/styles.ts

@@ -31,7 +31,7 @@ const defaults = {
     smallPadding: '4px',
 };
 
-let tooltip: typeof defaults;
+export let tooltip: typeof defaults;
 setDefault(() => {
     tooltip = deepDefaults(theme, {tooltip: defaults}).tooltip;
 });

package/components/tooltip/tooltip.ts

@@ -49,6 +49,7 @@ const defaults = (): Partial<TooltipProps> => ({
     showArrow: true,
     theme: 'dark',
     position: {my: 'center bottom-10', at: 'center top', collision: 'flipfit'},
+    collison: 'flipfit',
     hoverable: false,
     always: false,
     confirm: false,
@@ -72,12 +73,22 @@ export class Tooltip<
     static defaults = defaults;
     static events = events;
 
+    show(shouldFocus: boolean = false) {
+        if (this.get('disabled')) return;
+
+        clearTimeout(this.timer);
+        this.set('value', true);
+    }
+
     hide(immediately: boolean) {
         if (this.get('always')) return;
 
         if (this.get('hoverable')) {
             return super.hide(immediately);
         }
+        // tooltip can show any number sub-tooltips, we should not close the showed tooltip
+        // #885
+        this.showedDropdown = null;
         super.hide(true);
     }
 }

package/components/virtual.ts

@@ -0,0 +1,98 @@
+import {
+    Component,
+    VNode,
+    directClone,
+    createVNode,
+} from 'intact';
+import { isTextChildren } from './utils';
+import { EMPTY_OBJ, isFunction, hasOwn } from 'intact-shared';
+import { cx } from '@emotion/css';
+
+const reactEventReg = /on[A-Z]/;
+
+export class Virtual extends Component<any> {
+    static template(this: Virtual) {
+        const { children, ...props } = this.get();
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (!children || (Array.isArray(children) && children.length !== 1)) {
+                throw new Error('Component must receive one children');
+            }
+        }
+
+        const vNode = Array.isArray(children) ? children[0] : children;
+        const clonedVNode = isTextChildren(vNode)
+            ? createVNode('span', null, vNode)
+            : directClone(vNode as VNode);
+
+        const vNodeProps = this.vNodeProps = this.getVNodeProps(clonedVNode.props || EMPTY_OBJ);
+        const eventProps = this.getEventProps();
+
+        //  merge className 
+        let className = clonedVNode.className || vNodeProps.className;
+        className = cx({
+            [className!]: !!className,
+            [props.className!]: !!props.className,
+        });
+
+        clonedVNode.props = { ...props, ...vNodeProps, ...eventProps, className };
+        clonedVNode.className = className;
+
+        return clonedVNode;
+    }
+
+    private vNodeProps: any = null;
+
+    private getVNodeProps(props: any) {
+        const vnode = props.vnode;
+
+        if (!vnode) return props;
+
+        // maybe we render the intact component in react slot property, in this case
+        // the $isReact is false. so use the vnode $$typeof field as gauge
+        if (vnode.$$typeof || vnode.__v_isVNode /* vue3 vnode */) {
+            const _props = vnode.props;
+            if (!_props) return props;
+
+            const events: Record<string, Function> = {};
+            for (let key in _props) {
+                if (reactEventReg.test(key)) {
+                    events[`ev-${key.substring(2).toLowerCase()}`] = _props[key];
+                }
+            }
+
+            return {...props, ...events, className: _props.className || _props.class /* vue-next */};
+        } else if (hasOwn.call(vnode, 'componentOptions') /* vue2 vnode */) {
+            const data = vnode.data;
+            const on = data && data.on || EMPTY_OBJ;
+            const events: Record<string, Function> = {};
+            for (let key in on) {
+                events[`ev-${key}`] = on[key];
+            }
+
+            return {...props, ...events};
+        }
+
+        return props;
+    }
+
+    private getEventProps() {
+        const props: Record<string, Function> = {};
+
+        for (let prop in this.get()) {
+            if (prop.startsWith('ev-')) {
+                props[prop] = (e: MouseEvent) => this.callEvent(prop, e);
+            }
+        }
+
+        return props;
+    }
+
+
+    private callEvent(name: string, e: MouseEvent) {
+        const callback = this.vNodeProps[name];
+        const callbackOnVirtual = this.get<Function>(name);
+        if (isFunction(callback)) callback(e);
+        if (isFunction(callbackOnVirtual)) callbackOnVirtual(e);
+    }
+}

package/es/components/dropdown/dropdown.d.ts

@@ -3,6 +3,7 @@ import { Options, Feedback } from '../position';
 import { Portal, PortalProps } from '../portal';
 import { FeedbackCallback } from './usePosition';
 import type { Events } from '../types';
+import { Virtual } from '../virtual';
 export declare type Position = Options;
 export declare type PositionShorthand = 'left' | 'bottom' | 'right' | 'top';
 export declare const DROPDOWN = "Dropdown";
@@ -12,6 +13,7 @@ export interface DropdownProps {
     disabled?: boolean;
     value?: boolean;
     position?: Position | 'left' | 'bottom' | 'right' | 'top';
+    collison?: Position['collision'];
     of?: 'self' | 'parent' | Event;
     container?: PortalProps['container'];
 }
@@ -21,6 +23,8 @@ export interface DropdownEvents {
     hide: [];
     mouseenter: [MouseEvent];
     mouseleave: [MouseEvent];
+    click: [MouseEvent];
+    contextmenu: [MouseEvent];
     positioned: [Feedback];
 }
 export interface DropdownBlocks {
@@ -30,7 +34,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     static typeDefs: Required<TypeDefs<DropdownProps>>;
     static defaults: () => Partial<DropdownProps>;
     static events: Events<DropdownEvents>;
-    static template: (this: Dropdown) => (VNode<import("intact").VNodeTag> | VNode<typeof Portal>)[];
+    static template: (this: Dropdown) => (VNode<typeof Virtual> | VNode<typeof Portal>)[];
     menuVNode: VNode | null;
     dropdown: Dropdown | null;
     rootDropdown: Dropdown | null;
@@ -41,8 +45,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
             value: boolean;
         };
     };
-    private timer;
-    private triggerProps;
+    protected timer: number | undefined;
     init(): void;
     show(shouldFocus?: boolean): void;
     hide(immediately?: boolean): void;
@@ -52,6 +55,4 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     private onContextMenu;
     private onLeave;
     private initEventCallbacks;
-    private callOriginalCallback;
-    private normalizeTriggerProps;
 }

package/es/components/dropdown/dropdown.js

@@ -3,14 +3,15 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import { __decorate } from "tslib";
-import { Component, createVNode as h, directClone, provide, inject, findDomFromVNode, createVNode, nextTick } from 'intact';
-import { bind, isTextChildren } from '../utils';
-import { EMPTY_OBJ, isFunction, noop } from 'intact-shared';
+import { Component, createVNode as h, provide, inject, findDomFromVNode, nextTick } from 'intact';
+import { bind, getRestProps } from '../utils';
+import { noop } from 'intact-shared';
 import { cx } from '@emotion/css';
 import { useDocumentClick, containsOrEqual } from '../../hooks/useDocumentClick';
 import { Portal } from '../portal';
 import { useShowHideEvents } from '../../hooks/useShowHideEvents';
 import { usePosition } from './usePosition';
+import { Virtual } from '../virtual';
 export var DROPDOWN = 'Dropdown';
 export var ROOT_DROPDOWN = 'RootDropdown';
 var typeDefs = {
@@ -20,13 +21,15 @@ var typeDefs = {
   position: [Object, 'left', 'bottom', 'right', 'top'],
   // Event is undefined in NodeJs
   of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
-  container: [String, Function]
+  container: [String, Function],
+  collison: ['none', 'fit', 'flip', 'flipfit', Array]
 };
 
 var defaults = function defaults() {
   return {
     trigger: 'hover',
-    of: 'self'
+    of: 'self',
+    value: false
   };
 };
 
@@ -36,6 +39,8 @@ var events = {
   hide: true,
   mouseenter: true,
   mouseleave: true,
+  click: true,
+  contextmenu: true,
   positioned: true
 };
 export var Dropdown = /*#__PURE__*/function (_Component) {
@@ -57,7 +62,6 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     _this.showedDropdown = null;
     _this.positionHook = usePosition();
     _this.timer = undefined;
-    _this.triggerProps = null;
     return _this;
   }
 
@@ -95,7 +99,13 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
     if (this.get('disabled')) return;
     clearTimeout(this.timer);
-    this.set('value', true);
+    this.set('value', true); // should show parent dropdown
+
+    var parentDropdown = this.dropdown;
+
+    if (parentDropdown) {
+      parentDropdown.show();
+    }
 
     if (shouldFocus) {
       nextTick(function () {
@@ -113,10 +123,16 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
     if (this.get('disabled')) return;
     if (!this.get('value')) return;
+    var showedDropdown = this.showedDropdown;
+
+    if (showedDropdown) {
+      showedDropdown.hide(immediately);
+    }
 
     if (immediately) {
       this.set('value', false);
     } else {
+      clearTimeout(this.timer);
       this.timer = window.setTimeout(function () {
         _this4.set('value', false);
       }, 200);
@@ -136,23 +152,24 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
   };
 
   _proto.onEnter = function onEnter(e) {
-    this.callOriginalCallback(e.type === 'click' ? 'ev-click' : 'ev-mouseenter', e);
     this.show();
+    this.trigger(e.type, e);
   };
 
   _proto.onContextMenu = function onContextMenu(e) {
-    this.callOriginalCallback('ev-contextmenu', e);
     e.preventDefault();
     this.set('of', e);
     this.show();
+    this.trigger('contextmenu', e);
   };
 
   _proto.onLeave = function onLeave(e) {
-    this.callOriginalCallback('ev-mouseleave', e);
     this.hide();
+    this.trigger(e.type, e);
   };
 
-  _proto.initEventCallbacks = function initEventCallbacks(trigger) {
+  _proto.initEventCallbacks = function initEventCallbacks() {
+    var trigger = this.get('trigger');
     var props = {};
 
     switch (trigger) {
@@ -179,51 +196,6 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     return props;
   };
 
-  _proto.callOriginalCallback = function callOriginalCallback(name, e) {
-    var callback = this.triggerProps[name];
-    var callbackOnDropdown = this.get(name);
-    if (isFunction(callback)) callback(e);
-    if (isFunction(callbackOnDropdown)) callbackOnDropdown(e);
-  };
-
-  _proto.normalizeTriggerProps = function normalizeTriggerProps(props) {
-    // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-    var vnode = props.vnode;
-    if (!vnode) return props; // maybe we render the intact component in react slot property, in this case
-    // the $isReact is false. so use the vnode $$typeof field as gauge
-
-    if (vnode.$$typeof || this.$isVueNext) {
-      var _props = vnode.props;
-      if (!_props) return props;
-      return {
-        vnode: vnode,
-        'ev-click': _props.onClick,
-        'ev-mouseenter': _props.onMouseEnter,
-        'ev-mouseleave': _props.onMouseLeave,
-        'ev-contextmenu': _props.onContextMenu,
-        className: _props.className || _props.class
-        /* vue-next */
-
-      };
-    } else if (this.$isVue) {
-      var data = vnode.data;
-      var on = data && data.on || EMPTY_OBJ;
-      var ret = {
-        vnode: vnode
-      };
-      ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(function (event) {
-        var method = on[event];
-
-        if (method) {
-          ret["ev-" + event] = method;
-        }
-      });
-      return ret;
-    }
-
-    return props;
-  };
-
   return Dropdown;
 }(Component);
 Dropdown.$doubleVNodes = true;
@@ -253,21 +225,22 @@ Dropdown.template = function () {
   var _children = children,
       trigger = _children[0],
       menu = _children[1];
-  var triggerType = this.get('trigger');
-  var props = this.initEventCallbacks(triggerType);
-  var clonedTrigger = isTextChildren(trigger) ? createVNode('span', null, trigger) : directClone(trigger);
-  var triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ); // add a className for opening status
-
-  var className = trigger.className || triggerProps.className;
-  className = cx((_cx = {}, _cx[className] = className, _cx['k-dropdown-open'] = this.get('value'), _cx));
-  clonedTrigger.props = _extends({}, triggerProps, props, {
-    className: className
-  });
-  clonedTrigger.className = className;
+  var props = this.initEventCallbacks();
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      value = _this$get.value,
+      container = _this$get.container;
+
+  className = cx((_cx = {
+    'k-dropdown-open': value
+  }, _cx[className] = !!className, _cx));
   this.menuVNode = menu;
-  return [clonedTrigger, h(Portal, {
+  return [h(Virtual, _extends({}, props, getRestProps(this), {
+    className: className
+  }), trigger), h(Portal, {
     children: menu,
-    container: this.get('container')
+    container: container
   })];
 };
 

package/es/components/dropdown/index.spec.js

@@ -8,6 +8,7 @@ import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import BasicDemo from '~/components/dropdown/demos/basic';
 import NestedDemo from '~/components/dropdown/demos/nested';
 import ContextMenuDemo from '~/components/dropdown/demos/contextmenu';
+import TooltipDemo from '~/components/dropdown/demos/tooltip';
 describe('Dropdown', function () {
   afterEach(function (done) {
     unmount();
@@ -113,42 +114,61 @@ describe('Dropdown', function () {
     }, _callee2);
   })));
   it('nested dropdown', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var _mount3, instance, element, dropdown, _dropdown$querySelect, hoverItem, clickItem, clickSubDropdown, hoverSubDropdown;
+    var _mount3, instance, element, dropdown, _dropdown$querySelect, hoverItem, clickItem, clickSubDropdown, hoverSubDropdown, _hoverSubDropdown$que, hoverItem1, hoverSubDropdown1, _hoverSubDropdown1$qu, hoverItem2, hoverSubDropdown2;
 
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
+            this.timeout(0);
             _mount3 = mount(NestedDemo), instance = _mount3[0], element = _mount3[1];
             element.firstElementChild.click();
-            _context4.next = 4;
+            _context4.next = 5;
             return wait();
 
-          case 4:
+          case 5:
             dropdown = getElement('.k-dropdown-menu');
             _dropdown$querySelect = dropdown.querySelectorAll(':scope > .k-dropdown-item'), hoverItem = _dropdown$querySelect[3], clickItem = _dropdown$querySelect[4];
             clickItem.click();
-            _context4.next = 9;
+            _context4.next = 10;
             return wait(500);
 
-          case 9:
+          case 10:
             clickSubDropdown = getElement('.k-dropdown-menu');
             expect(clickSubDropdown.innerHTML).to.matchSnapshot(); // should hide last sub-dropdown and show next
 
             dispatchEvent(hoverItem, 'mouseenter');
-            _context4.next = 14;
+            _context4.next = 15;
             return wait(500);
 
-          case 14:
+          case 15:
             hoverSubDropdown = getElement('.k-dropdown-menu');
             expect(hoverSubDropdown.innerHTML).to.matchSnapshot();
+            _hoverSubDropdown$que = hoverSubDropdown.querySelectorAll('.k-dropdown-item'), hoverItem1 = _hoverSubDropdown$que[0];
+            dispatchEvent(hoverItem, 'mouseleave');
+            dispatchEvent(hoverItem1, 'mouseenter');
+            _context4.next = 22;
+            return wait(500);
 
-          case 16:
+          case 22:
+            hoverSubDropdown1 = getElement('.k-dropdown-menu');
+            expect(hoverSubDropdown1.textContent).to.eql('item 1item 2');
+            _hoverSubDropdown1$qu = hoverSubDropdown1.querySelectorAll('.k-dropdown-item'), hoverItem2 = _hoverSubDropdown1$qu[0];
+            dispatchEvent(hoverItem1, 'mouseleave');
+            dispatchEvent(hoverItem2, 'mouseenter');
+            _context4.next = 29;
+            return wait(1000);
+
+          case 29:
+            hoverSubDropdown2 = getElement('.k-dropdown-menu');
+            expect(hoverSubDropdown2 === hoverSubDropdown1).to.be.true;
+
+          case 31:
           case "end":
             return _context4.stop();
         }
       }
-    }, _callee3);
+    }, _callee3, this);
   })));
   it('hide on click document', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount4, instance, element;
@@ -483,7 +503,7 @@ describe('Dropdown', function () {
       }
     }, _callee9);
   })));
-  it('trigger: focus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+  it('focus trigger type', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
     var Demo, _mount9, instance;
 
     return _regeneratorRuntime.wrap(function _callee10$(_context14) {
@@ -506,39 +526,98 @@ describe('Dropdown', function () {
                 _this4.Dropdown = Dropdown;
                 _this4.DropdownItem = DropdownItem;
                 _this4.DropdownMenu = DropdownMenu;
+                _this4.onFocus = sinon.spy(function (e) {
+                  return console.log(e);
+                });
                 return _this4;
               }
 
               return Demo;
             }(Component);
 
-            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown trigger=\"focus\">\n                        <input ref=\"trigger\" />\n                        <DropdownMenu>\n                            <DropdownItem>test1</DropdownItem>\n                            <DropdownItem>test2</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown trigger=\"focus\">\n                        <input ref=\"trigger\" ev-focusin={this.onFocus} />\n                        <DropdownMenu>\n                            <DropdownItem>test1</DropdownItem>\n                            <DropdownItem>test2</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
             _mount9 = mount(Demo), instance = _mount9[0];
             dispatchEvent(instance.refs.trigger, 'focusin');
             _context14.next = 6;
             return wait(500);
 
           case 6:
-            expect(getElement('.k-dropdown-menu')).to.be.exist; // clicking anywhere should not hide menu
+            expect(getElement('.k-dropdown-menu')).to.be.exist;
+            expect(instance.onFocus.callCount).to.eql(1); // clicking anywhere should not hide menu
 
             dispatchEvent(document, 'click');
-            _context14.next = 10;
+            _context14.next = 11;
             return wait(500);
 
-          case 10:
+          case 11:
             expect(getElement('.k-dropdown-menu')).to.be.exist;
             dispatchEvent(instance.refs.trigger, 'focusout');
-            _context14.next = 14;
+            _context14.next = 15;
             return wait(700);
 
-          case 14:
+          case 15:
             expect(getElement('.k-dropdown-menu')).to.not.be.exist;
 
-          case 15:
+          case 16:
           case "end":
             return _context14.stop();
         }
       }
     }, _callee10);
   })));
+  it('wrap by tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _mount10, instance, element, dropdown, _dropdown$querySelect4, item1, item2, item3, item4;
+
+    return _regeneratorRuntime.wrap(function _callee11$(_context15) {
+      while (1) {
+        switch (_context15.prev = _context15.next) {
+          case 0:
+            _mount10 = mount(TooltipDemo), instance = _mount10[0], element = _mount10[1];
+            dispatchEvent(element.firstChild, 'mouseenter');
+            _context15.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            _dropdown$querySelect4 = dropdown.querySelectorAll('.k-dropdown-item'), item1 = _dropdown$querySelect4[0], item2 = _dropdown$querySelect4[1], item3 = _dropdown$querySelect4[2], item4 = _dropdown$querySelect4[3];
+            dispatchEvent(item1, 'mouseenter');
+            _context15.next = 9;
+            return wait();
+
+          case 9:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('item 1');
+            dispatchEvent(item1, 'mouseleave');
+            dispatchEvent(item3, 'mouseenter');
+            _context15.next = 14;
+            return wait();
+
+          case 14:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('disabled');
+            dispatchEvent(item3, 'mouseleave');
+            dispatchEvent(item4, 'mouseenter');
+            _context15.next = 19;
+            return wait();
+
+          case 19:
+            expect(getElement('.k-tooltip-content').textContent).to.eql('This is a nested Dropdown.');
+            dispatchEvent(item4, 'click');
+            _context15.next = 23;
+            return wait();
+
+          case 23:
+            expect(getElement('.k-dropdown-menu').textContent).to.eql('item 1item 2');
+            dispatchEvent(item4, 'mouseleave');
+            _context15.next = 27;
+            return wait(800);
+
+          case 27:
+            expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+
+          case 28:
+          case "end":
+            return _context15.stop();
+        }
+      }
+    }, _callee11);
+  })));
 });