@king-design/react 2.0.12 → 2.0.13

package/components/code/index.d.ts

@@ -1,5 +1,5 @@
 import { Component, TypeDefs } from 'intact-react';
-import type { editor } from 'monaco-editor';
+import type { editor, default as monaco } from 'monaco-editor';
 import type { Events } from '../types';
 export interface CodeProps {
     value?: string;
@@ -11,7 +11,7 @@ export interface CodeProps {
     options?: editor.IStandaloneEditorConstructionOptions;
 }
 export interface CodeEvents {
-    ready: [editor.IStandaloneCodeEditor, typeof editor];
+    ready: [editor.IStandaloneCodeEditor, typeof editor, typeof monaco];
 }
 export declare class Code extends Component<CodeProps, CodeEvents> {
     static template: string | import("intact").Template<any>;

package/components/code/useEditor.js

@@ -29,7 +29,7 @@ export function useEditor() {
       }, options));
       watch(Editor, codeEditor);
       loading.set(false);
-      instance.trigger('ready', codeEditor, Editor);
+      instance.trigger('ready', codeEditor, Editor, monaco);
     });
   });
   onBeforeUnmount(function () {

package/components/drawer/index.spec.js

@@ -1,9 +1,14 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/drawer/demos/basic';
 import PlacementDemo from '~/components/drawer/demos/placement';
 import overlayDemo from '~/components/drawer/demos/overlay';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Component } from 'intact-react';
+import { Drawer } from '.';
+import { Dialog } from '../dialog';
 describe('Drawer', function () {
   afterEach(function (done) {
     unmount();
@@ -159,4 +164,47 @@ describe('Drawer', function () {
       }
     }, _callee4);
   })));
+  it('nested dialog', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount4, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context5;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context5 = [this]).call(_context5, args)) || this;
+                _this.Dialog = Dialog;
+                _this.Drawer = Drawer;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dialog, Drawer} = this;\n                <Drawer value={true}>\n                    <Dialog value={true} ref=\"dialog\">Dialog</Dialog>\n                </Drawer>\n            ";
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+
+          case 6:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee5);
+  })));
 });

package/components/dropdown/dropdown.d.ts

@@ -8,7 +8,7 @@ export declare type PositionShorthand = 'left' | 'bottom' | 'right' | 'top';
 export declare const DROPDOWN = "Dropdown";
 export declare const ROOT_DROPDOWN = "RootDropdown";
 export interface DropdownProps {
-    trigger?: 'hover' | 'click' | 'contextmenu';
+    trigger?: 'hover' | 'click' | 'contextmenu' | 'focus';
     disabled?: boolean;
     value?: boolean;
     position?: Position | 'left' | 'bottom' | 'right' | 'top';
@@ -52,6 +52,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     private onEnter;
     private onContextMenu;
     private onLeave;
+    private initEventCallbacks;
     private callOriginalCallback;
     private normalizeTriggerProps;
 }

package/components/dropdown/dropdown.js

@@ -14,7 +14,7 @@ import { usePosition } from './usePosition';
 export var DROPDOWN = 'Dropdown';
 export var ROOT_DROPDOWN = 'RootDropdown';
 var typeDefs = {
-  trigger: ['hover', 'click', 'contextmenu'],
+  trigger: ['hover', 'click', 'contextmenu', 'focus'],
   disabled: Boolean,
   value: Boolean,
   position: [Object, 'left', 'bottom', 'right', 'top'],
@@ -154,6 +154,33 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     this.hide();
   };
 
+  _proto.initEventCallbacks = function initEventCallbacks(trigger) {
+    var props = {};
+
+    switch (trigger) {
+      case 'focus':
+        props['ev-focusin'] = this.onEnter;
+        props['ev-focusout'] = this.onLeave;
+        break;
+
+      case 'contextmenu':
+        props['ev-contextmenu'] = this.onContextMenu;
+        break;
+
+      default:
+        props['ev-click'] = this.onEnter;
+
+        if (trigger === 'hover') {
+          props['ev-mouseenter'] = this.onEnter;
+          props['ev-mouseleave'] = this.onLeave;
+        }
+
+        break;
+    }
+
+    return props;
+  };
+
   _proto.callOriginalCallback = function callOriginalCallback(name, e) {
     var callback = this.triggerProps[name];
     var callbackOnDropdown = this.get(name);
@@ -229,19 +256,7 @@ Dropdown.template = function () {
       trigger = _children[0],
       menu = _children[1];
   var triggerType = this.get('trigger');
-  var props = {};
-
-  if (triggerType !== 'contextmenu') {
-    props['ev-click'] = this.onEnter;
-
-    if (triggerType === 'hover') {
-      props['ev-mouseenter'] = this.onEnter;
-      props['ev-mouseleave'] = this.onLeave;
-    }
-  } else {
-    props['ev-contextmenu'] = this.onContextMenu;
-  }
-
+  var props = this.initEventCallbacks(triggerType);
   var clonedTrigger = isTextChildren(trigger) ? createVNode('span', null, trigger) : directClone(trigger);
   var triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ); // add a className for opening status
 
@@ -275,7 +290,9 @@ function useDocumentClickForDropdown(dropdown) {
   var _useDocumentClick = useDocumentClick(elementRef, function (e) {
     // case 1: if click an trigger and the trigger type is hover, ignore it
     // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
+    // case 3: if click on trigger and the trigger type is focus, do nothing 
     var trigger = dropdown.get('trigger');
+    if (trigger === 'focus') return;
     var isHover = trigger === 'hover';
 
     if (isHover || trigger === 'contextmenu') {

package/components/dropdown/index.spec.js

@@ -483,4 +483,62 @@ describe('Dropdown', function () {
       }
     }, _callee9);
   })));
+  it('trigger: focus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount9, instance;
+
+    return _regeneratorRuntime.wrap(function _callee10$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context13;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+                _this4.Dropdown = Dropdown;
+                _this4.DropdownItem = DropdownItem;
+                _this4.DropdownMenu = DropdownMenu;
+                return _this4;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Dropdown, DropdownMenu, DropdownItem} = this;\n                <div>\n                    <Dropdown trigger=\"focus\">\n                        <input ref=\"trigger\" />\n                        <DropdownMenu>\n                            <DropdownItem>test1</DropdownItem>\n                            <DropdownItem>test2</DropdownItem>\n                        </DropdownMenu>\n                    </Dropdown>\n                </div>\n            ";
+            _mount9 = mount(Demo), instance = _mount9[0];
+            dispatchEvent(instance.refs.trigger, 'focusin');
+            _context14.next = 6;
+            return wait(500);
+
+          case 6:
+            expect(getElement('.k-dropdown-menu')).to.be.exist; // clicking anywhere should not hide menu
+
+            dispatchEvent(document, 'click');
+            _context14.next = 10;
+            return wait(500);
+
+          case 10:
+            expect(getElement('.k-dropdown-menu')).to.be.exist;
+            dispatchEvent(instance.refs.trigger, 'focusout');
+            _context14.next = 14;
+            return wait(700);
+
+          case 14:
+            expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+
+          case 15:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee10);
+  })));
 });

package/components/portal.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject } from 'intact-react';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
+import { BaseDialog } from './dialog/base';
 var typeDefs = {
   container: [String, Function]
 };
@@ -96,8 +97,13 @@ export var Portal = /*#__PURE__*/function (_Component) {
     }
 
     if (!this.container) {
-      // find the closest dialog if exists
-      this.container = parentDom.closest('.k-dialog') || document.body;
+      if (this.$senior instanceof BaseDialog) {
+        // Dialog and Drawer must be inserted into document.body
+        this.container = document.body;
+      } else {
+        // find the closest dialog if exists
+        this.container = parentDom.closest('.k-dialog') || document.body;
+      }
       /**
        * @FIXME: We cannot get parent ref from sub component in Vue
        */
@@ -108,6 +114,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
       // } else {
       // this.container = document.body;
       // }
+
     }
   };
 

package/components/select/styles.js

@@ -94,7 +94,7 @@ var defaults = deepDefaults({
   },
   tag: {
     margin: "3px 8px 3px 0",
-    padding: "5px 8px",
+    padding: "3px 8px",
 
     get borderRadius() {
       return theme.borderRadius;
@@ -188,7 +188,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";line-height:1;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}.k-select-input{margin-right:", getRight(select.tag.margin), ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";width:100%;&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}.k-select-text{max-width:calc(100% - 18px);word-break:break-word;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;

package/components/table/row.d.ts

@@ -23,6 +23,7 @@ export interface TableRowProps {
     onToggleSpreadRow: (key: TableRowKey) => void;
     onBeforeUnmount: (key: TableRowKey) => void;
     offsetMap: Record<Key, number>;
+    animation: boolean;
     draggable: boolean;
     draggingKey: TableRowKey | null;
     onRowDragStart: DragCallback;

package/components/table/row.vdt.js

@@ -5,7 +5,7 @@ import { getClassAndStyleForFixed } from './useFixedColumns';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
 import { TableCell } from './cell';
-import { createElementVNode, className as cx } from 'intact';
+import { createElementVNode, className as cx, createFragment } from 'intact';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -34,7 +34,8 @@ export default function ($props, $blocks, $__proto__) {
       key = _this$get.key,
       offsetMap = _this$get.offsetMap,
       draggable = _this$get.draggable,
-      draggingKey = _this$get.draggingKey;
+      draggingKey = _this$get.draggingKey,
+      animation = _this$get.animation;
 
   var classNameObj = (_classNameObj = {
     'k-disabled': disabled,
@@ -110,16 +111,14 @@ export default function ($props, $blocks, $__proto__) {
       'key': columnKey
     }, columnKey));
   });
-
-  var rows = _$cc(TransitionGroup, {
+  var rows = animation ? _$cc(TransitionGroup, {
     'name': 'k-fade-expand',
     'move': false,
     'children': vNodes
-  });
+  }) : createFragment(vNodes, 8);
   /* const rows = vNodes; */
   // for performance, no normalize
 
-
   return createElementVNode(2, 'tr', rows, 2, cx(classNameObj), {
     'data-key': key,
     'ev-mouseenter': this.onMouseEnter,

package/components/table/table.d.ts

@@ -34,6 +34,7 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     minColWidth?: number;
     widthStoreKey?: string;
     draggable?: boolean;
+    animation?: boolean | [boolean, boolean];
 }
 export interface TableEvents<T = any, K extends TableRowKey = number> {
     clickRow: [T, number, K];

package/components/table/table.js

@@ -56,7 +56,8 @@ var typeDefs = {
   resizable: Boolean,
   minColWidth: Number,
   widthStoreKey: String,
-  draggable: Boolean
+  draggable: Boolean,
+  animation: [Boolean, Array]
 };
 
 var defaults = function defaults() {
@@ -69,7 +70,8 @@ var defaults = function defaults() {
     rowExpandable: true,
     childrenKey: 'children',
     indent: 32,
-    minColWidth: 40
+    minColWidth: 40,
+    animation: true
   };
 };
 

package/components/table/table.vdt.js

@@ -57,7 +57,10 @@ export default function ($props, $blocks, $__proto__) {
       tooltipContainer = _this$get.tooltipContainer,
       showIndeterminate = _this$get.showIndeterminate,
       resizable = _this$get.resizable,
-      draggable = _this$get.draggable;
+      draggable = _this$get.draggable,
+      _animation = _this$get.animation;
+
+  var animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 
   var _this$columns$getData = this.columns.getData(),
       columns = _this$columns$getData.columns,
@@ -130,10 +133,8 @@ export default function ($props, $blocks, $__proto__) {
           'children': _$cc(FixedColumnsContext.Provider, {
             'value': offsetMap,
             'children': _$ce(2, 'thead', _$ma(columns, function ($value, $key) {
-              return _$ce(2, 'tr', _$cc(TransitionGroup, {
-                'name': 'k-fade-expand',
-                'move': false,
-                'children': [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
+              return _$ce(2, 'tr', function () {
+                var ths = [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
                   fixed: hasFixedLeft ? 'left' : false
                 }, 0), {
                   'rowspan': maxRows,
@@ -143,8 +144,13 @@ export default function ($props, $blocks, $__proto__) {
                   'indeterminate': showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate,
                   'ev-$change:value': toggleCheckedAll,
                   'disabled': !hasData
-                }) : undefined) : undefined, $value]
-              }), 2);
+                }) : undefined) : undefined, $value];
+                return animation[1] ? _$cc(TransitionGroup, {
+                  'name': 'k-fade-expand',
+                  'move': false,
+                  'children': ths
+                }) : ths;
+              }(), 0);
             }, $this), 4)
           })
         })
@@ -181,115 +187,116 @@ export default function ($props, $blocks, $__proto__) {
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['empty'](_$no)), 0, 'k-table-empty', {
     'colspan': colCount
-  }), 2, null, null, 'table-empty') : _$cc(TransitionGroup, {
-    'name': 'k-fade-in-left',
-    'move': !draggingKey.value,
-    'children': function () {
-      var rows = [];
-      loopData(function (value, index, level, hidden) {
-        // don't render if row is hidden
-        if (hidden) return hidden;
-        var status = allStatus[index];
-        var key = allKeys[index];
-        var spreaded = isSpreaded(key);
-        var hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
-        var indentSize = indent ? indent * level : 0;
+  }), 2, null, null, 'table-empty') : function () {
+    var rows = [];
+    loopData(function (value, index, level, hidden) {
+      // don't render if row is hidden
+      if (hidden) return hidden;
+      var status = allStatus[index];
+      var key = allKeys[index];
+      var spreaded = isSpreaded(key);
+      var hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
+      var indentSize = indent ? indent * level : 0;
 
-        var row = _$cc(TableRow, {
-          'key': key,
-          'cols': cols,
-          'data': value,
-          'checkType': checkType,
-          'hasFixedLeft': hasFixedLeft,
-          'onClick': _this.clickRow,
-          'checked': status.checked,
-          'indeterminate': status.indeterminate,
-          'index': index,
-          'disabled': status.disabled,
-          'allDisabled': status.allDisabled,
-          'className': _$cn(rowClassName && rowClassName(value, index, key)),
-          'merge': merge,
-          'grid': getGrid(),
-          'onChangeChecked': onChangeChecked,
-          'selected': isSelected(key),
-          'spreaded': spreaded,
-          'hasChildren': hasChildren,
-          'indent': indentSize,
-          'onToggleSpreadRow': toggleSpreadRow,
-          'onBeforeUnmount': _this.resetRowStatus.onRowBeforeUnmount,
-          'offsetMap': offsetMap,
-          'draggable': draggable,
-          'draggingKey': draggingKey.value,
-          'onRowDragStart': onRowDragStart,
-          'onRowDragEnd': onRowDragEnd,
-          'onRowDragOver': onRowDragOver
-        }, key);
+      var row = _$cc(TableRow, {
+        'key': key,
+        'cols': cols,
+        'data': value,
+        'checkType': checkType,
+        'hasFixedLeft': hasFixedLeft,
+        'onClick': _this.clickRow,
+        'checked': status.checked,
+        'indeterminate': status.indeterminate,
+        'index': index,
+        'disabled': status.disabled,
+        'allDisabled': status.allDisabled,
+        'className': _$cn(rowClassName && rowClassName(value, index, key)),
+        'merge': merge,
+        'grid': getGrid(),
+        'onChangeChecked': onChangeChecked,
+        'selected': isSelected(key),
+        'spreaded': spreaded,
+        'hasChildren': hasChildren,
+        'indent': indentSize,
+        'onToggleSpreadRow': toggleSpreadRow,
+        'onBeforeUnmount': _this.resetRowStatus.onRowBeforeUnmount,
+        'offsetMap': offsetMap,
+        'animation': animation[1],
+        'draggable': draggable,
+        'draggingKey': draggingKey.value,
+        'onRowDragStart': onRowDragStart,
+        'onRowDragEnd': onRowDragEnd,
+        'onRowDragOver': onRowDragOver
+      }, key);
 
-        if ($blocks.tooltip) {
-          var content = (_$blocks['tooltip'] = function ($super) {
-            return null;
-          }, __$blocks['tooltip'] = function ($super, data) {
-            var block = $blocks['tooltip'];
+      if ($blocks.tooltip) {
+        var content = (_$blocks['tooltip'] = function ($super) {
+          return null;
+        }, __$blocks['tooltip'] = function ($super, data) {
+          var block = $blocks['tooltip'];
 
-            var callBlock = function callBlock() {
-              return _$blocks['tooltip'].call($this, $super, data);
-            };
+          var callBlock = function callBlock() {
+            return _$blocks['tooltip'].call($this, $super, data);
+          };
 
-            return block ? block.call($this, callBlock, data) : callBlock();
-          }, __$blocks['tooltip'](_$no, [value, index]));
-          row = _$cc(Tooltip, {
-            'key': key,
-            'position': tooltipPosition,
-            'container': tooltipContainer,
-            'children': row,
-            '$blocks': function ($blocks) {
-              var _$blocks = {},
-                  __$blocks = _$ex({}, $blocks);
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['tooltip'](_$no, [value, index]));
+        row = _$cc(Tooltip, {
+          'key': key,
+          'position': tooltipPosition,
+          'container': tooltipContainer,
+          'children': row,
+          '$blocks': function ($blocks) {
+            var _$blocks = {},
+                __$blocks = _$ex({}, $blocks);
 
-              return (_$blocks['content'] = function ($super) {
-                return content;
-              }, __$blocks['content'] = function ($super, data) {
-                var block = $blocks['content'];
+            return (_$blocks['content'] = function ($super) {
+              return content;
+            }, __$blocks['content'] = function ($super, data) {
+              var block = $blocks['content'];
 
-                var callBlock = function callBlock() {
-                  return _$blocks['content'].call($this, $super, data);
-                };
+              var callBlock = function callBlock() {
+                return _$blocks['content'].call($this, $super, data);
+              };
 
-                return block ? block.call($this, callBlock, data) : callBlock();
-              }), __$blocks;
-            }.call($this, _$em)
-          }, key);
-        }
+              return block ? block.call($this, callBlock, data) : callBlock();
+            }), __$blocks;
+          }.call($this, _$em)
+        }, key);
+      }
 
-        rows.push(row);
+      rows.push(row);
 
-        if ($blocks.expand) {
-          var expanded = isExpanded(key);
-          rows.push(_$ce(2, 'tr', _$ce(2, 'td', _$cc(Transition, _extends({}, expandAnimationCallbacks, {
-            'children': expanded ? _$ce(2, 'div', (_$blocks['expand'] = function ($super) {
-              return null;
-            }, __$blocks['expand'] = function ($super, data) {
-              var block = $blocks['expand'];
+      if ($blocks.expand) {
+        var expanded = isExpanded(key);
+        rows.push(_$ce(2, 'tr', _$ce(2, 'td', _$cc(Transition, _extends({}, expandAnimationCallbacks, {
+          'children': expanded ? _$ce(2, 'div', (_$blocks['expand'] = function ($super) {
+            return null;
+          }, __$blocks['expand'] = function ($super, data) {
+            var block = $blocks['expand'];
 
-              var callBlock = function callBlock() {
-                return _$blocks['expand'].call($this, $super, data);
-              };
+            var callBlock = function callBlock() {
+              return _$blocks['expand'].call($this, $super, data);
+            };
 
-              return block ? block.call($this, callBlock, data) : callBlock();
-            }, __$blocks['expand'](_$no, [value, index])), 0, 'k-table-expand') : undefined
-          })), 2, null, {
-            'colspan': colCount
-          }), 2, _$cn({
-            "k-expand": true,
-            'k-expanded': expanded
-          }), null, key + ".$expand"));
-        }
+            return block ? block.call($this, callBlock, data) : callBlock();
+          }, __$blocks['expand'](_$no, [value, index])), 0, 'k-table-expand') : undefined
+        })), 2, null, {
+          'colspan': colCount
+        }), 2, _$cn({
+          "k-expand": true,
+          'k-expanded': expanded
+        }), null, key + ".$expand"));
+      }
 
-        return hidden || !spreaded;
-      });
-      return rows;
-    }()
-  }), 0);
+      return hidden || !spreaded;
+    });
+    return animation[0] ? _$cc(TransitionGroup, {
+      'name': 'k-fade-in-left',
+      'move': !draggingKey.value,
+      'children': rows
+    }) : rows;
+  }(), 0);
 
   var tableWidthPx = tableWidth.value ? tableWidth.value + "px" : null;
   var _this$stickyScrollbar = this.stickyScrollbar,

package/components/timepicker/index.d.ts

@@ -3,6 +3,7 @@ import { TimepickerProps, TimepickerEvents, TimepickerBlocks } from './constants
 import { SelectPicker } from './selectPicker';
 export type { TimepickerProps, TimepickerEvents, TimepickerBlocks };
 export declare class Timepicker<Multipe extends boolean = false, Range extends boolean = false> extends Component<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks<Range>> {
+    static $doubleVNodes: boolean;
     static template(this: Timepicker): import("intact").VNode<typeof SelectPicker>;
     static typeDefs: Required<import("intact").TypeDefs<TimepickerProps<boolean, boolean>>>;
 }

package/components/timepicker/index.js

@@ -35,4 +35,5 @@ export var Timepicker = /*#__PURE__*/function (_Component) {
 // export const Timepicker: typeof _Timepicker = functionalWrapper ?
 // functionalWrapper(Wrapper) : Wrapper;
 
+Timepicker.$doubleVNodes = true;
 Timepicker.typeDefs = typeDefs;