@kdcloudjs/kdesign 1.6.3 → 1.6.5

package/es/pagination/style/index.less

@@ -186,107 +186,113 @@
 
   // 简化版分页
   &.simple {
-    display: inline-flex;
-    justify-content: space-around;
-    align-items: center;
-    height: @pagination-size;
-    border-radius: @radius-border;
-    border: @pagination-border-size solid transparent;
+    .@{pagination-prefix-cls}-action {
+      display: inline-flex;
+      justify-content: space-around;
+      align-items: center;
+      height: @pagination-size;
+      border-radius: @radius-border;
+      border: @pagination-border-size solid transparent;
 
-    &.bordered {
-      border-color: @pagination-border-color;
-      transition: border-color @duration-promptly;
+      &.bordered {
+        border-color: @pagination-border-color;
+        transition: border-color @duration-promptly;
 
-      &:active:not(.disabled) {
-        border-color: @pagination-border-hover-color;
-      }
+        &:active:not(.disabled) {
+          border-color: @pagination-border-hover-color;
+        }
 
-      &.disabled,
-      &.disabled > .@{pagination-prefix-cls}-item > button {
-        background-color: @pagination-button-disabled-background-color;
+        &.disabled,
+        &.disabled > .@{pagination-prefix-cls}-item > button {
+          background-color: @pagination-button-disabled-background-color;
+        }
       }
-    }
-
-    &.disabled > .@{pagination-prefix-cls}-item {
-      color: @pagination-disabled-color;
-    }
-
-    .@{pagination-prefix-cls}-item {
-      .reset-component;
-      display: inline-block;
-      height: @pagination-size;
-      overflow: hidden;
-      margin: 0 8px;
-      vertical-align: middle;
-      color: @color-text-primary;
 
-      &:first-child,
-      &:last-child {
-        margin: 0;
+      &.disabled > .@{pagination-prefix-cls}-action-item {
+        color: @pagination-disabled-color;
       }
 
-      .@{pagination-prefix-cls}-current {
-        margin-right: 2px;
+      &-item {
+        .reset-component;
+        display: inline-block;
+        height: @pagination-size;
+        overflow: hidden;
+        margin: 0 8px;
         vertical-align: middle;
+        color: @color-text-primary;
 
-        .@{pagination-prefix-cls}-current-input {
+        &:first-child,
+        &:last-child {
           margin: 0;
+        }
 
-          &:disabled {
-            color: @pagination-disabled-color;
-            cursor: not-allowed;
+        .@{pagination-prefix-cls}-current {
+          margin-right: 2px;
+          vertical-align: middle;
+
+          .@{pagination-prefix-cls}-current-input {
+            margin: 0;
+
+            &:disabled {
+              color: @pagination-disabled-color;
+              cursor: not-allowed;
+            }
           }
         }
-      }
 
-      .@{pagination-prefix-cls}-total {
-        vertical-align: middle;
-        margin-right: 0;
-      }
+        .@{pagination-prefix-cls}-total {
+          vertical-align: middle;
+          margin-right: 0;
+        }
 
-      button {
-        box-sizing: border-box;
-        position: relative;
-        width: calc(@pagination-size - 2px);
-        height: calc(@pagination-size - 2px);
-        border: none;
-        background-color: @color-background;
-        border-radius: @radius-border;
-        cursor: pointer;
-        outline: none;
-        vertical-align: middle;
-        transition: border-color @duration-promptly;
+        &.bordered > button {
+          border: none;
+        }
 
-        &:hover,
-        &:active {
-          &:not(:disabled) {
-            border-color: @pagination-border-hover-color;
-          }
+        button {
+          box-sizing: border-box;
+          position: relative;
+          width: calc(@pagination-size - 2px);
+          height: calc(@pagination-size - 2px);
+          border: none;
+          background-color: @color-background;
+          border-radius: @radius-border;
+          cursor: pointer;
+          outline: none;
+          vertical-align: middle;
+          transition: border-color @duration-promptly;
 
-          i {
-            color: @pagination-hover-color;
+          &:hover,
+          &:active {
+            &:not(:disabled) {
+              border-color: @pagination-border-hover-color;
+            }
+
+            i {
+              color: @pagination-hover-color;
+            }
           }
-        }
 
-        &:disabled {
-          cursor: not-allowed;
+          &:disabled {
+            cursor: not-allowed;
 
-          i {
-            color: @pagination-disabled-color;
+            i {
+              color: @pagination-disabled-color;
+            }
           }
-        }
 
-        i {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          margin: auto;
-          line-height: calc(@pagination-size - 2px);
-          font-size: @pagination-icon-size;
-          color: @pagination-icon-color;
-          transition: color @duration-promptly;
+          i {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            margin: auto;
+            line-height: calc(@pagination-size - 2px);
+            font-size: @pagination-icon-size;
+            color: @pagination-icon-color;
+            transition: color @duration-promptly;
+          }
         }
       }
     }

package/es/rate/rate.js

@@ -54,7 +54,7 @@ var Rate = function Rate(props) {
 
 
   React.useEffect(function () {
-    if (value && value !== 0 && value !== selectedValue) {
+    if (value !== undefined && value !== selectedValue) {
       setSelectedValue(value);
     }
   }, [value, selectedValue]); // const shouldSetValue = (value: number) => {

package/es/rate/style/index.css

@@ -120,13 +120,13 @@
       -ms-flex-pack: start;
           justify-content: flex-start;
 }
-.kd-rate-size-large {
+.kd-rate-size-large .kdicon {
   font-size: var(--kd-c-rate-font-size-large, 20px);
 }
-.kd-rate-size-middle {
+.kd-rate-size-middle .kdicon {
   font-size: var(--kd-c-rate-font-size-middle, 16px);
 }
-.kd-rate-size-small {
+.kd-rate-size-small .kdicon {
   font-size: var(--kd-c-rate-font-size-small, 12px);
 }
 .kd-rate-item {

package/es/rate/style/index.less

@@ -9,13 +9,19 @@
   display: inline-flex;
   justify-content: flex-start;
   &-size-large {
-    font-size: @rate-large-font-size;
+    .@{kd-prefix}icon {
+      font-size: @rate-large-font-size;
+    }
   }
   &-size-middle {
-    font-size: @rate-middle-font-size;
+    .@{kd-prefix}icon {
+      font-size: @rate-middle-font-size;
+    }
   }
   &-size-small {
-    font-size: @rate-small-font-size;
+    .@{kd-prefix}icon {
+      font-size: @rate-small-font-size;
+    }
   }
 }
 .@{rate-prefix-cls}-item {

package/es/search/search.js

@@ -54,7 +54,9 @@ var InternalSearch = function InternalSearch(props, ref) {
       type = searchProps.type,
       placeholder = searchProps.placeholder,
       onSearch = searchProps.onSearch,
-      restProps = __rest(searchProps, ["prefixCls", "className", "style", "size", "disabled", "onPressEnter", "prefix", "suffix", "borderType", "children", "type", "placeholder", "onSearch"]);
+      onFocus = searchProps.onFocus,
+      onBlur = searchProps.onBlur,
+      restProps = __rest(searchProps, ["prefixCls", "className", "style", "size", "disabled", "onPressEnter", "prefix", "suffix", "borderType", "children", "type", "placeholder", "onSearch", "onFocus", "onBlur"]);
 
   devWarning(SearchSizeTypes.indexOf(size) === -1, 'search', "cannot found search size '".concat(size, "'"));
   devWarning(BorderTypes.indexOf(borderType) === -1, 'search', "cannot found search borderType '".concat(borderType, "'"));
@@ -73,12 +75,14 @@ var InternalSearch = function InternalSearch(props, ref) {
   var handlePressEnter = useCallback(function (_, event) {
     onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(searchRef.current.value, event));
   }, [onPressEnter, searchRef]);
-  var handleFocus = useCallback(function () {
+  var handleFocus = useCallback(function (event) {
     setFocused(true);
-  }, []);
-  var handleBlur = useCallback(function () {
+    onFocus && onFocus(event);
+  }, [onFocus]);
+  var handleBlur = useCallback(function (event) {
     setFocused(false);
-  }, []);
+    onBlur && onBlur(event);
+  }, [onBlur]);
   var renderPrefix = useCallback(function () {
     if (!prefix) {
       return null;
@@ -111,7 +115,9 @@ var InternalSearch = function InternalSearch(props, ref) {
       onSearch: onSearch,
       className: className,
       style: style,
-      placeholder: placeholder
+      placeholder: placeholder,
+      onFocus: onFocus,
+      onBlur: onBlur
     }), children);
   }
 

package/es/transfer/list.d.ts

@@ -32,5 +32,5 @@ export interface TransferListProps {
     showRemove?: boolean;
     pagination?: PaginationType;
 }
-declare const TransferList: React.FC<TransferListProps>;
+declare const TransferList: React.ForwardRefExoticComponent<TransferListProps & React.RefAttributes<unknown>>;
 export default TransferList;

package/es/transfer/list.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import React, { useState } from 'react';
+import React, { useState, useImperativeHandle } from 'react';
 import { omit } from '../_utils/omit';
 import Search from './search';
 import DefaultListBody, { OmitProps } from './list-body';
@@ -19,7 +19,7 @@ function isRenderResultPlainObject(result) {
   return result && ! /*#__PURE__*/React.isValidElement(result) && Object.prototype.toString.call(result) === '[object Object]';
 }
 
-var TransferList = function TransferList(props) {
+var ITransferList = function ITransferList(props, ref) {
   var _classNames;
 
   var prefixCls = props.prefixCls,
@@ -50,6 +50,11 @@ var TransferList = function TransferList(props) {
 
 
   var footerDom = footer && footer(props);
+  useImperativeHandle(ref, function () {
+    return {
+      onClear: onClear
+    };
+  });
 
   var renderItem = function renderItem(item) {
     var renderResult = render(item);
@@ -226,6 +231,7 @@ var TransferList = function TransferList(props) {
   }, getSelectAllLabel(checkedKeys.length, filteredItems.length))), listBody, listFooter);
 };
 
+var TransferList = /*#__PURE__*/React.forwardRef(ITransferList);
 TransferList.defaultProps = {
   dataSource: [],
   titleText: '',

package/es/transfer/transfer.d.ts

@@ -29,5 +29,5 @@ export interface TransferProps {
     pagination?: PaginationType;
     footer?: (props: TransferListProps) => React.ReactNode;
 }
-declare const Transfer: React.FC<TransferProps>;
+declare const Transfer: React.ForwardRefExoticComponent<TransferProps & React.RefAttributes<unknown>>;
 export default Transfer;

package/es/transfer/transfer.js

@@ -6,7 +6,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import List from './list';
 import Operation from './operation';
@@ -14,7 +14,7 @@ import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import noDataImg from './img/transfer-empty.png';
 
-var Transfer = function Transfer(props) {
+var InternalTransfer = function InternalTransfer(props, ref) {
   var _classNames;
 
   var _useContext = useContext(ConfigContext),
@@ -75,6 +75,8 @@ var Transfer = function Transfer(props) {
       targetSelectedKeys = _useState4[0],
       setTargetSelectedKeys = _useState4[1];
 
+  var leftListRef = useRef(null);
+  var rightListRef = useRef(null);
   var leftActive = targetSelectedKeys.length > 0;
   var rightActive = sourceSelectedKeys.length > 0;
   var mergedPagination = !children && pagination;
@@ -82,6 +84,25 @@ var Transfer = function Transfer(props) {
   var rightTitle = titles[1] || transferLang.rightTitle;
   var leftPlaceholder = searchPlaceholder[0] || transferLang.searchPlaceholder[0];
   var rightPlaceholder = searchPlaceholder[1] || transferLang.searchPlaceholder[1];
+  useImperativeHandle(ref, function () {
+    return {
+      clearSearch: clearSearch
+    };
+  });
+
+  var clearSearch = function clearSearch(position) {
+    var _a, _b;
+
+    if (position === 'left' || position === undefined) {
+      ;
+      (_a = leftListRef === null || leftListRef === void 0 ? void 0 : leftListRef.current) === null || _a === void 0 ? void 0 : _a.onClear();
+    }
+
+    if (position === 'right' || position === undefined) {
+      ;
+      (_b = rightListRef === null || rightListRef === void 0 ? void 0 : rightListRef.current) === null || _b === void 0 ? void 0 : _b.onClear();
+    }
+  };
 
   var setStateKeys = function setStateKeys(direction, keys) {
     if (direction === 'left') {
@@ -301,7 +322,8 @@ var Transfer = function Transfer(props) {
     showSelectAll: showSelectAll,
     pagination: mergedPagination,
     noDataContent: handleNoDataContent(noDataContent, 'left'),
-    footer: footer
+    footer: footer,
+    ref: leftListRef
   }), /*#__PURE__*/React.createElement(Operation, {
     className: "".concat(transferPrefixCls, "-operation"),
     rightActive: rightActive,
@@ -335,8 +357,11 @@ var Transfer = function Transfer(props) {
     pagination: mergedPagination,
     noDataContent: handleNoDataContent(noDataContent, 'right'),
     footer: footer,
-    showRemove: oneWay
+    showRemove: oneWay,
+    ref: rightListRef
   }));
 };
 
+var Transfer = /*#__PURE__*/React.forwardRef(InternalTransfer);
+Transfer.displayName = 'Transfer';
 export default Transfer;

package/es/upload/style/index.css

@@ -207,7 +207,6 @@
   visibility: visible;
   -webkit-transform: translateX(0);
           transform: translateX(0);
-  background-color: var(--kd-c-upload-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-upload .kd-upload-text-list-item.error i,
 .kd-upload .kd-upload-text-list-item.error .kd-upload-text-list-item-name {
@@ -234,7 +233,7 @@
   padding: 0 var(--kd-c-upload-text-list-item-padding-horizontal, 20px);
   height: var(--kd-c-upload-list-item-height, 44px);
   line-height: var(--kd-c-upload-list-item-height, 44px);
-  background-color: transparent;
+  background: transparent;
   opacity: 0;
   visibility: hidden;
   -webkit-transform: translateX(5px);

package/es/upload/style/index.less

@@ -80,7 +80,6 @@
           opacity: 1;
           visibility: visible;
           transform: translateX(0);
-          background-color: @upload-background-color-hover;
         }
       }
 
@@ -113,7 +112,7 @@
         padding: 0 @upload-text-list-item-padding-horizontal;
         height: @upload-list-item-height;
         line-height: @upload-list-item-height;
-        background-color: transparent;
+        background: transparent;
         opacity: 0;
         visibility: hidden;
         transform: translateX(5px);

package/lib/cascader/cascader.js

@@ -164,7 +164,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var handleClear = function handleClear() {
-    setValue([]);
+    onChange([]);
   };
 
   var inputProps = {
@@ -196,7 +196,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(_input.default, (0, _extends2.default)({}, inputProps)), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-picker-label")
   }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/React.createElement(_icon.default, {
-    type: "close",
+    type: "close-solid",
     className: "".concat(prefixCls, "-picker-close"),
     onClick: handleClear
   })));

package/lib/cascader/style/index.css

@@ -188,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-clear-color-text, #666);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -196,6 +196,9 @@
   -webkit-transform: scale(0.9) translateY(-50%);
           transform: scale(0.9) translateY(-50%);
 }
+.kd-cascader-picker-close:hover {
+  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+}
 .kd-cascader-menus {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/lib/cascader/style/index.less

@@ -99,10 +99,14 @@
     opacity: 0;
     cursor: pointer;
     visibility: hidden;
-    color: @cascader-active-color;
+    color: @cascader-clear-color;
     transition: all 0.1s;
     transform-origin: 50% 50%;
     transform: scale(0.9) translateY(-50%);
+
+    &:hover {
+      color: @cascader-active-color;
+    }
   }
 }
 

package/lib/cascader/style/token.less

@@ -19,6 +19,7 @@
 @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);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

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

@@ -105,7 +105,6 @@
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
 .kd-date-picker {
-  width: var(--kd-c-date-picker-sizing-width, 230px);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -114,6 +113,43 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
+  width: var(--kd-c-date-picker-sizing-width, 230px);
+}
+.kd-date-picker-borderless {
+  border: 0;
+}
+.kd-date-picker-underline {
+  border: none;
+  border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.kd-date-picker-disabled {
+  background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
+  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  cursor: not-allowed !important;
+}
+.kd-date-picker-disabled input {
+  cursor: not-allowed !important;
+}
+.kd-date-picker-underline.kd-date-picker-disabled,
+.kd-date-picker-borderless.kd-date-picker-disabled {
+  background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
+  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-date-picker-focused {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  outline: none;
+  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-date-picker:hover {
+  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-date-picker:not(.kd-date-picker-disabled) input:focus {
+  color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
 }
 .kd-date-picker-small {
   height: var(--kd-c-date-picker-small-sizing-height, 20px);
@@ -160,42 +196,6 @@
 .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-borderless {
-  border: 0;
-}
-.kd-date-picker-underline {
-  border: none;
-  border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
-  border-radius: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.kd-date-picker-disabled {
-  background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
-  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  cursor: not-allowed !important;
-}
-.kd-date-picker-disabled input {
-  cursor: not-allowed !important;
-}
-.kd-date-picker-underline.kd-date-picker-disabled,
-.kd-date-picker-borderless.kd-date-picker-disabled {
-  background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
-  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-}
-.kd-date-picker-focused {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  outline: none;
-  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
-}
-.kd-date-picker:hover {
-  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
-}
-.kd-date-picker:not(.kd-date-picker-disabled) input:focus {
-  color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
-}
 .kd-date-picker-input {
   position: relative;
   display: -webkit-box;
@@ -299,10 +299,10 @@
 .kd-date-picker-suffix > * {
   vertical-align: top;
 }
-.kd-date-picker:hover .kd-date-picker-clear {
+.kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-clear {
   opacity: 1;
 }
-.kd-date-picker:hover .kd-date-picker-suffix {
+.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 {
@@ -331,7 +331,7 @@
   border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
   background-color: #fff;
   text-align: center;
-  z-index: 999;
+  z-index: var(--kd-c-date-picker-panel-z-index, var(--kd-g-z-index-popper, 1050));
   font-size: var(--kd-c-date-picker-panel-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-date-picker-panel-range {

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

@@ -12,10 +12,7 @@
 @datePicker-calendar-height: 242px;
 
 .@{datePicker-prefix-cls} {
-  // &-small {
-  //   height: @date-small-height;
-  //   line-height: @date-small-height - 4;
-  // }
+  .input-wrapper;
   width: @date-width;
 
   &-small {
@@ -66,8 +63,6 @@
     }
   }
 
-  .input-wrapper;
-
   &-input {
     position: relative;
     display: flex;
@@ -147,7 +142,7 @@
     }
   }
 
-  &:hover {
+  &:not(.@{datePicker-prefix-cls}-disabled):hover {
     .@{datePicker-prefix-cls}-clear {
       opacity: 1;
     }
@@ -188,7 +183,7 @@
   border-radius: @date-panel-border-radius;
   background-color: #fff;
   text-align: center;
-  z-index: 999;
+  z-index: @date-panel-z-index;
   font-size: @date-panel-font-size;
 
   &-range {