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

package/__tests__/components/drawer.spec.tsx

@@ -1,14 +1,21 @@
-import React, {createRef} from 'react';
+import React, {createRef, useState} from 'react';
 import * as ReactDOM from 'react-dom';
 import {Drawer, Card, Button} from '../../';
 import {Component} from 'intact-react';
 import {getElement, wait, dispatchEvent} from '../../../../test/utils';
 
 describe('Drawer', () => {
-    it('should render react element correctly', async () => {
-        const container = document.createElement('div');
+    let container: HTMLDivElement;
+    beforeEach(() => {
+        container = document.createElement('div');
         document.body.appendChild(container);
+    });
+    afterEach(() => {
+        ReactDOM.unmountComponentAtNode(container);
+        document.body.removeChild(container);
+    });
 
+    it('should render react element correctly', async () => {
         class Test extends Component {
             static template = `<div ref="a">test</div>`;
             mounted() {
@@ -16,23 +23,20 @@ describe('Drawer', () => {
             }
         }
 
-        ReactDOM.render(
-            <Card>
-                <Drawer>
+        function App() {
+            const [show, setShow] = useState(false);
+            return <Card>
+                <div onClick={() => setShow(true)}>show</div>
+                <Drawer value={show} mode="destroy">
                     <div><Test /></div>
                 </Drawer>
-            </Card>,
-            container
-        );
+            </Card>;
+        }
 
-        ReactDOM.unmountComponentAtNode(container);
-        document.body.removeChild(container);
+        ReactDOM.render(<App />, container);
     });
 
     it('should handle event correctly', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-
         const click1 = sinon.spy(() => console.log(1));
         const click2 = sinon.spy(() => console.log(2));
 
@@ -62,8 +66,5 @@ describe('Drawer', () => {
         dispatchEvent(element2, 'click');
         await wait();
         expect(click2.callCount).to.eql(1);
-
-        // ReactDOM.unmountComponentAtNode(container);
-        // document.body.removeChild(container);
     });
 });

package/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/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-react';
+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/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/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') {

package/components/dropdown/index.spec.js

@@ -483,4 +483,62 @@ describe('Dropdown', function () {
       }
     }, _callee9);
   })));
+  it('trigger: focus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount9, instance;
+
+    return _regeneratorRuntime.wrap(function _callee10$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context13;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+                _this4.Dropdown = Dropdown;
+                _this4.DropdownItem = DropdownItem;
+                _this4.DropdownMenu = DropdownMenu;
+                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            ";
+            _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
+
+            dispatchEvent(document, 'click');
+            _context14.next = 10;
+            return wait(500);
+
+          case 10:
+            expect(getElement('.k-dropdown-menu')).to.be.exist;
+            dispatchEvent(instance.refs.trigger, 'focusout');
+            _context14.next = 14;
+            return wait(700);
+
+          case 14:
+            expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+
+          case 15:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee10);
+  })));
 });

package/components/form/methods.d.ts

@@ -1,4 +1,5 @@
-export declare type Method = (value: any, param: any) => boolean | string;
+export declare type MethodReturn = boolean | string;
+export declare type Method = (value: any, param: any) => MethodReturn | Promise<MethodReturn>;
 export declare type Message = string | ((value: any, param: any) => string);
 export declare type ClassName = string | ((value: any, param: any) => string);
 export declare const methods: Record<string, Method>;

package/components/portal.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject } from 'intact-react';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
+import { BaseDialog } from './dialog/base';
 var typeDefs = {
   container: [String, Function]
 };
@@ -96,8 +97,13 @@ export var Portal = /*#__PURE__*/function (_Component) {
     }
 
     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
        */
@@ -108,6 +114,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
       // } else {
       // this.container = document.body;
       // }
+
     }
   };
 

package/components/select/styles.js

@@ -94,7 +94,7 @@ var defaults = deepDefaults({
   },
   tag: {
     margin: "3px 8px 3px 0",
-    padding: "5px 8px",
+    padding: "3px 8px",
 
     get borderRadius() {
       return theme.borderRadius;
@@ -188,7 +188,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";line-height:1;}.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), ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";width:100%;&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";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, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;

package/components/table/table.js

@@ -106,7 +106,7 @@ export var Table = /*#__PURE__*/function (_Component) {
     _this.selected = useSelected();
     _this.resetRowStatus = useRestRowStatus(_this.disableRow.getAllKeys);
     _this.draggable = useDraggable();
-    _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition, _this.width.tableWidth);
+    _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition);
     return _this;
   }
 

package/components/table/useResizeObserver.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'intact-react';
+export declare function useResizeObserver(elementRef: RefObject<HTMLElement>, callback: Function): void;

package/components/table/useResizeObserver.js

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

package/components/table/useStickyScrollbar.d.ts

@@ -2,7 +2,7 @@ import { RefObject } from 'intact-react';
 import { ShouldFixParam } from '../affix';
 import { State } from '../../hooks/useState';
 import type { useScroll } from './useScroll';
-export declare function useStickyScrollbar(elementRef: RefObject<HTMLElement>, { scrollRef, callbacks }: ReturnType<typeof useScroll>, tableRef: RefObject<HTMLElement>, tableScroll: (scrollLeft: number) => void, tableWidth: State<number | null>): {
+export declare function useStickyScrollbar(elementRef: RefObject<HTMLElement>, { scrollRef, callbacks }: ReturnType<typeof useScroll>, tableRef: RefObject<HTMLElement>, tableScroll: (scrollLeft: number) => void): {
     shouldStickScrollbar: ({ offsetBottom, viewportHeight }: ShouldFixParam) => boolean;
     stick: State<number | null>;
     style: State<Record<string, string> | null>;

package/components/table/useStickyScrollbar.js

@@ -1,8 +1,9 @@
 import { createRef, useInstance, onMounted, nextTick } from 'intact-react';
-import { useState, watchState } from '../../hooks/useState';
+import { useState } from '../../hooks/useState';
 import { isStringOrNumber, isNull } from 'intact-shared';
 import { debounce } from '../utils';
-export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll, tableWidth) {
+import { useResizeObserver } from './useResizeObserver';
+export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   var scrollRef = _ref.scrollRef,
       callbacks = _ref.callbacks;
   var instance = useInstance();
@@ -13,13 +14,7 @@ export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll, tabl
   instance.on('$receive:stickScrollbar', function (v) {
     stick.set(v === true ? 0 : isStringOrNumber(v) ? +v : null);
   });
-  watchState(tableWidth, function (v) {
-    if (v) {
-      tableActualWidth.set(v + 'px');
-    } else {
-      setTableActualWidth();
-    }
-  });
+  useResizeObserver(scrollRef, setTableActualWidth);
   onMounted(function () {
     setTableActualWidth();
   });

package/components/table/useWidth.js

@@ -1,10 +1,9 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
-import { useInstance, onMounted, onBeforeUnmount, createRef } from 'intact-react';
-import ResizeObserver from 'resize-observer-polyfill';
+import { useInstance, onMounted, createRef } from 'intact-react';
 import { useState } from '../../hooks/useState';
-import { debounce } from '../utils';
 import { scrollbarWidth } from '../position';
+import { useResizeObserver } from './useResizeObserver';
 var hasLocalStorage = typeof localStorage !== 'undefined';
 export function useWidth(scrollRef, getColumns) {
   var instance = useInstance();
@@ -12,20 +11,11 @@ export function useWidth(scrollRef, getColumns) {
   var widthMap = useState({});
   var tableWidth = useState(null);
   initWidthFromStore();
-  var ro;
   onMounted(function () {
-    checkTableWidth(true); // use debounce instead of throttle, because if there is
-    // transition on parent container, the width is weired
-    // #342
-
-    ro = new ResizeObserver(debounce(function () {
-      if (instance.$unmounted) return;
-      checkTableWidth(false);
-    }, 100, true));
-    ro.observe(scrollRef.value);
+    return checkTableWidth(true);
   });
-  onBeforeUnmount(function () {
-    ro.disconnect();
+  useResizeObserver(scrollRef, function () {
+    return checkTableWidth(false);
   }); // if exist widthStoreKey, we get the default width from localStorage
 
   function initWidthFromStore() {

package/components/timepicker/index.d.ts

@@ -3,6 +3,7 @@ import { TimepickerProps, TimepickerEvents, TimepickerBlocks } from './constants
 import { SelectPicker } from './selectPicker';
 export type { TimepickerProps, TimepickerEvents, TimepickerBlocks };
 export declare class Timepicker<Multipe extends boolean = false, Range extends boolean = false> extends Component<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks<Range>> {
+    static $doubleVNodes: boolean;
     static template(this: Timepicker): import("intact").VNode<typeof SelectPicker>;
     static typeDefs: Required<import("intact").TypeDefs<TimepickerProps<boolean, boolean>>>;
 }

package/components/timepicker/index.js

@@ -35,4 +35,5 @@ export var Timepicker = /*#__PURE__*/function (_Component) {
 // export const Timepicker: typeof _Timepicker = functionalWrapper ?
 // functionalWrapper(Wrapper) : Wrapper;
 
+Timepicker.$doubleVNodes = true;
 Timepicker.typeDefs = typeDefs;

package/hooks/useDocumentClick.js

@@ -1,12 +1,38 @@
 import { onMounted, onUnmounted } from 'intact-react';
-import { isFunction } from 'intact-shared';
+import { isFunction } from 'intact-shared'; // @reference: Vue3.0
+
+var getNow = Date.now; // Determine what event timestamp the browser is using. Annoyingly, the
+// timestamp can either be hi-res (relative to page load) or low-res
+// (relative to UNIX epoch), so in order to compare time we have to use the
+// same timestamp type when saving the flush timestamp.
+
+if (getNow() > document.createEvent('Event').timeStamp) {
+  // if the low-res timestamp which is bigger than the event timestamp
+  // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
+  // and we need to use the hi-res version for event listeners as well.
+  getNow = function getNow() {
+    return performance.now();
+  };
+} // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
+// and does not fire microtasks in between event propagation, so safe to exclude.
+
+
+var ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
+var skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
 export function useDocumentClick(ref, callback, manual) {
   if (manual === void 0) {
     manual = false;
   }
 
   var onDocumentClick = function onDocumentClick(e) {
-    if (e._ignore) return;
+    if (e._ignore) return; // https://github.com/ksc-fe/kpc/issues/788
+
+    var timeStamp = e.timeStamp || getNow();
+
+    if (!skipTimestampCheck && onDocumentClick.timeStamp > timeStamp + 1) {
+      return;
+    }
+
     var target = e.target;
     var elem = isFunction(ref) ? ref() : ref.value;
     if (containsOrEqual(elem, target)) return;
@@ -14,6 +40,7 @@ export function useDocumentClick(ref, callback, manual) {
   };
 
   var add = function add() {
+    onDocumentClick.timeStamp = getNow();
     document.addEventListener('click', onDocumentClick);
     document.addEventListener('contextmenu', onDocumentClick);
   };

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.11
+ * @king-design v2.0.13-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,7 +57,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.11";
+export declare const version = "2.0.13-beta.0";
 
 
 export {normalize} from 'intact-react';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.11
+ * @king-design v2.0.13-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,7 +59,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.11';
+export var version = '2.0.13-beta.0';
 /* generate end */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "2.0.11",
+  "version": "2.0.13-beta.0",
   "description": "King-Design UI components for React.",
   "keywords": [
     "component",
@@ -37,7 +37,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-react": "3.0.12",
+    "intact-react": "3.0.13",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",