@king-design/react 2.1.1 → 3.0.0-beta.1

package/components/tooltip/index.spec.js

@@ -9,7 +9,6 @@ import BasicDemo from '~/components/tooltip/demos/basic';
 import PositionDemo from '~/components/tooltip/demos/position';
 import TriggerDemo from '~/components/tooltip/demos/trigger';
 import ContentDemo from '~/components/tooltip/demos/content';
-import ConfirmDemo from '~/components/tooltip/demos/confirm';
 import AlwaysDemo from '~/components/tooltip/demos/always';
 import { Tooltip } from './';
 import { Dialog } from '../dialog';
@@ -252,7 +251,7 @@ describe('Tooltip', function () {
             return wait(500);
 
           case 13:
-            content1 = getElement('.k-tooltip-content'); //  should not hide when move mouse from button to tooltip content    
+            content1 = getElement('.k-tooltip-content'); //  should not hide when move mouse from button to tooltip content
 
             expect(content1).eql(content);
             dispatchEvent(canHover, 'mouseleave');
@@ -294,81 +293,30 @@ describe('Tooltip', function () {
       }
     }, _callee5);
   })));
-  it('should handle confirm tooltip corectly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-    var _mount6, instance, element, cancelCb, okCb, content, _Array$from5, btn;
+  it('should always show tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount6, element, content;
 
     return _regeneratorRuntime.wrap(function _callee6$(_context6) {
       while (1) {
         switch (_context6.prev = _context6.next) {
           case 0:
-            _mount6 = mount(ConfirmDemo), instance = _mount6[0], element = _mount6[1];
-            cancelCb = sinon.spy();
-            okCb = sinon.spy();
-
-            instance.refs.__test.on('cancel', cancelCb);
-
-            instance.refs.__test.on('ok', okCb);
-
-            dispatchEvent(element.children[0], 'click');
-            _context6.next = 8;
-            return wait();
-
-          case 8:
-            content = getElement('.k-tooltip-content');
-            expect(content.querySelector('.k-tooltip-buttons').outerHTML).to.matchSnapshot();
-            content.querySelector('.k-btn').click();
-            _context6.next = 13;
-            return wait(500);
-
-          case 13:
-            expect(content.style.display).eql('none');
-            dispatchEvent(element.firstElementChild, 'click');
-            _context6.next = 17;
-            return wait();
-
-          case 17:
-            content = getElement('.k-tooltip-content');
-            _Array$from5 = _Array$from2(content.querySelectorAll('.k-btn')), btn = _Array$from5[1];
-            btn.click();
-            _context6.next = 22;
-            return wait(500);
-
-          case 22:
-            expect(content.style.display).eql('none');
-            expect(cancelCb.callCount).eql(1);
-            expect(okCb.callCount).eql(1);
-
-          case 25:
-          case "end":
-            return _context6.stop();
-        }
-      }
-    }, _callee6);
-  })));
-  it('should always show tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var _mount7, element, content;
-
-    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-      while (1) {
-        switch (_context7.prev = _context7.next) {
-          case 0:
-            _mount7 = mount(AlwaysDemo), element = _mount7[1];
+            _mount6 = mount(AlwaysDemo), element = _mount6[1];
             content = getElement('.k-tooltip-content');
             expect(content.textContent).eql('hello');
             document.body.click();
-            _context7.next = 6;
+            _context6.next = 6;
             return wait(500);
 
           case 6:
             expect(getElement('.k-tooltip-content')).eql(content);
             element.querySelector('span').click();
-            _context7.next = 10;
+            _context6.next = 10;
             return wait(500);
 
           case 10:
             expect(getElement('.k-tooltip-content')).eql(content);
             dispatchEvent(content, 'mouseleave');
-            _context7.next = 14;
+            _context6.next = 14;
             return wait(600);
 
           case 14:
@@ -376,10 +324,10 @@ describe('Tooltip', function () {
 
           case 15:
           case "end":
-            return _context7.stop();
+            return _context6.stop();
         }
       }
-    }, _callee7);
+    }, _callee6);
   }))); // it('should hide tooltip when v-show is false in Vue', async () => {
   //     interface IData {
   //         show: boolean
@@ -403,7 +351,7 @@ describe('Tooltip', function () {
   //     document.body.appendChild(container);
   //     const app = new Vue({
   //         render: h => h(
-  //             'Test', 
+  //             'Test',
   //             {ref: 'test'}),
   //         components: {Test},
   //     }).$mount(container);
@@ -432,7 +380,7 @@ describe('Tooltip', function () {
   //             </div>
   //         `,
   //         components: {
-  //             Tooltip:  Tooltip as any, 
+  //             Tooltip:  Tooltip as any,
   //             Radio: Radio as any,
   //         },
   //         data: {
@@ -449,18 +397,18 @@ describe('Tooltip', function () {
   //     document.body.removeChild(app.$el);
   // });
 
-  it('should hide layer when we have disabled Tooltip and also hide on next updating', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var Demo, _mount8, i, content;
+  it('should hide layer when we have disabled Tooltip and also hide on next updating', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount7, i, content;
 
-    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
       while (1) {
-        switch (_context9.prev = _context9.next) {
+        switch (_context8.prev = _context8.next) {
           case 0:
             Demo = /*#__PURE__*/function (_Component) {
               _inheritsLoose(Demo, _Component);
 
               function Demo() {
-                var _context8;
+                var _context7;
 
                 var _this;
 
@@ -468,7 +416,7 @@ describe('Tooltip', function () {
                   args[_key] = arguments[_key];
                 }
 
-                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context8 = [this]).call(_context8, args)) || this;
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context7 = [this]).call(_context7, args)) || this;
                 _this.Tooltip = Tooltip;
                 return _this;
               }
@@ -484,23 +432,23 @@ describe('Tooltip', function () {
               };
             };
 
-            _mount8 = mount(Demo), i = _mount8[0];
+            _mount7 = mount(Demo), i = _mount7[0];
             dispatchEvent(i.refs.test, 'mouseenter');
-            _context9.next = 7;
+            _context8.next = 7;
             return wait();
 
           case 7:
             content = getElement('.k-tooltip-content');
             expect(content.textContent).eql('hello');
             i.set('disabled', true);
-            _context9.next = 12;
+            _context8.next = 12;
             return wait(500);
 
           case 12:
             content = getElement('.k-tooltip-content');
             expect(content).eql(undefined);
             i.set('disabled', false);
-            _context9.next = 17;
+            _context8.next = 17;
             return wait();
 
           case 17:
@@ -509,23 +457,23 @@ describe('Tooltip', function () {
 
           case 19:
           case "end":
-            return _context9.stop();
+            return _context8.stop();
         }
       }
-    }, _callee8);
+    }, _callee7);
   })));
-  it('should not detect collison when target is not in viewport', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var Demo, _mount9, i, content;
+  it('should not detect collison when target is not in viewport', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, i, content;
 
-    return _regeneratorRuntime.wrap(function _callee9$(_context11) {
+    return _regeneratorRuntime.wrap(function _callee8$(_context10) {
       while (1) {
-        switch (_context11.prev = _context11.next) {
+        switch (_context10.prev = _context10.next) {
           case 0:
             Demo = /*#__PURE__*/function (_Component2) {
               _inheritsLoose(Demo, _Component2);
 
               function Demo() {
-                var _context10;
+                var _context9;
 
                 var _this2;
 
@@ -533,7 +481,7 @@ describe('Tooltip', function () {
                   args[_key2] = arguments[_key2];
                 }
 
-                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
                 _this2.Tooltip = Tooltip;
                 return _this2;
               }
@@ -559,11 +507,11 @@ describe('Tooltip', function () {
               };
             };
 
-            _mount9 = mount(Demo), i = _mount9[0]; // await wait(500);
+            _mount8 = mount(Demo), i = _mount8[0]; // await wait(500);
             // window.scrollTo(0, 10000);
 
             i.set('show', true);
-            _context11.next = 7;
+            _context10.next = 7;
             return wait(500);
 
           case 7:
@@ -574,23 +522,23 @@ describe('Tooltip', function () {
 
           case 11:
           case "end":
-            return _context11.stop();
+            return _context10.stop();
         }
       }
-    }, _callee9);
+    }, _callee8);
   })));
-  it('should add className', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    var Demo, _mount10, instance, element, trigger, dropdown;
+  it('should add className', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, instance, element, trigger, dropdown;
 
-    return _regeneratorRuntime.wrap(function _callee10$(_context13) {
+    return _regeneratorRuntime.wrap(function _callee9$(_context12) {
       while (1) {
-        switch (_context13.prev = _context13.next) {
+        switch (_context12.prev = _context12.next) {
           case 0:
             Demo = /*#__PURE__*/function (_Component3) {
               _inheritsLoose(Demo, _Component3);
 
               function Demo() {
-                var _context12;
+                var _context11;
 
                 var _this3;
 
@@ -598,7 +546,7 @@ describe('Tooltip', function () {
                   args[_key3] = arguments[_key3];
                 }
 
-                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
                 _this3.Tooltip = Tooltip;
                 return _this3;
               }
@@ -607,11 +555,11 @@ describe('Tooltip', function () {
             }(Component);
 
             Demo.template = "\n                const Tooltip = this.Tooltip;\n                <div>\n                    <Tooltip content=\"hello\" class=\"a\">\n                        <div ref=\"test\" class=\"b\">test</div>\n                    </Tooltip>\n                </div>\n            ";
-            _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
+            _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
             trigger = instance.refs.test;
             expect(trigger.className).to.eql('b a');
             dispatchEvent(trigger, 'mouseenter');
-            _context13.next = 8;
+            _context12.next = 8;
             return wait();
 
           case 8:
@@ -620,23 +568,23 @@ describe('Tooltip', function () {
 
           case 10:
           case "end":
-            return _context13.stop();
+            return _context12.stop();
         }
       }
-    }, _callee10);
+    }, _callee9);
   })));
-  it('should fix the width in small container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-    var Demo, _mount11, instance, element, trigger, expecedWidth, content, width, newWidth;
+  it('should fix the width in small container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, instance, element, trigger, expecedWidth, content, width, newWidth;
 
-    return _regeneratorRuntime.wrap(function _callee11$(_context15) {
+    return _regeneratorRuntime.wrap(function _callee10$(_context14) {
       while (1) {
-        switch (_context15.prev = _context15.next) {
+        switch (_context14.prev = _context14.next) {
           case 0:
             Demo = /*#__PURE__*/function (_Component4) {
               _inheritsLoose(Demo, _Component4);
 
               function Demo() {
-                var _context14;
+                var _context13;
 
                 var _this4;
 
@@ -644,7 +592,7 @@ describe('Tooltip', function () {
                   args[_key4] = arguments[_key4];
                 }
 
-                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context14 = [this]).call(_context14, args)) || this;
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
                 _this4.Tooltip = Tooltip;
                 _this4.Dialog = Dialog;
                 return _this4;
@@ -653,12 +601,12 @@ describe('Tooltip', function () {
               return Demo;
             }(Component);
 
-            Demo.template = "\n                const {Tooltip, Dialog} = this;\n                <div style=\"text-align: right; position: relative; width: 300px;\">\n                    <Tooltip content=\"\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\uFF0C\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\" container={dom => dom}>\n                        <span class=\"trigger\">test</span>\n                    </Tooltip>\n                </div>\n            ";
-            _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
+            Demo.template = "\n                const {Tooltip, Dialog} = this;\n                <div style=\"text-align: right; position: relative; width: 350px;\">\n                    <Tooltip content=\"\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\uFF0C\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\uFF0C\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\" container={dom => dom}>\n                        <span class=\"trigger\">test</span>\n                    </Tooltip>\n                </div>\n            ";
+            _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
             trigger = element.querySelector('.trigger');
             expecedWidth = parseInt(tooltipTheme.maxWidth);
             dispatchEvent(trigger, 'mouseenter');
-            _context15.next = 8;
+            _context14.next = 8;
             return wait();
 
           case 8:
@@ -666,12 +614,12 @@ describe('Tooltip', function () {
             width = content.offsetWidth;
             expect(width).to.eql(expecedWidth);
             dispatchEvent(trigger, 'mouseleave');
-            _context15.next = 14;
+            _context14.next = 14;
             return wait();
 
           case 14:
             dispatchEvent(trigger, 'mouseenter');
-            _context15.next = 17;
+            _context14.next = 17;
             return wait();
 
           case 17:
@@ -680,9 +628,9 @@ describe('Tooltip', function () {
 
           case 19:
           case "end":
-            return _context15.stop();
+            return _context14.stop();
         }
       }
-    }, _callee11);
+    }, _callee10);
   })));
 });

package/components/tooltip/styles.d.ts

@@ -5,6 +5,7 @@ declare const defaults: {
     bgColor: string;
     lineHeight: number;
     maxWidth: string;
+    readonly boxShadow: string;
     arrow: {
         borderColor: string;
         width: string;

package/components/tooltip/styles.js

@@ -13,11 +13,16 @@ var defaults = {
 
   bgColor: '#fff',
   lineHeight: 1.4,
-  maxWidth: '300px',
+  maxWidth: '312px',
+
+  get boxShadow() {
+    return theme.middleBoxShadow;
+  },
+
   // arrow
   arrow: {
-    borderColor: 'rgba(191, 191, 191, .5)',
-    width: '8px'
+    borderColor: 'rgba(221, 221, 221, .5)',
+    width: '6px'
   },
   // confirm
   confirm: {
@@ -26,13 +31,13 @@ var defaults = {
   // dark
   dark: {
     get bgColor() {
-      return theme.color.text;
+      return theme.color.title;
     },
 
     color: '#fff',
 
     get arrowBorderColor() {
-      return theme.color.text;
+      return theme.color.title;
     }
 
   },
@@ -53,9 +58,9 @@ var directionMap = {
 };
 export default function makeStyles() {
   var arrowLong = tooltip.arrow.width;
-  var arrowShort = "calc(" + arrowLong + " - 2px)"; // use &.k-tooltip-content to override css in dropdown menu
+  var arrowShort = "calc(" + arrowLong + " - 1px)"; // use &.k-tooltip-content to override css in dropdown menu
 
-  return /*#__PURE__*/css("&.k-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:break-word;pointer-events:none;&.k-hoverable,&.k-always{pointer-events:all;}.k-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.k-top,&.k-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.k-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.k-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.k-left,&.k-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.k-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.k-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("&.k-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:break-word;pointer-events:none;box-shadow:", tooltip.boxShadow, ";&.k-hoverable,&.k-always{pointer-events:all;}.k-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.k-top,&.k-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.k-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.k-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.k-left,&.k-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.k-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.k-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
     var _context;
 
     var borderColor;
@@ -76,5 +81,5 @@ export default function makeStyles() {
       var borderDirection = directionMap[direction];
       return /*#__PURE__*/css("&.k-", direction, "{border-", borderDirection, "-color:", borderColor, ";&:before{border-", borderDirection, "-color:", bgColor, ";}}");
     }), ";}}");
-  }), ".k-tooltip-buttons{padding-top:", tooltip.confirm.gaps, ";.k-btn:last-of-type{margin-left:", tooltip.confirm.gaps, ";}}&.k-small{padding:", tooltip.smallPadding, ";}}");
+  }), ".k-tooltip-footer{padding-top:", tooltip.confirm.gaps, ";.k-btn:not(:first-of-type){margin-left:", tooltip.confirm.gaps, ";}}&.k-small{padding:", tooltip.smallPadding, ";}}");
 }

package/components/transfer/index.vdt.js

@@ -37,7 +37,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$check = this.check,
       isCheckAll = _this$check.isCheckAll,
       toggleCheckAll = _this$check.toggleCheckAll,
-      onCheckboxChange = _this$check.onCheckboxChange;
+      onCheckboxChange = _this$check.onCheckboxChange,
+      isIndeterminate = _this$check.isIndeterminate;
   var classNameObj = (_classNameObj = {
     'k-transfer': true
   }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
@@ -50,6 +51,7 @@ export default function ($props, $blocks, $__proto__) {
       return [_$ce(2, 'div', [this.get(model + "CheckedKeys.length"), _$ct(' /\n                    '), data.length], 0, 'k-transfer-count'), _$cc(Checkbox, {
         'className': 'c-ellipsis',
         'value': isCheckAll(model),
+        'indeterminate': isIndeterminate(model),
         'ev-click': toggleCheckAll.bind(null, model),
         'children': title
       })];

package/components/transfer/styles.js

@@ -63,5 +63,5 @@ setDefault(function () {
   }).transfer;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
+  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;overflow:auto;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
 }

package/components/transfer/useCheck.d.ts

@@ -4,4 +4,5 @@ export declare function useCheck({ getEnabledData, getShowedData }: ReturnType<t
     isCheckAll: (model: Model) => boolean | 0;
     toggleCheckAll: (model: Model, e: MouseEvent) => void;
     onCheckboxChange: (model: Model, index: number, e: MouseEvent) => void;
+    isIndeterminate: (model: Model) => boolean;
 };

package/components/transfer/useCheck.js

@@ -33,6 +33,12 @@ export function useCheck(_ref) {
     }
   }
 
+  function isIndeterminate(model) {
+    var checked = instance.get(model + "CheckedKeys");
+    var data = getEnabledData(model);
+    return checked.length > 0 && checked.length < data.length;
+  }
+
   function onCheckboxChange(model, index, e) {
     if (startIndex === undefined || !e.shiftKey) {
       startIndex = index;
@@ -84,6 +90,7 @@ export function useCheck(_ref) {
   return {
     isCheckAll: isCheckAll,
     toggleCheckAll: toggleCheckAll,
-    onCheckboxChange: onCheckboxChange
+    onCheckboxChange: onCheckboxChange,
+    isIndeterminate: isIndeterminate
   };
 }

package/components/upload/index.spec.js

@@ -100,8 +100,7 @@ describe('Upload', function () {
 
     var upload = instance.$lastInput.children;
     upload.on('success', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var remove, dialog, _dialog$querySelector, cancel, _dialog$querySelector2, ok;
-
+      var remove, dialog, cancel, ok;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -119,7 +118,7 @@ describe('Upload', function () {
 
             case 7:
               dialog = getElement('.k-dialog');
-              _dialog$querySelector = dialog.querySelectorAll('.k-dialog-footer .k-btn'), cancel = _dialog$querySelector[1];
+              cancel = dialog.querySelector('.k-dialog-footer .k-dialog-cancel');
               cancel.click();
               _context.next = 12;
               return wait(500);
@@ -132,7 +131,7 @@ describe('Upload', function () {
 
             case 16:
               dialog = getElement('.k-dialog');
-              _dialog$querySelector2 = dialog.querySelectorAll('.k-dialog-footer .k-btn'), ok = _dialog$querySelector2[0];
+              ok = dialog.querySelector('.k-dialog-footer .k-dialog-ok');
               ok.click();
               _context.next = 21;
               return wait(500);
@@ -222,7 +221,7 @@ describe('Upload', function () {
 
             case 2:
               expect(element.innerHTML.replace(/blob:[^"]*/g, '')).to.matchSnapshot();
-              view = element.querySelector('.k-upload-overlap');
+              view = element.querySelector('.k-upload-zoom');
               view.click();
               _context3.next = 7;
               return wait();
@@ -257,7 +256,7 @@ describe('Upload', function () {
         instance = _mount4[0],
         element = _mount4[1];
 
-    var upload = instance.$lastInput.children;
+    var upload = instance.refs.instance;
     upload.on('success', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
       return _regeneratorRuntime.wrap(function _callee4$(_context4) {
         while (1) {