@douyinfe/semi-ui 2.17.0-alpha.1 → 2.17.0

package/lib/cjs/tagInput/index.js

@@ -10,11 +10,13 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.default = void 0;
 
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
@@ -54,6 +56,27 @@ var _paragraph = _interopRequireDefault(require("../typography/paragraph"));
 
 var _semiIcons = require("@douyinfe/semi-icons");
 
+var _reactSortableHoc = require("react-sortable-hoc");
+
+const SortableItem = (0, _reactSortableHoc.SortableElement)(props => props.item);
+const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexFlow: 'row wrap'
+    }
+  }, (0, _map.default)(items).call(items, (item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore skip SortableItem type check
+  _react.default.createElement(SortableItem, {
+    key: item.key,
+    index: index,
+    item: item.item
+  })));
+});
 const prefixCls = _constants.cssClasses.PREFIX;
 
 class TagInput extends _baseComponent.default {
@@ -94,6 +117,10 @@ class TagInput extends _baseComponent.default {
       this.foundation.handleInputMouseLeave();
     };
 
+    this.handleClick = e => {
+      this.foundation.handleClick(e);
+    };
+
     this.handleInputMouseEnter = e => {
       this.foundation.handleInputMouseEnter();
     };
@@ -106,14 +133,86 @@ class TagInput extends _baseComponent.default {
       this.foundation.handlePreventMouseDown(e);
     };
 
+    this.getAllTags = () => {
+      var _context;
+
+      const {
+        size,
+        disabled,
+        renderTagItem,
+        showContentTooltip,
+        draggable
+      } = this.props;
+      const {
+        tagsArray,
+        active
+      } = this.state;
+      const showIconHandler = active && draggable;
+      const tagCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-tag"), {
+        [(0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-tag-size-")).call(_context, size)]: size,
+        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+      });
+      const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
+        ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
+      });
+      const itemWrapperCls = (0, _classnames.default)({
+        ["".concat(prefixCls, "-drag-item")]: showIconHandler,
+        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+      });
+      const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
+        className: "".concat(prefixCls, "-drag-handler")
+      }));
+      return (0, _map.default)(tagsArray).call(tagsArray, (value, index) => {
+        var _context2;
+
+        const elementKey = showIconHandler ? value : (0, _concat.default)(_context2 = "".concat(index)).call(_context2, value);
+
+        if ((0, _isFunction2.default)(renderTagItem)) {
+          return showIconHandler ? /*#__PURE__*/_react.default.createElement("div", {
+            className: itemWrapperCls,
+            key: elementKey
+          }, /*#__PURE__*/_react.default.createElement(DragHandle, null), renderTagItem(value, index)) : renderTagItem(value, index);
+        } else {
+          var _context3;
+
+          return /*#__PURE__*/_react.default.createElement(_tag.default, {
+            className: tagCls,
+            color: "white",
+            size: size === 'small' ? 'small' : 'large',
+            type: "light",
+            onClose: () => {
+              !disabled && this.handleTagClose(index);
+            },
+            closable: !disabled,
+            key: elementKey,
+            visible: true,
+            "aria-label": (0, _concat.default)(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
+          }, showIconHandler && /*#__PURE__*/_react.default.createElement(DragHandle, null), /*#__PURE__*/_react.default.createElement(_paragraph.default, {
+            className: typoCls,
+            ellipsis: {
+              showTooltip: showContentTooltip,
+              rows: 1
+            }
+          }, value));
+        }
+      });
+    };
+
+    this.onSortEnd = callbackProps => {
+      this.foundation.handleSortEnd(callbackProps);
+    };
+
     this.foundation = new _foundation.default(this.adapter);
     this.state = {
       tagsArray: props.defaultValue || [],
       inputValue: '',
       focusing: false,
-      hovering: false
+      hovering: false,
+      active: false
     };
     this.inputRef = /*#__PURE__*/_react.default.createRef();
+    this.tagInputRef = /*#__PURE__*/_react.default.createRef();
+    this.clickOutsideHandler = null;
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -180,6 +279,14 @@ class TagInput extends _baseComponent.default {
           hovering
         });
       },
+      setActive: active => {
+        this.setState({
+          active
+        });
+      },
+      getClickOutsideHandler: () => {
+        return this.clickOutsideHandler;
+      },
       notifyBlur: e => {
         this.props.onBlur(e);
       },
@@ -200,6 +307,23 @@ class TagInput extends _baseComponent.default {
       },
       notifyKeyDown: e => {
         this.props.onKeyDown(e);
+      },
+      registerClickOutsideHandler: cb => {
+        const clickOutsideHandler = e => {
+          const tagInputDom = this.tagInputRef && this.tagInputRef.current;
+          const target = e.target;
+
+          if (tagInputDom && !tagInputDom.contains(target)) {
+            cb(e);
+          }
+        };
+
+        this.clickOutsideHandler = clickOutsideHandler;
+        document.addEventListener('click', clickOutsideHandler, false);
+      },
+      unregisterClickOutsideHandler: () => {
+        document.removeEventListener('click', this.clickOutsideHandler, false);
+        this.clickOutsideHandler = null;
       }
     });
   }
@@ -215,7 +339,10 @@ class TagInput extends _baseComponent.default {
       this.inputRef.current.focus({
         preventScroll
       });
+      this.foundation.handleClick();
     }
+
+    this.foundation.init();
   }
 
   renderClearBtn() {
@@ -304,71 +431,49 @@ class TagInput extends _baseComponent.default {
   }
 
   renderTags() {
-    var _context;
-
     const {
-      size,
       disabled,
-      renderTagItem,
       maxTagCount,
-      showContentTooltip,
       showRestTagsPopover,
-      restTagsPopoverProps = {}
+      restTagsPopoverProps = {},
+      draggable,
+      expandRestTagsOnClick
     } = this.props;
     const {
-      tagsArray
+      tagsArray,
+      active
     } = this.state;
-    const tagCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-tag"), {
-      [(0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-tag-size-")).call(_context, size)]: size
-    });
-    const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
-      ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
-    });
     const restTagsCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
       ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
     });
-    const restTags = [];
-    const tags = [];
-    (0, _forEach.default)(tagsArray).call(tagsArray, (value, index) => {
-      let item = null;
-
-      if ((0, _isFunction2.default)(renderTagItem)) {
-        item = renderTagItem(value, index);
-      } else {
-        var _context2, _context3;
-
-        item = /*#__PURE__*/_react.default.createElement(_tag.default, {
-          className: tagCls,
-          color: "white",
-          size: size === 'small' ? 'small' : 'large',
-          type: "light",
-          onClose: () => {
-            !disabled && this.handleTagClose(index);
-          },
-          closable: !disabled,
-          key: (0, _concat.default)(_context2 = "".concat(index)).call(_context2, value),
-          visible: true,
-          "aria-label": (0, _concat.default)(_context3 = "".concat(!disabled ? 'Closable ' : '', "Tag: ")).call(_context3, value)
-        }, /*#__PURE__*/_react.default.createElement(_paragraph.default, {
-          className: typoCls,
-          ellipsis: {
-            showTooltip: showContentTooltip,
-            rows: 1
-          }
-        }, value));
-      }
+    const allTags = this.getAllTags();
+    let restTags = [];
+    let tags = [...allTags];
 
-      if (maxTagCount && index >= maxTagCount) {
-        restTags.push(item);
-      } else {
-        tags.push(item);
-      }
-    });
+    if ((!active || !expandRestTagsOnClick) && maxTagCount && maxTagCount < allTags.length) {
+      tags = (0, _slice.default)(allTags).call(allTags, 0, maxTagCount);
+      restTags = (0, _slice.default)(allTags).call(allTags, maxTagCount);
+    }
 
     const restTagsContent = /*#__PURE__*/_react.default.createElement("span", {
       className: restTagsCls
     }, "+", tagsArray.length - maxTagCount);
 
+    const sortableListItems = (0, _map.default)(allTags).call(allTags, (item, index) => ({
+      item: item,
+      key: tagsArray[index]
+    }));
+
+    if (active && draggable && sortableListItems.length > 0) {
+      // @ts-ignore skip SortableItem type check
+      return /*#__PURE__*/_react.default.createElement(SortableList, {
+        useDragHandle: true,
+        items: sortableListItems,
+        onSortEnd: this.onSortEnd,
+        axis: "xy"
+      });
+    }
+
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover ? /*#__PURE__*/_react.default.createElement(_popover.default, (0, _assign.default)({
       content: restTags,
       showArrow: true,
@@ -379,16 +484,24 @@ class TagInput extends _baseComponent.default {
   }
 
   blur() {
-    this.inputRef.current.blur();
+    this.inputRef.current.blur(); // unregister clickOutside event 
+
+    this.foundation.clickOutsideCallBack();
   }
 
   focus() {
     const {
-      preventScroll
+      preventScroll,
+      disabled
     } = this.props;
     this.inputRef.current.focus({
       preventScroll
     });
+
+    if (!disabled) {
+      // register clickOutside event 
+      this.foundation.handleClick();
+    }
   }
 
   render() {
@@ -404,10 +517,11 @@ class TagInput extends _baseComponent.default {
       focusing,
       hovering,
       tagsArray,
-      inputValue
+      inputValue,
+      active
     } = this.state;
     const tagInputCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-focus")]: focusing,
+      ["".concat(prefixCls, "-focus")]: focusing || active,
       ["".concat(prefixCls, "-disabled")]: disabled,
       ["".concat(prefixCls, "-hover")]: hovering && !disabled,
       ["".concat(prefixCls, "-error")]: validateStatus === 'error',
@@ -415,41 +529,49 @@ class TagInput extends _baseComponent.default {
     });
     const inputCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-input"));
     const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"));
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: style,
-      className: tagInputCls,
-      "aria-disabled": disabled,
-      "aria-label": this.props['aria-label'],
-      "aria-invalid": validateStatus === 'error',
-      onMouseEnter: e => {
-        this.handleInputMouseEnter(e);
-      },
-      onMouseLeave: e => {
-        this.handleInputMouseLeave(e);
-      }
-    }, this.renderPrefix(), /*#__PURE__*/_react.default.createElement("div", {
-      className: wrapperCls
-    }, this.renderTags(), /*#__PURE__*/_react.default.createElement(_input.default, {
-      "aria-label": 'input value',
-      ref: this.inputRef,
-      className: inputCls,
-      disabled: disabled,
-      value: inputValue,
-      size: size,
-      placeholder: tagsArray.length === 0 ? placeholder : '',
-      onKeyDown: e => {
-        this.handleKeyDown(e);
-      },
-      onChange: (v, e) => {
-        this.handleInputChange(e);
-      },
-      onBlur: e => {
-        this.handleInputBlur(e);
-      },
-      onFocus: e => {
-        this.handleInputFocus(e);
-      }
-    })), this.renderClearBtn(), this.renderSuffix());
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line 
+      _react.default.createElement("div", {
+        ref: this.tagInputRef,
+        style: style,
+        className: tagInputCls,
+        "aria-disabled": disabled,
+        "aria-label": this.props['aria-label'],
+        "aria-invalid": validateStatus === 'error',
+        onMouseEnter: e => {
+          this.handleInputMouseEnter(e);
+        },
+        onMouseLeave: e => {
+          this.handleInputMouseLeave(e);
+        },
+        onClick: e => {
+          this.handleClick(e);
+        }
+      }, this.renderPrefix(), /*#__PURE__*/_react.default.createElement("div", {
+        className: wrapperCls
+      }, this.renderTags(), /*#__PURE__*/_react.default.createElement(_input.default, {
+        "aria-label": 'input value',
+        ref: this.inputRef,
+        className: inputCls,
+        disabled: disabled,
+        value: inputValue,
+        size: size,
+        placeholder: tagsArray.length === 0 ? placeholder : '',
+        onKeyDown: e => {
+          this.handleKeyDown(e);
+        },
+        onChange: (v, e) => {
+          this.handleInputChange(e);
+        },
+        onBlur: e => {
+          this.handleInputBlur(e);
+        },
+        onFocus: e => {
+          this.handleInputFocus(e);
+        }
+      })), this.renderClearBtn(), this.renderSuffix())
+    );
   }
 
 }
@@ -473,6 +595,8 @@ TagInput.propTypes = {
   separator: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
   showClear: _propTypes.default.bool,
   addOnBlur: _propTypes.default.bool,
+  draggable: _propTypes.default.bool,
+  expandRestTagsOnClick: _propTypes.default.bool,
   autoFocus: _propTypes.default.bool,
   renderTagItem: _propTypes.default.func,
   onBlur: _propTypes.default.func,
@@ -497,6 +621,8 @@ TagInput.defaultProps = {
   allowDuplicates: true,
   showRestTagsPopover: true,
   autoFocus: false,
+  draggable: false,
+  expandRestTagsOnClick: true,
   showContentTooltip: true,
   separator: ',',
   size: 'default',

package/lib/cjs/timePicker/TimePicker.js

@@ -167,7 +167,7 @@ class TimePicker extends _baseComponent.default {
 
           if (!isInTimepicker && !isInPanel) {
             const clickedOutside = true;
-            this.foundation.hanldePanelClose(clickedOutside, e);
+            this.foundation.handlePanelClose(clickedOutside, e);
           }
         };
 

package/lib/cjs/tooltip/index.d.ts

@@ -53,8 +53,10 @@ export interface TooltipProps extends BaseProps {
     guardFocus?: boolean;
     returnFocusOnClose?: boolean;
     onEscKeyDown?: (e: React.KeyboardEvent) => void;
+    disableArrowKeyDown?: boolean;
     wrapperId?: string;
     preventScroll?: boolean;
+    disableFocusListener?: boolean;
 }
 interface TooltipState {
     visible: boolean;
@@ -139,6 +141,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         guardFocus: boolean;
         returnFocusOnClose: boolean;
         onEscKeyDown: (...args: any[]) => void;
+        disableFocusListener: boolean;
+        disableArrowKeyDown: boolean;
     };
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;

package/lib/cjs/tooltip/index.js

@@ -721,8 +721,8 @@ class Tooltip extends _baseComponent.default {
           ref.current = node;
         }
       },
-      tabIndex: 0,
-      'data-popupid': id
+      tabIndex: children.props.tabIndex || 0 // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+
     })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 
@@ -790,5 +790,7 @@ Tooltip.defaultProps = {
   closeOnEsc: false,
   guardFocus: false,
   returnFocusOnClose: false,
-  onEscKeyDown: _noop2.default
+  onEscKeyDown: _noop2.default,
+  disableFocusListener: false,
+  disableArrowKeyDown: false
 };

package/lib/cjs/typography/base.js

@@ -89,18 +89,12 @@ const wrapperDecorations = (props, content) => {
     underline,
     strong,
     link,
-    disabled,
-    icon
+    disabled
   } = props;
   let wrapped = content;
 
   const wrap = (isNeeded, tag) => {
-    let wrapProps = icon ? {
-      style: {
-        display: 'inline-flex',
-        alignItems: 'center'
-      }
-    } : {};
+    let wrapProps = {};
 
     if (!isNeeded) {
       return;
@@ -118,13 +112,7 @@ const wrapperDecorations = (props, content) => {
   wrap(underline && !link, 'u');
   wrap(strong, 'strong');
   wrap(props.delete, 'del');
-  wrap(link, disabled ? 'span' : 'a'); // When the content is not wrapped, and there is more than one element in the content (one of which is an icon), 
-  // use span to wrap the content, so that the content in the span is vertically aligned
-
-  if (wrapped === content && icon) {
-    wrap(true, 'span');
-  }
-
+  wrap(link, disabled ? 'span' : 'a');
   return wrapped;
 };
 

package/lib/cjs/typography/text.js

@@ -24,25 +24,15 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/typography/constants
 
 var _base = _interopRequireDefault(require("./base"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (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; }
 
-const prefixCls = _constants.cssClasses.PREFIX;
-
 class Text extends _react.PureComponent {
   render() {
-    const className = (0, _classnames.default)(this.props.className, {
-      ["".concat(prefixCls, "-text")]: true,
-      ["".concat(prefixCls, "-text-icon")]: this.props.icon
-    });
     return /*#__PURE__*/_react.default.createElement(_base.default, (0, _assign.default)({
       component: 'span'
-    }, this.props, {
-      className: className
-    }));
+    }, this.props));
   }
 
 }

package/lib/es/avatar/interface.d.ts

@@ -19,7 +19,7 @@ export interface AvatarProps extends BaseProps {
     imgAttr?: React.ImgHTMLAttributes<HTMLImageElement>;
 }
 export declare type AvatarGroupShape = 'circle' | 'square';
-export declare type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+export declare type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
 export declare type AvatarGroupOverlapFrom = 'start' | 'end';
 export interface AvatarGroupProps {
     children?: React.ReactNode;

package/lib/es/cascader/index.js

@@ -742,6 +742,37 @@ class Cascader extends BaseComponent {
       return firstInProps || treeDataHasChange;
     };
 
+    const getRealKeys = (realValue, keyEntities) => {
+      // normallizedValue is used to save the value in two-dimensional array format
+      let normallizedValue = [];
+
+      if (_Array$isArray(realValue)) {
+        normallizedValue = _Array$isArray(realValue[0]) ? realValue : [realValue];
+      } else {
+        if (realValue !== undefined) {
+          normallizedValue = [[realValue]];
+        }
+      } // formatValuePath is used to save value of valuePath
+
+
+      const formatValuePath = [];
+
+      _forEachInstanceProperty(normallizedValue).call(normallizedValue, valueItem => {
+        const formatItem = onChangeWithObject ? _mapInstanceProperty(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
+        formatValuePath.push(formatItem);
+      }); // formatKeys is used to save key of value
+
+
+      const formatKeys = [];
+
+      _forEachInstanceProperty(formatValuePath).call(formatValuePath, v => {
+        const formatKeyItem = findKeysForValues(v, keyEntities);
+        !_isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
+      });
+
+      return formatKeys;
+    };
+
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
     const needUpdateValue = needUpdate('value') || _isEmpty(prevProps) && defaultValue;
 
@@ -758,35 +789,15 @@ class Cascader extends BaseComponent {
         let realKeys = prevState.checkedKeys; // when data was updated
 
         if (needUpdateValue) {
-          // normallizedValue is used to save the value in two-dimensional array format
-          let normallizedValue = [];
-          const realValue = needUpdate('value') ? value : defaultValue; // eslint-disable-next-line max-depth
-
-          if (_Array$isArray(realValue)) {
-            normallizedValue = _Array$isArray(realValue[0]) ? realValue : [realValue];
-          } else {
-            if (realValue !== undefined) {
-              normallizedValue = [[realValue]];
-            }
-          } // formatValuePath is used to save value of valuePath
-
-
-          const formatValuePath = [];
-
-          _forEachInstanceProperty(normallizedValue).call(normallizedValue, valueItem => {
-            const formatItem = onChangeWithObject ? _mapInstanceProperty(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
-            formatValuePath.push(formatItem);
-          }); // formatKeys is used to save key of value
-
-
-          const formatKeys = [];
-
-          _forEachInstanceProperty(formatValuePath).call(formatValuePath, v => {
-            const formatKeyItem = findKeysForValues(v, keyEntities);
-            !_isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
-          });
-
-          realKeys = formatKeys;
+          const realValue = needUpdate('value') ? value : defaultValue;
+          realKeys = getRealKeys(realValue, keyEntities);
+        } else {
+          // needUpdateValue is false
+          // if treeData is updated & Cascader is controlled, realKeys should be recalculated
+          if (needUpdateTreeData && 'value' in props) {
+            const realValue = value;
+            realKeys = getRealKeys(realValue, keyEntities);
+          }
         }
 
         if (_isSet(realKeys)) {

package/lib/es/checkbox/checkbox.js

@@ -98,7 +98,10 @@ class Checkbox extends BaseComponent {
   }
 
   isInGroup() {
-    return Boolean(this.context && this.context.checkboxGroup);
+    // Why do we need to determine whether there is a value in props?
+    // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
+    // it will be considered not to belong to the checkboxGroup。
+    return Boolean(this.context && this.context.checkboxGroup && 'value' in this.props);
   }
 
   focus() {

package/lib/es/collapse/item.d.ts

@@ -9,6 +9,8 @@ export interface CollapsePanelProps {
     children?: React.ReactNode;
     reCalcKey?: number | string;
     style?: CSSProperties;
+    showArrow?: boolean;
+    disabled?: boolean;
 }
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     static contextType: React.Context<CollapseContextType>;
@@ -18,6 +20,12 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         reCalcKey: PropTypes.Requireable<string | number>;
+        showArrow: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        showArrow: boolean;
+        disabled: boolean;
     };
     private ariaID;
     context: CollapseContextType;