@kdcloudjs/kdesign 1.7.48-usePopper.1 → 1.7.48-usePopper.2

package/es/popper/style/index.less

@@ -1,6 +1,5 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-// @import './token.less';
 
 @popper-prefix-cls: ~'@{kd-prefix}-popper';
 
@@ -12,27 +11,25 @@
   &.hidden {
     opacity: 0;
     visibility: hidden;
-    transition: all calc(@transition-duration - 0.1s);
     pointer-events: none;
   }
 
-  &-content {
-    .arrow {
-      visibility: hidden;
-
-      &::before {
-        visibility: visible;
-        position: absolute;
-        border-style: solid;
-        border-width: var(--arrowSize);
-        content: '';
-        transform: rotate(45deg);
-      }
+  .arrow {
+    visibility: hidden;
+
+    &::before {
+      visibility: visible;
+      position: absolute;
+      border-style: solid;
+      border-color: transparent;
+      border-width: var(--arrowSize);
+      content: '';
+      transform: rotate(45deg);
     }
   }
 
   &[data-popper-placement^='top'] .arrow {
-    bottom: var(--arrowSize);
+    bottom: calc(0.9 * var(--arrowSize));
 
     &::before {
       left: calc(-1 * var(--arrowSize));
@@ -42,7 +39,7 @@
   }
 
   &[data-popper-placement^='bottom'] .arrow {
-    top: calc(-1 * var(--arrowSize));
+    top: calc(-0.9 * var(--arrowSize));
 
     &::before {
       left: calc(-1 * var(--arrowSize));
@@ -52,7 +49,7 @@
   }
 
   &[data-popper-placement^='left'] .arrow {
-    right: var(--arrowSize);
+    right: calc(0.9 * var(--arrowSize));
 
     &::before {
       top: calc(-1 * var(--arrowSize));
@@ -62,7 +59,7 @@
   }
 
   &[data-popper-placement^='right'] .arrow {
-    left: calc(-1 * var(--arrowSize));
+    left: calc(-0.9 * var(--arrowSize));
 
     &::before {
       top: calc(-1 * var(--arrowSize));
@@ -93,7 +90,7 @@
 .popper-motion(~'@{popper-prefix-cls}-right', kdZoomLeft);
 .popper-motion(~'@{popper-prefix-cls}-bottom', kdZoomTop);
 .popper-motion(~'@{popper-prefix-cls}-top-start', kdZoomLeftBottom);
-.popper-motion(~'@{popper-prefix-cls}-rightBottom', kdZoomLeftBottom);
+.popper-motion(~'@{popper-prefix-cls}-right-end', kdZoomLeftBottom);
 .popper-motion(~'@{popper-prefix-cls}-top-end', kdZoomRightBottom);
 .popper-motion(~'@{popper-prefix-cls}-left-end', kdZoomRightBottom);
 .popper-motion(~'@{popper-prefix-cls}-left-start', kdZoomTopRight);
@@ -101,3 +98,4 @@
 .popper-motion(~'@{popper-prefix-cls}-right-start', kdZoomTopLeft);
 .popper-motion(~'@{popper-prefix-cls}-bottom-start', kdZoomTopLeft);
 
+

package/es/qr-code/qr-code.js

@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
-import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react';
+import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react-ie';
 import Spin from '../spin';
 import Button from '../button';
 import Icon from '../icon';

package/es/radio/radio.js

@@ -91,7 +91,7 @@ var InternalRadio = function InternalRadio(props, ref) {
       className: classString,
       style: style,
       ref: mergedRef
-    }, /*#__PURE__*/React.createElement("input", _extends({
+    }, /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
       type: "radio",
       className: "".concat(radioPrefixCls, "-input"),
       checked: isChecked,
@@ -99,7 +99,7 @@ var InternalRadio = function InternalRadio(props, ref) {
       value: value,
       name: context === null || context === void 0 ? void 0 : context.name,
       disabled: mergedDisabled
-    }, restProps)), children !== undefined ? /*#__PURE__*/React.createElement("span", {
+    })), children !== undefined ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(radioPrefixCls, "-text")
     }, children) : null)
   );

package/es/radio/style/index.css

@@ -126,7 +126,6 @@
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
   max-width: var(--kd-c-radio-default-label-max-width);
-  overflow: hidden;
   min-height: var(--kd-c-radio-square-sizing-width-height, 14px);
 }
 .kd-radio::before {

package/es/radio/style/index.less

@@ -23,7 +23,7 @@
   color: @radio-font-color;
   font-size: @radio-font-size;
   max-width: @radio-default-label-max-width;
-  overflow: hidden;
+  // overflow: hidden;
   min-height: @radio-circle-size;
 
   &::before {

package/es/select/style/index.css

@@ -429,6 +429,9 @@
 }
 .kd-select-item-option-content .kd-checkbox {
   width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .kd-select-item-option-content .kd-checkbox .kd-checkbox-children {
   display: inline-block;

package/es/select/style/index.less

@@ -194,6 +194,7 @@
 
         .@{kd-prefix}-checkbox {
           width: 100%;
+          display: flex;
 
           .@{kd-prefix}-checkbox-children {
             display: inline-block;

package/es/split-panel/split-panel.js

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 import { getCompProps } from '../_utils';
 import { tuple } from '../_utils/type';
 import devWarning from '../_utils/devwarning';
+import ResizeObserver from 'resize-observer-polyfill';
 export var SplitPanelModes = tuple('horizontal', 'vertical');
 function pxToScale(numerator, denominator) {
   var percent = parseFloat(numerator) / parseFloat(denominator);
@@ -118,6 +119,21 @@ var SplitPanel = function SplitPanel(props) {
   }, [min, max, defaultSplit, getComputedThresholdValue, getComputeOffset]);
   useEffect(function () {
     initPanel();
+    var element = outerWrapper.current;
+    if (!element) {
+      devWarning(!element && element !== null, 'useResizeMeasure', 'useResizeMeasure指定的元素不存在');
+      return;
+    }
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var entry = entries[0];
+      if (entry.contentRect) {
+        initPanel();
+      }
+    });
+    resizeObserver.observe(element);
+    return function () {
+      resizeObserver.disconnect();
+    };
   }, [initPanel]);
   var handleMove = useCallback(function (e) {
     // 将鼠标移动距离与offset进行处理

package/es/tooltip/style/index.css

@@ -122,8 +122,8 @@
   font-size: var(--kd-c-tooltip-color-text, var(--kd-g-font-size-small, 12px));
   line-height: 1.5;
   background-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
-  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  -webkit-filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
+          filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
 }
 .kd-tooltip .arrow::before {
   border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));

package/es/tooltip/style/index.less

@@ -13,7 +13,7 @@
   font-size: @tooltip-font-size;
   line-height: 1.5;
   background-color: @tooltip-background-color;
-  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
 
   .arrow::before {
     border-color: @tooltip-background-color;

package/es/tree/utils/treeUtils.js

@@ -616,7 +616,7 @@ export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys
   if (isSearching && searchStatus === 'SEARCH_START') {
     keys = _toConsumableArray(getAllFilterKeys(data, filterTreeNode, keysData, expandOnFilterNode).filterExpandKeys);
   }
-  return keys;
+  return _Array$from(new _Set(_toConsumableArray(keys)));
 };
 export var getExpandedKeys = function getExpandedKeys(expandedKeys) {
   var expandScrollkeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

package/es/upload/upload.js

@@ -425,7 +425,7 @@ var InternalUpload = function InternalUpload(props, ref) {
       handleRemove: handleRemove,
       disabled: disabled,
       onPreview: onPreview
-    })), file, setFileList) : /*#__PURE__*/React.createElement(Item, _extends({
+    })), file, fileList) : /*#__PURE__*/React.createElement(Item, _extends({
       key: file.uid
     }, {
       file: file,

package/lib/_utils/useId.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (id?: string | undefined) => any;
+export default _default;

package/lib/_utils/useId.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+function getUseId() {
+  var fullClone = (0, _extends2.default)({}, React);
+  return fullClone === null || fullClone === void 0 ? void 0 : fullClone.useId;
+}
+var uuid = 0;
+var useOriginId = getUseId();
+var _default = useOriginId ? function useId(id) {
+  var reactId = useOriginId();
+  if (id) {
+    return id;
+  }
+  return reactId;
+} : function useCompatId(id) {
+  var _React$useState = React.useState('ssr-id'),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    innerId = _React$useState2[0],
+    setInnerId = _React$useState2[1];
+  React.useEffect(function () {
+    var nextId = uuid;
+    uuid += 1;
+    setInnerId("kd_unique_".concat(nextId));
+  }, []);
+  if (id) {
+    return id;
+  }
+  return innerId;
+};
+exports.default = _default;

package/lib/_utils/usePopper.js

@@ -127,6 +127,7 @@ var getRealDom = function getRealDom(locatorRef, locatorElement) {
   var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
   return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
 };
+var DEFAULT_PLACEMENT = 'top';
 function usePopper(locatorElement, popperElement, props) {
   var _context3, _context4, _arrowStyle;
   var prefixCls = props.prefixCls,
@@ -145,7 +146,7 @@ function usePopper(locatorElement, popperElement, props) {
     _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
     _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'top' : _props$placement,
+    placement = _props$placement === void 0 ? DEFAULT_PLACEMENT : _props$placement,
     _props$gap = props.gap,
     defaultGap = _props$gap === void 0 ? 4 : _props$gap,
     _props$scrollHidden = props.scrollHidden,
@@ -242,10 +243,15 @@ function usePopper(locatorElement, popperElement, props) {
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
     align = _useState16[0],
     setAlign = _useState16[1];
-  var _useState17 = (0, _react.useState)(placement),
+  var _useState17 = (0, _react.useState)((0, _includes.default)(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
     nextPlacement = _useState18[0],
     setNextPlacement = _useState18[1];
+  (0, _react.useEffect)(function () {
+    if (nextPlacement !== placement && (0, _includes.default)(Placements).call(Placements, placement)) {
+      setNextPlacement(placement);
+    }
+  }, [placement]);
   var alignPopper = (0, _react.useCallback)(function () {
     var realDom = getRealDom(locatorRef, locatorElement);
     if (realDom && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
@@ -259,6 +265,10 @@ function usePopper(locatorElement, popperElement, props) {
         right = _realDom$getBoundingC.right,
         height = _realDom$getBoundingC.height,
         width = _realDom$getBoundingC.width;
+      if (height === 0 && width === 0) {
+        hidePopper();
+        return;
+      }
       var _getOffsetPos = getOffsetPos(container),
         containerTop = _getOffsetPos.top,
         containerLeft = _getOffsetPos.left;
@@ -429,7 +439,7 @@ function usePopper(locatorElement, popperElement, props) {
       setArrowPos(_arrowPos);
       setNextPlacement(currentPlacement);
     }
-  }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth]);
+  }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth, align === null || align === void 0 ? void 0 : align.left, align === null || align === void 0 ? void 0 : align.top, nextPlacement]);
   (0, _react.useEffect)(function () {
     if (canAlign) {
       alignPopper();
@@ -554,13 +564,9 @@ function usePopper(locatorElement, popperElement, props) {
       }, 10);
       window.addEventListener('resize', alignPopper);
       document.addEventListener('scroll', scrollAlign, true);
-      locatorNode === null || locatorNode === void 0 ? void 0 : locatorNode.addEventListener('DOMSubtreeModified', alignPopper);
-      exist && (popperNode === null || popperNode === void 0 ? void 0 : popperNode.addEventListener('DOMSubtreeModified', alignPopper));
       return function () {
         window.removeEventListener('resize', alignPopper);
         document.removeEventListener('scroll', scrollAlign, true);
-        locatorNode === null || locatorNode === void 0 ? void 0 : locatorNode.removeEventListener('DOMSubtreeModified', alignPopper);
-        exist && (popperNode === null || popperNode === void 0 ? void 0 : popperNode.removeEventListener('DOMSubtreeModified', alignPopper));
       };
     }
   }, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);

package/lib/anchor/anchor.js

@@ -192,6 +192,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   var normalRef = _react.default.useRef(null);
   var anchorRef = ref || normalRef;
   var linksWidthRef = _react.default.useRef([]);
+  var animating = _react.default.useRef(false);
   var wrapperClass = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-wrapper"), true));
   // classes
   var anchorMenuClass = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-menu"), true));
@@ -311,8 +312,12 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     var eleOffsetTop = getOffsetTop(targetElement, container);
     var y = scrollTop + eleOffsetTop;
     y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
+    animating.current = true;
     scrollTo(y, {
-      getContainer: getScrollContainer
+      getContainer: getScrollContainer,
+      callback: function callback() {
+        animating.current = false;
+      }
     });
   };
   var setCurrentActiveLink = (0, _react.useCallback)(function (link) {
@@ -333,6 +338,9 @@ var InternalAnchor = function InternalAnchor(props, ref) {
         setFixedTop(false);
       }
     }
+    if (animating.current) {
+      return;
+    }
     var currentActiveLink = getAnchor(targetOffset !== undefined ? targetOffset : offsetTop || 0, bounds);
     currentActiveLink && setCurrentActiveLink(currentActiveLink);
   }, [affix, setFixedTop, offsetTop, bounds, getAnchor, setCurrentActiveLink, type, getScrollContainer, anchorRef, targetOffset]);
@@ -340,7 +348,8 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     getScrollContainer().addEventListener('scroll', handleScroll);
     handleScroll();
     return function () {
-      return getScrollContainer().removeEventListener('scroll', handleScroll);
+      var _a;
+      return (_a = getScrollContainer()) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll, getScrollContainer]);
   (0, _react.useEffect)(function () {

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

@@ -250,7 +250,6 @@
 }
 .kd-city-picker-dropdown {
   display: block;
-  left: 0;
   z-index: var(--kd-c-city-picker-z-index, var(--kd-g-z-index-popper, 1050));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

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

@@ -142,7 +142,6 @@
 
   &-dropdown {
     display: block;
-    left: 0;
     z-index: @city-picker-z-index;
     box-sizing: border-box;
     margin: 0;

package/lib/color-picker/color-picker-panel.js

@@ -89,7 +89,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
       setColTypeArr(formatArr);
     }
     setClickedColorIndex(index);
-    onChange && onChange(formatValue, colTypeArr);
+    onChange && onChange(formatValue, formatArr);
   };
   var handleTypeChange = function handleTypeChange(selectValue, option) {
     setCurrentColorType(option.label);

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

@@ -11,7 +11,7 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _classnames3 = _interopRequireDefault(require("classnames"));
+var _classnames4 = _interopRequireDefault(require("classnames"));
 var _month = _interopRequireDefault(require("./panel/month/month"));
 var _year = _interopRequireDefault(require("./panel/year/year"));
 var _quarter = _interopRequireDefault(require("./panel/quarter/quarter"));
@@ -35,6 +35,8 @@ function Panel(props) {
     innerPicker = context.innerPicker,
     setInnerPicker = context.setInnerPicker;
   var isInnerPicker = innerPicker !== undefined;
+  var isInnerYear = innerPicker === 'year';
+  var isInnerMonth = innerPicker === 'month';
   var isPositionLeft = panelPosition === 'left';
   var isPositionRight = panelPosition === 'right';
   var isPositionUnset = typeof panelPosition === 'undefined';
@@ -60,14 +62,20 @@ function Panel(props) {
     }));
   };
   var renderMonthPanel = function renderMonthPanel() {
+    if (isInnerYear) {
+      return renderYearPanel();
+    }
     return /*#__PURE__*/_react.default.createElement(_month.default, (0, _extends2.default)({}, props));
   };
   var renderQuarterPanel = function renderQuarterPanel() {
+    if (isInnerYear) {
+      return renderYearPanel();
+    }
     return /*#__PURE__*/_react.default.createElement(_quarter.default, (0, _extends2.default)({}, props));
   };
   var renderDatePanel = function renderDatePanel() {
     if (isInnerPicker) {
-      if (innerPicker === 'year') {
+      if (isInnerYear) {
         return renderYearPanel();
       } else {
         return renderMonthPanel();
@@ -120,41 +128,38 @@ function Panel(props) {
     var _getYearsPeriod = (0, _dateFns.getYearsPeriod)(viewDate, yearItemNumber),
       startPeriod = _getYearsPeriod.startPeriod,
       endPeriod = _getYearsPeriod.endPeriod;
-    var headerCls = (0, _classnames3.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-year"));
+    var headerCls = (0, _classnames4.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-year"));
     return {
       children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, startPeriod, " - ", endPeriod),
       className: headerCls
     };
   };
+  var onHeaderYearClick = function onHeaderYearClick() {
+    setInnerPicker('year');
+  };
+  var onHeaderMonthClick = function onHeaderMonthClick() {
+    setInnerPicker('month');
+  };
   var renderMonthHeader = function renderMonthHeader() {
     var year = (0, _dateFns.getYear)(viewDate);
-    var headerCls = (0, _classnames3.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-month"));
+    var headerCls = (0, _classnames4.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-month"), "".concat(prefixCls, "-header-text-inner-hover"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-text-inner-active"), isInnerYear));
     return {
-      children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, year + locale.year),
+      children: /*#__PURE__*/_react.default.createElement("span", {
+        onClick: onHeaderYearClick
+      }, year + locale.year),
       className: headerCls
     };
   };
-  var onHeaderYearClick = function onHeaderYearClick() {
-    if (picker === 'date') {
-      setInnerPicker('year');
-    }
-  };
-  var onHeaderMonthClick = function onHeaderMonthClick() {
-    if (picker === 'date') {
-      setInnerPicker('month');
-    }
-  };
   var renderDateHeader = function renderDateHeader() {
-    var _classnames, _classnames2;
     var year = (0, _dateFns.getYear)(viewDate);
     var month = (0, _dateFns.getMonth)(viewDate) + 1;
-    var headerCls = (0, _classnames3.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-date"));
+    var headerCls = (0, _classnames4.default)("".concat(prefixCls, "-header"), "".concat(prefixCls, "-header-date"));
     return {
       children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _classnames3.default)("".concat(prefixCls, "-header-text-inner"), (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-header-text-inner-active"), innerPicker === 'year'), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-header-text-inner-hover"), picker === 'date'), _classnames)),
+        className: (0, _classnames4.default)("".concat(prefixCls, "-header-text-inner"), "".concat(prefixCls, "-header-text-inner-hover"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-text-inner-active"), isInnerYear)),
         onClick: onHeaderYearClick
       }, year + locale.year), /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _classnames3.default)("".concat(prefixCls, "-header-text-inner"), (_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, "".concat(prefixCls, "-header-text-inner-active"), innerPicker === 'month'), (0, _defineProperty2.default)(_classnames2, "".concat(prefixCls, "-header-text-inner-hover"), picker === 'date'), _classnames2)),
+        className: (0, _classnames4.default)("".concat(prefixCls, "-header-text-inner"), "".concat(prefixCls, "-header-text-inner-hover"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-text-inner-active"), isInnerMonth)),
         onClick: onHeaderMonthClick
       }, month + locale.month)),
       className: headerCls
@@ -162,7 +167,7 @@ function Panel(props) {
   };
   var onSuperPrev = function onSuperPrev() {
     var date;
-    if (picker === 'year' || innerPicker === 'year') {
+    if (picker === 'year' || isInnerYear) {
       var _props$yearItemNumber3 = props.yearItemNumber,
         yearItemNumber = _props$yearItemNumber3 === void 0 ? _dateFns.DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber3;
       date = (0, _dateFns.addYears)(viewDate, 0 - yearItemNumber);
@@ -173,7 +178,7 @@ function Panel(props) {
   };
   var onSuperNext = function onSuperNext() {
     var date;
-    if (picker === 'year' || innerPicker === 'year') {
+    if (picker === 'year' || isInnerYear) {
       var _props$yearItemNumber4 = props.yearItemNumber,
         yearItemNumber = _props$yearItemNumber4 === void 0 ? _dateFns.DEFAULT_YEAR_ITEM_NUMBER : _props$yearItemNumber4;
       var _viewDate = viewDate;
@@ -217,8 +222,8 @@ function Panel(props) {
         panel = renderMonthPanel();
         headerObj = renderMonthHeader();
         headerProps = {
-          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
-          onSuperNext: isPositionLeft ? undefined : onSuperNext
+          onSuperPrev: !isPositionRight || innerPicker ? onSuperPrev : undefined,
+          onSuperNext: !isPositionLeft || innerPicker ? onSuperNext : undefined
         };
         break;
       }
@@ -227,8 +232,8 @@ function Panel(props) {
         panel = renderQuarterPanel();
         headerObj = renderMonthHeader();
         headerProps = {
-          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
-          onSuperNext: isPositionLeft ? undefined : onSuperNext
+          onSuperPrev: !isPositionRight || innerPicker ? onSuperPrev : undefined,
+          onSuperNext: !isPositionLeft || innerPicker ? onSuperNext : undefined
         };
         break;
       }
@@ -237,10 +242,10 @@ function Panel(props) {
       {
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: isPositionLeft && !isInnerPicker || innerPicker === 'month' || isPositionUnset ? onPrev : undefined,
-          onNext: isPositionRight && !isInnerPicker || innerPicker === 'month' || isPositionUnset ? onNext : undefined,
-          onSuperPrev: isPositionLeft && !isInnerPicker || innerPicker === 'year' || isPositionUnset ? onSuperPrev : undefined,
-          onSuperNext: isPositionRight && !isInnerPicker || innerPicker === 'year' || isPositionUnset ? onSuperNext : undefined
+          onPrev: isPositionLeft && !isInnerPicker || isInnerMonth || isPositionUnset ? onPrev : undefined,
+          onNext: isPositionRight && !isInnerPicker || isInnerMonth || isPositionUnset ? onNext : undefined,
+          onSuperPrev: isPositionLeft && !isInnerPicker || isInnerYear || isPositionUnset ? onSuperPrev : undefined,
+          onSuperNext: isPositionRight && !isInnerPicker || isInnerYear || isPositionUnset ? onSuperNext : undefined
         };
         panel = renderDatePanel();
         break;
@@ -250,10 +255,10 @@ function Panel(props) {
         panel = renderDatePanel();
         headerObj = renderDateHeader();
         headerProps = {
-          onPrev: isPositionRight ? undefined : onPrev,
-          onNext: isPositionLeft ? undefined : onNext,
-          onSuperPrev: isPositionRight ? undefined : onSuperPrev,
-          onSuperNext: isPositionLeft ? undefined : onSuperNext
+          onPrev: isPositionLeft && !isInnerPicker || isInnerMonth || isPositionUnset ? onPrev : undefined,
+          onNext: isPositionRight && !isInnerPicker || isInnerMonth || isPositionUnset ? onNext : undefined,
+          onSuperPrev: isPositionLeft && !isInnerPicker || isInnerYear || isPositionUnset ? onSuperPrev : undefined,
+          onSuperNext: isPositionRight && !isInnerPicker || isInnerYear || isPositionUnset ? onSuperNext : undefined
         };
         break;
       }
@@ -268,7 +273,7 @@ function Panel(props) {
       }
   }
   var showHeader = !(picker === 'date' && showTime || picker === 'time') || innerPicker !== undefined;
-  var containerCls = (0, _classnames3.default)("".concat(prefixCls, "-warpper"));
+  var containerCls = (0, _classnames4.default)("".concat(prefixCls, "-warpper"));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: containerCls
   }, showHeader ? getHeader() : null, panel);

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

@@ -162,7 +162,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
         if (newText === '') {
           triggerChange(null);
           setViewDate(null);
-        } else if (newText && newText.length === _format.length) {
+        } else if (newText && newText.length >= _format.length) {
           var inputTempDate = (0, _dateFns.parseDate)(newText, _format);
           if (inputTempDate && (!disabledDate || !disabledDate(inputTempDate))) {
             if (picker !== 'year') {
@@ -229,6 +229,9 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
       if (valueText !== text) {
         resetText();
       }
+      if (hoverValue) {
+        onLeave();
+      }
     } else {
       setInnerPicker(undefined);
     }

package/lib/date-picker/hooks/use-picker-input.js

@@ -36,8 +36,6 @@ function usePickerInput(_ref) {
     },
     onKeyDown: function onKeyDown(e) {
       var _context;
-      setTyping(true);
-      triggerOpen(true);
       switch (e.which) {
         case _KeyCode.default.ENTER:
           {
@@ -53,8 +51,9 @@ function usePickerInput(_ref) {
           {
             if (typing && open && !e.shiftKey) {
               setTyping(false);
-              e.preventDefault();
+              // e.preventDefault()
             }
+
             return;
           }
         case _KeyCode.default.ESC: