@king-design/react 2.0.5 → 2.0.7

package/__tests__/index.ts

@@ -15,7 +15,7 @@ testsContext.keys().forEach(testsContext);
 
 // const reactReq = require.context('~/components/', true, /^((?!(affix|code|layout)).)*\/demos\/.*react\.tsx$/);
 const reactReq = require.context('~/components/', true, /^((?!(affix|code)).)*\/demos\/.*react\.tsx$/);
-// const reactReq = require.context('~/components/', true, /button\/demos\/.*react\.tsx$/);
+// const reactReq = require.context('~/components/', true, /layout\/demos\/.*react\.tsx$/);
 
 describe('React Demos', () => {
     afterEach(() => unmount());
@@ -41,7 +41,7 @@ describe('React Demos', () => {
     testDemos(reactReq, async (Demo) => {
         const [instance, element] = mount(wrap(Demo as any));
         await wait(100);
-        // FIXME: I don't why the width of `autoWidth` input is an unexpected value
+        // FIXME: I don't know why the width of `autoWidth` input is an unexpected value
         // while we run test on Github Actions.
         const innerHTML = element.innerHTML.replace(/(\<input.*?style="width: )(?:.*?)(px;")/g, '$1$2');
         expect(innerHTML).to.matchSnapshot();

package/__tests__/karma.conf.js

@@ -16,7 +16,12 @@ module.exports = function (config) {
         customLaunchers: {
             'MyChromeHeadless': {
                 base: 'ChromeHeadless',
-                flags: ['--window-size=1920,1080', '--force-device-scale-factor=1'],
+                flags: [
+                    '--window-size=1920,1080',
+                    '--force-device-scale-factor=1',
+                    '--disable-gpu',
+                    '--no-sandbox',
+                ],
             }
         },
         frameworks: ['webpack', 'mocha', 'sinon-chai', 'snapshot', 'mocha-snapshot'],

package/components/datepicker/time.d.ts

@@ -14,7 +14,7 @@ declare type Value = {
 };
 export declare class DatepickerTime extends Component<DatepickerTimeProps> {
     static template: string | import("intact").Template<any>;
-    value: import("../../hooks/useState").State<Value | null>;
+    value: import("../../hooks/useState").State<Value>;
     disabled: {
         disableSeconds: import("../../hooks/useState").State<boolean>;
         disableMinutes: import("../../hooks/useState").State<boolean>;

package/components/datepicker/time.js

@@ -25,7 +25,7 @@ export var DatepickerTime = /*#__PURE__*/function (_Component) {
     }
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
-    _this.value = useState(null);
+    _this.value = useState(defaultValue);
     _this.disabled = useDisable(_assertThisInitialized(_this));
     return _this;
   }

package/components/dialog/index.js

@@ -15,7 +15,7 @@ export var BaseDialog = /*#__PURE__*/function (_BaseDialog2) {
     }
 
     if ($vNode === void 0) {
-      $vNode = null;
+      $vNode = createVNode(BaseDialog);
     }
 
     if ($SVG === void 0) {
@@ -38,13 +38,14 @@ export var BaseDialog = /*#__PURE__*/function (_BaseDialog2) {
   var _proto = BaseDialog.prototype;
 
   _proto.init = function init() {
-    _BaseDialog2.prototype.init.call(this);
+    _BaseDialog2.prototype.init.call(this); // @ts-ignore
 
-    usePosition(this.dialogRef);
 
-    if (this.$vNode) {
+    if (this.$vNode.tag !== BaseDialog) {
       this.useAsComponent = true;
     }
+
+    usePosition(this.dialogRef);
   };
 
   _proto.show = function show() {
@@ -68,7 +69,7 @@ export var BaseDialog = /*#__PURE__*/function (_BaseDialog2) {
 
       _this2.$init(null);
 
-      var vNode = _this2.$vNode = createVNode(BaseDialog);
+      var vNode = _this2.$vNode;
       vNode.children = _this2;
 
       _this2.$render(null, vNode, document.body, null, mountedQueue);

package/components/dialog/staticMethods.d.ts

@@ -5,6 +5,7 @@ export interface AlertDialogProps extends DialogProps {
     type?: 'success' | 'warning' | 'error' | 'confirm';
     hideIcon?: boolean;
     hideFooter?: boolean;
+    ref?: (i: Dialog) => void;
 }
 export declare type StaticMethod = (options?: AlertDialogProps) => Promise<void>;
 export declare function addStaticMethods(Component: typeof Dialog): void;

package/components/dialog/staticMethods.js

@@ -29,9 +29,10 @@ export function addStaticMethods(Component) {
       options = {};
     }
 
+    var dialog = new AlertDialog(options);
+    dialog.show();
+    if (options.ref) options.ref(dialog);
     return new _Promise(function (resolve, reject) {
-      var dialog = new AlertDialog(options, null, false, [], null);
-      dialog.show();
       dialog.on('ok', function () {
         resolve();
       });

package/components/drawer/styles.js

@@ -21,7 +21,7 @@ setDefault(function () {
   }).drawer;
 });
 export function makeStyles(overlay) {
-  return /*#__PURE__*/css("box-shadow:none;border-radius:0;position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.k-drawer-content{transition:transform ", drawer.transition, ";}}.k-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.k-dialog-body{flex-grow:1;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
+  return /*#__PURE__*/css("box-shadow:none;border-radius:0;position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.k-drawer-content{transition:transform ", drawer.transition, ";}}.k-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.k-dialog-body{flex-grow:1;overflow:auto;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
     var positionValue = '';
     var transformValue = '';
     placements.forEach(function (p) {

package/components/menu/index.spec.js

@@ -1,8 +1,13 @@
+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 _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import { Component } from 'intact-react';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Menu, MenuItem } from './';
 describe('Menu', function () {
   afterEach(function () {
     return unmount();
@@ -220,4 +225,61 @@ describe('Menu', function () {
       }
     }, _callee5);
   })));
+  it('expand when set selectedKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, instance, expandedKeys;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context6;
+
+                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(_context6 = [this]).call(_context6, args)) || this;
+                _this.Menu = Menu;
+                _this.MenuItem = MenuItem;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  expandedKeys: [],
+                  selectedKey: '1-3',
+                  list: ['1-1', '1-2']
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Menu = this.Menu;\n                var MenuItem = this.MenuItem;\n                <Menu\n                    v-model:expandedKeys=\"expandedKeys\"\n                    v-model:selectedKey=\"selectedKey\"\n                >\n                    <MenuItem key=\"1\">\n                        <Menu>\n                            <MenuItem v-for={this.get('list')} key={$value}>{$value}</MenuItem>\n                        </Menu>\n                    </MenuItem>\n                </Menu>\n            ";
+            _mount6 = mount(Demo), instance = _mount6[0];
+            _context7.next = 5;
+            return wait();
+
+          case 5:
+            instance.set('list', ['1-1', '1-2', '1-3']);
+            _context7.next = 8;
+            return wait();
+
+          case 8:
+            expandedKeys = instance.get('expandedKeys');
+            expect(_includesInstanceProperty(expandedKeys).call(expandedKeys, '1')).to.be.true;
+
+          case 10:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee6);
+  })));
 });

package/components/menu/item.js

@@ -9,7 +9,7 @@ import { useExpanded } from './useExpanded';
 import { useDropdown } from './useDropdown';
 import { useRouter, navigate } from '../../hooks/useRouter';
 import { useRecordItem } from '../../hooks/useRecordComponent';
-import { MENU_RECORD_KEY } from './useHighlight';
+import { MENU_RECORD_KEY, useHighlightItem } from './useHighlight';
 var typeDefs = {
   key: {
     type: [String, Number],
@@ -47,6 +47,7 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
   _proto.init = function init() {
     provide(MENU_ITEM, this);
     useRecordItem(MENU_RECORD_KEY);
+    useHighlightItem();
   };
 
   _proto.onClick = function onClick(hasSubMenu, e) {

package/components/menu/useHighlight.d.ts

@@ -4,4 +4,6 @@ export declare function useHighlight(): {
     isHighlighted: (key: Key) => boolean;
     select: (key: Key) => void;
     isSelected: (key: Key) => boolean;
+    updateStatus: (newValue: Key | undefined) => void;
 };
+export declare function useHighlightItem(): void;

package/components/menu/useHighlight.js

@@ -1,7 +1,7 @@
 import _Set from "@babel/runtime-corejs3/core-js/set";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
-import { useInstance } from 'intact-react';
+import { useInstance, onMounted } from 'intact-react';
 import { useRecordParent } from '../../hooks/useRecordComponent';
 import { inArray } from '../table/useChecked';
 import { useState } from '../../hooks/useState';
@@ -64,6 +64,17 @@ export function useHighlight() {
   return {
     isHighlighted: isHighlighted,
     select: select,
-    isSelected: isSelected
+    isSelected: isSelected,
+    updateStatus: updateStatus
   };
+}
+export function useHighlightItem() {
+  var instance = useInstance();
+  onMounted(function () {
+    if (instance.rootMenu.get('selectedKey') == instance.get('key')) {
+      var _instance$rootMenu$hi;
+
+      (_instance$rootMenu$hi = instance.rootMenu.highlight) == null ? void 0 : _instance$rootMenu$hi.updateStatus(instance.get('key'));
+    }
+  });
 }

package/components/portal.d.ts

@@ -8,11 +8,8 @@ export declare class Portal<T extends PortalProps = PortalProps> extends Compone
     static typeDefs: Required<TypeDefs<PortalProps>>;
     private container;
     private dialog;
-    private portal;
-    private rootPortal;
     mountedQueue?: Function[];
     mountedDone?: boolean;
-    init(): void;
     $render(lastVNode: VNodeComponentClass<this> | null, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[]): void;
     $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null): void;

package/components/portal.js

@@ -1,12 +1,11 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, createCommentVNode, createTextVNode, mount, patch, remove, provide, inject, callAll } from 'intact-react';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, callAll } from 'intact-react';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
 var typeDefs = {
   container: [String, Function]
 };
-var PORTAL = 'Portal';
 export var Portal = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Portal, _Component);
 
@@ -22,8 +21,6 @@ export var Portal = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.container = null;
     _this.dialog = inject(DIALOG, null);
-    _this.portal = inject(PORTAL, null);
-    _this.rootPortal = inject(PORTAL, null);
     _this.mountedQueue = void 0;
     _this.mountedDone = void 0;
     return _this;
@@ -39,55 +36,24 @@ export var Portal = /*#__PURE__*/function (_Component) {
 
   var _proto = Portal.prototype;
 
-  _proto.init = function init() {
-    if (!this.rootPortal) {
-      provide(PORTAL, this);
-    }
-  };
-
   _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue) {
     var _this2 = this;
 
-    var nextProps = nextVNode.props;
-    var $cid = Component.$cid;
-    var isVue = $cid === 'IntactVueNext' || $cid === 'IntactVue'; // add mount method to queue to let sub-component be appended after parent-component
-
-    if (!isVue) {
-      this.initContainer(nextProps.container, parentDom, anchor);
-      var rootPortal;
-      var shouldTrigger = false;
-
-      if (!this.rootPortal) {
-        rootPortal = this;
-        rootPortal.mountedQueue = [];
-        shouldTrigger = true;
-      } else {
-        rootPortal = this.rootPortal;
+    mountedQueue.push(function () {
+      var nextProps = nextVNode.props;
+      var parentDom = _this2.$lastInput.dom.parentElement;
+      /**
+       * initialize a new mountedQueue to place the callbacks of sub-components to it,
+       * so that we can call them before the sibling components of the Portal
+       */
 
-        if (rootPortal.mountedDone) {
-          shouldTrigger = true;
-          rootPortal.mountedQueue = [];
-        }
-      }
+      var mountedQueue = [];
 
-      var selfMountedQueue = rootPortal.mountedQueue;
-      selfMountedQueue.push(function () {
-        mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue);
-      });
+      _this2.initContainer(nextProps.container, parentDom, anchor);
 
-      if (shouldTrigger) {
-        callAll(selfMountedQueue);
-        rootPortal.mountedDone = true;
-      }
-    } else {
-      mountedQueue.push(function () {
-        var parentDom = _this2.$lastInput.dom.parentElement;
-
-        _this2.initContainer(nextProps.container, parentDom, anchor);
-
-        mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue);
-      });
-    }
+      mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue);
+      callAll(mountedQueue);
+    });
 
     _Component.prototype.$render.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue);
   };

package/components/select/styles.js

@@ -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;}.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), ";&.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) {
     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/tooltip/content.vdt.js

@@ -50,7 +50,7 @@ export default function ($props, $blocks, $__proto__) {
 
       return [children, showArrow ? _$ce(2, 'i', null, 1, _$cn((_$cn2 = {
         "k-tooltip-arrow": true
-      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, null, arrowRef) : undefined, confirm ? _$ce(2, 'div', (_$blocks['buttons'] = function ($super) {
+      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined, confirm ? _$ce(2, 'div', (_$blocks['buttons'] = function ($super) {
         return [_$cc(Button, {
           'type': 'primary',
           'ev-click': this.ok,
@@ -69,7 +69,7 @@ export default function ($props, $blocks, $__proto__) {
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['buttons'](_$no)), 0, 'k-tooltip-buttons') : undefined];
+      }, __$blocks['buttons'](_$no)), 0, 'k-tooltip-buttons', null, 'tooltip-buttons') : undefined];
     }, __$blocks['children'] = function ($super, data) {
       var block = $blocks['children'];
 

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.5
+ * @king-design v2.0.7
  *
  * 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.5";
+export declare const version = "2.0.7";
 
 
 export {normalize} from 'intact-react';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.5
+ * @king-design v2.0.7
  *
  * 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.5';
+export var version = '2.0.7';
 /* generate end */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "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.6",
+    "intact-react": "3.0.8",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",