@king-design/react 3.1.2 → 3.1.4-beta.0

package/__tests__/components/cascader.spec.tsx

@@ -17,13 +17,12 @@ describe('Cascader', () => {
 
     it('should hide all menu on selected', async () => {
         function App() {
-            const [value, setValue] = useState<string[][]>([]);
+            const [value, setValue] = useState<string[]>([]);
             return (
                 <div>
                     <Cascader
                         data={[{value: 'a', label: 'a', children: [{value: 'b', label: 'b'}]}]}
                         value={value}
-                        multiple
                         filterable
                         onChangeValue={(v) => {
                             setValue(v!);

package/components/button/index.vdt.js

@@ -60,7 +60,7 @@ export default function ($props, $blocks, $__proto__) {
     });
   }
 
-  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(type)] = type !== 'default', _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = true, _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide)] = true, _classNameObj);
 
   var loadingIcon = _$cc(Icon, {
     'className': _$cn("ion-load-c " + k + "-icon-loading"),

package/components/button/styles.js

@@ -242,16 +242,16 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
   return cx(
   /*#__PURE__*/
   // extract static styles to individual css method for performance
-  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.", k, "-icon{color:inherit;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.", k, "-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
+  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.", k, "-icon{color:inherit;}&.", k, "-default,&.", k, "-none,&.", k, "-flat{.", k, "-icon{color:", theme.color.lightBlack, ";}&:hover{.", k, "-icon{color:inherit;}}}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.", k, "-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
     return /*#__PURE__*/css("&.", k, "-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.", k, "-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.", k, "-none,&.", k, "-link,&.", k, "-flat{background:transparent;&,&:hover{border:none;}&.", k, "-active{color:", theme.color.primary, ";}}&.", k, "-none:hover{background:", button.none.hoverBgColor, ";}&.", k, "-flat{background:", button.none.hoverBgColor, ";}&.", k, "-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.", k, "-none.", k, "-disabled,&.", k, "-link.", k, "-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.", k, "-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.", k, "-none,&.", k, "-link,&.", k, "-flat{background:transparent;&,&:hover{border:none;}&.", k, "-active{color:", theme.color.primary, ";}}&.", k, "-none:hover{background:", button.none.hoverBgColor, ";}&.", k, "-flat{background:", button.none.hoverBgColor, ";}&.", k, "-disabled{.", k, "-icon{color:inherit;}&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.", k, "-none.", k, "-disabled,&.", k, "-link.", k, "-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.", k, "-btn-icon{width:", styles.height, ";}}");
   }), "&.", k, "-btn-icon{width:", button.height, ";padding:0;.", k, "-icon{margin:0;}}&.", k, "-fluid{width:100%;padding:0;}&.", k, "-circle{border-radius:calc(", button.large.height, " / 2);}&.", k, "-loading{", _mapInstanceProperty(types).call(types, function (type) {
     var styles = button[type];
     return /*#__PURE__*/css("&.", k, "-", type, "{&,&:hover{background:", palette(styles.bgColor, -2), ";color:", palette(styles.color, -2), ";border-color:", palette(styles.borderColor, -2), ";}}");
-  }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";.", k, "-icon{color:inherit;}&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
     var _button$type = button[type],
         ghostColor = _button$type.ghostColor,
         borderColor = _button$type.borderColor;

package/components/collapse/item.vdt.js

@@ -27,7 +27,7 @@ export default function ($props, $blocks, $__proto__) {
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-collapse-item"] = true, _classNameObj[makeItemStyles(k)] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = isActive, _classNameObj[k + "-disabled"] = disabled, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [_$ce(2, 'div', [(_$blocks['title'] = function ($super) {
+  }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', (_$blocks['title'] = function ($super) {
     return title;
   }, __$blocks['title'] = function ($super, data) {
     var block = $blocks['title'];
@@ -37,11 +37,11 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['title'](_$no)), _$cc(Icon, {
+  }, __$blocks['title'](_$no)), 0, _$cn(k + "-collapse-title-wrapper")), _$cc(Icon, {
     'className': _$cn((_$cn2 = {}, _$cn2[k + "-collapse-arrow"] = true, _$cn2[k + "-icon-right"] = true, _$cn2)),
     'hoverable': true,
     'disabled': disabled
-  })], 0, _$cn(k + "-collapse-title"), {
+  })], 4, _$cn(k + "-collapse-title"), {
     'ev-click': this.toggle
   }), _$cc(Transition, _extends({
     'show': isActive

package/components/collapse/styles.js

@@ -9,7 +9,6 @@ var defaults = {
   },
 
   fontSize: '12px',
-  titleMarginRight: '8px',
   borderPadding: '0 24px',
   collBorder: '1px solid #eee',
 
@@ -19,7 +18,8 @@ var defaults = {
 
   item: {
     borderBottom: '1px solid #e5e5e5',
-    titleHeight: '40px'
+    titleHeight: '40px',
+    titleGap: '8px'
   }
 };
 var collapse;
@@ -31,9 +31,9 @@ setDefault(function () {
   makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{.", k, "-collapse-arrow{float:left;margin-right:", collapse.titleMarginRight, ";}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{>.", k, "-collapse-item>.", k, "-collapse-title{flex-direction:row-reverse;}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 });
 export var makeItemStyles = cache(function makeItemStyles(k) {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";display:flex;align-items:center;gap:", collapseItem.titleGap, ";.", k, "-collapse-title-wrapper{flex:1;}.", k, "-collapse-arrow{transition:transform ", collapse.transition, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
 });

package/components/diagram/index.d.ts

@@ -10,7 +10,7 @@ export * from './shapes/rectangle';
 export * from './shapes/square';
 export * from './shapes/text';
 export * from './shapes/line';
-declare const DDiamond: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
+declare const DDiamond: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
 export { DDiamond, DTriangle, DCylinder, DCloud };
 export * from './layouts/layout';
 export * from './layouts/circle';

package/components/dialog/index.spec.js

@@ -7,7 +7,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { var _context21; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context21 = Object.prototype.toString.call(o)).call(_context21, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { var _context23; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context23 = Object.prototype.toString.call(o)).call(_context23, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
@@ -732,6 +732,66 @@ describe('Dialog', function () {
         }
       }
     }, _callee14);
+  })));
+  it('should update position when change container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var Demo, _mount15, instance, element, dialogDom, style;
+
+    return _regeneratorRuntime.wrap(function _callee15$(_context22) {
+      while (1) {
+        switch (_context22.prev = _context22.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component7) {
+              _inheritsLoose(Demo, _Component7);
+
+              function Demo() {
+                var _context21;
+
+                var _this7;
+
+                for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                  args[_key7] = arguments[_key7];
+                }
+
+                _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
+                _this7.Dialog = Dialog;
+                return _this7;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  container: function container(parentDom) {
+                    return parentDom;
+                  }
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Dialog = this.Dialog;\n                <Dialog value={true} container={this.get('container')} ref=\"dialog\">test</Dialog>\n            ";
+            _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+            _context22.next = 5;
+            return wait();
+
+          case 5:
+            instance.set('container', undefined);
+            _context22.next = 8;
+            return wait();
+
+          case 8:
+            dialogDom = instance.refs.dialog.dialogRef.value;
+            style = dialogDom.style;
+            expect(style.left).not.eql('');
+            expect(style.top).not.eql(''); // should append to body
+
+            expect(dialogDom.closest('.k-dialog-wrapper').parentElement).to.eql(document.body);
+
+          case 13:
+          case "end":
+            return _context22.stop();
+        }
+      }
+    }, _callee15);
   }))); // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
   // const Test = {
   // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,

package/components/dialog/usePosition.js

@@ -5,6 +5,13 @@ export function usePosition(elementRef) {
   var instance = useInstance();
   instance.on(SHOW, center);
   instance.on('afterClose', onAfterLeave);
+  instance.watch('container', function () {
+    if (!instance.get('value')) return;
+    center();
+  }, {
+    presented: true,
+    inited: true
+  });
 
   function center() {
     position(elementRef.value, {

package/components/dropdown/usePosition.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { useInstance, findDomFromVNode } from 'intact-react';
 import { position } from '../position';
-import { noop } from 'intact-shared';
-import { isObject } from 'intact-shared';
+import { noop, isObject, isFunction } from 'intact-shared';
 import { isEqualObject } from '../utils';
 export function usePosition() {
   var instance = useInstance();
@@ -16,19 +15,23 @@ export function usePosition() {
   });
   ['of', 'position'].forEach(function (item) {
     instance.watch(item, function (newValue, oldValue) {
-      // return if object is the same
-      if (isObject(newValue) && isObject(oldValue) && // is not event object
-      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) {
-        return;
-      }
-
-      if (instance.get('value')) {
-        handle(noop);
-      }
+      if (!instance.get('value') || // return if object is the same
+      isObject(newValue) && isObject(oldValue) && // is not event object
+      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) return;
+      handle(noop);
     }, {
       presented: true,
       inited: true
     });
+  }); // watch container, it is not commonly used
+
+  instance.watch('container', function (newValue, oldValue) {
+    if (!instance.get('value') || // return if function is the same. Not rigorous!
+    isFunction(newValue) && isFunction(oldValue) && newValue.toString() === oldValue.toString()) return;
+    handle(noop);
+  }, {
+    presented: true,
+    inited: true
   }); // if the dropdown is nested, we must show child after parent has positioned
 
   function p(ofElement, parentFeedback) {

package/components/editable/styles.js

@@ -22,5 +22,5 @@ setDefault(function () {
 });
 export { editable };
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-wrapper{border:", editable.invalid.border, "!important;}}");
 });

package/components/message/message.d.ts

@@ -10,6 +10,7 @@ export declare class Message extends Component<MessageProps> {
     static template: string | import('intact-react').Template<any>;
     static typeDefs: Required<TypeDefs<MessageProps>>;
     static defaults: () => Partial<MessageProps>;
+    static classNamePrefix: string;
     static notice(content: Children | Partial<MessageProps>, duration?: number, type?: MessageProps['type']): void;
     static info(content: Children | Partial<MessageProps>, duration?: number): void;
     static error(content: Children | Partial<MessageProps>, duration?: number): void;

package/components/message/message.js

@@ -54,16 +54,6 @@ export var Message = /*#__PURE__*/function (_Component) {
       type = 'info';
     }
 
-    if (!messages) {
-      var container = document.createElement('div');
-      document.body.append(container);
-      render(h(Messages, {
-        ref: function ref(i) {
-          return messages = i;
-        }
-      }), container);
-    }
-
     if (isObject(content) && !content.tag) {
       content = _extends({}, content, {
         type: type,
@@ -78,6 +68,17 @@ export var Message = /*#__PURE__*/function (_Component) {
       };
     }
 
+    if (!messages) {
+      var container = document.createElement('div');
+      document.body.append(container);
+      render(h(Messages, {
+        ref: function ref(i) {
+          return messages = i;
+        },
+        classNamePrefix: Message.classNamePrefix
+      }), container);
+    }
+
     messages.notice(h(Message, content));
   };
 
@@ -108,5 +109,6 @@ export var Message = /*#__PURE__*/function (_Component) {
 Message.template = template;
 Message.typeDefs = typeDefs;
 Message.defaults = defaults;
+Message.classNamePrefix = void 0;
 
 __decorate([bind], Message.prototype, "close", null);

package/components/message/message.vdt.js

@@ -16,7 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       content = _this$get.content,
       children = _this$get.children,
       closable = _this$get.closable,
-      hideIcon = _this$get.hideIcon;
+      hideIcon = _this$get.hideIcon,
+      classNamePrefix = _this$get.classNamePrefix;
 
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-message"] = true, _classNameObj[k + "-" + type] = type, _classNameObj[makeMessageStyles(k)] = true, _classNameObj);

package/components/message/messages.d.ts

@@ -1,7 +1,11 @@
-import { Component, VNodeComponentClass } from 'intact-react';
+import { Component, VNodeComponentClass, TypeDefs } from 'intact-react';
 import type { Message } from './message';
+export interface MessagesProps {
+    classNamePrefix?: string;
+}
 export declare class Messages extends Component {
     static template: string | import('intact-react').Template<any>;
+    static typeDefs: Required<TypeDefs<MessagesProps>>;
     private messages;
     private config;
     notice(message: VNodeComponentClass<Message>): void;

package/components/message/messages.js

@@ -5,6 +5,9 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
 import { Component } from 'intact-react';
 import template from './messages.vdt';
 import { useConfigContext } from '../config';
+var typeDefs = {
+  classNamePrefix: String
+};
 export var Messages = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Messages, _Component);
 
@@ -48,4 +51,5 @@ export var Messages = /*#__PURE__*/function (_Component) {
 
   return Messages;
 }(Component);
-Messages.template = template;
+Messages.template = template;
+Messages.typeDefs = typeDefs;

package/components/message/messages.vdt.js

@@ -1,17 +1,23 @@
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, map as _$ma, className as _$cn } from 'intact-react';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, map as _$ma, className as _$cn } from 'intact-react';
 import { TransitionGroup, Transition } from 'intact-react';
 import { makeMessagesStyles } from './styles';
+import { ConfigProvider } from '../config';
 export default function ($props, $blocks, $__proto__) {
   var _$cn2;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-  var k = this.config.k;
-  return _$ce(2, 'div', _$cc(TransitionGroup, {
-    'children': _$ma(this.messages, function ($value, $key) {
-      return $value;
-    }, $this)
-  }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-messages"] = true, _$cn2[makeMessagesStyles(k)] = true, _$cn2)));
+  var k = this.get('classNamePrefix') || this.config.k;
+  return _$cc(ConfigProvider, {
+    'value': {
+      classNamePrefix: k
+    },
+    'children': _$ce(2, 'div', _$cc(TransitionGroup, {
+      'children': _$ma(this.messages, function ($value, $key) {
+        return $value;
+      }, $this)
+    }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-messages"] = true, _$cn2[makeMessagesStyles(k)] = true, _$cn2)))
+  });
 }
 ;

package/components/portal.js

@@ -1,6 +1,6 @@
 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, inject } from 'intact-react';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, unmount, removeVNodeDom } from 'intact-react';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
 import { BaseDialog } from './dialog/base';
@@ -51,7 +51,9 @@ export var Portal = /*#__PURE__*/function (_Component) {
     var nextProps = nextVNode.props;
     var fakeContainer = document.createDocumentFragment();
     (mountedQueue.priority || mountedQueue).push(function () {
-      var parentDom = _this2.$lastInput.dom.parentElement;
+      var parentDom = _this2.$lastInput.dom.parentElement; // maybe the <!-- portal --> has been removed by react, #938
+
+      if (!parentDom) return;
 
       _this2.initContainer(nextProps.container, parentDom, anchor);
 
@@ -97,7 +99,14 @@ export var Portal = /*#__PURE__*/function (_Component) {
   };
 
   _proto.$unmount = function $unmount(vNode, nextVNode) {
-    remove(vNode.props.children, this.container, false); // removeVNodeDom(vNode.props!.children as VNode, this.container!);
+    var children = vNode.props.children;
+    unmount(children, null);
+
+    if (this.container) {
+      // maybe the <!-- portal --> has been removed by react, #938
+      // remove(children, this.container, false);
+      removeVNodeDom(children, this.container);
+    }
 
     _Component.prototype.$unmount.call(this, vNode, nextVNode);
   };
@@ -109,6 +118,9 @@ export var Portal = /*#__PURE__*/function (_Component) {
       } else {
         this.container = container(parentDom, anchor);
       }
+    } else {
+      // let below logic to set container to default if container does not exist.
+      this.container = null;
     }
 
     if (!this.container) {

package/components/steps/context.d.ts

@@ -1,5 +1,5 @@
 export declare const context: {
-    Provider: import("misstime").ComponentConstructor<import('intact-react').Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("misstime").ComponentConstructor<import('intact-react').Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
-    useContext: () => import("misstime").RefObject<any>;
+    Provider: import("vdt").ComponentConstructor<import('intact-react').Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
+    Consumer: import("vdt").ComponentConstructor<import('intact-react').Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+    useContext: () => import("vdt").RefObject<any>;
 };

package/components/upload/useFiles.js

@@ -9,6 +9,7 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
 import { useInstance } from 'intact-react';
 import { _$ } from '../../i18n';
 import { UploadFileStatus } from './useUpload';
+import { isEqualArray } from '../utils';
 var uid = 0;
 export function useFiles(isValidType, upload) {
   var instance = useInstance();
@@ -33,8 +34,8 @@ export function useFiles(isValidType, upload) {
     }
   }
 
-  instance.on("$receive:files", function (files) {
-    if (!files) return;
+  instance.on("$receive:files", function (files, oldFiles) {
+    if (!files || isEqualArray(files, oldFiles)) return;
     instance.set('files', _mapInstanceProperty(files).call(files, normalizeFile));
   });
 

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.2
+ * @king-design v3.1.4-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -60,7 +60,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.1.2";
+export declare const version = "3.1.4-beta.0";
 
 
 export {normalize} from 'intact-react';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.2
+ * @king-design v3.1.4-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,7 +62,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.1.2';
+export var version = '3.1.4-beta.0';
 /* generate end */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "3.1.2",
+  "version": "3.1.4-beta.0",
   "description": "King-Design UI components for React.",
   "keywords": [
     "component",
@@ -36,7 +36,7 @@
     "@emotion/css": "^11.5.0",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
-    "intact-react": "3.0.23",
+    "intact-react": "3.0.25",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",

package/styles/global.js

@@ -10,8 +10,13 @@ var slideDirections = {
   up: 'center bottom 0',
   left: 'right center 0',
   right: 'left center 0'
-}; // TODO: update global when theme changed
+};
 
-injectGlobal("html{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}::-webkit-scrollbar{width:10px;height:10px;background-color:#fff;}::-webkit-scrollbar-track{background-color:#fff;}::-webkit-scrollbar-thumb{background-color:#babac0;border-radius:16px;border:2px solid #fff;&:hover{background-color:#a0a0a5;}}::-webkit-scroll-button{display:none;}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
+if (!/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+  document.body.classList.add('k-customize-scrollbar');
+} // TODO: update global when theme changed
+
+
+injectGlobal("html{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Helvetica Neue,Helvetica,PingFang SC,Segoe UI,Roboto,Hiragino Sans GB,arial,microsoft yahei ui,Microsoft YaHei,sans-serif;}body{font-size:", theme.fontSize, ";line-height:", theme.lineHeight, ";margin:0;padding:0;color:", theme.color.text, ";}*,*:before,*:after{box-sizing:inherit;}.k-customize-scrollbar{&::-webkit-scrollbar,*::-webkit-scrollbar{width:10px;height:10px;background-color:#fff;}&::-webkit-scrollbar-track,*::-webkit-scrollbar-track{background-color:#fff;}&::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb{background-color:#babac0;border-radius:16px;border:2px solid #fff;&:hover{background-color:#a0a0a5;}}&::-webkit-scroll-button,*::-webkit-scroll-button{display:none;}}", _mapInstanceProperty(_context = _Object$keys(slideDirections)).call(_context, function (direction) {
   return /*#__PURE__*/css(".k-slide", direction, "-enter-from,.k-slide", direction, "-leave-to{transform-origin:", slideDirections[direction], ";opacity:0;transform:", direction === 'down' || direction === 'up' ? "scaleY(.8)" : 'scaleX(.8)', ";}.k-slide", direction, "-enter-active,.k-slide", direction, "-leave-active{transform-origin:", slideDirections[direction], ";transition:opacity ", theme.transition.large, ",transform ", theme.transition.large, "!important;}.k-slide", direction, "-leave-active{pointer-events:none;}");
 }), " .k-fade-enter-from,.k-fade-leave-to{opacity:0!important;}.k-fade-enter-active,.k-fade-leave-active{transition:opacity ", theme.transition.large, "!important;}.k-fade-leave-active:not(tr){position:absolute;}.k-fade-move{transition:transform ", theme.transition.large, "!important;}.k-scale-enter-from,.k-scale-leave-to{transform:scale(0);}.k-scale-enter-active,.k-scale-leave-active{transition:transform ", theme.transition.large, ";}.k-expand-enter-from,.k-expand-leave-to{opacity:0;overflow:hidden;}.k-expand-enter-active,.k-expand-leave-active{transition:all ", theme.transition.large, "!important;overflow:hidden;}.k-expand-move{transition:transform ", theme.transition.large, ";}.k-dropdown-enter-from,.k-dropdown-leave-to{opacity:0;transform:translateY(-20px);}.k-dropdown-enter-active,.k-dropdown-leave-active,.k-dropdown-move{transition:all ", theme.transition.large, ";}.k-dropdown-leave-active{position:absolute!important;}.k-dropdown-move{transition:transform ", theme.transition.large, ";}.k-fade-in-left-enter-from,.k-fade-in-left-leave-to{opacity:0;transform:translate3d(-15px, 0, 0);}.k-fade-in-left-enter-active,.k-fade-in-left-leave-active{transition:all ", theme.transition.large, ";}.k-fade-in-left-move{transition:transform ", theme.transition.large, ";}.k-fade-expand-enter-from,.k-fade-expand-leave-to{opacity:0;}.k-fade-expand-enter-active,.k-fade-expand-leave-active{transition:all ", theme.transition.large, ";}.c-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.c-hidden{display:none!important;}.c-middle{display:inline-block;vertical-align:middle;}");

package/components/cascader/index.d.ts

@@ -1,45 +0,0 @@
-import { TypeDefs } from 'intact-react';
-import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
-export interface CascaderProps<V = any, Multipe extends boolean = boolean, Data extends BaseCascaderData = CascaderData<V>> extends BaseSelectProps<V[], Multipe> {
-    data?: Data[];
-    trigger?: 'click' | 'hover';
-    changeOnSelect?: boolean;
-    format?: (labels: string[]) => string;
-    loadData?: (data: Data) => any;
-    filter?: (keywords: string, data: Data) => boolean;
-    fields?: CascaderFields<Data>;
-}
-export declare type CascaderFields<Data> = {
-    value?: keyof Data;
-    label?: keyof Data;
-    children?: keyof Data;
-    disabled?: keyof Data;
-};
-export interface BaseCascaderData {
-    loaded?: boolean;
-    [key: string]: any;
-}
-export interface CascaderData<V> extends BaseCascaderData {
-    value: V;
-    label: string;
-    children?: CascaderData<V>[];
-    disabled?: boolean;
-}
-export interface CascaderEvents extends BaseSelectEvents {
-}
-export interface CascaderBlocks<V> extends BaseSelectBlocks<V> {
-}
-export declare class Cascader<V = any, Multipe extends boolean = false, Data extends BaseCascaderData = CascaderData<V>> extends BaseSelect<CascaderProps<V, Multipe, Data>, CascaderEvents, CascaderBlocks<V>> {
-    static template: string | import('intact-react').Template<any>;
-    static typeDefs: Required<TypeDefs<CascaderProps<any, boolean, CascaderData<any>>>>;
-    static defaults: () => Partial<CascaderProps<any, boolean, CascaderData<any>>>;
-    private fields;
-    private value;
-    private label;
-    private load;
-    private filterable;
-    private positionObj;
-    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import('intact-react').Children[];
-    protected getLabel(): import('intact-react').Children;
-    protected hasValue(): any;
-}