@kdcloudjs/kdesign 1.7.9 → 1.7.11

package/es/city-picker/city-panel.js

@@ -110,6 +110,7 @@ var CityPanel = function CityPanel(_ref) {
     if (commons && currentGroup === cityPickerLang.common) {
       setList([commons[activedIndex] || []]);
       setGroupKeys(null);
+      setActivedGroupIndex(index);
       return;
     }
     var currentGroups = (currentGroup || '').split('');

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

@@ -296,6 +296,7 @@
   margin-top: 10px;
   max-height: calc(100% - 39px - 10px);
   overflow: scroll;
+  height: 100%;
 }
 .kd-city-picker-city-table .kd-city-picker-city-table-group {
   display: -webkit-box;

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

@@ -177,6 +177,7 @@
   margin-top: 10px;
   max-height: ~'calc(100% - 39px - 10px)';
   overflow: scroll;
+  height: 100%;
 
   .@{city-picker-prefix-cls}-city-table-group {
     display: flex;

package/es/collapse/collapse.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { PanelProps } from './panel';
 export declare const IconPositionTypes: ["left", "right"];
 export declare type IconPositionType = typeof IconPositionTypes[number];
-export declare type keyType = string[] | string | number[] | number | NONE_KEY_TYPE;
-export declare type NONE_KEY_TYPE = undefined;
+export declare type PanelKeyType = string | number;
+export declare type keyType = string[] | string | number[] | number | undefined;
 export interface CollapseProps {
     accordion?: boolean;
     activeKey?: keyType;

package/es/collapse/collapse.js

@@ -6,16 +6,13 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import classNames from 'classnames';
 import { tuple } from '../_utils/type';
-import isArray from 'lodash/isArray';
-import isBoolean from 'lodash/isBoolean';
 import devwarning from '../_utils/devwarning';
 export var IconPositionTypes = tuple('left', 'right');
-var NONE_KEY = undefined;
 var InternalCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
@@ -34,91 +31,69 @@ var InternalCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
     children = _getCompProps.children,
     customPrefixcls = _getCompProps.prefixCls;
   var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls); // 样式前缀
-  var getDefaultActivePanelKey = function getDefaultActivePanelKey() {
-    // const _defaultActiveKey =
-    //   defaultActiveKey !== NONE_KEY
-    //     ? defaultActiveKey
-    //     : React.Children.map(children, (item, index) => {
-    //         if (index === 0) return item.props?.panelKey
-    //       })
-    // return isBoolean(activeKey) ? activeKey : _defaultActiveKey
-    return isBoolean(activeKey) ? activeKey : defaultActiveKey;
-  };
-  var _React$useState = React.useState(getDefaultActivePanelKey()),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    activePanelKey = _React$useState2[0],
-    setActivePanelKey = _React$useState2[1];
-  var getPanelExpand = function getPanelExpand(panelKey, accordion, activeKey) {
-    var _activeKey = getActiveKey(accordion, activeKey);
-    return isInclude(_activeKey, panelKey);
-  };
-  var getActiveKey = function getActiveKey(accordion, activeKey) {
-    var _activeKey = activeKey;
-    if (accordion) {
-      if (isArray(activeKey)) {
-        _activeKey = activeKey[0]; // accordion 模式下默认第一个元素
-      }
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerKey = _useState2[0],
+    setInnerKey = _useState2[1];
+  var convertActiveKey = function convertActiveKey(newKey) {
+    var ret = [];
+    if (Array.isArray(newKey)) {
+      ret = newKey;
+    } else if (typeof newKey === 'string' || typeof newKey === 'number') {
+      ret = [newKey];
     }
-
-    return _activeKey;
-  };
-  var isInclude = function isInclude(activePanelKey, key) {
-    if (isArray(activePanelKey)) {
-      return _includesInstanceProperty(activePanelKey).call(activePanelKey, key) || _includesInstanceProperty(activePanelKey).call(activePanelKey, String(key));
-    } else {
-      return String(activePanelKey) === String(key);
+    if (accordion && ret.length) {
+      ret = [ret[0]];
     }
+    return ret;
   };
-  var getRemoveKey = function getRemoveKey(key) {
-    if (isArray(activePanelKey)) {
-      return _filterInstanceProperty(activePanelKey).call(activePanelKey, function (element) {
-        return element !== key;
-      });
+  useEffect(function () {
+    if (typeof activeKey !== 'undefined') {
+      setInnerKey(convertActiveKey(activeKey));
     }
-    return NONE_KEY;
-  };
-  var getAddKey = function getAddKey(key) {
-    if (isArray(activePanelKey)) {
-      var _context;
-      return _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(activePanelKey), [key]);
+  }, [activeKey]);
+  useEffect(function () {
+    if (typeof activeKey !== 'undefined' || typeof defaultActiveKey !== 'undefined') {
+      setInnerKey(convertActiveKey(typeof activeKey !== 'undefined' ? activeKey : defaultActiveKey));
     }
-    return activePanelKey ? [activePanelKey, key] : key;
-  };
-  var getNewActiveKey = function getNewActiveKey(key) {
-    if (isInclude(activePanelKey, key)) {
-      if (accordion) {
-        return NONE_KEY;
+  }, []);
+  var onPanelChange = function onPanelChange(key) {
+    var newKey = [];
+    if (accordion) {
+      if (_includesInstanceProperty(innerKey).call(innerKey, key)) {
+        newKey = [];
+      } else {
+        newKey = [key];
       }
-      return getRemoveKey(key);
     } else {
-      if (accordion) {
-        return key;
+      if (_includesInstanceProperty(innerKey).call(innerKey, key)) {
+        newKey = _filterInstanceProperty(innerKey).call(innerKey, function (d) {
+          return d !== key;
+        });
+      } else {
+        var _context;
+        newKey = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(innerKey), [key]);
       }
-      return getAddKey(key);
     }
+    if (typeof activeKey === 'undefined') {
+      setInnerKey(newKey);
+    }
+    onChange && onChange(newKey);
   };
-  var onPanelChange = React.useCallback(function (key) {
-    key = getNewActiveKey(key);
-    setActivePanelKey(key);
-    onChange && onChange();
-  }, [onChange, activePanelKey, accordion]);
   var renderPanel = function renderPanel() {
     var _context2;
     return _mapInstanceProperty(_context2 = React.Children).call(_context2, children, function (item) {
-      var _a, _b, _c;
+      var _a;
       if (((_a = item === null || item === void 0 ? void 0 : item.type) === null || _a === void 0 ? void 0 : _a.displayName) !== 'Panel') {
         devwarning(true, 'Collapse', 'children必须为Collapse.Panel');
         return item;
       }
-      var expand = getPanelExpand((_b = item.props) === null || _b === void 0 ? void 0 : _b.panelKey, accordion, activePanelKey);
-      var defaultExpand = getPanelExpand((_c = item.props) === null || _c === void 0 ? void 0 : _c.panelKey, accordion, defaultActiveKey);
       return /*#__PURE__*/React.cloneElement(item, _extends({
         expandIcon: expandIcon,
         expandIconPosition: expandIconPosition,
         onChange: onPanelChange,
         bordered: bordered,
-        expand: expand,
-        defaultExpand: defaultExpand
+        innerKey: innerKey
       }, item.props));
     });
   };

package/es/collapse/panel.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
-import { IconPositionType, keyType } from './collapse';
+import { IconPositionType, PanelKeyType } from './collapse';
 export interface PanelProps {
     disabled?: boolean;
     header?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     bordered?: boolean;
     expandIconPosition?: IconPositionType;
-    onChange?: (key: keyType) => void;
+    onChange?: (key: PanelKeyType) => void;
     extra?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     assist?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     expand?: boolean;
     defaultExpand?: boolean;
     children?: React.ReactNode;
-    panelKey?: any;
+    panelKey?: PanelKeyType;
     style?: React.CSSProperties;
     className?: string;
 }

package/es/collapse/panel.js

@@ -1,11 +1,11 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
-import React, { useRef, useState } from 'react';
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import Icon from '../icon';
-import isBoolean from 'lodash/isBoolean';
 var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames6, _classNames7, _classNames8;
   var _React$useContext = React.useContext(ConfigContext),
@@ -19,8 +19,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     header = _getCompProps.header,
     onChange = _getCompProps.onChange,
     panelKey = _getCompProps.panelKey,
-    defaultExpand = _getCompProps.defaultExpand,
-    expand = _getCompProps.expand,
+    innerKey = _getCompProps.innerKey,
     bordered = _getCompProps.bordered,
     expandIcon = _getCompProps.expandIcon,
     expandIconPosition = _getCompProps.expandIconPosition,
@@ -36,17 +35,24 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     expandAnimation = _useState2[0],
     setExpandAnimation = _useState2[1];
-  var getExpand = function getExpand() {
-    return isBoolean(expand) ? expand : defaultExpand;
-  };
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expand = _useState4[0],
+    setExpand = _useState4[1];
+  useEffect(function () {
+    var newValue = _includesInstanceProperty(innerKey).call(innerKey, panelKey);
+    if (newValue !== expand) {
+      setExpand(newValue);
+      setExpandAnimation(true);
+    }
+  }, [innerKey]);
   var handleClick = function handleClick() {
     if (disabled) return;
-    setExpandAnimation(true);
     onChange && onChange(panelKey);
   };
   var renderIcon = function renderIcon() {
     var _classNames;
-    var iconClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(panelPrefixCls, "-icon"), true), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !getExpand()), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), getExpand()), _defineProperty(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
+    var iconClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(panelPrefixCls, "-icon"), true), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !expand), _defineProperty(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), expand), _defineProperty(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
     return /*#__PURE__*/React.createElement("span", {
       className: iconClassName,
       onClick: handleClick

package/es/input/ClearableLabeledInput.js

@@ -52,6 +52,7 @@ var ClearableInput = function ClearableInput(props) {
     var needClear = !disabled && value && isMouseEnter;
     var clearIconclasses = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-textarea-clear-icon"), inputType === ClearableInputType[1]), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon"), inputType === ClearableInputType[0]), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon-hidden"), !needClear), _defineProperty(_classNames, "".concat(prefixCls, "-clear-icon-rightSpace"), suffix), _classNames));
     return /*#__PURE__*/React.createElement("span", {
+      onMouseDown: mouseDownHandle,
       onClick: handleReset,
       className: clearIconclasses
     }, typeof allowClear === 'boolean' ? /*#__PURE__*/React.createElement(Icon, {

package/es/pagination/style/index.css

@@ -286,10 +286,14 @@
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   padding: 0;
   line-height: var(--kd-c-pagination-sizing-square, 24px);
-  font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-g-color-text-primary, #212121);
   border-radius: var(--kd-g-radius-border, 2px);
   background: var(--kd-g-color-background, #fff);
@@ -790,10 +794,12 @@
   right: 5px;
   line-height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
   font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
-  color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:hover i {
+  color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
+}
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size.kd-pagination-options-dropdown-open i {
   -webkit-transform: rotate(180deg) translateY(50%);
           transform: rotate(180deg) translateY(50%);

package/es/pagination/style/index.less

@@ -144,10 +144,10 @@
 
     .@{pagination-selector-prefix-cls}-size {
       box-sizing: border-box;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       padding: 0;
       line-height: @pagination-size;
-      font-size: @pagination-font-size;
       color: @color-text-primary;
       border-radius: @radius-border;
       background: @color-background;
@@ -586,10 +586,15 @@
           right: 5px;
           line-height: calc(@pagination-size - 2px);
           font-size: @pagination-icon-size;
-          color: @pagination-hover-color;
           transform: translateY(-50%);
         }
 
+        &:hover {
+          i {
+            color: @pagination-hover-color;
+          }
+        }
+
         &.@{pagination-prefix-cls}-options-dropdown-open {
           i {
             transform: rotate(180deg) translateY(50%);

package/es/tree-select/style/index.css

@@ -230,7 +230,6 @@
           box-sizing: border-box;
   padding: 4px 0;
   margin: 0;
-  overflow: auto;
   font-size: var(--kd-c-tree-select-dropdown-font-size, 12px);
   font-variant: initial;
   background-color: var(--kd-c-tree-select-dropdown-color-background, var(--kd-g-color-background, #fff));

package/es/tree-select/style/index.less

@@ -128,7 +128,6 @@
     box-sizing: border-box;
     padding: 4px 0;
     margin: 0;
-    overflow: auto;
     font-size: @tree-select-list-font-size;
     font-variant: initial;
     background-color: @tree-select-dropdown-bg;

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

@@ -122,6 +122,7 @@ var CityPanel = function CityPanel(_ref) {
     if (commons && currentGroup === cityPickerLang.common) {
       setList([commons[activedIndex] || []]);
       setGroupKeys(null);
+      setActivedGroupIndex(index);
       return;
     }
     var currentGroups = (currentGroup || '').split('');

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

@@ -296,6 +296,7 @@
   margin-top: 10px;
   max-height: calc(100% - 39px - 10px);
   overflow: scroll;
+  height: 100%;
 }
 .kd-city-picker-city-table .kd-city-picker-city-table-group {
   display: -webkit-box;

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

@@ -177,6 +177,7 @@
   margin-top: 10px;
   max-height: ~'calc(100% - 39px - 10px)';
   overflow: scroll;
+  height: 100%;
 
   .@{city-picker-prefix-cls}-city-table-group {
     display: flex;

package/lib/collapse/collapse.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { PanelProps } from './panel';
 export declare const IconPositionTypes: ["left", "right"];
 export declare type IconPositionType = typeof IconPositionTypes[number];
-export declare type keyType = string[] | string | number[] | number | NONE_KEY_TYPE;
-export declare type NONE_KEY_TYPE = undefined;
+export declare type PanelKeyType = string | number;
+export declare type keyType = string[] | string | number[] | number | undefined;
 export interface CollapseProps {
     accordion?: boolean;
     activeKey?: keyType;

package/lib/collapse/collapse.js

@@ -1,5 +1,8 @@
 "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
@@ -13,17 +16,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
 var _utils = require("../_utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _type = require("../_utils/type");
-var _isArray = _interopRequireDefault(require("lodash/isArray"));
-var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
 var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+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; }
 var IconPositionTypes = (0, _type.tuple)('left', 'right');
 exports.IconPositionTypes = IconPositionTypes;
-var NONE_KEY = undefined;
 var InternalCollapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _React$useContext = _react.default.useContext(_ConfigContext.default),
     getPrefixCls = _React$useContext.getPrefixCls,
@@ -42,91 +44,69 @@ var InternalCollapse = /*#__PURE__*/_react.default.forwardRef(function (props, r
     children = _getCompProps.children,
     customPrefixcls = _getCompProps.prefixCls;
   var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls); // 样式前缀
-  var getDefaultActivePanelKey = function getDefaultActivePanelKey() {
-    // const _defaultActiveKey =
-    //   defaultActiveKey !== NONE_KEY
-    //     ? defaultActiveKey
-    //     : React.Children.map(children, (item, index) => {
-    //         if (index === 0) return item.props?.panelKey
-    //       })
-    // return isBoolean(activeKey) ? activeKey : _defaultActiveKey
-    return (0, _isBoolean.default)(activeKey) ? activeKey : defaultActiveKey;
-  };
-  var _React$useState = _react.default.useState(getDefaultActivePanelKey()),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    activePanelKey = _React$useState2[0],
-    setActivePanelKey = _React$useState2[1];
-  var getPanelExpand = function getPanelExpand(panelKey, accordion, activeKey) {
-    var _activeKey = getActiveKey(accordion, activeKey);
-    return isInclude(_activeKey, panelKey);
-  };
-  var getActiveKey = function getActiveKey(accordion, activeKey) {
-    var _activeKey = activeKey;
-    if (accordion) {
-      if ((0, _isArray.default)(activeKey)) {
-        _activeKey = activeKey[0]; // accordion 模式下默认第一个元素
-      }
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    innerKey = _useState2[0],
+    setInnerKey = _useState2[1];
+  var convertActiveKey = function convertActiveKey(newKey) {
+    var ret = [];
+    if (Array.isArray(newKey)) {
+      ret = newKey;
+    } else if (typeof newKey === 'string' || typeof newKey === 'number') {
+      ret = [newKey];
     }
-
-    return _activeKey;
-  };
-  var isInclude = function isInclude(activePanelKey, key) {
-    if ((0, _isArray.default)(activePanelKey)) {
-      return (0, _includes.default)(activePanelKey).call(activePanelKey, key) || (0, _includes.default)(activePanelKey).call(activePanelKey, String(key));
-    } else {
-      return String(activePanelKey) === String(key);
+    if (accordion && ret.length) {
+      ret = [ret[0]];
     }
+    return ret;
   };
-  var getRemoveKey = function getRemoveKey(key) {
-    if ((0, _isArray.default)(activePanelKey)) {
-      return (0, _filter.default)(activePanelKey).call(activePanelKey, function (element) {
-        return element !== key;
-      });
+  (0, _react.useEffect)(function () {
+    if (typeof activeKey !== 'undefined') {
+      setInnerKey(convertActiveKey(activeKey));
     }
-    return NONE_KEY;
-  };
-  var getAddKey = function getAddKey(key) {
-    if ((0, _isArray.default)(activePanelKey)) {
-      var _context;
-      return (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(activePanelKey), [key]);
+  }, [activeKey]);
+  (0, _react.useEffect)(function () {
+    if (typeof activeKey !== 'undefined' || typeof defaultActiveKey !== 'undefined') {
+      setInnerKey(convertActiveKey(typeof activeKey !== 'undefined' ? activeKey : defaultActiveKey));
     }
-    return activePanelKey ? [activePanelKey, key] : key;
-  };
-  var getNewActiveKey = function getNewActiveKey(key) {
-    if (isInclude(activePanelKey, key)) {
-      if (accordion) {
-        return NONE_KEY;
+  }, []);
+  var onPanelChange = function onPanelChange(key) {
+    var newKey = [];
+    if (accordion) {
+      if ((0, _includes.default)(innerKey).call(innerKey, key)) {
+        newKey = [];
+      } else {
+        newKey = [key];
       }
-      return getRemoveKey(key);
     } else {
-      if (accordion) {
-        return key;
+      if ((0, _includes.default)(innerKey).call(innerKey, key)) {
+        newKey = (0, _filter.default)(innerKey).call(innerKey, function (d) {
+          return d !== key;
+        });
+      } else {
+        var _context;
+        newKey = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(innerKey), [key]);
       }
-      return getAddKey(key);
     }
+    if (typeof activeKey === 'undefined') {
+      setInnerKey(newKey);
+    }
+    onChange && onChange(newKey);
   };
-  var onPanelChange = _react.default.useCallback(function (key) {
-    key = getNewActiveKey(key);
-    setActivePanelKey(key);
-    onChange && onChange();
-  }, [onChange, activePanelKey, accordion]);
   var renderPanel = function renderPanel() {
     var _context2;
     return (0, _map.default)(_context2 = _react.default.Children).call(_context2, children, function (item) {
-      var _a, _b, _c;
+      var _a;
       if (((_a = item === null || item === void 0 ? void 0 : item.type) === null || _a === void 0 ? void 0 : _a.displayName) !== 'Panel') {
         (0, _devwarning.default)(true, 'Collapse', 'children必须为Collapse.Panel');
         return item;
       }
-      var expand = getPanelExpand((_b = item.props) === null || _b === void 0 ? void 0 : _b.panelKey, accordion, activePanelKey);
-      var defaultExpand = getPanelExpand((_c = item.props) === null || _c === void 0 ? void 0 : _c.panelKey, accordion, defaultActiveKey);
       return /*#__PURE__*/_react.default.cloneElement(item, (0, _extends2.default)({
         expandIcon: expandIcon,
         expandIconPosition: expandIconPosition,
         onChange: onPanelChange,
         bordered: bordered,
-        expand: expand,
-        defaultExpand: defaultExpand
+        innerKey: innerKey
       }, item.props));
     });
   };

package/lib/collapse/panel.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
-import { IconPositionType, keyType } from './collapse';
+import { IconPositionType, PanelKeyType } from './collapse';
 export interface PanelProps {
     disabled?: boolean;
     header?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     bordered?: boolean;
     expandIconPosition?: IconPositionType;
-    onChange?: (key: keyType) => void;
+    onChange?: (key: PanelKeyType) => void;
     extra?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     assist?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
     expand?: boolean;
     defaultExpand?: boolean;
     children?: React.ReactNode;
-    panelKey?: any;
+    panelKey?: PanelKeyType;
     style?: React.CSSProperties;
     className?: string;
 }

package/lib/collapse/panel.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -15,7 +16,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
 var _utils = require("../_utils");
 var _icon = _interopRequireDefault(require("../icon"));
-var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
 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; }
 var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -31,8 +31,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     header = _getCompProps.header,
     onChange = _getCompProps.onChange,
     panelKey = _getCompProps.panelKey,
-    defaultExpand = _getCompProps.defaultExpand,
-    expand = _getCompProps.expand,
+    innerKey = _getCompProps.innerKey,
     bordered = _getCompProps.bordered,
     expandIcon = _getCompProps.expandIcon,
     expandIconPosition = _getCompProps.expandIconPosition,
@@ -48,17 +47,24 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     expandAnimation = _useState2[0],
     setExpandAnimation = _useState2[1];
-  var getExpand = function getExpand() {
-    return (0, _isBoolean.default)(expand) ? expand : defaultExpand;
-  };
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    expand = _useState4[0],
+    setExpand = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var newValue = (0, _includes.default)(innerKey).call(innerKey, panelKey);
+    if (newValue !== expand) {
+      setExpand(newValue);
+      setExpandAnimation(true);
+    }
+  }, [innerKey]);
   var handleClick = function handleClick() {
     if (disabled) return;
-    setExpandAnimation(true);
     onChange && onChange(panelKey);
   };
   var renderIcon = function renderIcon() {
     var _classNames;
-    var iconClassName = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-icon"), true), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !getExpand()), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), getExpand()), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
+    var iconClassName = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-icon"), true), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !expand), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), expand), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
     return /*#__PURE__*/_react.default.createElement("span", {
       className: iconClassName,
       onClick: handleClick