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

package/es/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/es/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/es/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';
 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/es/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/es/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/es/components/table/useResizeObserver.d.ts

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

package/es/components/table/useResizeObserver.js

@@ -0,0 +1,20 @@
+import { onMounted, onBeforeUnmount, useInstance } from "intact";
+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/es/components/table/useStickyScrollbar.d.ts

@@ -2,7 +2,7 @@ import { RefObject } from 'intact';
 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/es/components/table/useStickyScrollbar.js

@@ -1,8 +1,9 @@
 import { createRef, useInstance, onMounted, nextTick } from 'intact';
-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/es/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';
-import ResizeObserver from 'resize-observer-polyfill';
+import { useInstance, onMounted, createRef } from 'intact';
 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/es/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/es/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/es/hooks/useDocumentClick.js

@@ -1,12 +1,38 @@
 import { onMounted, onUnmounted } from 'intact';
-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/es/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,4 +57,4 @@ 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";

package/es/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,5 +59,5 @@ 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 */

package/es/packages/kpc-react/__tests__/components/drawer.spec.js

@@ -1,20 +1,41 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import React from 'react';
+import React, { useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { Drawer, Card, Button } from '../../';
 import { Component } from 'intact-react';
 import { wait, dispatchEvent } from '../../../../test/utils';
 describe('Drawer', function () {
+  var container;
+  beforeEach(function () {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+  afterEach(function () {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
   it('should render react element correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var container, Test;
+    var Test, App;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            container = document.createElement('div');
-            document.body.appendChild(container);
+            App = function _App() {
+              var _useState = useState(false),
+                  show = _useState[0],
+                  setShow = _useState[1];
+
+              return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+                onClick: function onClick() {
+                  return setShow(true);
+                }
+              }, "show"), /*#__PURE__*/React.createElement(Drawer, {
+                value: show,
+                mode: "destroy"
+              }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Test, null))));
+            };
 
             Test = /*#__PURE__*/function (_Component) {
               _inheritsLoose(Test, _Component);
@@ -33,11 +54,9 @@ describe('Drawer', function () {
             }(Component);
 
             Test.template = "<div ref=\"a\">test</div>";
-            ReactDOM.render( /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Drawer, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Test, null)))), container);
-            ReactDOM.unmountComponentAtNode(container);
-            document.body.removeChild(container);
+            ReactDOM.render( /*#__PURE__*/React.createElement(App, null), container);
 
-          case 7:
+          case 4:
           case "end":
             return _context.stop();
         }
@@ -45,14 +64,12 @@ describe('Drawer', function () {
     }, _callee);
   })));
   it('should handle event correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var container, click1, click2, _document$querySelect, element1, element2;
+    var click1, click2, _document$querySelect, element1, element2;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            container = document.createElement('div');
-            document.body.appendChild(container);
             click1 = sinon.spy(function () {
               return console.log(1);
             });
@@ -83,20 +100,19 @@ describe('Drawer', function () {
             }, "click")))), container);
             _document$querySelect = document.querySelectorAll('.click'), element1 = _document$querySelect[0], element2 = _document$querySelect[1];
             dispatchEvent(element1, 'click');
-            _context2.next = 9;
+            _context2.next = 7;
             return wait();
 
-          case 9:
+          case 7:
             expect(click1.callCount).to.eql(1);
             dispatchEvent(element2, 'click');
-            _context2.next = 13;
+            _context2.next = 11;
             return wait();
 
-          case 13:
-            expect(click2.callCount).to.eql(1); // ReactDOM.unmountComponentAtNode(container);
-            // document.body.removeChild(container);
+          case 11:
+            expect(click2.callCount).to.eql(1);
 
-          case 14:
+          case 12:
           case "end":
             return _context2.stop();
         }

package/es/site/data/components/dropdown/demos/trigger/react.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import React from 'react';
-import { Dropdown, DropdownMenu, DropdownItem, Button, Icon } from '@king-design/react';
+import { Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input } from '@king-design/react';
 import './index.styl';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
@@ -23,7 +23,11 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       type: "primary"
     }, "click ", /*#__PURE__*/React.createElement(Icon, {
       className: "ion-ios-arrow-down"
-    })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))));
+    })), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))), /*#__PURE__*/React.createElement(Dropdown, {
+      trigger: "focus"
+    }, /*#__PURE__*/React.createElement(Input, {
+      placeholder: "focus"
+    }), /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, null, "item 1"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 2"), /*#__PURE__*/React.createElement(DropdownItem, null, "item 3"))));
   };
 
   return Demo;

package/es/site/data/components/select/demos/format/react.js

@@ -95,7 +95,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
             "verticalAlign": "middle"
           }
         }), /*#__PURE__*/React.createElement("span", {
-          className: "c-middle"
+          className: "middle"
         }, value));
       }
     }, _mapInstanceProperty(_context3 = ['ion-chatbubble', 'ion-person-stalker', 'ion-beer', 'ion-camera']).call(_context3, function ($value, $key) {

package/es/site/data/components/tooltip/demos/trigger/react.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import React from 'react';
-import { Tooltip, ButtonGroup, Button } from '@king-design/react';
+import { Tooltip, ButtonGroup, Button, Input } from '@king-design/react';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Demo, _React$Component);
@@ -20,7 +20,12 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Button, null, "click")), /*#__PURE__*/React.createElement(Tooltip, {
       hoverable: true,
       content: "the text can be hovered"
-    }, /*#__PURE__*/React.createElement(Button, null, "hoverable")));
+    }, /*#__PURE__*/React.createElement(Button, null, "hoverable")), /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: "focus",
+      content: "foucs"
+    }, /*#__PURE__*/React.createElement(Input, {
+      placeholder: "focus"
+    })));
   };
 
   return Demo;

package/hooks/useDocumentClick.ts

@@ -5,13 +5,40 @@ export interface IgnoreClickEvent extends MouseEvent {
     _ignore?: boolean
 }
 
+type FnWithTime = {
+    (e: IgnoreClickEvent): void;
+    timeStamp?: number;
+}
+
+// @reference: Vue3.0
+let 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 = () => performance.now();
+}
+// #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
+// and does not fire microtasks in between event propagation, so safe to exclude.
+const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
+const skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
+
 export function useDocumentClick(
     ref: RefObject<Element> | (() => Element),
     callback: (e: MouseEvent) => void,
     manual: boolean = false
 ) {
-    const onDocumentClick = (e: IgnoreClickEvent) => {
+    const onDocumentClick: FnWithTime = (e: IgnoreClickEvent) => {
         if (e._ignore) return;
+        // https://github.com/ksc-fe/kpc/issues/788
+        const timeStamp = e.timeStamp || getNow();
+        if (!skipTimestampCheck && onDocumentClick.timeStamp! > timeStamp + 1) {
+            return;
+        }
 
         const target = e.target as Element;
         const elem = isFunction(ref) ? ref() : ref.value!;
@@ -21,6 +48,7 @@ export function useDocumentClick(
     };
 
     const add = () => {
+        onDocumentClick.timeStamp = getNow();
         document.addEventListener('click', onDocumentClick);
         document.addEventListener('contextmenu', onDocumentClick);
     };

package/index.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
@@ -62,6 +62,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '2.0.11';
+export const version = '2.0.13-beta.0';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "2.0.11",
+  "version": "2.0.13-beta.0",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "scripts": {
@@ -116,7 +116,7 @@
     "highlight.js": "^10.4.1",
     "history": "^5.0.0",
     "html-webpack-plugin": "5.3.1",
-    "intact-react": "^3.0.12",
+    "intact-react": "^3.0.13",
     "istanbul-instrumenter-loader": "^3.0.0",
     "js-yaml": "^4.1.0",
     "karma": "^6.3.2",
@@ -178,7 +178,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact": "^3.0.12",
+    "intact": "^3.0.13",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",