@king-design/intact 3.1.2 → 3.1.3

package/components/collapse/item.vdt

@@ -21,7 +21,7 @@ const classNameObj = {
 
 <div class={classNameObj} {...getRestProps(this)}>
     <div class={`${k}-collapse-title`} ev-click={this.toggle}>
-        <b:title>{title}</b:title>
+        <div class={`${k}-collapse-title-wrapper`}><b:title>{title}</b:title></div>
         <Icon
             class={{[`${k}-collapse-arrow`]: true, [`${k}-icon-right`]: true}}
             hoverable

package/components/collapse/styles.ts

@@ -7,7 +7,6 @@ import { cache } from '../utils';
 const defaults = {
     get transition() { return theme.transition.large },
     fontSize: '12px',
-    titleMarginRight: '8px',
     borderPadding: '0 24px',
     collBorder: '1px solid #eee',
     get borderRadius() {
@@ -17,6 +16,7 @@ const defaults = {
     item: {
         borderBottom: '1px solid #e5e5e5',
         titleHeight: '40px',
+        titleGap: '8px',
     }
 };
 
@@ -32,9 +32,8 @@ export const makeStyles = cache(function makeStyles(k: string) {
         font-size: ${collapse.fontSize};
         
         &.${k}-left {
-            .${k}-collapse-arrow {
-                float: left;
-                margin-right: ${collapse.titleMarginRight};
+            > .${k}-collapse-item > .${k}-collapse-title {
+                flex-direction: row-reverse;
             }
         }
 
@@ -58,13 +57,15 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
             cursor: pointer;
             font-weight: bold;
             height: ${collapseItem.titleHeight};
-            line-height: ${collapseItem.titleHeight};
             transition: color ${collapse.transition};
+            display: flex;
+            align-items: center;
+            gap: ${collapseItem.titleGap};
+            .${k}-collapse-title-wrapper {
+                flex: 1;
+            }
             .${k}-collapse-arrow {
-                float: right;
                 transition: transform ${collapse.transition};
-                line-height: ${collapseItem.titleHeight};
-                height: ${collapseItem.titleHeight};
             }
         }
         

package/components/dialog/index.spec.ts

@@ -337,6 +337,36 @@ describe('Dialog', () => {
         expect(dialog2.querySelector('.k-dialog-body')!.textContent).to.eql('test');
     });
 
+    it('should update position when change container', async () => {
+        class Demo extends Component<{show: boolean, container: any}> {
+            static template = `
+                var Dialog = this.Dialog;
+                <Dialog value={true} container={this.get('container')} ref="dialog">test</Dialog>
+            `;
+
+            private Dialog = Dialog;
+
+            static defaults() {
+                return {
+                    container: (parentDom: HTMLElement) => parentDom,
+                };
+            }
+        }
+
+        const [instance, element] = mount(Demo);
+
+        await wait();
+        instance.set('container', undefined);
+        await wait();
+        const dialogDom = instance.refs.dialog.dialogRef.value;
+        const 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);
+    });
+
     // 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.ts

@@ -8,6 +8,10 @@ export function usePosition(elementRef: RefObject<HTMLDivElement>) {
 
     instance.on(SHOW, center);
     instance.on('afterClose', onAfterLeave);
+    instance.watch('container', () => {
+        if (!instance.get('value')) return;
+        center();
+    }, { presented: true, inited: true });
 
     function center() {
         position(elementRef.value!, {

package/components/dropdown/usePosition.ts

@@ -1,8 +1,7 @@
 import {useInstance, findDomFromVNode} from 'intact';
 import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
-import {noop} from 'intact-shared';
-import {isObject} from 'intact-shared';
+import {noop, isObject, isFunction} from 'intact-shared';
 import { isEqualObject } from '../utils';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
@@ -19,21 +18,32 @@ export function usePosition() {
 
     (['of', 'position'] as const).forEach(item => {
         instance.watch(item, (newValue, oldValue) => {
-            // return if object is the same
             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;
-            }
-            if (instance.get('value')) {
-                handle(noop);
-            }
+            ) return;
+
+            handle(noop);
         }, {presented: true, inited: true});
     });
 
+    // watch container, it is not commonly used
+    instance.watch('container', (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: HTMLElement | MouseEvent | undefined,

package/components/portal.ts

@@ -10,6 +10,8 @@ import {
     remove,
     TypeDefs,
     inject,
+    unmount,
+    removeVNodeDom,
 } from 'intact';
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
@@ -59,7 +61,9 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         const fakeContainer = document.createDocumentFragment();
 
         (mountedQueue.priority || mountedQueue).push(() => {
-            const parentDom = this.$lastInput!.dom!.parentElement!;
+            const parentDom = this.$lastInput!.dom!.parentElement;
+            // maybe the <!-- portal --> has been removed by react, #938
+            if (!parentDom) return;
             this.initContainer(nextProps.container, parentDom, anchor);
             this.container!.appendChild(fakeContainer);
         });
@@ -130,8 +134,13 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     }
 
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null) {
-        remove(vNode.props!.children as VNode, this.container!, false);
-        // removeVNodeDom(vNode.props!.children as VNode, this.container!);
+        const children = vNode.props!.children as VNode;
+        unmount(children, null);
+        if (this.container) {
+            // maybe the <!-- portal --> has been removed by react, #938
+            // remove(children, this.container, false);
+            removeVNodeDom(children, this.container);
+        }
         super.$unmount(vNode, nextVNode);
     }
 
@@ -142,7 +151,11 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
             } 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) {
             if (this.$senior instanceof BaseDialog) {
                 // Dialog and Drawer must be inserted into document.body

package/components/upload/useFiles.ts

@@ -2,6 +2,7 @@ import {useInstance} from 'intact';
 import {Upload, UploadFile} from './';
 import {_$} from '../../i18n';
 import {UploadFileStatus} from './useUpload';
+import { isEqualArray } from '../utils';
 
 let uid = 0;
 
@@ -28,8 +29,8 @@ export function useFiles(
         }
     }
 
-    instance.on(`$receive:files`, (files) => {
-        if (!files) return;
+    instance.on(`$receive:files`, (files, oldFiles) => {
+        if (!files || isEqualArray(files, oldFiles)) return;
         instance.set('files', files.map(normalizeFile));
     });
 

package/es/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/es/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/es/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/es/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/es/components/dropdown/usePosition.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { useInstance, findDomFromVNode } from 'intact';
 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/es/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';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, unmount, removeVNodeDom } from 'intact';
 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/es/components/upload/useFiles.js

@@ -9,6 +9,7 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
 import { useInstance } from 'intact';
 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/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.2
+ * @king-design v3.1.3
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -60,4 +60,4 @@ 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.3";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.2
+ * @king-design v3.1.3
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,5 +62,5 @@ 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.3';
 /* generate end */

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

@@ -36,7 +36,6 @@ describe('Cascader', function () {
                   }]
                 }],
                 value: value,
-                multiple: true,
                 filterable: true,
                 onChangeValue: function onChangeValue(v) {
                   setValue(v);

package/es/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/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.2
+ * @king-design v3.1.3
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -65,6 +65,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '3.1.2';
+export const version = '3.1.3';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "engines": {
@@ -120,7 +120,7 @@
     "highlight.js": "^10.4.1",
     "history": "^5.0.0",
     "html-webpack-plugin": "5.3.1",
-    "intact-react": "^3.0.23",
+    "intact-react": "^3.0.24",
     "istanbul-instrumenter-loader": "^3.0.0",
     "js-yaml": "^4.1.0",
     "karma": "^6.3.2",
@@ -179,7 +179,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.16.0",
     "@emotion/css": "^11.5.0",
-    "@king-design/react": "^3.1.2",
+    "@king-design/react": "^3.1.3",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
     "intact": "^3.0.19",

package/styles/global.ts

@@ -9,6 +9,10 @@ const slideDirections = {
     right: 'left center 0',
 };
 
+if (!/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+    document.body.classList.add('k-customize-scrollbar');
+}
+
 // TODO: update global when theme changed
 injectGlobal`
     html {
@@ -27,25 +31,31 @@ injectGlobal`
     }
 
     // scollbar
-    ::-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;
-            // border-width: 1px;
+    .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;
+                // border-width: 1px;
+            }
+        }
+        &::-webkit-scroll-button,
+        *::-webkit-scroll-button {
+            display: none;
         }
-    }
-    ::-webkit-scroll-button {
-        display: none;
     }
 
     // animation