@kdcloudjs/kdesign 1.6.5 → 1.6.7

package/lib/cascader/style/index.css

@@ -111,15 +111,15 @@
   cursor: pointer;
 }
 .kd-cascader-picker:focus > .kd-cascader-picker-input {
-  border-color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
 .kd-cascader-picker:focus > .kd-cascader-picker-input i[class*="kdicon"] {
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
 .kd-cascader-picker:hover > .kd-cascader-picker-input i[class*="kdicon"] {
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker.disabled .kd-cascader-picker-input {
   cursor: not-allowed;
@@ -155,10 +155,10 @@
   cursor: pointer;
 }
 .kd-cascader-picker-input.expand {
-  border-color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker-input.expand i[class*="kdicon"] {
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-color-active, #999);
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
@@ -188,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-clear-color-text, #666);
+  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -197,7 +197,7 @@
           transform: scale(0.9) translateY(-50%);
 }
 .kd-cascader-picker-close:hover {
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-menus {
   -webkit-box-sizing: border-box;

package/lib/cascader/style/token.less

@@ -12,14 +12,14 @@
 @cascader-menu-item-padding-horizontal: var(~'@{cascader-prefix}-menu-item-spacing-padding-horizontal', 12px);
 
 // colors
-@cascader-active-color: var(~'@{cascader-prefix}-color-active', @color-theme);
+@cascader-active-color: var(~'@{cascader-prefix}-color-active', #999);
 @cascader-color: var(~'@{cascader-prefix}-color-text', @color-text-primary);
 @cascader-bg-color: var(~'@{cascader-prefix}-color-background', @color-white);
 @cascader-hover-bg-color: var(~'@{cascader-prefix}-color-background-hover', @color-hover);
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
-@cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #666);
+@cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

package/lib/config-provider/compDefaultProps.d.ts

@@ -133,6 +133,10 @@ declare const compDefaultProps: {
         mode: string;
         defaultOpen: boolean;
         showArrow: boolean;
+        placeholder: string;
+        filterOption: boolean;
+        optionLabelProp: string;
+        optionFilterProp: string;
     };
     Image: {
         preview: boolean;
@@ -283,6 +287,7 @@ declare const compDefaultProps: {
         borderType: string;
         disabled: boolean;
         count: boolean;
+        countPosition: string;
         maxLength: number;
     };
     Timeline: {

package/lib/config-provider/compDefaultProps.js

@@ -156,7 +156,11 @@ var compDefaultProps = {
     borderType: 'underline',
     mode: 'single',
     defaultOpen: false,
-    showArrow: true
+    showArrow: true,
+    placeholder: '请输入需要搜索的内容',
+    filterOption: true,
+    optionLabelProp: 'children',
+    optionFilterProp: 'label'
   },
   Image: {
     preview: true
@@ -312,6 +316,7 @@ var compDefaultProps = {
     borderType: 'underline',
     disabled: false,
     count: true,
+    countPosition: 'outter',
     maxLength: 255
   },
   Timeline: {

package/lib/date-picker/date-picker.js

@@ -15,10 +15,10 @@ exports.default = void 0;
 
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -45,8 +45,6 @@ var _dateFns = require("./utils/date-fns");
 
 var _useTextValueMapping3 = _interopRequireDefault(require("./hooks/use-text-value-mapping"));
 
-var _locale = require("../locale");
-
 var _getExtraFooter = _interopRequireDefault(require("./utils/get-extra-footer"));
 
 var _getRanges = _interopRequireDefault(require("./utils/get-ranges"));
@@ -137,13 +135,9 @@ function DatePicker(props) {
   // const seconds = generateUnits(0, 59, secondStep, disabledSeconds && disabledSeconds(originHour, minute))
 
   var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
-  var datePickerLang = locale ? (0, _locale.getCompLangMsg)({
-    componentName: 'DatePicker'
-  }, function (_componentName, label) {
-    return locale[label];
-  }) : globalLocale.getCompLangMsg({
+  var datePickerLang = (0, _extends2.default)({}, globalLocale.getCompLangMsg({
     componentName: 'DatePicker'
-  }); // console.log(_format)
+  }), locale || {}); // console.log(_format)
   // 原始数据
 
   var _useMergedState = (0, _hooks.useMergedState)(null, {
@@ -210,18 +204,18 @@ function DatePicker(props) {
     valueText: valueText,
     onTextChange: function onTextChange(newText) {
       if (newText === '') {
-        setSelectedValue(null);
-        setDateValue(null);
+        triggerChange(null);
+        setViewDate(null);
       } else if (newText && newText.length === _format.length) {
         var inputTempDate = (0, _dateFns.parseDate)(newText, _format);
 
         if (inputTempDate && (!disabledDate || !disabledDate(inputTempDate))) {
           if (picker !== 'year') {
-            setSelectedValue(inputTempDate);
-            setDateValue(inputTempDate);
+            triggerChange(inputTempDate);
+            setViewDate(inputTempDate);
           } else if ((0, _dateFns.isValid)(inputTempDate)) {
-            setSelectedValue(inputTempDate);
-            setDateValue(inputTempDate);
+            triggerChange(inputTempDate);
+            setViewDate(inputTempDate);
           }
         }
       }

package/lib/date-picker/panel/month/month.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { DateType } from '../../interface';
-export declare const monthsNumToText: string[];
 export interface MonthProps {
     showFullMonth?: boolean;
     disabledDate?(date: DateType): boolean;

package/lib/date-picker/panel/month/month.js

@@ -11,7 +11,9 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.monthsNumToText = exports.default = void 0;
+exports.default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
@@ -25,7 +27,7 @@ var _classnames3 = _interopRequireDefault(require("classnames"));
 
 var _dateFns = require("../../utils/date-fns");
 
-var _context = _interopRequireDefault(require("../../context"));
+var _context2 = _interopRequireDefault(require("../../context"));
 
 var _useRangeCls = _interopRequireDefault(require("../../hooks/use-range-cls"));
 
@@ -33,12 +35,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var monthsNumToText = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '13月'];
-exports.monthsNumToText = monthsNumToText;
 var monthsThreeColumns = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11]];
 
 function Month(props) {
-  var context = (0, _react.useContext)(_context.default);
+  var context = (0, _react.useContext)(_context2.default);
   var prefixCls = context.prefixCls,
       dateValue = context.dateValue,
       viewDate = context.viewDate,
@@ -47,7 +47,8 @@ function Month(props) {
       onDateMouseLeave = context.onDateMouseLeave,
       rangeValue = context.rangeValue,
       panelPosition = context.panelPosition,
-      hoverRangedValue = context.hoverRangedValue;
+      hoverRangedValue = context.hoverRangedValue,
+      locale = context.locale;
   var disabledDate = props.disabledDate;
 
   var _dateValue;
@@ -122,10 +123,11 @@ function Month(props) {
   };
 
   var renderMonthItem = function renderMonthItem(i) {
-    var monthsText = monthsNumToText[i];
+    var _context;
+
     return /*#__PURE__*/_react.default.createElement("span", {
       className: getMonthClassNames(i)
-    }, monthsText);
+    }, (0, _concat.default)(_context = "".concat(i + 1)).call(_context, locale.month));
   };
 
   var renderMonth = function renderMonth() {

package/lib/date-picker/range/input-range.js

@@ -94,6 +94,12 @@ function InputDate(props, ref) {
       setMergedActivePickerIndex = props.setMergedActivePickerIndex,
       setHoverRangedValue = props.setHoverRangedValue;
   var preventBlurRef = (0, _react.useRef)(false);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMouseEnter = _useState2[0],
+      setIsMouseEnter = _useState2[1];
+
   var placeholder = (0, _utils.getRangePlaceholder)(picker, locale, propsPlaceholder);
 
   var onInternalonClick = function onInternalonClick(e) {
@@ -127,12 +133,6 @@ function InputDate(props, ref) {
     }
   };
 
-  var suffixNode = /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(prefixCls, "-suffix")
-  }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
-    type: picker === 'time' ? 'waiting' : 'date'
-  }));
-
   var clearNode;
 
   if (allowClear && ((0, _utils.getValue)(dateValue, 0) && !mergedDisabled[0] || (0, _utils.getValue)(dateValue, 1) && !mergedDisabled[1])) {
@@ -160,12 +160,24 @@ function InputDate(props, ref) {
 
         setHoverRangedValue([null, null]);
       },
-      className: "".concat(prefixCls, "-clear")
+      className: "".concat(prefixCls, "-range-clear")
     }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
-      type: "close"
+      type: "close-solid"
     }));
   }
 
+  var getSuffixNode = function getSuffixNode() {
+    if (isMouseEnter && (startHoverValue || endHoverValue || startText || endText)) {
+      return clearNode;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixCls, "-suffix")
+    }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: picker === 'time' ? 'waiting' : 'date'
+    }));
+  };
+
   var getSharedInputHookProps = function getSharedInputHookProps(index, resetText) {
     return {
       preventBlurRef: preventBlurRef,
@@ -218,14 +230,31 @@ function InputDate(props, ref) {
       endTyping = _usePickerInput4$.typing;
 
   var borderClass = (0, _classnames5.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-borderless"), borderType === 'none'), _classnames));
+
+  var mouseEnterHandle = function mouseEnterHandle(e) {
+    setIsMouseEnter(true);
+
+    if (typeof onMouseEnter === 'function') {
+      onMouseEnter(e);
+    }
+  };
+
+  var mouseLeaveHandle = function mouseLeaveHandle(e) {
+    setIsMouseEnter(false);
+
+    if (typeof onMouseLeave === 'function') {
+      onMouseLeave(e);
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     ref: ref,
     className: (0, _classnames5.default)(prefixCls, "".concat(prefixCls, "-range"), className, borderClass, (_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, (0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, size), size), (0, _defineProperty2.default)(_classnames2, "".concat(prefixCls, "-disabled"), mergedDisabled[0] && mergedDisabled[1]), (0, _defineProperty2.default)(_classnames2, "".concat(prefixCls, "-focused"), mergedActivePickerIndex === 0 ? startFocused : endFocused), _classnames2)),
     style: style,
     onMouseDown: onInternalonMouseDown,
     onMouseUp: onMouseUp,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
+    onMouseEnter: mouseEnterHandle,
+    onMouseLeave: mouseLeaveHandle,
     onContextMenu: onContextMenu,
     onClick: onInternalonClick
   }, dataOrAriaProps), /*#__PURE__*/_react.default.createElement("div", {
@@ -268,7 +297,7 @@ function InputDate(props, ref) {
       width: activeBarWidth,
       position: 'absolute'
     })
-  }), suffixNode, clearNode);
+  }), getSuffixNode());
 }
 
 var _default = /*#__PURE__*/_react.default.forwardRef(InputDate);

package/lib/date-picker/range-picker.js

@@ -19,12 +19,12 @@ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _isSameWeek = _interopRequireDefault(require("date-fns/isSameWeek"));
@@ -53,8 +53,6 @@ var _useTextValueMapping5 = _interopRequireDefault(require("./hooks/use-text-val
 
 var _useRangeViewDates3 = _interopRequireDefault(require("./hooks/use-range-view-dates"));
 
-var _locale = require("../locale");
-
 var _useRangeDisabled3 = _interopRequireDefault(require("./hooks/use-range-disabled"));
 
 var _getExtraFooter = _interopRequireDefault(require("./utils/get-extra-footer"));
@@ -161,13 +159,9 @@ function DatePicker(props) {
       onBlur = datePickerProps.onBlur,
       _onOk = datePickerProps.onOk;
   var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
-  var datePickerLang = locale ? (0, _locale.getCompLangMsg)({
-    componentName: 'DatePicker'
-  }, function (_componentName, label) {
-    return locale[label];
-  }) : globalLocale.getCompLangMsg({
+  var datePickerLang = (0, _extends2.default)({}, globalLocale.getCompLangMsg({
     componentName: 'DatePicker'
-  }); // ref
+  }), locale || {}); // ref
 
   var panelDivRef = _react.default.useRef(null);
 
@@ -312,7 +306,7 @@ function DatePicker(props) {
       }
 
       if (inputTempDate) {
-        setSelectedValue((0, _utils2.updateValues)(selectedValue, inputTempDate, index));
+        triggerChange((0, _utils2.updateValues)(selectedValue, inputTempDate, index), index);
         setViewDate(inputTempDate, index);
       }
     } else if (newText && newText.length === _format.length) {
@@ -321,10 +315,10 @@ function DatePicker(props) {
 
       if (inputTempDate && (!disabledFunc || !disabledFunc(inputTempDate))) {
         if (picker !== 'year') {
-          setSelectedValue((0, _utils2.updateValues)(selectedValue, inputTempDate, index));
+          triggerChange((0, _utils2.updateValues)(selectedValue, inputTempDate, index), index);
           setViewDate(inputTempDate, index);
         } else if ((0, _dateFns.isValid)(inputTempDate)) {
-          setSelectedValue((0, _utils2.updateValues)(selectedValue, inputTempDate, index));
+          triggerChange((0, _utils2.updateValues)(selectedValue, inputTempDate, index), index);
           setViewDate(inputTempDate, index);
         }
       }

package/lib/date-picker/single/input-date.js

@@ -78,13 +78,41 @@ function InputDate(props, ref) {
       triggerOpen = props.triggerOpen,
       triggerChange = props.triggerChange;
   var preventBlurRef = (0, _react.useRef)(false);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMouseEnter = _useState2[0],
+      setIsMouseEnter = _useState2[1];
+
   var placeholder = (0, _utils.getPlaceholder)(picker, locale, propsPlaceholder);
 
-  var suffixNode = /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(prefixCls, "-suffix")
-  }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
-    type: picker === 'time' ? 'waiting' : 'date'
-  }));
+  var getSuffixNode = function getSuffixNode() {
+    if (isMouseEnter && (hoverValue || text)) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixCls, "-suffix")
+    }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: picker === 'time' ? 'waiting' : 'date'
+    }));
+  };
+
+  var mouseEnterHandle = function mouseEnterHandle(e) {
+    setIsMouseEnter(true);
+
+    if (typeof onMouseEnter === 'function') {
+      onMouseEnter(e);
+    }
+  };
+
+  var mouseLeaveHandle = function mouseLeaveHandle(e) {
+    setIsMouseEnter(false);
+
+    if (typeof onMouseLeave === 'function') {
+      onMouseLeave(e);
+    }
+  };
 
   var clearNode;
 
@@ -102,7 +130,7 @@ function InputDate(props, ref) {
       },
       className: "".concat(prefixCls, "-clear")
     }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
-      type: "close"
+      type: "close-solid"
     }));
   }
 
@@ -171,8 +199,8 @@ function InputDate(props, ref) {
     style: style,
     onMouseDown: onInternalonMouseDown,
     onMouseUp: onInternalMouseUp,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
+    onMouseEnter: mouseEnterHandle,
+    onMouseLeave: mouseLeaveHandle,
     onContextMenu: onContextMenu,
     onClick: onClick
   }, dataOrAriaProps), /*#__PURE__*/_react.default.createElement("div", {
@@ -196,7 +224,7 @@ function InputDate(props, ref) {
     title: text
   }, inputProps, {
     size: (0, _utils.getInputSize)(picker, format)
-  })), suffixNode, clearNode));
+  })), getSuffixNode(), clearNode));
 }
 
 var _default = /*#__PURE__*/_react.default.forwardRef(InputDate);

package/lib/date-picker/style/index.css

@@ -157,45 +157,36 @@
   font-size: var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
 }
+.kd-date-picker-small.kd-date-picker-underline {
+  padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) 0;
+}
 .kd-date-picker-small input {
   font-size: var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px));
 }
-.kd-date-picker-small .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 1px);
-}
-.kd-date-picker-small.kd-date-picker-range .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 12px);
-}
 .kd-date-picker-large {
   height: var(--kd-c-date-picker-large-sizing-height, 36px);
   line-height: calc(var(--kd-c-date-picker-large-sizing-height, 36px) - (var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) * 2) - 2);
   font-size: var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px));
   padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
 }
+.kd-date-picker-large.kd-date-picker-underline {
+  padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) 0;
+}
 .kd-date-picker-large input {
   font-size: var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px));
 }
-.kd-date-picker-large .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px)) + 1px);
-}
-.kd-date-picker-large.kd-date-picker-range .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px)) + 9px);
-}
 .kd-date-picker-middle {
   height: var(--kd-c-date-picker-middle-sizing-height, 30px);
   line-height: calc(var(--kd-c-date-picker-middle-sizing-height, 30px) - (var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) * 2) - 2);
   font-size: var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px));
   padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
 }
+.kd-date-picker-middle.kd-date-picker-underline {
+  padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) 0;
+}
 .kd-date-picker-middle input {
   font-size: var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px));
 }
-.kd-date-picker-middle .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 1px);
-}
-.kd-date-picker-middle.kd-date-picker-range .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 11px);
-}
 .kd-date-picker-input {
   position: relative;
   display: -webkit-box;
@@ -266,6 +257,9 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   position: relative;
 }
 .kd-date-picker-range-separator {
@@ -302,13 +296,11 @@
 .kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-clear {
   opacity: 1;
 }
-.kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-suffix {
-  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
-}
 .kd-date-picker-clear {
   position: absolute;
   top: 50%;
-  color: var(--kd-c-date-picker-icon-color, var(--kd-g-color-disabled, #b2b2b2));
+  right: 0;
+  color: var(--kd-c-date-picker-icon-color, #d9d9d9);
   line-height: 1;
   background: var(--kd-c-date-picker-clear-color-background, var(--kd-g-color-background, #fff));
   -webkit-transform: translateY(-48%);
@@ -320,7 +312,18 @@
   vertical-align: top;
 }
 .kd-date-picker-clear:hover {
-  color: var(--kd-c-date-picker-clear-color-background-hover, var(--kd-g-color-theme-5, #87adff));
+  color: var(--kd-c-date-picker-icon-color-hover, #999);
+}
+.kd-date-picker .kd-date-picker-range-clear {
+  -ms-flex-item-align: center;
+      align-self: center;
+  margin-left: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
+  color: var(--kd-c-date-picker-icon-color, #d9d9d9);
+  line-height: 1;
+  cursor: pointer;
+}
+.kd-date-picker .kd-date-picker-range-clear:hover {
+  color: var(--kd-c-date-picker-icon-color-hover, #999);
 }
 .kd-date-picker-focused .kd-date-picker-suffix {
   color: var(--kd-c-date-picker-clear-color-background-focused, var(--kd-g-color-theme, #5582f3));
@@ -918,4 +921,5 @@
   line-height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
   font-size: var(--kd-c-date-picker-container-font-size, var(--kd-g-font-size-small, 12px));
   border-bottom: 0.5px solid var(--kd-c-date-picker-container-color-border, var(--kd-g-color-border-weak, #e5e5e5));
+  cursor: pointer;
 }