@kdcloudjs/kdesign 1.6.6 → 1.6.8

package/es/carousel/style/index.css

@@ -109,6 +109,7 @@
 }
 .kd-carousel-list {
   list-style: none;
+  padding: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -182,6 +183,8 @@
 }
 .kd-carousel-slidebar {
   position: absolute;
+  list-style: none;
+  padding: 0;
 }
 .kd-carousel-slidebar-left {
   display: -webkit-box;

package/es/carousel/style/index.less

@@ -13,6 +13,7 @@
 
   &-list {
     list-style: none;
+    padding: 0;
     display: flex;
     flex-direction: row;
     position: relative;
@@ -79,6 +80,9 @@
 
   &-slidebar {
     position: absolute;
+    list-style: none;
+    padding: 0;
+
     &-left {
       .vertical;
       left: @carousel-dots-margin-left;

package/es/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/es/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/es/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;

package/es/config-provider/compDefaultProps.js

@@ -138,7 +138,11 @@ var compDefaultProps = {
     borderType: 'underline',
     mode: 'single',
     defaultOpen: false,
-    showArrow: true
+    showArrow: true,
+    placeholder: '请输入需要搜索的内容',
+    filterOption: true,
+    optionLabelProp: 'children',
+    optionFilterProp: 'label'
   },
   Image: {
     preview: true

package/es/date-picker/date-picker.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { useContext, useEffect } from 'react';
 import classnames from 'classnames';
@@ -14,7 +14,6 @@ import useValueTexts from './hooks/use-value-texts';
 import useHoverValue from './hooks/use-hover-value';
 import { formatDate, getHours, getLowerBoundTime, getMinutes, getSeconds, isEqual, isValid, newDate, parseDate, setTime } from './utils/date-fns';
 import useTextValueMapping from './hooks/use-text-value-mapping';
-import { getCompLangMsg } from '../locale';
 import getExtraFooter from './utils/get-extra-footer';
 import getRanges from './utils/get-ranges';
 import usePopper from '../_utils/usePopper';
@@ -95,15 +94,13 @@ function DatePicker(props) {
   // const seconds = generateUnits(0, 59, secondStep, disabledSeconds && disabledSeconds(originHour, minute))
 
   var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
-  var datePickerLang = locale ? getCompLangMsg({
-    componentName: 'DatePicker'
-  }, function (_componentName, label) {
-    return locale[label];
-  }) : globalLocale.getCompLangMsg({
+
+  var datePickerLang = _extends({}, globalLocale.getCompLangMsg({
     componentName: 'DatePicker'
-  }); // console.log(_format)
+  }), locale || {}); // console.log(_format)
   // 原始数据
 
+
   var _useMergedState = useMergedState(null, {
     value: value,
     defaultValue: defaultValue
@@ -168,18 +165,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 = parseDate(newText, _format);
 
         if (inputTempDate && (!disabledDate || !disabledDate(inputTempDate))) {
           if (picker !== 'year') {
-            setSelectedValue(inputTempDate);
-            setDateValue(inputTempDate);
+            triggerChange(inputTempDate);
+            setViewDate(inputTempDate);
           } else if (isValid(inputTempDate)) {
-            setSelectedValue(inputTempDate);
-            setDateValue(inputTempDate);
+            triggerChange(inputTempDate);
+            setViewDate(inputTempDate);
           }
         }
       }

package/es/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/es/date-picker/panel/month/month.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useContext } from 'react';
 import classnames from 'classnames';
 import { getMonth, newDate, getYear, setMonth, isAfter, isBefore, isSameMonth, getStartOfMonth } from '../../utils/date-fns';
 import Context from '../../context';
 import useRangeCls from '../../hooks/use-range-cls';
-export var monthsNumToText = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '13月'];
 var monthsThreeColumns = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11]];
 
 function Month(props) {
@@ -19,7 +19,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;
@@ -94,10 +95,11 @@ function Month(props) {
   };
 
   var renderMonthItem = function renderMonthItem(i) {
-    var monthsText = monthsNumToText[i];
+    var _context;
+
     return /*#__PURE__*/React.createElement("span", {
       className: getMonthClassNames(i)
-    }, monthsText);
+    }, _concatInstanceProperty(_context = "".concat(i + 1)).call(_context, locale.month));
   };
 
   var renderMonth = function renderMonth() {

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Icon } from '../../index';
 import usePickerInput from '../hooks/use-picker-input';
@@ -67,6 +67,12 @@ function InputDate(props, ref) {
       setMergedActivePickerIndex = props.setMergedActivePickerIndex,
       setHoverRangedValue = props.setHoverRangedValue;
   var preventBlurRef = useRef(false);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMouseEnter = _useState2[0],
+      setIsMouseEnter = _useState2[1];
+
   var placeholder = getRangePlaceholder(picker, locale, propsPlaceholder);
 
   var onInternalonClick = function onInternalonClick(e) {
@@ -100,11 +106,6 @@ function InputDate(props, ref) {
     }
   };
 
-  var suffixNode = /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-suffix")
-  }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
-    type: picker === 'time' ? 'waiting' : 'date'
-  }));
   var clearNode;
 
   if (allowClear && (getValue(dateValue, 0) && !mergedDisabled[0] || getValue(dateValue, 1) && !mergedDisabled[1])) {
@@ -132,12 +133,24 @@ function InputDate(props, ref) {
 
         setHoverRangedValue([null, null]);
       },
-      className: "".concat(prefixCls, "-clear")
+      className: "".concat(prefixCls, "-range-clear")
     }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
+      type: "close-solid"
     }));
   }
 
+  var getSuffixNode = function getSuffixNode() {
+    if (isMouseEnter && (startHoverValue || endHoverValue || startText || endText)) {
+      return clearNode;
+    }
+
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-suffix")
+    }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: picker === 'time' ? 'waiting' : 'date'
+    }));
+  };
+
   var getSharedInputHookProps = function getSharedInputHookProps(index, resetText) {
     return {
       preventBlurRef: preventBlurRef,
@@ -190,14 +203,31 @@ function InputDate(props, ref) {
       endTyping = _usePickerInput4$.typing;
 
   var borderClass = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_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.createElement("div", _extends({
     ref: ref,
     className: classnames(prefixCls, "".concat(prefixCls, "-range"), className, borderClass, (_classnames2 = {}, _defineProperty(_classnames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, size), size), _defineProperty(_classnames2, "".concat(prefixCls, "-disabled"), mergedDisabled[0] && mergedDisabled[1]), _defineProperty(_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.createElement("div", {
@@ -240,7 +270,7 @@ function InputDate(props, ref) {
       width: activeBarWidth,
       position: 'absolute'
     })
-  }), suffixNode, clearNode);
+  }), getSuffixNode());
 }
 
 export default /*#__PURE__*/React.forwardRef(InputDate);

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

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -18,7 +18,6 @@ import useHoverValue from './hooks/use-hover-value';
 import { formatDate, isAfter, newDate, parseDate, isEqual, isSameQuarter, isSameDay, isValid, getHours, getMinutes, getSeconds } from './utils/date-fns';
 import useTextValueMapping from './hooks/use-text-value-mapping';
 import useRangeViewDates from './hooks/use-range-view-dates';
-import { getCompLangMsg } from '../locale';
 import useRangeDisabled from './hooks/use-range-disabled';
 import getExtraFooter from './utils/get-extra-footer';
 import getRanges from './utils/get-ranges';
@@ -116,13 +115,11 @@ function DatePicker(props) {
       onBlur = datePickerProps.onBlur,
       _onOk = datePickerProps.onOk;
   var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
-  var datePickerLang = locale ? getCompLangMsg({
-    componentName: 'DatePicker'
-  }, function (_componentName, label) {
-    return locale[label];
-  }) : globalLocale.getCompLangMsg({
+
+  var datePickerLang = _extends({}, globalLocale.getCompLangMsg({
     componentName: 'DatePicker'
-  }); // ref
+  }), locale || {}); // ref
+
 
   var panelDivRef = React.useRef(null);
   var inputDivRef = React.useRef(null);
@@ -258,7 +255,7 @@ function DatePicker(props) {
       }
 
       if (inputTempDate) {
-        setSelectedValue(updateValues(selectedValue, inputTempDate, index));
+        triggerChange(updateValues(selectedValue, inputTempDate, index), index);
         setViewDate(inputTempDate, index);
       }
     } else if (newText && newText.length === _format.length) {
@@ -267,10 +264,10 @@ function DatePicker(props) {
 
       if (inputTempDate && (!disabledFunc || !disabledFunc(inputTempDate))) {
         if (picker !== 'year') {
-          setSelectedValue(updateValues(selectedValue, inputTempDate, index));
+          triggerChange(updateValues(selectedValue, inputTempDate, index), index);
           setViewDate(inputTempDate, index);
         } else if (isValid(inputTempDate)) {
-          setSelectedValue(updateValues(selectedValue, inputTempDate, index));
+          triggerChange(updateValues(selectedValue, inputTempDate, index), index);
           setViewDate(inputTempDate, index);
         }
       }

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Icon } from '../../index';
 import usePickerInput from '../hooks/use-picker-input';
@@ -51,12 +51,42 @@ function InputDate(props, ref) {
       triggerOpen = props.triggerOpen,
       triggerChange = props.triggerChange;
   var preventBlurRef = useRef(false);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMouseEnter = _useState2[0],
+      setIsMouseEnter = _useState2[1];
+
   var placeholder = getPlaceholder(picker, locale, propsPlaceholder);
-  var suffixNode = /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-suffix")
-  }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
-    type: picker === 'time' ? 'waiting' : 'date'
-  }));
+
+  var getSuffixNode = function getSuffixNode() {
+    if (isMouseEnter && (hoverValue || text)) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-suffix")
+    }, suffixIcon || /*#__PURE__*/React.createElement(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;
 
   if (allowClear && dateValue && !disabled) {
@@ -73,7 +103,7 @@ function InputDate(props, ref) {
       },
       className: "".concat(prefixCls, "-clear")
     }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
+      type: "close-solid"
     }));
   }
 
@@ -142,8 +172,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.createElement("div", {
@@ -167,7 +197,7 @@ function InputDate(props, ref) {
     title: text
   }, inputProps, {
     size: getInputSize(picker, format)
-  })), suffixNode, clearNode));
+  })), getSuffixNode(), clearNode));
 }
 
 export default /*#__PURE__*/React.forwardRef(InputDate);

package/es/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;
 }