@king-design/intact 2.0.11 → 2.0.13-beta.0

package/components/cascader/styles.ts

@@ -33,7 +33,7 @@ setDefault(() => {
 export function makeMenuStyles() {
     return css`
         min-width: ${cascader.width} !important;
-        height: ${cascader.height};
+        min-height: ${cascader.height};
         .k-cascader-arrow {
             float: right;
             height: 100%;

package/components/drawer/index.spec.ts

@@ -2,6 +2,9 @@ import BasicDemo from '~/components/drawer/demos/basic';
 import PlacementDemo from '~/components/drawer/demos/placement';
 import overlayDemo from '~/components/drawer/demos/overlay';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+import {Component} from 'intact';
+import {Drawer} from '.';
+import {Dialog} from '../dialog';
 
 describe('Drawer', () => {
     afterEach((done) => {
@@ -67,4 +70,21 @@ describe('Drawer', () => {
         await wait(500);
         expect(getElement('.k-drawer')).to.be.undefined;
     });
+
+    it('nested dialog', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Dialog, Drawer} = this;
+                <Drawer value={true}>
+                    <Dialog value={true} ref="dialog">Dialog</Dialog>
+                </Drawer>
+            `;
+            private Dialog = Dialog;
+            private Drawer = Drawer;
+        }
+        const [instance, element] = mount(Demo);
+
+        await wait();
+        expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+    });
 });

package/components/dropdown/demos/trigger.md

@@ -3,11 +3,13 @@ title: 触发方式
 order: 0
 ---
 
-`Dropdown`提供了两种触发方式来弹窗菜单，`hover`悬停触发（默认），`click`点击触发。
+`Dropdown`提供了两种触发方式来弹窗菜单，`hover`悬停触发（默认），`click`点击触发，当使用`Input`组件时，还可以
+指定为`foucs`来触发。
+
 通过`trigger`属性来指定它们。
 
 ```vdt
-import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
+import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 
 <div>
     <Dropdown>
@@ -31,6 +33,15 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <DropdownItem>item 3</DropdownItem>
         </DropdownMenu>
     </Dropdown>
+
+    <Dropdown trigger="focus">
+        <Input placeholder="focus" />
+        <DropdownMenu>
+            <DropdownItem>item 1</DropdownItem>
+            <DropdownItem>item 2</DropdownItem>
+            <DropdownItem>item 3</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
 </div>
 ```
 

package/components/dropdown/dropdown.ts

@@ -31,7 +31,7 @@ export const DROPDOWN = 'Dropdown';
 export const ROOT_DROPDOWN = 'RootDropdown';
 
 export interface DropdownProps {
-    trigger?: 'hover' | 'click' | 'contextmenu'
+    trigger?: 'hover' | 'click' | 'contextmenu' | 'focus'
     disabled?: boolean
     value?: boolean
     position?: Position | 'left' | 'bottom' | 'right' | 'top'
@@ -51,7 +51,7 @@ export interface DropdownEvents {
 export interface DropdownBlocks { }
 
 const typeDefs: Required<TypeDefs<DropdownProps>> = {
-    trigger: ['hover', 'click', 'contextmenu'],
+    trigger: ['hover', 'click', 'contextmenu', 'focus'],
     disabled: Boolean,
     value: Boolean,
     position: [Object, 'left', 'bottom', 'right', 'top'],
@@ -106,17 +106,7 @@ export class Dropdown<
 
         const [trigger, menu] = children as DropdownChildren;
         const triggerType = this.get('trigger');
-        const props: Record<string, Function> = {};
-
-        if (triggerType !== 'contextmenu') {
-            props['ev-click'] = this.onEnter;
-            if (triggerType === 'hover') {
-                props['ev-mouseenter'] = this.onEnter;
-                props['ev-mouseleave'] = this.onLeave;
-            }
-        } else {
-            props['ev-contextmenu'] = this.onContextMenu;
-        }
+        const props = this.initEventCallbacks(triggerType); 
 
         const clonedTrigger = isTextChildren(trigger) ? 
             createVNode('span', null, trigger) :
@@ -235,6 +225,29 @@ export class Dropdown<
         this.hide();
     }
 
+    private initEventCallbacks(trigger: DropdownProps['trigger']) {
+        const props: Record<string, Function> = {};
+
+        switch (trigger) {
+            case 'focus':
+                props['ev-focusin'] = this.onEnter;
+                props['ev-focusout'] = this.onLeave;
+                break;
+            case 'contextmenu':
+                props['ev-contextmenu'] = this.onContextMenu;
+                break;
+            default:
+                props['ev-click'] = this.onEnter;
+                if (trigger === 'hover') {
+                    props['ev-mouseenter'] = this.onEnter;
+                    props['ev-mouseleave'] = this.onLeave;
+                }
+                break;
+        }
+
+        return props;
+    }
+
     private callOriginalCallback(name: string, e: MouseEvent) {
         const callback = this.triggerProps[name];
         const callbackOnDropdown = this.get<Function>(name);
@@ -283,7 +296,10 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
     const [addDocumentClick, removeDocumentClick] = useDocumentClick(elementRef, (e) => {
         // case 1: if click an trigger and the trigger type is hover, ignore it
         // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
+        // case 3: if click on trigger and the trigger type is focus, do nothing 
         const trigger = dropdown.get('trigger');
+        if (trigger === 'focus') return;
+
         const isHover = trigger === 'hover';
         if (isHover || trigger === 'contextmenu') {
             const triggerDom = findDomFromVNode(dropdown.$lastInput!, true) as Element;

package/components/dropdown/index.md

@@ -11,7 +11,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"hover"` |
+| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"contextmenu"` | `"focus"` | `"hover"` |
 | disabled | 是否禁用整个菜单 | `boolean` | `false` |
 | value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |

package/components/dropdown/index.spec.ts

@@ -280,4 +280,38 @@ describe('Dropdown', () => {
         await wait();
         expect(parent.scrollTop).to.eql(item.offsetHeight * 2 - 40);
     });
+
+    it('trigger: focus', async() => {
+        class Demo extends Component {
+            static template = `
+                const {Dropdown, DropdownMenu, DropdownItem} = this;
+                <div>
+                    <Dropdown trigger="focus">
+                        <input ref="trigger" />
+                        <DropdownMenu>
+                            <DropdownItem>test1</DropdownItem>
+                            <DropdownItem>test2</DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </div>
+            `;
+            private Dropdown = Dropdown;
+            private DropdownItem = DropdownItem;
+            private DropdownMenu = DropdownMenu;
+        }
+        const [instance] = mount(Demo);
+
+        dispatchEvent(instance.refs.trigger, 'focusin');
+        await wait(500);
+        expect(getElement('.k-dropdown-menu')).to.be.exist;
+
+        // clicking anywhere should not hide menu
+        dispatchEvent(document, 'click');
+        await wait(500);
+        expect(getElement('.k-dropdown-menu')).to.be.exist;
+
+        dispatchEvent(instance.refs.trigger, 'focusout');
+        await wait(700);
+        expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+    });
 });

package/components/form/demos/basic.md

@@ -23,7 +23,7 @@ order: 0
     12. `min {number}`：请输入不小于n的数
     13. `range {Array<number>}`：请输入min到max之间的数
     14. `step {number}`：请输入步长为n的数
-    15. `equalTo {string}`：两次输入不一致
+    15. `equal {string}`：两次输入不一致
 3. 给`FormItem`添加`messages`属性，指定验证失败时展示的错误提示。默认内容如上所示
 4. 给`FormItem`添加`classNames`属性，指定验证失败时错误元素需要额外添加的`className`，默认不添加
 

package/components/form/index.md

@@ -31,9 +31,9 @@ sidebar: doc
 | fluid | `FormItem`的宽度默认是被子元素撑开的，添加该属性可以渲染`100%`的宽度 | `boolean` | `false` |
 
 ```ts
-type Method = (value: any, param: any) => boolean | string
-type Message = string | ((value: any, param: any) => string)
-type ClassName = string | ((value: any, param: any) => string)
+export declare type Method = (value: any, param: any) => boolean | string | Promise<boolean | string>
+export declare type Message = string | ((value: any, param: any) => string)
+export declare type ClassName = string | ((value: any, param: any) => string)
 ```
 
 # 扩展点
@@ -72,9 +72,12 @@ type ClassName = string | ((value: any, param: any) => string)
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| addMethod | 添加全局验证规则，这样在所有`FormItem`中如果需要使用该规则，只需要在`rules`中写上该规则名即可 | 1. `name` 指定规则名称，不能重复 <br /> 2. `method` 指定该规则的验证函数，该函数返回`true`或`false`来标识验证成功或失败，如果返回字符串，则直接当做错误文案展示，该函数将传入3个参数：1. 当前验证的值，2. 当前验证的`FormItem`实例，3. 当前规则的参数，即使用该规则时指定的值 <br /> 3. `message` 验证失败时的错误提示文案，该值可以为字符串或者函数，如果为函数，传入参数同`method`，用于个性化文案提示 <br /> 4. `className` 验证失败时添加的类名 | `undefined` |
+| addMethod | 添加全局验证规则，这样在所有`FormItem`中如果需要使用该规则，只需要在`rules`中写上该规则名即可 | 1. `name` 指定规则名称，不能重复 <br /> 2. `method` 指定该规则的验证函数，该函数返回`true`或`false`来标识验证成功或失败，如果返回字符串，则直接当做错误文案展示，该函数将传入2个参数：1. 当前验证的值，2. 当前规则的参数，即使用该规则时指定的值 <br /> 3. `message` 验证失败时的错误提示文案，该值可以为字符串或者函数，如果为函数，传入参数同`method`，用于个性化文案提示 <br /> 4. `className` 验证失败时添加的类名 | `undefined` |
 
 ```ts
+export declare type Method = (value: any, param: any) => boolean | string | Promise<boolean | string>
+export declare type Message = string | ((value: any, param: any) => string)
+export declare type ClassName = string | ((value: any, param: any) => string)
 export declare const addMethod: (
     name: string,
     method: Method,

package/components/form/methods.ts

@@ -1,7 +1,8 @@
 import {_$} from '../../i18n';
 import {isNumber, isNullOrUndefined, isString} from 'intact-shared';
 
-export type Method = (value: any, param: any) => boolean | string
+export type MethodReturn = boolean | string
+export type Method = (value: any, param: any) => MethodReturn | Promise<MethodReturn> 
 export type Message = string | ((value: any, param: any) => string)
 export type ClassName = string | ((value: any, param: any) => string)
 

package/components/portal.ts

@@ -14,6 +14,7 @@ import {
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
 import type {Dialog} from './dialog';
+import {BaseDialog} from './dialog/base';
 
 export interface PortalProps {
     container?: Container
@@ -131,8 +132,13 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
             }
         }
         if (!this.container) {
-            // find the closest dialog if exists
-            this.container = parentDom.closest('.k-dialog') || document.body;
+            if (this.$senior instanceof BaseDialog) {
+                // Dialog and Drawer must be inserted into document.body
+                this.container = document.body;
+            } else {
+                // find the closest dialog if exists
+                this.container = parentDom.closest('.k-dialog') || document.body;
+            }
 
             /**
              * @FIXME: We cannot get parent ref from sub component in Vue

package/components/select/demos/format.md

@@ -34,7 +34,7 @@ import {Select, Option, Icon} from 'kpc';
             </Option>
             <b:value args="[value, label]">
                 <Icon class={value} style="vertical-align: middle;" />
-                <span class="c-middle">{value}</span>
+                <span class="middle">{value}</span>
             </b:value>
         </Select>
     </div>
@@ -67,8 +67,9 @@ import {Select, Option, Icon} from 'kpc';
     height 60px
     line-height 60px
     text-align center
-.c-middle
+.middle
     margin-left 6px
+    vertical-align middle
 .label
     display inline-block
     width 100px

package/components/select/styles.ts

@@ -58,7 +58,7 @@ const defaults = deepDefaults(
         },
         tag: {
             margin: `3px 8px 3px 0`,
-            padding: `5px 8px`,
+            padding: `3px 8px`,
             get borderRadius() { return theme.borderRadius },
             get bgColor() { return theme.color.bg },
             disabledBgColor: '#eee',
@@ -225,6 +225,7 @@ export default function makeStyles() {
         .k-select-values {
             display: inline-block;
             margin-right: -${getRight(select.tag.margin)};
+            width: 100%;
             &.k-with-values {
                 margin: 0;
             }
@@ -236,16 +237,20 @@ export default function makeStyles() {
             background: ${select.tag.bgColor};
             border-radius: ${select.tag.borderRadius};
             margin: ${select.tag.margin};
-            line-height: 1;
+            max-width: calc(100% - ${getRight(select.tag.margin)} - 1px);
+        }
+        .k-select-text {
+            max-width: calc(100% - 18px);
+            word-break: break-word;
         }
         .k-select-close {
             margin-left: ${select.tag.delete.gap};
             font-size: ${select.tag.delete.fontSize};
             color: ${select.tag.delete.color};
         }
-        .k-select-input {
-            margin-right: ${getRight(select.tag.margin)};
-        }
+        // .k-select-input {
+            // margin-right: ${getRight(select.tag.margin)};
+        // }
 
         // size
         ${sizes.map(size => {

package/components/table/table.ts

@@ -185,7 +185,6 @@ export class Table<
         this.scroll,
         this.width.tableRef,
         this.fixedColumns.setScrollPosition,
-        this.width.tableWidth,
     );
 
     public checkAll() {

package/components/table/useResizeObserver.ts

@@ -0,0 +1,22 @@
+import {onMounted, onBeforeUnmount, RefObject, useInstance} from "intact";
+import {debounce} from '../utils';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export function useResizeObserver(elementRef: RefObject<HTMLElement>, callback: Function) {
+    const instance = useInstance()!;
+
+    let ro: ResizeObserver;
+    onMounted(() => {
+        // use debounce instead of throttle, because if there is
+        // transition on parent container, the width is weired
+        // #342
+        ro = new ResizeObserver(debounce(() => {
+            if (instance.$unmounted) return;
+            callback();
+        }, 100, true));
+        ro.observe(elementRef.value!);
+    });
+    onBeforeUnmount(() => {
+        ro.disconnect();
+    });
+}

package/components/table/useStickyScrollbar.ts

@@ -5,13 +5,13 @@ import type {Table} from './';
 import {isStringOrNumber, isNull} from 'intact-shared';
 import {debounce} from '../utils';
 import type {useScroll} from './useScroll';
+import {useResizeObserver} from './useResizeObserver';
 
 export function useStickyScrollbar(
     elementRef: RefObject<HTMLElement>,
     {scrollRef, callbacks}: ReturnType<typeof useScroll>,
     tableRef: RefObject<HTMLElement>,
     tableScroll: (scrollLeft: number) => void,
-    tableWidth: State<number | null>,
 ) {
     const instance = useInstance() as Table;
     const stick = useState<number | null>(null);
@@ -23,13 +23,7 @@ export function useStickyScrollbar(
         stick.set(v === true ? 0 : isStringOrNumber(v) ? +v : null);
     });
 
-    watchState(tableWidth, v => {
-        if (v) {
-            tableActualWidth.set(v + 'px');
-        } else {
-            setTableActualWidth();
-        }
-    });
+    useResizeObserver(scrollRef, setTableActualWidth);
 
     onMounted(() => {
         setTableActualWidth();

package/components/table/useWidth.ts

@@ -1,10 +1,9 @@
-import {useInstance, RefObject, onMounted, onBeforeUnmount, VNodeComponentClass, createRef} from 'intact';
-import ResizeObserver from 'resize-observer-polyfill';
+import {useInstance, RefObject, onMounted, VNodeComponentClass, createRef} from 'intact';
 import type {Table, TableRowKey} from './table';
 import type {TableColumn} from './column';
 import {useState} from '../../hooks/useState';
-import {debounce} from '../utils';
 import {scrollbarWidth} from '../position';
+import {useResizeObserver} from './useResizeObserver';
 
 const hasLocalStorage = typeof localStorage !== 'undefined';
 
@@ -19,21 +18,8 @@ export function useWidth(
 
     initWidthFromStore();
 
-    let ro: ResizeObserver;
-    onMounted(() => {
-        checkTableWidth(true);
-        // use debounce instead of throttle, because if there is
-        // transition on parent container, the width is weired
-        // #342
-        ro = new ResizeObserver(debounce(() => {
-            if (instance.$unmounted) return;
-            checkTableWidth(false);
-        }, 100, true));
-        ro.observe(scrollRef.value!);
-    });
-    onBeforeUnmount(() => {
-        ro.disconnect();
-    });
+    onMounted(() => checkTableWidth(true));
+    useResizeObserver(scrollRef, () => checkTableWidth(false));
 
     // if exist widthStoreKey, we get the default width from localStorage
     function initWidthFromStore() {

package/components/timepicker/index.ts

@@ -9,6 +9,7 @@ export class Timepicker<
     Multipe extends boolean = false,
     Range extends boolean = false,
 > extends Component<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks<Range>> {
+    static $doubleVNodes = true;
     static template(this: Timepicker) {
         const props = this.get();
         if (props.step && !props.range) {

package/components/tooltip/demos/trigger.md

@@ -3,11 +3,11 @@ title: 触发方式
 order: 2
 ---
 
-使用`trigger`指定触发方式，`click`点击触发，`hover`悬浮触发，默认为`hover`，在悬浮触发情况下，
+使用`trigger`指定触发方式，`click`点击触发，`hover`悬浮触发，`foucs`聚焦触发，默认为`hover`，在悬浮触发情况下，
 鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`canHover`属性
 
 ```vdt
-import {Tooltip, ButtonGroup, Button} from 'kpc';
+import {Tooltip, ButtonGroup, Button, Input} from 'kpc';
 
 <ButtonGroup>
     <Tooltip content="hover">
@@ -19,5 +19,8 @@ import {Tooltip, ButtonGroup, Button} from 'kpc';
     <Tooltip hoverable content="the text can be hovered">
         <Button>hoverable</Button>
     </Tooltip>
+    <Tooltip trigger="focus" content="foucs">
+        <Input placeholder="focus" />
+    </Tooltip>
 </ButtonGroup>
 ```

package/components/tooltip/index.md

@@ -9,7 +9,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"hover"` |
+| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"focus"` | `"hover"` |
 | disabled | 是否禁用整个菜单 | `boolean` | `false` |
 | value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认在触发器正上方向上偏移`10px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` |

package/es/components/cascader/styles.js

@@ -43,7 +43,7 @@ setDefault(function () {
   }).cascader;
 });
 export function makeMenuStyles() {
-  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
+  return /*#__PURE__*/css("min-width:", cascader.width, "!important;min-height:", cascader.height, ";.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
 }
 export function makeFilterMenuStyles() {
   return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");

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

@@ -1,9 +1,14 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/drawer/demos/basic';
 import PlacementDemo from '~/components/drawer/demos/placement';
 import overlayDemo from '~/components/drawer/demos/overlay';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Component } from 'intact';
+import { Drawer } from '.';
+import { Dialog } from '../dialog';
 describe('Drawer', function () {
   afterEach(function (done) {
     unmount();
@@ -159,4 +164,47 @@ describe('Drawer', function () {
       }
     }, _callee4);
   })));
+  it('nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount4, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context5;
+
+                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(_context5 = [this]).call(_context5, args)) || this;
+                _this.Dialog = Dialog;
+                _this.Drawer = Drawer;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dialog, Drawer} = this;\n                <Drawer value={true}>\n                    <Dialog value={true} ref=\"dialog\">Dialog</Dialog>\n                </Drawer>\n            ";
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+
+          case 6:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee5);
+  })));
 });

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

@@ -8,7 +8,7 @@ export declare type PositionShorthand = 'left' | 'bottom' | 'right' | 'top';
 export declare const DROPDOWN = "Dropdown";
 export declare const ROOT_DROPDOWN = "RootDropdown";
 export interface DropdownProps {
-    trigger?: 'hover' | 'click' | 'contextmenu';
+    trigger?: 'hover' | 'click' | 'contextmenu' | 'focus';
     disabled?: boolean;
     value?: boolean;
     position?: Position | 'left' | 'bottom' | 'right' | 'top';
@@ -52,6 +52,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     private onEnter;
     private onContextMenu;
     private onLeave;
+    private initEventCallbacks;
     private callOriginalCallback;
     private normalizeTriggerProps;
 }

package/es/components/dropdown/dropdown.js

@@ -14,7 +14,7 @@ import { usePosition } from './usePosition';
 export var DROPDOWN = 'Dropdown';
 export var ROOT_DROPDOWN = 'RootDropdown';
 var typeDefs = {
-  trigger: ['hover', 'click', 'contextmenu'],
+  trigger: ['hover', 'click', 'contextmenu', 'focus'],
   disabled: Boolean,
   value: Boolean,
   position: [Object, 'left', 'bottom', 'right', 'top'],
@@ -154,6 +154,33 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     this.hide();
   };
 
+  _proto.initEventCallbacks = function initEventCallbacks(trigger) {
+    var props = {};
+
+    switch (trigger) {
+      case 'focus':
+        props['ev-focusin'] = this.onEnter;
+        props['ev-focusout'] = this.onLeave;
+        break;
+
+      case 'contextmenu':
+        props['ev-contextmenu'] = this.onContextMenu;
+        break;
+
+      default:
+        props['ev-click'] = this.onEnter;
+
+        if (trigger === 'hover') {
+          props['ev-mouseenter'] = this.onEnter;
+          props['ev-mouseleave'] = this.onLeave;
+        }
+
+        break;
+    }
+
+    return props;
+  };
+
   _proto.callOriginalCallback = function callOriginalCallback(name, e) {
     var callback = this.triggerProps[name];
     var callbackOnDropdown = this.get(name);
@@ -229,19 +256,7 @@ Dropdown.template = function () {
       trigger = _children[0],
       menu = _children[1];
   var triggerType = this.get('trigger');
-  var props = {};
-
-  if (triggerType !== 'contextmenu') {
-    props['ev-click'] = this.onEnter;
-
-    if (triggerType === 'hover') {
-      props['ev-mouseenter'] = this.onEnter;
-      props['ev-mouseleave'] = this.onLeave;
-    }
-  } else {
-    props['ev-contextmenu'] = this.onContextMenu;
-  }
-
+  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
 
@@ -275,7 +290,9 @@ function useDocumentClickForDropdown(dropdown) {
   var _useDocumentClick = useDocumentClick(elementRef, function (e) {
     // case 1: if click an trigger and the trigger type is hover, ignore it
     // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
+    // case 3: if click on trigger and the trigger type is focus, do nothing 
     var trigger = dropdown.get('trigger');
+    if (trigger === 'focus') return;
     var isHover = trigger === 'hover';
 
     if (isHover || trigger === 'contextmenu') {