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

package/components/datepicker/styles.js

@@ -83,7 +83,7 @@ export function makePanelStyles() {
   return /*#__PURE__*/css("display:flex;.k-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.k-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.k-datepicker-calendars{display:flex;}.k-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.k-tabs{border:none;.k-tabs-wrapper{float:none;}.k-tab{width:50%;}}}.k-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
 }
 export function makeCalendarStyles() {
-  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;.k-value{border-radius:", datepicker.item.borderRadius, ";}&.k-hover .k-value{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today .k-value{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today .k-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
+  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-prev .k-icon,.k-next .k-icon{margin:0 -5px!important;}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.k-value{border-radius:", datepicker.item.borderRadius, ";}&.k-hover{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today .k-value{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today .k-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
 }
 export function makeTimeStyles() {
   return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-scroll-select{flex:1;height:305px;}");

package/components/datepicker/useValue.d.ts

@@ -1,13 +1,13 @@
 import { StateValueItem, DayjsValue } from './basepicker';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import type { useFormats } from './useFormats';
 import type { useDisabled } from './useDisabled';
 import { PanelFlags, usePanel } from './usePanel';
 export declare function useValue(formats: ReturnType<typeof useFormats>, disabled: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>): {
     format: () => string | string[];
     onConfirm: () => void;
-    onChangeTime: (date: Dayjs, flag: PanelFlags) => void;
-    getTimeValue: (flag: PanelFlags) => Dayjs | null | undefined;
+    onChangeTime: (date: dayjs.Dayjs, flag: PanelFlags) => void;
+    getTimeValue: (flag: PanelFlags) => dayjs.Dayjs | null | undefined;
     convertToDayjs: (v: import("./basepicker").Value | [import("./basepicker").Value, import("./basepicker").Value] | import("./basepicker").Value[] | [import("./basepicker").Value, import("./basepicker").Value][] | null | undefined) => DayjsValue;
     getDayjsValue: () => DayjsValue;
     value: import("../../hooks/useState").State<import("./basepicker").StateValue>;

package/components/datepicker/useValue.js

@@ -6,7 +6,9 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slic
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
 import { useInstance } from 'intact-react';
 import { useValue as useValueBase } from './basepicker';
+import dayjs from 'dayjs';
 import { last } from '../utils';
+import { endTime } from './helpers';
 import { PanelTypes, PanelFlags } from './usePanel';
 export function useValue(formats, disabled, panel) {
   var instance = useInstance();
@@ -41,21 +43,21 @@ export function useValue(formats, disabled, panel) {
         type = _instance$get3.type,
         range = _instance$get3.range;
 
-    var _value = v; // the datetime must be greater than minDate, #406
-
-    var minDate = disabled.minDate.value;
-
-    if (minDate && _value.isBefore(minDate)) {
-      _value = minDate;
-    }
+    var _value;
 
     if (range) {
       var oldValue = last(value.value);
 
       if (!oldValue || oldValue.length === 2) {
-        _value = [v];
+        /**
+         * if we select the first value or re-select the value
+         * no matter what the flag is, we should set flag to start panel
+         * #877
+         */
+        flag = PanelFlags.Start;
+        _value = [fixDatetimeWithMinDate(v)];
       } else {
-        _value = [oldValue[0], v];
+        _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
 
         _sortInstanceProperty(_value).call(_value, function (a, b) {
           return a.isAfter(b) ? 1 : -1;
@@ -63,6 +65,8 @@ export function useValue(formats, disabled, panel) {
       }
 
       instance.trigger('selecting', _value);
+    } else {
+      _value = fixDatetimeWithMinDate(v);
     }
 
     setValue(_value, false);
@@ -74,6 +78,31 @@ export function useValue(formats, disabled, panel) {
     }
   }
 
+  function fixDatetimeWithMinDate(v) {
+    // the datetime must be greater than minDate, #406
+    var minDate = disabled.minDate.value;
+
+    if (minDate && v.isBefore(minDate)) {
+      return minDate;
+    }
+
+    return v;
+  }
+
+  function fixDatetimeWithMaxDate(v) {
+    // the tiem of end datetime should be set to 23:59:59, #878
+    var maxDate = disabled.maxDate.value;
+    var date = v.toDate();
+    endTime(date);
+    v = dayjs(date);
+
+    if (maxDate && v.isAfter(maxDate)) {
+      return maxDate;
+    }
+
+    return v;
+  }
+
   return _extends({
     value: value,
     setValue: setValue,

package/components/dialog/styles.js

@@ -43,7 +43,7 @@ var defaults = {
     border: "1px solid #e2e5e8",
     closeTop: '9px',
     closeRight: '-9px',
-    closeIconFontSize: '16px'
+    closeIconFontSize: '22px'
   },
   // body
   body: {

package/components/dropdown/dropdown.js

@@ -28,7 +28,8 @@ var typeDefs = {
 var defaults = function defaults() {
   return {
     trigger: 'hover',
-    of: 'self'
+    of: 'self',
+    value: false
   };
 };
 

package/components/form/index.spec.js

@@ -12,6 +12,7 @@ import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact-react';
 import { Form, FormItem } from './';
 import { Input } from '../input';
+import { Select } from '../select';
 
 RemoteDemo.prototype.validateUserName = function (value) {
   // mock api
@@ -1317,4 +1318,48 @@ describe('Form', function () {
       }
     }, _callee7);
   })));
+  it('should not validate when select is disabled on init', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context10;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+                _this3.Form = Form;
+                _this3.FormItem = FormItem;
+                _this3.Select = Select;
+                return _this3;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Form, FormItem, Select} = this;\n                <Form ref=\"form\">\n                    <FormItem rules={{required: true}}>\n                        <Select disabled />\n                    </FormItem>\n                </Form>\n            ";
+            _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+            _context11.next = 5;
+            return wait(500);
+
+          case 5:
+            expect(element.querySelector('.k-form-error')).to.be.null;
+
+          case 6:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee8);
+  })));
 });

package/components/form/styles.js

@@ -50,7 +50,7 @@ setDefault(function () {
   }).form;
 });
 export function makeItemStyles() {
-  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid>.k-form-content{flex:1;}.k-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-inner{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-inner{border:none;}}.k-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
+  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid>.k-form-content{flex:1;}.k-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-wrapper{border:none;}}.k-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
 }
 export function makeFormStyles() {
   var _context;

package/components/icon/index.vdt.js

@@ -44,8 +44,9 @@ export default function ($props, $blocks, $__proto__) {
   }
 
   return _$cv('i', _extends({
-    'className': _$cn(classNameObj),
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
     'style': addStyle(style, _style)
-  }, getRestProps(this)), children);
+  }), children);
 }
 ;

package/components/icon/styles.js

@@ -41,5 +41,5 @@ export default function makeStyles(color) {
   }), " ", _mapInstanceProperty(colors).call(colors, function (color) {
     var _color = theme.color[color];
     return /*#__PURE__*/css("&.k-", color, "{color:", _color, ";&.k-hoverable:hover{color:", palette(_color, -2), ";}}");
-  }), " &.k-rotate:before{animation:", rotate, " 1s infinite linear;}&:before{position:relative;font-size:inherit;z-index:1;}&.k-hoverable{cursor:pointer;transition:color ", icon.transition, ";", color && "\n                &:hover {\n                    color: " + palette(color, -2) + " !important;\n                }\n            ", ";&:hover{color:", theme.color.primary, ";}}&.k-disabled{cursor:not-allowed;color:", icon.disabledColor, "!important;}");
+  }), " &.k-rotate:before{animation:", rotate, " 1s infinite linear;}&:before{font-size:inherit;}&.k-hoverable{cursor:pointer;transition:color ", icon.transition, ";", color && "\n                &:hover {\n                    color: " + palette(color, -2) + " !important;\n                }\n            ", ";&:hover{color:", theme.color.primary, ";}}&.k-disabled{cursor:not-allowed;color:", icon.disabledColor, "!important;}");
 }

package/components/input/index.d.ts

@@ -2,7 +2,7 @@ import { Component, TypeDefs } from 'intact-react';
 import { Sizes } from '../../styles/utils';
 import { CommonInputHTMLAttributes, Events } from '../types';
 export * from './search';
-export declare type HTMLInputTypes = 'textarea' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | (string & {});
+export declare type HTMLInputTypes = 'textarea' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'maxlength' | (string & {});
 interface InputHTMLAttributes extends CommonInputHTMLAttributes {
     pattern?: string;
     dirname?: string;
@@ -31,6 +31,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     showPassword?: boolean;
     flat?: boolean;
+    showCount?: boolean;
 }
 export declare type AutoRows = {
     min?: number;
@@ -58,6 +59,7 @@ export declare class Input<V extends Value = Value> extends Component<InputProps
     private frozen;
     private autoRows;
     private showPassword;
+    private focusHook;
     focus(): void;
     blur(): void;
     select(): void;

package/components/input/index.js

@@ -9,6 +9,7 @@ import { useAutoWidth } from './useAutoWidth';
 import { useFrozen } from './useFrozen';
 import { useAutoRows } from './useAutoRows';
 import { useShowPassword } from './useShowPassword';
+import { useFocus } from './useFocus';
 export * from './search';
 var typeDefs = {
   type: String,
@@ -29,7 +30,8 @@ var typeDefs = {
   waveDisabled: Boolean,
   resize: ['none', 'vertical', 'horizontal', 'both'],
   showPassword: Boolean,
-  flat: Boolean
+  flat: Boolean,
+  showCount: Boolean
 };
 
 var defaults = function defaults() {
@@ -65,6 +67,7 @@ export var Input = /*#__PURE__*/function (_Component) {
     _this.frozen = useFrozen();
     _this.autoRows = useAutoRows(_this.inputRef);
     _this.showPassword = useShowPassword();
+    _this.focusHook = useFocus();
     return _this;
   }
 

package/components/input/index.vdt.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "type", "value", "defaultValue", "placeholder", "clearable", "disabled", "size", "rows", "autoWidth", "fluid", "width", "stackClearIcon", "frozenOnInput", "readonly", "inline", "waveDisabled", "resize", "flat", "ev-click", "ev-mounseenter", "ev-mouseleave"];
+var _excluded = ["className", "style", "type", "value", "defaultValue", "placeholder", "clearable", "disabled", "size", "rows", "autoWidth", "fluid", "width", "stackClearIcon", "frozenOnInput", "readonly", "inline", "waveDisabled", "resize", "flat", "showCount", "maxlength", "ev-click", "ev-mounseenter", "ev-mouseleave"];
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
-import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, noop as _$no, createVNode as _$cv } from 'intact-react';
+import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, noop as _$no, createVNode as _$cv, createTextVNode as _$ct } from 'intact-react';
 import { Icon } from '../icon';
-import { addStyle, isTextBlock, getRestProps } from '../utils';
+import { addStyle, isTextBlock, getRestProps, stopPropagation } from '../utils';
 import { makeStyles } from './styles';
 import { noop, isNullOrUndefined, isStringOrNumber } from 'intact-shared';
 import { Wave } from '../wave';
@@ -42,6 +42,8 @@ export default function ($props, $blocks, $__proto__) {
       waveDisabled = _this$get.waveDisabled,
       resize = _this$get.resize,
       flat = _flatInstanceProperty(_this$get),
+      showCount = _this$get.showCount,
+      maxlength = _this$get.maxlength,
       click = _this$get['ev-click'],
       mouseenter = _this$get['ev-mounseenter'],
       mouseleave = _this$get['ev-mouseleave'],
@@ -53,10 +55,13 @@ export default function ($props, $blocks, $__proto__) {
       startInput = _this$frozen.startInput,
       onInput = _this$frozen.onInput,
       endInput = _this$frozen.endInput;
+  var _this$focusHook = this.focusHook,
+      isFocus = _this$focusHook.isFocus,
+      focusInputOnClick = _this$focusHook.focusInputOnClick;
   var isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
   var classNameObj = (_classNameObj = {
     'k-input': true
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-group'] = $blocks.prepend || $blocks.append, _classNameObj['k-disabled'] = disabled, _classNameObj['k-with-prefix'] = $blocks.prefix, _classNameObj['k-with-suffix'] = $blocks.suffix, _classNameObj['k-clearable'] = clearable, _classNameObj['k-auto-width'] = autoWidth, _classNameObj['k-fluid'] = fluid, _classNameObj['k-stack-clear'] = stackClearIcon, _classNameObj['k-inline'] = inline, _classNameObj['k-flat'] = flat, _classNameObj["k-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj["k-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-group'] = $blocks.prepend || $blocks.append, _classNameObj['k-disabled'] = disabled, _classNameObj['k-clearable'] = clearable, _classNameObj['k-auto-width'] = autoWidth, _classNameObj['k-fluid'] = fluid, _classNameObj['k-stack-clear'] = stackClearIcon, _classNameObj['k-inline'] = inline, _classNameObj['k-flat'] = flat, _classNameObj['k-type-textarea'] = type === 'textarea', _classNameObj['k-focus'] = isFocus.value, _classNameObj["k-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj["k-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
   var _this$showPassword = this.showPassword,
       isShowPassword = _this$showPassword.isShow,
       toggleShowPassword = _this$showPassword.toggleShow,
@@ -78,6 +83,7 @@ export default function ($props, $blocks, $__proto__) {
     readOnly: readonly,
     placeholder: placeholder,
     disabled: disabled,
+    maxLength: maxlength,
     ref: this.inputRef,
     style: autoWidth && fakeWidth ? {
       width: fakeWidth + 'px'
@@ -98,6 +104,7 @@ export default function ($props, $blocks, $__proto__) {
     'children': function children(isInvalid) {
       return _$cc(Wave, {
         'disabled': waveDisabled || disabled || isInvalid,
+        'inset': '-2px',
         'children': _$ce(2, 'div', [$blocks.prefix ? _$ce(2, 'div', (_$blocks['prefix'] = function ($super) {
           return null;
         }, __$blocks['prefix'] = function ($super, data) {
@@ -117,22 +124,22 @@ export default function ($props, $blocks, $__proto__) {
           'style': height.value ? addStyle(inputProps.style, {
             height: height.value + 'px'
           }) : inputProps.style
-        })), $blocks.suffix || clearable && !disabled || showPasswordIcon.value ? _$ce(2, 'div', [showPasswordIcon.value ? [_$cc(Icon, {
+        })), $blocks.suffix || clearable && !disabled || showPasswordIcon.value || showCount ? _$ce(2, 'div', [showPasswordIcon.value ? [_$cc(Icon, {
           'hoverable': true,
           'className': _$cn({
             "k-input-show-password": true,
-            "ion-eye-disabled": !isShowPassword.value,
-            "ion-eye": isShowPassword.value
+            "k-icon-hidden": !isShowPassword.value,
+            "k-icon-visible": isShowPassword.value
           }),
           'ev-click': toggleShowPassword
         }), ' '] : undefined, clearable && !disabled ? _$cc(Icon, {
           'className': _$cn({
-            "k-input-clear ion-ios-close": true,
+            "k-input-clear k-icon-error-fill": true,
             "k-input-show": hasValue
           }),
           'ev-click': _this.clear,
           'hoverable': true
-        }) : undefined, ' ', (_$blocks['suffix'] = function ($super) {
+        }) : undefined, ' ', showCount ? _$ce(2, 'span', [hasValue ? value.length : 0, maxlength ? _$ce(2, 'span', [_$ct(' / '), maxlength], 0) : undefined], 0, 'k-input-count') : undefined, (_$blocks['suffix'] = function ($super) {
           return null;
         }, __$blocks['suffix'] = function ($super, data) {
           var block = $blocks['suffix'];
@@ -142,7 +149,11 @@ export default function ($props, $blocks, $__proto__) {
           };
 
           return block ? block.call($this, callBlock, data) : callBlock();
-        }, __$blocks['suffix'](_$no))], 0, 'k-input-suffix') : undefined, autoWidth ? _$ce(2, 'div', !hasValue ? placeholder : inputValue, 0, 'k-input-fake', null, null, fakeRef) : undefined], 0, 'k-input-wrapper')
+        }, __$blocks['suffix'](_$no))], 0, 'k-input-suffix', {
+          'ev-click': stopPropagation
+        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? placeholder : inputValue, 0, null, null, null, fakeRef), 2, 'k-input-fake') : undefined], 0, 'k-input-wrapper', {
+          'ev-click': focusInputOnClick
+        })
       });
     }
   }), $blocks.append ? (_children = $blocks.append(noop), _$ce(2, 'div', _children, 0, _$cn({

package/components/input/search.vdt.js

@@ -23,10 +23,9 @@ export default function ($props, $blocks, $__proto__) {
       size = _this$get.size,
       open = _this$get.open;
 
-  var isTypeNotDefault = type !== 'default';
   var classNameObj = (_classNameObj = {
     'k-search': true
-  }, _classNameObj[className] = className, _classNameObj['k-open'] = open, _classNameObj['k-hide'] = !open, _classNameObj["k-" + type] = isTypeNotDefault, _classNameObj[makeSearchStyles()] = true, _classNameObj);
+  }, _classNameObj[className] = className, _classNameObj['k-open'] = open, _classNameObj['k-hide'] = !open, _classNameObj["k-" + type] = type, _classNameObj[makeSearchStyles()] = true, _classNameObj);
   return _$cv('form', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'ev-submit': this.onSubmit,
@@ -39,8 +38,7 @@ export default function ($props, $blocks, $__proto__) {
     'ev-$change:value': this.onChangeValue,
     'readonly': !open,
     'size': size,
-    'className': 'k-with-suffix',
-    'waveDisabled': isTypeNotDefault
+    'waveDisabled': type !== 'default'
   }, null, this.inputRef), _$cc(Button, {
     'icon': true,
     'type': 'none',

package/components/input/styles.js

@@ -97,6 +97,13 @@ var defaults = deepDefaults({
       return theme.color.bg;
     }
 
+  },
+  // count
+  count: {
+    get color() {
+      return theme.color.placeholder;
+    }
+
   }
 }, sizes.reduce(function (memo, size) {
   var styles = theme[size];
@@ -125,18 +132,18 @@ setDefault(function () {
 export function makeStyles() {
   var _context;
 
-  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";vertical-align:middle;.k-input-wrapper{display:inline-block;width:100%;position:relative;}.k-input-inner{display:inline-block;width:100%;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";outline:none;position:relative;color:", input.color, ";&:hover{border:", input.hoverBorder, ";z-index:1;}&:focus{border:", input.focusBorder, ";z-index:1;}&::placeholder{color:", input.placeholderColor, ";}}&.k-fluid{width:100%;}.k-input-prefix,.k-input-suffix{position:absolute;top:50%;transform:translateY(-50%);z-index:2;color:", theme.color.lightBlack, ";line-height:1;}.k-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";+*{margin-left:", input.clearIconGap, ";}}&:hover .k-input-clear.k-input-show{opacity:1;pointer-events:all;}.k-input-show-password{color:", input.clearIconColor, ";}&.k-stack-clear{.k-input-clear{position:absolute;z-index:1;right:0;&.k-input-show+i{transition:opacity ", input.transition, ";}}&:hover{.k-input-clear.k-input-show+i{opacity:0;}}}&.k-group{display:table;.k-input-inner{border-radius:0;}.k-input-wrapper:first-child{.k-input-inner{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-wrapper:last-child{.k-input-inner{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}}.k-input-prepend,.k-input-append{display:table-cell;width:1px;vertical-align:middle;background-color:", input.groupBgColor, ";border:", input.border, ";text-align:center;white-space:nowrap;.k-btn{margin:-1px;border:none;&.k-none:hover{background:transparent;}}.k-select{margin:-1px;text-align:left;}}.k-input-prepend{&,.k-btn,.k-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-append{&,.k-btn,.k-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.k-input-padding{padding:0 ", input.groupPaddingGap, ";}.k-input-prepend{border-right:none;}.k-input-append{border-left:none;}&.k-flat{.k-input-inner{border:none;background:", _flatInstanceProperty(input).bgColor, ";color:", _flatInstanceProperty(input).color, ";}}&.k-disabled{color:", input.disabledColor, ";cursor:not-allowed;.k-input-inner{color:", input.disabledColor, ";border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.k-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.k-focus .k-input-wrapper{border:", input.focusBorder, ";z-index:1;}.k-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.k-fluid{width:100%;}.k-input-prefix,.k-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.k-input-prefix{margin-right:", input.clearIconGap, ";}.k-input-suffix{margin-left:", input.clearIconGap, ";}.k-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .k-input-clear.k-input-show{opacity:1;pointer-events:all;}.k-input-show-password{color:", input.clearIconColor, ";}&.k-stack-clear{.k-input-clear{position:absolute;z-index:1;right:0;&.k-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.k-input-clear.k-input-show+*{opacity:0;}}}&.k-group{display:inline-flex;.k-input-wrapper{border-radius:0;}.k-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.k-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.k-input-prepend,.k-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.k-btn{margin:-1px;border:none;&.k-none:hover{background:transparent;}}.k-select{margin:-1px;text-align:left;}}.k-input-prepend{&,.k-btn,.k-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-append{&,.k-btn,.k-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.k-input-padding{padding:0 ", input.groupPaddingGap, ";}.k-input-prepend{border-right:none;}.k-input-append{border-left:none;}&.k-flat{color:", _flatInstanceProperty(input).color, ";.k-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.k-disabled{color:", input.disabledColor, ";cursor:not-allowed;.k-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.k-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
-    var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.k-input-inner{height:", styles.height, ";line-height:", styles.height, ";font-size:", styles.fontSize, ";padding:0 ", styles.paddingGap, ";}.k-input-prefix{left:", styles.paddingGap, ";}.k-input-suffix{right:", styles.paddingGap, ";}&.k-with-prefix{.k-input-inner{padding-left:calc(", styles.paddingGap, " + 1rem + ", input.clearIconGap, ");}}&.k-with-suffix,&.k-clearable{.k-input-inner{padding-right:calc(", styles.paddingGap, " + 1rem + ", input.clearIconGap, ");}}&:not(.k-stack-clear).k-with-suffix.k-clearable{.k-input-inner{padding-right:calc(", styles.paddingGap, " + 2rem + ", input.clearIconGap, " * 2);}}");
+    var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.k-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
     if (size === 'default') return sizeClassName;
     return /*#__PURE__*/css("&.k-", size, "{", sizeClassName, ";}");
-  }), "&.k-inline{.k-input-inner{height:auto;line-height:inherit;border:none;border-radius:0;padding:0;}}.k-textarea{padding:", input.textareaPadding, ";height:auto;line-height:1.5;vertical-align:top;}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {
+  }), "&.k-inline{.k-input-wrapper{height:auto;border:none;border-radius:0;padding:0;}}&.k-type-textarea{.k-input-wrapper{display:inline-block;padding:0;height:auto;}.k-textarea{width:100%;padding:", input.textareaPadding, ";line-height:1.5;vertical-align:top;}.k-input-suffix{margin:0;justify-content:flex-end;}}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {
     return /*#__PURE__*/css("&.k-resize-", type, "{.k-textarea{resize:", type, ";}}");
-  }), ".k-input-fake{position:absolute;visibility:hidden;top:0;white-space:nowrap;}&.k-auto-width{width:auto;max-width:100%;.k-input-inner{max-width:100%;box-sizing:content-box;}}");
+  }), ".k-input-fake{left:0;top:0;right:0;position:absolute;overflow:hidden;width:100%;visibility:hidden;white-space:nowrap;}&.k-auto-width{width:auto;max-width:100%;}.k-input-count{color:", input.count.color, ";}");
 }
 export function makeSearchStyles() {
-  return /*#__PURE__*/css("position:relative;display:inline-block;.k-input{transition:width ", input.transition, ";}.k-btn{position:absolute;top:0;right:0;z-index:1;}.k-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.k-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("position:relative;display:inline-block;.k-input{transition:width ", input.transition, ";}.k-btn{position:absolute;top:0;right:0;z-index:1;}&.k-default .k-btn:hover{background:transparent;}.k-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.k-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {
     if (size == 'default') return;
     return /*#__PURE__*/css(".k-input.k-", size, "{width:", input[size].height, ";}");
-  }), ";.k-input{width:", input.default.height, ";}.k-input-inner{padding:0!important;}}&.k-line{.k-input-inner{border-width:0;}&.k-open{.k-input-inner{border-bottom-width:1px;}}}");
+  }), ";.k-input{width:", input.default.height, ";}.k-input-inner{padding:0!important;}}&.k-line{.k-input-wrapper{border-width:0;}&.k-open{.k-input-wrapper{border-bottom-width:1px;}.k-btn:hover{background:transparent;}}}");
 }

package/components/input/useFocus.d.ts

@@ -0,0 +1,4 @@
+export declare function useFocus(): {
+    isFocus: import("../../hooks/useState").State<boolean>;
+    focusInputOnClick: (e: MouseEvent) => void;
+};

package/components/input/useFocus.js

@@ -0,0 +1,21 @@
+import { useInstance } from 'intact-react';
+import { useState } from '../../hooks/useState';
+export function useFocus() {
+  var instance = useInstance();
+  var isFocus = useState(false);
+  instance.on('focus', function () {
+    return isFocus.set(true);
+  });
+  instance.on('blur', function () {
+    return isFocus.set(false);
+  });
+
+  function focusInputOnClick(e) {
+    instance.focus();
+  }
+
+  return {
+    isFocus: isFocus,
+    focusInputOnClick: focusInputOnClick
+  };
+}

package/components/menu/item.vdt.js

@@ -11,6 +11,9 @@ import { makeItemStyles, makeTitleStyles } from './styles';
 var _$tmp0 = {
   'className': 'k-menu-dot ion-record'
 };
+var _$tmp1 = {
+  'className': 'k-menu-arrow k-icon-down'
+};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -56,7 +59,7 @@ export default function ($props, $blocks, $__proto__) {
   var title = function title(children) {
     var _$cn2;
 
-    return _$ce(2, 'div', [showDot ? _$cc(Icon, _$tmp0) : undefined, _$ce(2, 'div', children, 0, 'k-menu-name'), subMenuVNode ? _$ce(2, 'i', null, 1, 'k-menu-arrow ion-ios-arrow-down') : undefined], 0, _$cn((_$cn2 = {
+    return _$ce(2, 'div', [showDot ? _$cc(Icon, _$tmp0) : undefined, _$ce(2, 'div', children, 0, 'k-menu-name'), subMenuVNode ? _$cc(Icon, _$tmp1) : undefined], 0, _$cn((_$cn2 = {
       'k-menu-title': true
     }, _$cn2[makeTitleStyles()] = true, _$cn2)), {
       'ev-click': _this.onClick.bind(_this, subMenuVNode)

package/components/message/message.js

@@ -21,7 +21,7 @@ var defaults = function defaults() {
   return {
     duration: 5000,
     type: 'info',
-    closable: true
+    closable: false
   };
 };
 

package/components/pagination/index.vdt.js

@@ -9,10 +9,10 @@ import { Icon } from '../icon';
 import { _$ } from '../../i18n';
 import { makeStyles } from './styles';
 var _$tmp0 = {
-  'className': 'k-icon-arrow-left'
+  'className': 'k-icon-left'
 };
 var _$tmp1 = {
-  'className': 'k-icon-arrow-right'
+  'className': 'k-icon-right'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/components/pagination/styles.js

@@ -27,11 +27,8 @@ var defaults = deepDefaults({
 
     get borderRadius() {
       return theme.borderRadius;
-    },
+    } // get hoverBgColor() { return theme.color.hoverBg }
 
-    get hoverBgColor() {
-      return theme.color.hoverBg;
-    }
 
   },
   // goto
@@ -64,7 +61,7 @@ setDefault(function () {
   }).pagination;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";>*{display:inline-block;vertical-align:middle;&:not(:first-child){margin-left:", pagination.gap, ";}}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";border-radius:", pagination.btn.borderRadius, "!important;&:last-of-type{margin:0!important;}&:hover{background:", pagination.btn.hoverBgColor, ";}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";>*{display:inline-block;vertical-align:middle;&:not(:first-child){margin-left:", pagination.gap, ";}}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";border-radius:", pagination.btn.borderRadius, "!important;&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = pagination[size];
     var btnStyles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");

package/components/popover/styles.js

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 var defaults = {
-  width: '240px',
+  width: '320px',
   padding: '8px 16px',
   gap: '8px',
   title: {

package/components/progress/index.vdt.js

@@ -90,7 +90,7 @@ export default function ($props, $blocks, $__proto__) {
     } else {
       switch (status) {
         case 'success':
-          icon = 'k-icon-truth';
+          icon = 'k-icon-check';
           break;
 
         case 'error':

package/components/radio/styles.js

@@ -61,5 +61,5 @@ setDefault(function () {
   }).radio;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}&:hover{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}&:hover{.k-radio-wrapper{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
 }

package/components/scrollSelect/styles.js

@@ -23,7 +23,7 @@ var defaults = {
       return theme.color.bg;
     },
 
-    activeFontSize: "1.1em",
+    activeFontSize: "1.3em",
 
     get disabledColor() {
       return theme.color.disabled;