@king-design/intact 2.0.0-beta.0

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

@@ -0,0 +1,486 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Component } from 'intact';
+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';
+describe('Dropdown', function () {
+  afterEach(function (done) {
+    unmount();
+    setTimeout(done, 400);
+  }); // it('demos test', () => {
+  // const req = require.context('~/components/dropdown/demos', true, /^((?!async).)*index\.js$/i);
+  // req.keys().forEach(item => {
+  // if (item.includes('contextmenu')) return;
+  // const Demo = req(item).default;
+  // const i = mount(Demo);
+  // dispatchEvent(i.element.querySelector('.k-btn') || i.element, 'click');
+  // if (item.includes('disabled')) {
+  // expect(getElement('.k-dropdown-menu')).to.be.undefined;
+  // } else {
+  // expect(getElement('.k-dropdown-menu').innerHTML).to.matchSnapshot();
+  // }
+  // unmount(i);
+  // });
+  // });
+
+  it('should save original events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _click, Demo, _mount, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _click = sinon.spy();
+
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context;
+
+                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(_context = [this]).call(_context, args)) || this;
+                _this.Dropdown = Dropdown;
+                _this.DropdownItem = DropdownItem;
+                _this.DropdownMenu = DropdownMenu;
+                return _this;
+              }
+
+              var _proto = Demo.prototype;
+
+              _proto.click = function click() {
+                _click();
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownItem, DropdownMenu} = this;\n                <div>\n                    <Dropdown>\n                        <div ref=\"test\" ev-click={this.click}>click</div>\n                        <DropdownMenu>\n                            <DropdownItem>test</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            instance.refs.test.click();
+            expect(_click.callCount).to.eql(1);
+            _context2.next = 8;
+            return wait();
+
+          case 8:
+            expect(getElement('.k-dropdown-menu').innerHTML).to.matchSnapshot();
+
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should move mouse to dropdown menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, dropdown;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
+            dispatchEvent(element.firstElementChild, 'mouseenter');
+            _context3.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            dispatchEvent(element.firstElementChild, 'mouseleave');
+            dispatchEvent(dropdown, 'mouseenter');
+            _context3.next = 10;
+            return wait(500);
+
+          case 10:
+            expect(dropdown.parentNode).to.exist;
+
+          case 11:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('nested dropdown', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, dropdown, _dropdown$querySelect, hoverItem, clickItem, clickSubDropdown, hoverSubDropdown;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount3 = mount(NestedDemo), instance = _mount3[0], element = _mount3[1];
+            element.firstElementChild.click();
+            _context4.next = 4;
+            return wait();
+
+          case 4:
+            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;
+            return wait(300);
+
+          case 9:
+            clickSubDropdown = getElement('.k-dropdown-menu');
+            expect(clickSubDropdown.innerHTML).to.matchSnapshot(); // should hide last sub-dropdown and show next
+
+            dispatchEvent(hoverItem, 'mouseenter');
+            _context4.next = 14;
+            return wait(500);
+
+          case 14:
+            hoverSubDropdown = getElement('.k-dropdown-menu');
+            expect(hoverSubDropdown.innerHTML).to.matchSnapshot();
+
+          case 16:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('hide on click document', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount4 = mount(BasicDemo), instance = _mount4[0], element = _mount4[1];
+            dispatchEvent(element.firstElementChild, 'mouseenter');
+            _context5.next = 4;
+            return wait();
+
+          case 4:
+            dispatchEvent(document, 'click');
+            _context5.next = 7;
+            return wait(500);
+
+          case 7:
+            expect(getElement('.k-dropdown-menu')).not.exist;
+
+          case 8:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('operate by keyboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount5, instance, element, dropdown, subDropdown, subDropdown1;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount5 = mount(NestedDemo), instance = _mount5[0], element = _mount5[1];
+            dispatchEvent(element.firstElementChild, 'click');
+            _context6.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu'); // down
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 40
+            });
+            _context6.next = 8;
+            return wait();
+
+          case 8:
+            expect(dropdown.innerHTML).to.matchSnapshot(); // up
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 38
+            });
+            _context6.next = 12;
+            return wait();
+
+          case 12:
+            expect(dropdown.innerHTML).to.matchSnapshot(); // up and enter
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 38
+            });
+            dispatchEvent(document, 'keydown', {
+              keyCode: 13
+            });
+            _context6.next = 17;
+            return wait();
+
+          case 17:
+            subDropdown = getElement('.k-dropdown-menu');
+            expect(subDropdown.innerHTML).to.matchSnapshot(); // right
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 39
+            });
+            _context6.next = 22;
+            return wait();
+
+          case 22:
+            subDropdown1 = getElement('.k-dropdown-menu');
+            expect(subDropdown1.innerHTML).to.matchSnapshot(); // left
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 37
+            });
+            _context6.next = 27;
+            return wait(500);
+
+          case 27:
+            expect(subDropdown1.style.display).to.eql('none'); // down in sub-menu
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 40
+            });
+            _context6.next = 31;
+            return wait();
+
+          case 31:
+            expect(subDropdown.innerHTML).to.matchSnapshot(); // select and hide
+
+            dispatchEvent(document, 'keydown', {
+              keyCode: 13
+            });
+            _context6.next = 35;
+            return wait(500);
+
+          case 35:
+            expect(getElement('.k-dropdown-menu')).not.exist;
+
+          case 36:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('context menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount6, instance, element, dropdown;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount6 = mount(ContextMenuDemo), instance = _mount6[0], element = _mount6[1];
+            dispatchEvent(element, 'contextmenu', {
+              pageX: 10,
+              pageY: 10
+            });
+            _context7.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            expect(dropdown.style.left).to.eql('10px');
+            dispatchEvent(element, 'contextmenu', {
+              pageX: 11,
+              pageY: 11
+            });
+            _context7.next = 9;
+            return wait();
+
+          case 9:
+            expect(dropdown.style.left).to.eql('11px');
+            _context7.next = 12;
+            return wait(500);
+
+          case 12:
+            expect(dropdown.style.display).to.eql('');
+
+          case 13:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('click mouse and move outside should not hide menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, instance, element, dropdown, _dropdown$querySelect2, hoverItem, clickItem, clickSubDropdown;
+
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            _mount7 = mount(NestedDemo), instance = _mount7[0], element = _mount7[1];
+            element.firstChild.click();
+            _context8.next = 4;
+            return wait();
+
+          case 4:
+            dropdown = getElement('.k-dropdown-menu');
+            dispatchEvent(dropdown, 'mousedown');
+            dispatchEvent(document, 'mouseup');
+            dispatchEvent(document, 'click');
+            _context8.next = 10;
+            return wait(500);
+
+          case 10:
+            expect(dropdown.style.display).to.eql(''); // on submenu
+
+            _dropdown$querySelect2 = dropdown.querySelectorAll(':scope > .k-dropdown-item'), hoverItem = _dropdown$querySelect2[3], clickItem = _dropdown$querySelect2[4];
+            clickItem.click();
+            _context8.next = 15;
+            return wait();
+
+          case 15:
+            clickSubDropdown = getElement('.k-dropdown-menu');
+            dispatchEvent(clickSubDropdown, 'mousedown');
+            dispatchEvent(document, 'mouseup');
+            dispatchEvent(document, 'click');
+            _context8.next = 21;
+            return wait(500);
+
+          case 21:
+            expect(dropdown.style.display).to.eql('');
+            expect(clickSubDropdown.style.display).to.eql(''); // should hide on click document directly
+
+            dispatchEvent(document, 'click');
+            _context8.next = 26;
+            return wait(500);
+
+          case 26:
+            expect(getElement('.k-dropdown-menu')).to.be.undefined;
+
+          case 27:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee7);
+  })));
+  it('should throw error if has whitespace between real elements', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo;
+    return _regeneratorRuntime.wrap(function _callee8$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context9;
+
+                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(_context9 = [this]).call(_context9, args)) || this;
+                _this2.Dropdown = Dropdown;
+                _this2.DropdownItem = DropdownItem;
+                _this2.DropdownMenu = DropdownMenu;
+                return _this2;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown>\n                        {''}\n                        <div ref=\"trigger\">hover</div>\n                        {''}\n                        <DropdownMenu>\n                            <DropdownItem>test</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            expect(function () {
+              return mount(Demo);
+            }).to.throw;
+
+          case 3:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee8);
+  }))); // it('should hydrate dropdown correctly', () => {
+  // class Demo extends Component {
+  // static template = `
+  // const {Dropdown, DropdownMenu, DropdownItem} = this;
+  // <div>
+  // <Dropdown>
+  // <div ref="trigger">hover</div>
+  // <DropdownMenu>
+  // <DropdownItem>test</DropdownItem>
+  // </DropdownMenu>
+  // </Dropdown>
+  // </div>
+  // `;
+  // private Dropdown = Dropdown;
+  // private DropdownItem = DropdownItem;
+  // private DropdownMenu = DropdownMenu;
+  // }
+  // const demo = new Demo();
+  // const html = demo.toString();
+  // expect(html).to.eql('<div><div _evHasSaved>hover</div><!--placeholder--></div>');
+  // const container = document.createElement('div');
+  // container.innerHTML = html;
+  // document.body.appendChild(container);
+  // Intact.hydrate(demo, container);
+  // dispatchEvent(demo.refs.trigger, 'click');
+  // expect(getElement('.k-dropdown-menu').innerHTML.trim()).to.eql('<div class="k-item">test</div>');
+  // demo.destroy();
+  // document.body.removeChild(container);
+  // });
+
+  it('should scroll to view when we focus on DropdownItem', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount8, instance, element, dropdown, _dropdown$querySelect3, item, parent;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context11;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
+                _this3.Dropdown = Dropdown;
+                _this3.DropdownItem = DropdownItem;
+                _this3.DropdownMenu = DropdownMenu;
+                return _this3;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown>\n                        <div ref=\"trigger\">hover</div>\n                        <DropdownMenu>\n                            <div style=\"height: 40px; overflow: auto;\">\n                                <DropdownItem>test1</DropdownItem>\n                                <DropdownItem>test2</DropdownItem>\n                            </div>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+            dispatchEvent(instance.refs.trigger, 'mouseenter');
+            _context12.next = 6;
+            return wait(300);
+
+          case 6:
+            dropdown = getElement('.k-dropdown-menu');
+            _dropdown$querySelect3 = dropdown.querySelectorAll('.k-dropdown-item'), item = _dropdown$querySelect3[1];
+            parent = item.parentNode;
+            dispatchEvent(item, 'mouseenter');
+            _context12.next = 12;
+            return wait();
+
+          case 12:
+            expect(parent.scrollTop).to.eql(item.offsetHeight * 2 - 40);
+
+          case 13:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee9);
+  })));
+});

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

@@ -0,0 +1,26 @@
+import { Component, TypeDefs } from 'intact';
+import { Dropdown } from './dropdown';
+export interface DropdownItemProps {
+    disabled?: boolean;
+    hideOnSelect?: boolean;
+    _isFocus?: boolean;
+}
+export interface DropdownItemEvents {
+    select: [];
+    click: [MouseEvent];
+    mouseenter: [MouseEvent];
+    mouseleave: [MouseEvent];
+}
+export declare class DropdownItem extends Component<DropdownItemProps, DropdownItemEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<DropdownItemProps>>;
+    static defaults: () => Partial<DropdownItemProps>;
+    parentDropdown?: Dropdown;
+    private dropdown;
+    private keyboard;
+    private dropdownMenu;
+    init(): void;
+    select(): void;
+    hasSubMenu(): Dropdown<any, any, any> | undefined;
+    private onClick;
+}

package/es/components/dropdown/item.js

@@ -0,0 +1,115 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, inject } from 'intact';
+import template from './item.vdt';
+import { bind } from '../utils';
+import { useItemKeyboard } from './useKeyboard';
+import { Dropdown, DROPDOWN } from './dropdown';
+import { DROPDOWN_MENU } from './menu';
+var typeDefs = {
+  disabled: Boolean,
+  hideOnSelect: Boolean,
+  _isFocus: null
+};
+
+var defaults = function defaults() {
+  return {
+    hideOnSelect: true
+  };
+};
+
+export var DropdownItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(DropdownItem, _Component);
+
+  function DropdownItem() {
+    var _context;
+
+    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(_context = [this]).call(_context, args)) || this;
+    _this.parentDropdown = void 0;
+    _this.dropdown = null;
+    _this.keyboard = null;
+    _this.dropdownMenu = null;
+    return _this;
+  }
+
+  var _proto = DropdownItem.prototype;
+
+  _proto.init = function init() {
+    this.dropdown = inject(DROPDOWN);
+    this.parentDropdown = this.hasSubMenu();
+    this.dropdownMenu = inject(DROPDOWN_MENU);
+    this.keyboard = useKeyboardForDropdownItem(this);
+  };
+
+  _proto.select = function select() {
+    if (this.parentDropdown) return;
+
+    if (this.get('hideOnSelect')) {
+      // hide all dropdowns
+      var dropdown = this.dropdown;
+
+      do {
+        dropdown.hide(true);
+      } while (dropdown = dropdown.dropdown);
+    }
+
+    this.trigger('select');
+  };
+
+  _proto.hasSubMenu = function hasSubMenu() {
+    // TODO: wrapped by Tooltip
+    var parent = this.$senior;
+
+    if (parent instanceof Dropdown) {
+      return parent;
+    }
+  };
+
+  _proto.onClick = function onClick(e) {
+    if (this.get('disabled')) return; // Some cases, the item may been removed after click immediately
+    // and the menu will hide, because it can't detect it contains
+    // the removed item.
+    // Set the ignore flag to prevent menu from hidding
+    // 
+    // @Change Cascader need click item to toggle show an hide
+    // (e as IgnoreClickEvent)._ignore = true;
+
+    this.trigger('click', e);
+    this.select();
+  };
+
+  return DropdownItem;
+}(Component);
+DropdownItem.template = template;
+DropdownItem.typeDefs = typeDefs;
+DropdownItem.defaults = defaults;
+
+__decorate([bind], DropdownItem.prototype, "onClick", null);
+
+function useKeyboardForDropdownItem(instance) {
+  var dropdownMenu = inject(DROPDOWN_MENU);
+
+  var showMenu = function showMenu() {
+    if (instance.parentDropdown) {
+      instance.parentDropdown.show(true);
+    }
+  };
+
+  return useItemKeyboard({
+    onShowMenu: showMenu,
+    onHideMenu: function onHideMenu() {
+      dropdownMenu.dropdown.hide(true);
+    },
+    onSelect: function onSelect() {
+      showMenu();
+      instance.select();
+    }
+  });
+}

package/es/components/dropdown/item.vdt.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn } from 'intact';
+import { getRestProps } from '../utils';
+import { makeItemStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      children = _this$get.children,
+      disabled = _this$get.disabled,
+      className = _this$get.className,
+      hideOnSelect = _this$get.hideOnSelect,
+      _isFocus = _this$get._isFocus;
+
+  var classNameObj = (_classNameObj = {
+    'k-dropdown-item': true,
+    'k-disabled': disabled
+  }, _classNameObj[className] = className, _classNameObj['k-hover'] = this.keyboard.isFocus.value, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'ev-click': this.onClick,
+    'ev-mouseenter': this.keyboard.onMouseEnter,
+    'ev-mouseleave': this.keyboard.onMouseLeave
+  }), children);
+}
+;

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

@@ -0,0 +1,21 @@
+import { Component, RefObject } from 'intact';
+import { Dropdown } from './dropdown';
+export interface DropdownMenuProps {
+}
+export interface DropdownMenuEvents {
+}
+export interface DropdownMenuBlocks {
+}
+export declare const DROPDOWN_MENU = "DropdownMenu";
+export declare class DropdownMenu<T extends DropdownMenuProps = DropdownMenuProps, E extends DropdownMenuEvents = DropdownMenuEvents, B extends DropdownMenuBlocks = DropdownMenuBlocks> extends Component<T, E, B> {
+    static template: string | import("intact").Template<any>;
+    elementRef: RefObject<HTMLDivElement>;
+    dropdown: Dropdown;
+    keyboard: {
+        lock: (v: boolean) => boolean;
+    };
+    private transition;
+    init(): void;
+    protected onMouseEnter(e: MouseEvent): void;
+    private onMouseLeave;
+}