@king-design/intact 2.0.0-beta.1 → 2.0.0

package/es/components/table/table.vdt.js

@@ -66,7 +66,6 @@ export default function ($props, $blocks, $__proto__) {
       maxCols = _this$columns$getData.maxCols;
 
   var _this$fixedColumns = this.fixedColumns,
-      setScrollPosition = _this$fixedColumns.setScrollPosition,
       scrollPosition = _this$fixedColumns.scrollPosition,
       hasFixed = _this$fixedColumns.hasFixed,
       getHasFixedLeft = _this$fixedColumns.getHasFixedLeft,
@@ -131,16 +130,21 @@ 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', [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
-                fixed: hasFixedLeft ? 'left' : false
-              }, 0), {
-                'rowspan': maxRows
-              }), checkType === 'checkbox' ? _$cc(Checkbox, {
-                'value': allCheckedStatus === AllCheckedStatus.All,
-                'indeterminate': showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate,
-                'ev-$change:value': toggleCheckedAll,
-                'disabled': !hasData
-              }) : undefined) : undefined, $value], 0);
+              return _$ce(2, 'tr', _$cc(TransitionGroup, {
+                'name': 'k-fade-expand',
+                'move': false,
+                'children': [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
+                  fixed: hasFixedLeft ? 'left' : false
+                }, 0), {
+                  'rowspan': maxRows,
+                  'key': '$checktype'
+                }), checkType === 'checkbox' ? _$cc(Checkbox, {
+                  'value': allCheckedStatus === AllCheckedStatus.All,
+                  'indeterminate': showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate,
+                  'ev-$change:value': toggleCheckedAll,
+                  'disabled': !hasData
+                }) : undefined) : undefined, $value]
+              }), 2);
             }, $this), 4)
           })
         })
@@ -165,23 +169,22 @@ export default function ($props, $blocks, $__proto__) {
       onRowDragEnd = _this$draggable.onRowDragEnd,
       draggingKey = _this$draggable.draggingKey;
 
-  var tbody = _$cc(TransitionGroup, {
-    'tag': 'tbody',
-    'name': 'k-fade',
-    'move': !draggingKey.value,
-    'children': !hasData ? _$ce(2, 'tr', _$ce(2, 'td', (_$blocks['empty'] = function ($super) {
-      return _$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~');
-    }, __$blocks['empty'] = function ($super, data) {
-      var block = $blocks['empty'];
+  var tbody = _$ce(2, 'tbody', !hasData ? _$ce(2, 'tr', _$ce(2, 'td', (_$blocks['empty'] = function ($super) {
+    return _$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~');
+  }, __$blocks['empty'] = function ($super, data) {
+    var block = $blocks['empty'];
 
-      var callBlock = function callBlock() {
-        return _$blocks['empty'].call($this, $super, data);
-      };
+    var callBlock = function callBlock() {
+      return _$blocks['empty'].call($this, $super, data);
+    };
 
-      return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['empty'](_$no)), 0, 'k-table-empty', {
-      'colspan': colCount
-    }), 2, null, null, 'table-empty') : function () {
+    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
@@ -286,7 +289,7 @@ export default function ($props, $blocks, $__proto__) {
       });
       return rows;
     }()
-  });
+  }), 0);
 
   var tableWidthPx = tableWidth.value ? tableWidth.value + "px" : null;
   var _this$stickyScrollbar = this.stickyScrollbar,

package/es/components/table/useColumns.d.ts

@@ -2,7 +2,7 @@ import { VNodeComponentClass, Props } from 'intact';
 import { TableColumn, TableColumnProps } from './column';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
 };
 export declare function useColumns(): {
     getColumns: () => VNodeComponentClass<TableColumn<any>>[][];

package/es/components/table/useFixedColumns.d.ts

@@ -6,7 +6,7 @@ import type { useScroll } from './useScroll';
 declare type ScrollPosition = 'left' | 'middle' | 'right';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useFixedColumns(getColumns: () => VNodeComponentClass<TableColumn>[][], { scrollRef, callbacks }: ReturnType<typeof useScroll>, widthMap: State<Record<TableRowKey, number>>): {
     scrollPosition: State<ScrollPosition | null>;

package/es/components/table/useFixedColumns.js

@@ -17,7 +17,10 @@ export function useFixedColumns(getColumns, _ref, widthMap) {
   var offsetMap = {};
   callbacks.push(setScrollPosition);
   instance.on('$receive:children', handleFixedColumns);
-  watchState(widthMap, handleFixedColumns);
+  watchState(widthMap, function () {
+    handleFixedColumns();
+    updateScrollPositionOnResize();
+  });
   var throttleUpdate = throttle(function () {
     if (instance.$unmounted) return;
     updateScrollPositionOnResize();
@@ -102,7 +105,7 @@ export function useFixedColumns(getColumns, _ref, widthMap) {
     if (scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
       scrollPosition.set(null);
     } else {
-      scrollPosition.set('left');
+      setScrollPosition(scrollRef.value.scrollLeft);
     }
   }
 

package/es/components/table/useGroup.d.ts

@@ -4,7 +4,7 @@ declare type ContextValue = {
 };
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<ContextValue>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ContextValue>, {}, {}, {}>>;
 };
 export declare function useGroup(): {
     onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;

package/es/components/table/useResizable.d.ts

@@ -3,7 +3,7 @@ import type { TableRowKey } from './table';
 import { State } from '../../hooks/useState';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useResizable(scrollRef: RefObject<HTMLElement>, tableRef: RefObject<HTMLElement>, tableWidth: State<number | null>, widthMap: State<Record<TableRowKey, number>>, storeWidth: () => void): {
     start: (e: MouseEvent) => void;

package/es/components/table/useSortable.d.ts

@@ -1,6 +1,6 @@
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useSortable(): {
     onChange: (key: string) => void;

package/es/components/table/useWidth.js

@@ -4,6 +4,7 @@ import { useInstance, onMounted, onBeforeUnmount, createRef } from 'intact';
 import ResizeObserver from 'resize-observer-polyfill';
 import { useState } from '../../hooks/useState';
 import { debounce } from '../utils';
+import { scrollbarWidth } from '../position';
 var hasLocalStorage = typeof localStorage !== 'undefined';
 export function useWidth(scrollRef, getColumns) {
   var instance = useInstance();
@@ -75,7 +76,12 @@ export function useWidth(scrollRef, getColumns) {
     if (resizable) {
       var hasBorder = type === 'grid' || type === 'border';
       var _tableWidth = tableRef.value.offsetWidth;
-      var containerWidth = scrollRef.value.offsetWidth + (hasBorder ? -2 : 0);
+      var container = scrollRef.value;
+      var containerWidth = container.offsetWidth + (hasBorder ? -2 : 0); // detect whether the table has vertical scrollbar or not
+
+      if (container.scrollHeight > container.clientHeight) {
+        containerWidth = containerWidth - scrollbarWidth();
+      }
 
       if (_tableWidth < containerWidth) {
         tableWidth.set(isMount ? null : containerWidth);

package/es/components/tabs/index.spec.js

@@ -22,7 +22,7 @@ describe('Tabs', function () {
             instance._add();
 
             _context.next = 7;
-            return wait(300);
+            return wait(500);
 
           case 7:
             expect(tabs.outerHTML).to.matchSnapshot(); // prev & next

package/es/components/tabs/styles.js

@@ -10,6 +10,10 @@ var closeFontSizeMap = {
   mini: '16px'
 };
 var defaults = deepDefaults({
+  get transition() {
+    return theme.transition.middle;
+  },
+
   get borderColor() {
     return theme.color.border;
   },
@@ -55,7 +59,10 @@ var defaults = deepDefaults({
   },
   // no-border-card
   noBorderCard: {
-    bgColor: "#eee",
+    get bgColor() {
+      return theme.color.bg;
+    },
+
     gutter: "4px"
   }
 }, sizes.reduce(function (memo, size) {
@@ -86,7 +93,7 @@ setDefault(function () {
   }).tabs;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("border-bottom:", tabs.border, ";position:relative;line-height:1;.k-tab{margin:", tabs.margin, ";cursor:pointer;display:inline-block;text-align:center;color:", tabs.color, ";position:relative;vertical-align:middle;&:hover,&.k-active{color:", tabs.activeColor, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGutter, ";margin-left:", tabs.closeGutter, ";position:relative;top:-1px;}.k-tabs-active-bar{transition:all ", theme.transition, ";position:absolute;left:0;height:", tabs.highlight.height, ";background:", tabs.highlight.bgColor, ";bottom:calc(-", tabs.highlight.height, " / 2);}&.k-vertical{display:inline-block;border-bottom:none;border-right:", tabs.border, ";.k-tab{display:block;margin:0;padding:", tabs.verticalPadding, ";}.k-tabs-active-bar{left:auto;top:0;right:calc(-", tabs.highlight.height, " / 2);width:", tabs.highlight.height, ";height:auto;}}&.k-tabs-card{.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;border-left:", tabs.border, ";border-right:", tabs.border, ";&:before{content:'';display:block;position:absolute;height:", tabs.highlight.height, ";background:", theme.color.primary, ";top:0;left:-", tabs.borderWidth, ";right:-", tabs.borderWidth, ";}}&.k-vertical{.k-tabs-active-bar{left:0;width:auto;border-left:none;border-right:none;border-top:", tabs.border, ";border-bottom:", tabs.border, ";&:before{width:", tabs.highlight.height, ";left:0;right:auto;bottom:0;height:auto;}}}}&.k-tabs-border-card{border:", tabs.border, ";border-bottom:none;background:", tabs.borderCard.bgColor, ";.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}&.k-vertical{border-right:none;border-bottom:", tabs.border, ";.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}}&.k-tabs-no-border-card{border-bottom:none;.k-tab{margin-right:", tabs.noBorderCard.gutter, ";&:before{content:'';display:block;position:absolute;background:", tabs.noBorderCard.bgColor, ";top:0;bottom:0;left:0;right:0;z-index:-1;}}.k-tabs-acitve-bar{border:none;&:before{left:0;right:0;}}.k-vertical{border-right:none;.k-tab{margin-top:", tabs.noBorderCard.gutter, ";}.k-tabs-active-bar{border:none;}}}&:not(.k-vertical){.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-tabs-border-card,&.k-tabs-no-border-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;float:left;transition:transform ", theme.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;top:0;width:", tabs.navigatorWidth, "!important;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}&.k-is-scroll{padding:0 ", tabs.navigatorWidth, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("border-bottom:", tabs.border, ";position:relative;line-height:1;.k-tab{margin:", tabs.margin, ";cursor:pointer;display:inline-block;text-align:center;color:", tabs.color, ";position:relative;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&:hover,&.k-active{color:", tabs.activeColor, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGutter, ";margin-left:", tabs.closeGutter, ";position:relative;top:-1px;}.k-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", tabs.highlight.height, ";background:", tabs.highlight.bgColor, ";bottom:calc(-", tabs.highlight.height, " / 2);}&.k-vertical{display:inline-block;border-bottom:none;border-right:", tabs.border, ";.k-tab{display:block;margin:0;padding:", tabs.verticalPadding, ";}.k-tabs-active-bar{left:auto;top:0;right:calc(-", tabs.highlight.height, " / 2);width:", tabs.highlight.height, ";height:auto;}}&.k-tabs-card{.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;border-left:", tabs.border, ";border-right:", tabs.border, ";&:before{content:'';display:block;position:absolute;height:", tabs.highlight.height, ";background:", theme.color.primary, ";top:0;left:-", tabs.borderWidth, ";right:-", tabs.borderWidth, ";}}&.k-vertical{.k-tabs-active-bar{left:0;width:auto;border-left:none;border-right:none;border-top:", tabs.border, ";border-bottom:", tabs.border, ";&:before{width:", tabs.highlight.height, ";left:0;right:auto;bottom:0;height:auto;}}}}&.k-tabs-border-card{border:", tabs.border, ";border-bottom:none;background:", tabs.borderCard.bgColor, ";.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}&.k-vertical{border-right:none;border-bottom:", tabs.border, ";.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}}&.k-tabs-no-border-card{border-bottom:none;.k-tab{margin-right:", tabs.noBorderCard.gutter, ";&:before{content:'';display:block;position:absolute;background:", tabs.noBorderCard.bgColor, ";top:0;bottom:0;left:0;right:0;z-index:-1;}}.k-tabs-acitve-bar{border:none;&:before{left:0;right:0;}}&.k-vertical{border-right:none;.k-tab:not(:first-of-type){margin:", tabs.noBorderCard.gutter, " 0 0;}.k-tabs-active-bar{border:none;}}}&:not(.k-vertical){.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-tabs-border-card,&.k-tabs-no-border-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;float:left;transition:transform ", tabs.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;top:0;width:", tabs.navigatorWidth, "!important;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}&.k-is-scroll{padding:0 ", tabs.navigatorWidth, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = tabs[size];
     return "\n                &.k-" + size + " {\n                    .k-tab {\n                        font-size: " + styles.fontSize + ";\n                        height: " + styles.height + ";\n                        line-height: " + styles.height + ";\n                        padding: " + styles.padding + ";\n                    }\n                    .k-tab-close .k-icon {\n                        font-size: " + styles.closeFontSize + ";\n                    }\n                }\n            ";
   }), ";");

package/es/components/tabs/tab.vdt.js

@@ -5,7 +5,8 @@ import { Icon } from '../icon';
 import { getRestProps } from '../utils';
 import { isNullOrUndefined } from 'intact-shared';
 var _$tmp0 = {
-  'className': 'ion-ios-close-empty'
+  'className': 'ion-ios-close-empty',
+  'hoverable': true
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/es/components/tabs/useActiveBar.js

@@ -1,4 +1,4 @@
-import { useInstance, onMounted, onUpdated, findDomFromVNode } from 'intact';
+import { useInstance, onMounted, onUpdated, findDomFromVNode, nextTick } from 'intact';
 import { useState } from '../../hooks/useState';
 export function useActiveBar() {
   var instance = useInstance();
@@ -53,7 +53,10 @@ export function useActiveBar() {
     }
   }
 
-  onMounted(generateStyle);
-  onUpdated(generateStyle);
+  onMounted(generateStyle); // Tabs maybe embed into Transition, therefore handle style nextTick
+
+  onUpdated(function () {
+    return nextTick(generateStyle);
+  });
   return styles;
 }

package/es/components/tag/base.js

@@ -35,6 +35,7 @@ export var Tag = /*#__PURE__*/function (_Component) {
 
   _proto.onClose = function onClose(e) {
     e.stopPropagation();
+    if (this.get('disabled')) return;
     this.trigger('close', e);
 
     if (!e.defaultPrevented) {

package/es/components/tag/styles.js

@@ -60,6 +60,12 @@ var defaults = deepDefaults({
       fontSize: '16px',
       gap: '2px'
     }
+  },
+  none: {
+    get bgColor() {
+      return theme.color.bg;
+    }
+
   }
 }, types.reduce(function (memo, type) {
   if (type === 'disabled') return memo;
@@ -82,12 +88,12 @@ setDefault(function () {
   }).tag;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:1px solid ", tag.borderColor, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";}", _mapInstanceProperty(types).call(types, function (t) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:1px solid ", tag.borderColor, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
     var styles = tag[t];
     return /*#__PURE__*/css("&.k-", t, "{color:", styles.color, ";border-color:", styles.color, ";background:", styles.bgColor, ";}");
   }), " ", _mapInstanceProperty(sizes).call(sizes, function (s) {
     if (s === 'default') return;
     var styles = tag[s];
     return /*#__PURE__*/css("&.k-", s, "{padding:", styles.padding, ";height:", styles.height, ";.k-tag-close{font-size:", styles.close.fontSize, ";margin-left:", styles.close.gap, ";}}");
-  }), "&.k-dashed{border-style:dashed;}&.k-none{border:none;}");
+  }), "&.k-dashed{border-style:dashed;}");
 }

package/es/components/timepicker/constants.d.ts

@@ -3,7 +3,8 @@ import { BasePickerProps, BasePickerEvents, BasePickerBlocks } from '../datepick
 import { TypeDefs } from 'intact';
 export declare const YEAR_FORMAT = "YYYY-MM-DD ";
 export declare const TIME_FORMAT = "HH:mm:ss";
-export declare const NOW: dayjs.Dayjs;
+export declare const NOW_START: dayjs.Dayjs;
+export declare const NOW_END: dayjs.Dayjs;
 export declare const PREFIX: string;
 export interface TimepickerProps<M extends boolean = boolean, R extends boolean = boolean> extends BasePickerProps<string, M, R> {
     step?: string;

package/es/components/timepicker/constants.js

@@ -3,8 +3,9 @@ import { getNowDate } from '../datepicker/helpers';
 import { BasePicker } from '../datepicker/basepicker';
 export var YEAR_FORMAT = 'YYYY-MM-DD ';
 export var TIME_FORMAT = 'HH:mm:ss';
-export var NOW = getNowDate();
-export var PREFIX = NOW.format(YEAR_FORMAT);
+export var NOW_START = getNowDate();
+export var NOW_END = getNowDate(true);
+export var PREFIX = NOW_START.format(YEAR_FORMAT);
 export var typeDefs = _extends({}, BasePicker.typeDefs, {
   value: [String, Array],
   min: String,

package/es/components/timepicker/index.spec.js

@@ -18,7 +18,7 @@ describe('Timepicker', function () {
           case 0:
             unmount();
             _context.next = 3;
-            return wait(400);
+            return wait(500);
 
           case 3:
           case "end":
@@ -34,106 +34,107 @@ describe('Timepicker', function () {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
+            this.timeout(0);
             _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
             _element$querySelecto = element.querySelectorAll('.k-select'), picker1 = _element$querySelecto[0], picker2 = _element$querySelecto[1];
             picker1.click();
-            _context2.next = 5;
-            return wait(300);
+            _context2.next = 6;
+            return wait(500);
 
-          case 5:
+          case 6:
             dropdown = getElement('.k-time-content');
             expect(dropdown.innerHTML).to.matchSnapshot();
             next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)');
             next.click();
-            _context2.next = 11;
+            _context2.next = 12;
             return wait();
 
-          case 11:
+          case 12:
             expect(dropdown.innerHTML).to.matchSnapshot();
             expect(instance.get('time')).to.be.null;
             next.click();
-            _context2.next = 16;
+            _context2.next = 17;
             return wait();
 
-          case 16:
+          case 17:
             expect(instance.get('time')).to.be.null;
             expect(dropdown.innerHTML).to.matchSnapshot();
             ok = dropdown.querySelector('.k-btn');
             ok.click();
-            _context2.next = 22;
-            return wait(300);
+            _context2.next = 23;
+            return wait(500);
 
-          case 22:
+          case 23:
             expect(instance.get('time')).to.eql('02:00:00');
             expect(dropdown.style.display).to.eql('none'); // set time
 
             instance.set('time', '03:03:03');
             picker1.click();
-            _context2.next = 28;
-            return wait(300);
+            _context2.next = 29;
+            return wait(500);
 
-          case 28:
+          case 29:
             expect(dropdown.innerHTML).to.matchSnapshot(); // multiple
 
             picker2.click();
-            _context2.next = 32;
-            return wait(300);
+            _context2.next = 33;
+            return wait(500);
 
-          case 32:
+          case 33:
             dropdown = getElement('.k-time-content');
             dropdown.querySelector('.k-scroll-select-item:nth-child(11)').click();
             ok2 = dropdown.querySelector('.k-btn');
             ok2.click();
             dropdown.querySelector('.k-scroll-select-item:nth-child(12)').click();
             ok2.click();
-            _context2.next = 40;
+            _context2.next = 41;
             return wait();
 
-          case 40:
+          case 41:
             expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']); // click the same time will do nothing
 
             ok2.click();
-            _context2.next = 44;
+            _context2.next = 45;
             return wait();
 
-          case 44:
+          case 45:
             expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']); // remove one value
 
             _picker2$querySelecto = picker2.querySelectorAll('.k-select-close'), close = _picker2$querySelecto[1];
             close.click();
-            _context2.next = 49;
+            _context2.next = 50;
             return wait();
 
-          case 49:
+          case 50:
             expect(instance.get('timeArray')).to.eql(['01:00:00']);
             expect(dropdown.innerHTML).to.matchSnapshot(); // clear
 
             picker2.querySelector('.k-select-clear').click();
-            _context2.next = 54;
+            _context2.next = 55;
             return wait();
 
-          case 54:
+          case 55:
             expect(instance.get('timeArray')).to.eql([]);
             ok2.click();
-            _context2.next = 58;
+            _context2.next = 59;
             return wait();
 
-          case 58:
+          case 59:
             expect(instance.get('timeArray')).to.eql(['00:00:00']); // set value
 
             instance.set('timeArray', ['03:03:03', '03:03:04']);
-            _context2.next = 62;
+            _context2.next = 63;
             return wait();
 
-          case 62:
+          case 63:
             expect(dropdown.innerHTML).to.matchSnapshot();
 
-          case 63:
+          case 64:
           case "end":
             return _context2.stop();
         }
       }
-    }, _callee2);
+    }, _callee2, this);
   })));
   it('range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount2, instance, element, picker, dropdown, _dropdown$querySelect, start, end;
@@ -146,7 +147,7 @@ describe('Timepicker', function () {
             picker = element.querySelector('.k-select');
             picker.click();
             _context3.next = 5;
-            return wait(300);
+            return wait(500);
 
           case 5:
             dropdown = getElement('.k-time-content');
@@ -169,7 +170,7 @@ describe('Timepicker', function () {
             return wait();
 
           case 19:
-            expect(instance.get('time')).to.eql(['01:00:00', '02:00:00']);
+            expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
 
           case 20:
           case "end":
@@ -227,7 +228,7 @@ describe('Timepicker', function () {
 
           case 11:
             expect(dropdown.innerHTML).to.matchSnapshot();
-            end.querySelector('.k-active').nextElementSibling.click();
+            end.querySelector('.k-disabled').nextElementSibling.click();
             _context5.next = 15;
             return wait();
 
@@ -306,7 +307,7 @@ describe('Timepicker', function () {
             return wait();
 
           case 39:
-            expect(instance.get('time3')).eql(['00:30:00.000', '01:00:00.000']);
+            expect(instance.get('time3')).eql(['00:30:00.000', '00:30:00.000']);
             expect(input3.innerHTML).to.matchSnapshot();
 
           case 41:

package/es/components/timepicker/useStep.js

@@ -1,7 +1,7 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { useInstance } from 'intact';
 import { useState } from '../../hooks/useState';
-import { NOW } from './constants';
+import { NOW_START, NOW_END } from './constants';
 import { useReceive } from '../../hooks/useReceive';
 export function useStep(_ref, _ref2) {
   var maxDate = _ref.maxDate,
@@ -18,9 +18,9 @@ export function useStep(_ref, _ref2) {
 
     if (step) {
       var data = [];
-      var maxValue = maxDate.value || NOW.hour(23).minute(59).second(59);
+      var maxValue = maxDate.value || NOW_END;
       var stepValue = parseTime(step);
-      var value = minDate.value || NOW;
+      var value = minDate.value || NOW_START;
 
       var push = function push(value) {
         data.push({

package/es/components/timepicker/useValue.js

@@ -5,7 +5,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slic
 import { useInstance } from 'intact';
 import { last } from '../utils';
 import { useValue as useValueBase } from '../datepicker/basepicker';
-import { NOW } from './constants';
+import { NOW_START, NOW_END } from './constants';
 export function useValue(formats, disabled, panel) {
   var instance = useInstance();
 
@@ -34,7 +34,7 @@ export function useValue(formats, disabled, panel) {
   });
 
   function getPlaceholderDates() {
-    return instance.get('range') ? [NOW, NOW] : NOW;
+    return instance.get('range') ? [NOW_START, NOW_END] : NOW_START;
   }
 
   function onChangeTimeByStep(v, flag) {