rc-collapse - npm Package Compare versions

Comparing version 3.7.1 to 3.7.2

es/Collapse.d.ts

 import React from 'react';
 import type { CollapseProps } from './interface';
-declare const _default: React.ForwardRefExoticComponent<
-  CollapseProps & React.RefAttributes<HTMLDivElement>
-> & {
-  /**
-   * @deprecated use `items` instead, will be removed in `v4.0.0`
-   */
-  Panel: React.ForwardRefExoticComponent<
-    import('./interface').CollapsePanelProps & React.RefAttributes<HTMLDivElement>
-  >;
+declare const _default: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    /**
+     * @deprecated use `items` instead, will be removed in `v4.0.0`
+     */
+    Panel: React.ForwardRefExoticComponent<import("./interface").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

es/Collapse.js

@@ -1,10 +0,10 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
-import _typeof from '@babel/runtime/helpers/esm/typeof';
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import classNames from 'classnames';
-import useMergedState from 'rc-util/es/hooks/useMergedState';
-import warning from 'rc-util/es/warning';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import warning from "rc-util/es/warning";
 import React from 'react';
-import useItems from './hooks/useItems';
-import CollapsePanel from './Panel';
+import useItems from "./hooks/useItems";
+import CollapsePanel from "./Panel";
 function getActiveKeysArray(activeKey) {
@@ -14,4 +14,3 @@ var currentActiveKey = activeKey;
     var activeKeyType = _typeof(currentActiveKey);
-    currentActiveKey =
-      activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
+    currentActiveKey = activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
   }
@@ -22,3 +21,3 @@ return currentActiveKey.map(function (key) {
 }
-var Collapse = /*#__PURE__*/ React.forwardRef(function (props, ref) {
+var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$prefixCls = props.prefixCls,
@@ -46,3 +45,3 @@ prefixCls = _props$prefixCls === void 0 ? 'rc-collapse' : _props$prefixCls,
       defaultValue: defaultActiveKey,
-      postState: getActiveKeysArray,
+      postState: getActiveKeysArray
     }),
@@ -69,6 +68,3 @@ _useMergedState2 = _slicedToArray(_useMergedState, 2),
   // ======================== Children ========================
-  warning(
-    !children,
-    '`children` will be removed in next major version. Please use `items` instead.',
-  );
+  warning(!children, '[rc-collapse] `children` will be removed in next major version. Please use `items` instead.');
   var mergedChildren = useItems(items, children, {
@@ -82,16 +78,12 @@ prefixCls: prefixCls,
     onItemClick: onItemClick,
-    activeKey: activeKey,
+    activeKey: activeKey
   });
 
   // ======================== Render ========================
-  return /*#__PURE__*/ React.createElement(
-    'div',
-    {
-      ref: ref,
-      className: collapseClassName,
-      style: style,
-      role: accordion ? 'tablist' : undefined,
-    },
-    mergedChildren,
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: collapseClassName,
+    style: style,
+    role: accordion ? 'tablist' : undefined
+  }, mergedChildren);
 });
@@ -102,3 +94,3 @@ export default Object.assign(Collapse, {
    */
-  Panel: CollapsePanel,
-});
+  Panel: CollapsePanel
+});

es/hooks/useItems.d.ts

 import React from 'react';
 import type { CollapsePanelProps, CollapseProps, ItemType } from '../interface';
-type Props = Pick<CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon'> &
-  Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyInactivePanel'> & {
+type Props = Pick<CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon'> & Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyInactivePanel'> & {
     activeKey: React.Key[];
-  };
-declare function useItems(
-  items?: ItemType[],
-  rawChildren?: React.ReactNode,
-  props?: Props,
-): React.ReactElement<CollapsePanelProps>[];
+};
+declare function useItems(items?: ItemType[], rawChildren?: React.ReactNode, props?: Props): React.ReactElement<CollapsePanelProps>[];
 export default useItems;

es/hooks/useItems.js

@@ -1,7 +0,7 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import toArray from 'rc-util/es/Children/toArray';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "label", "key", "collapsible", "onItemClick", "destroyInactivePanel"];
+import toArray from "rc-util/es/Children/toArray";
 import React from 'react';
-import CollapsePanel from '../Panel';
-var _excluded = ['children', 'label', 'key', 'collapsible', 'onItemClick', 'destroyInactivePanel'];
+import CollapsePanel from "../Panel";
 var convertItemsToNodes = function convertItemsToNodes(items, props) {
@@ -28,12 +28,8 @@ var prefixCls = props.prefixCls,
     var key = String(rawKey !== null && rawKey !== void 0 ? rawKey : index);
-    var mergeCollapsible =
-      rawCollapsible !== null && rawCollapsible !== void 0 ? rawCollapsible : collapsible;
-    var mergeDestroyInactivePanel =
-      rawDestroyInactivePanel !== null && rawDestroyInactivePanel !== void 0
-        ? rawDestroyInactivePanel
-        : destroyInactivePanel;
+    var mergeCollapsible = rawCollapsible !== null && rawCollapsible !== void 0 ? rawCollapsible : collapsible;
+    var mergeDestroyInactivePanel = rawDestroyInactivePanel !== null && rawDestroyInactivePanel !== void 0 ? rawDestroyInactivePanel : destroyInactivePanel;
     var handleItemClick = function handleItemClick(value) {
       if (mergeCollapsible === 'disabled') return;
       onItemClick(value);
-      rawOnItemClick === null || rawOnItemClick === void 0 ? void 0 : rawOnItemClick(value);
+      rawOnItemClick === null || rawOnItemClick === void 0 || rawOnItemClick(value);
     };
@@ -46,19 +42,15 @@ var isActive = false;
     }
-    return /*#__PURE__*/ React.createElement(
-      CollapsePanel,
-      _extends({}, restProps, {
-        prefixCls: prefixCls,
-        key: key,
-        panelKey: key,
-        isActive: isActive,
-        accordion: accordion,
-        openMotion: openMotion,
-        expandIcon: expandIcon,
-        header: label,
-        collapsible: mergeCollapsible,
-        onItemClick: handleItemClick,
-        destroyInactivePanel: mergeDestroyInactivePanel,
-      }),
-      children,
-    );
+    return /*#__PURE__*/React.createElement(CollapsePanel, _extends({}, restProps, {
+      prefixCls: prefixCls,
+      key: key,
+      panelKey: key,
+      isActive: isActive,
+      accordion: accordion,
+      openMotion: openMotion,
+      expandIcon: expandIcon,
+      header: label,
+      collapsible: mergeCollapsible,
+      onItemClick: handleItemClick,
+      destroyInactivePanel: mergeDestroyInactivePanel
+    }), children);
   });
@@ -93,8 +85,7 @@ };
   }
-  var mergeCollapsible =
-    childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
+  var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
   var handleItemClick = function handleItemClick(value) {
     if (mergeCollapsible === 'disabled') return;
     onItemClick(value);
-    childOnItemClick === null || childOnItemClick === void 0 ? void 0 : childOnItemClick(value);
+    childOnItemClick === null || childOnItemClick === void 0 || childOnItemClick(value);
   };
@@ -108,6 +99,3 @@ var childProps = {
     prefixCls: prefixCls,
-    destroyInactivePanel:
-      childDestroyInactivePanel !== null && childDestroyInactivePanel !== void 0
-        ? childDestroyInactivePanel
-        : destroyInactivePanel,
+    destroyInactivePanel: childDestroyInactivePanel !== null && childDestroyInactivePanel !== void 0 ? childDestroyInactivePanel : destroyInactivePanel,
     openMotion: openMotion,
@@ -118,3 +106,3 @@ accordion: accordion,
     expandIcon: expandIcon,
-    collapsible: mergeCollapsible,
+    collapsible: mergeCollapsible
   };
@@ -131,3 +119,3 @@
   });
-  return /*#__PURE__*/ React.cloneElement(child, childProps);
+  return /*#__PURE__*/React.cloneElement(child, childProps);
 };
@@ -142,2 +130,2 @@ function useItems(items, rawChildren, props) {
 }
-export default useItems;
+export default useItems;

es/index.d.ts

@@ -8,4 +8,2 @@ /// <reference types="react" />
  */
-export declare const Panel: import('react').ForwardRefExoticComponent<
-  import('./interface').CollapsePanelProps & import('react').RefAttributes<HTMLDivElement>
->;
+export declare const Panel: import("react").ForwardRefExoticComponent<import("./interface").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>;

es/index.js

@@ -1,2 +0,2 @@
-import Collapse from './Collapse';
+import Collapse from "./Collapse";
 export default Collapse;
@@ -8,2 +8,2 @@
 var Panel = Collapse.Panel;
-export { Panel };
+export { Panel };

es/interface.d.ts

 import type { CSSMotionProps } from 'rc-motion';
 import type * as React from 'react';
 export type CollapsibleType = 'header' | 'icon' | 'disabled';
-export interface ItemType
-  extends Omit<
-    CollapsePanelProps,
-    'header' | 'prefixCls' | 'panelKey' | 'isActive' | 'accordion' | 'openMotion' | 'expandIcon'
-  > {
-  key?: CollapsePanelProps['panelKey'];
-  label?: CollapsePanelProps['header'];
-  ref?: React.RefObject<HTMLDivElement>;
+export interface ItemType extends Omit<CollapsePanelProps, 'header' | 'prefixCls' | 'panelKey' | 'isActive' | 'accordion' | 'openMotion' | 'expandIcon'> {
+    key?: CollapsePanelProps['panelKey'];
+    label?: CollapsePanelProps['header'];
+    ref?: React.RefObject<HTMLDivElement>;
 }
 export interface CollapseProps {
-  prefixCls?: string;
-  activeKey?: React.Key | React.Key[];
-  defaultActiveKey?: React.Key | React.Key[];
-  openMotion?: CSSMotionProps;
-  onChange?: (key: React.Key | React.Key[]) => void;
-  accordion?: boolean;
-  className?: string;
-  style?: object;
-  destroyInactivePanel?: boolean;
-  expandIcon?: (props: object) => React.ReactNode;
-  collapsible?: CollapsibleType;
-  children?: React.ReactNode;
-  /**
-   * Collapse items content
-   * @since 3.6.0
-   */
-  items?: ItemType[];
+    prefixCls?: string;
+    activeKey?: React.Key | React.Key[];
+    defaultActiveKey?: React.Key | React.Key[];
+    openMotion?: CSSMotionProps;
+    onChange?: (key: React.Key | React.Key[]) => void;
+    accordion?: boolean;
+    className?: string;
+    style?: object;
+    destroyInactivePanel?: boolean;
+    expandIcon?: (props: object) => React.ReactNode;
+    collapsible?: CollapsibleType;
+    children?: React.ReactNode;
+    /**
+     * Collapse items content
+     * @since 3.6.0
+     */
+    items?: ItemType[];
 }
 export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
-  id?: string;
-  header?: string | React.ReactNode;
-  prefixCls?: string;
-  headerClass?: string;
-  showArrow?: boolean;
-  className?: string;
-  style?: object;
-  isActive?: boolean;
-  openMotion?: CSSMotionProps;
-  destroyInactivePanel?: boolean;
-  accordion?: boolean;
-  forceRender?: boolean;
-  extra?: string | React.ReactNode;
-  onItemClick?: (panelKey: string | number) => void;
-  expandIcon?: (props: object) => React.ReactNode;
-  panelKey?: string | number;
-  role?: string;
-  collapsible?: CollapsibleType;
-  children?: React.ReactNode;
+    id?: string;
+    header?: string | React.ReactNode;
+    prefixCls?: string;
+    headerClass?: string;
+    showArrow?: boolean;
+    className?: string;
+    style?: object;
+    isActive?: boolean;
+    openMotion?: CSSMotionProps;
+    destroyInactivePanel?: boolean;
+    accordion?: boolean;
+    forceRender?: boolean;
+    extra?: string | React.ReactNode;
+    onItemClick?: (panelKey: React.Key) => void;
+    expandIcon?: (props: object) => React.ReactNode;
+    panelKey?: React.Key;
+    role?: string;
+    collapsible?: CollapsibleType;
+    children?: React.ReactNode;
 }

es/interface.js

@@ -1,1 +0,1 @@
-export {};
+export {};

es/Panel.d.ts

 import React from 'react';
 import type { CollapsePanelProps } from './interface';
-declare const CollapsePanel: React.ForwardRefExoticComponent<
-  CollapsePanelProps & React.RefAttributes<HTMLDivElement>
->;
+declare const CollapsePanel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
 export default CollapsePanel;

es/Panel.js

@@ -1,28 +0,11 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
-import KeyCode from 'rc-util/es/KeyCode';
+import KeyCode from "rc-util/es/KeyCode";
 import React from 'react';
-import PanelContent from './PanelContent';
-var _excluded = [
-  'showArrow',
-  'headerClass',
-  'isActive',
-  'onItemClick',
-  'forceRender',
-  'className',
-  'prefixCls',
-  'collapsible',
-  'accordion',
-  'panelKey',
-  'extra',
-  'header',
-  'expandIcon',
-  'openMotion',
-  'destroyInactivePanel',
-  'children',
-];
-var CollapsePanel = /*#__PURE__*/ React.forwardRef(function (props, ref) {
+import PanelContent from "./PanelContent";
+var CollapsePanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
@@ -52,3 +35,3 @@ var _props$showArrow = props.showArrow,
   var handleItemClick = function handleItemClick() {
-    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(panelKey);
+    onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
   };
@@ -62,38 +45,13 @@ var handleKeyDown = function handleKeyDown(e) {
   // ======================== Icon ========================
-  var iconNode =
-    typeof expandIcon === 'function'
-      ? expandIcon(props)
-      : /*#__PURE__*/ React.createElement('i', {
-          className: 'arrow',
-        });
+  var iconNode = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/React.createElement("i", {
+    className: "arrow"
+  });
   if (iconNode) {
-    iconNode = /*#__PURE__*/ React.createElement(
-      'div',
-      {
-        className: ''.concat(prefixCls, '-expand-icon'),
-        onClick: ['header', 'icon'].includes(collapsible) ? handleItemClick : undefined,
-      },
-      iconNode,
-    );
+    iconNode = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-expand-icon"),
+      onClick: ['header', 'icon'].includes(collapsible) ? handleItemClick : undefined
+    }, iconNode);
   }
-  var collapsePanelClassNames = classNames(
-    ((_classNames = {}),
-    _defineProperty(_classNames, ''.concat(prefixCls, '-item'), true),
-    _defineProperty(_classNames, ''.concat(prefixCls, '-item-active'), isActive),
-    _defineProperty(_classNames, ''.concat(prefixCls, '-item-disabled'), disabled),
-    _classNames),
-    className,
-  );
-  var headerClassName = classNames(
-    headerClass,
-    ((_classNames2 = {}),
-    _defineProperty(_classNames2, ''.concat(prefixCls, '-header'), true),
-    _defineProperty(
-      _classNames2,
-      ''.concat(prefixCls, '-header-collapsible-only'),
-      collapsibleHeader,
-    ),
-    _defineProperty(_classNames2, ''.concat(prefixCls, '-icon-collapsible-only'), collapsibleIcon),
-    _classNames2),
-  );
+  var collapsePanelClassNames = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-item"), true), _defineProperty(_classNames, "".concat(prefixCls, "-item-active"), isActive), _defineProperty(_classNames, "".concat(prefixCls, "-item-disabled"), disabled), _classNames), className);
+  var headerClassName = classNames(headerClass, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-header"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), _defineProperty(_classNames2, "".concat(prefixCls, "-icon-collapsible-only"), collapsibleIcon), _classNames2));
 
@@ -105,3 +63,3 @@ // ======================== HeaderProps ========================
     'aria-disabled': disabled,
-    onKeyDown: handleKeyDown,
+    onKeyDown: handleKeyDown
   };
@@ -115,62 +73,30 @@ if (!collapsibleHeader && !collapsibleIcon) {
   // ======================== Render ========================
-  return /*#__PURE__*/ React.createElement(
-    'div',
-    _extends({}, resetProps, {
-      ref: ref,
-      className: collapsePanelClassNames,
-    }),
-    /*#__PURE__*/ React.createElement(
-      'div',
-      headerProps,
-      showArrow && iconNode,
-      /*#__PURE__*/ React.createElement(
-        'span',
-        {
-          className: ''.concat(prefixCls, '-header-text'),
-          onClick: collapsible === 'header' ? handleItemClick : undefined,
-        },
-        header,
-      ),
-      ifExtraExist &&
-        /*#__PURE__*/ React.createElement(
-          'div',
-          {
-            className: ''.concat(prefixCls, '-extra'),
-          },
-          extra,
-        ),
-    ),
-    /*#__PURE__*/ React.createElement(
-      CSSMotion,
-      _extends(
-        {
-          visible: isActive,
-          leavedClassName: ''.concat(prefixCls, '-content-hidden'),
-        },
-        openMotion,
-        {
-          forceRender: forceRender,
-          removeOnLeave: destroyInactivePanel,
-        },
-      ),
-      function (_ref, motionRef) {
-        var motionClassName = _ref.className,
-          motionStyle = _ref.style;
-        return /*#__PURE__*/ React.createElement(
-          PanelContent,
-          {
-            ref: motionRef,
-            prefixCls: prefixCls,
-            className: motionClassName,
-            style: motionStyle,
-            isActive: isActive,
-            forceRender: forceRender,
-            role: accordion ? 'tabpanel' : void 0,
-          },
-          children,
-        );
-      },
-    ),
-  );
+  return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
+    ref: ref,
+    className: collapsePanelClassNames
+  }), /*#__PURE__*/React.createElement("div", headerProps, showArrow && iconNode, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-header-text"),
+    onClick: collapsible === 'header' ? handleItemClick : undefined
+  }, header), ifExtraExist && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-extra")
+  }, extra)), /*#__PURE__*/React.createElement(CSSMotion, _extends({
+    visible: isActive,
+    leavedClassName: "".concat(prefixCls, "-content-hidden")
+  }, openMotion, {
+    forceRender: forceRender,
+    removeOnLeave: destroyInactivePanel
+  }), function (_ref, motionRef) {
+    var motionClassName = _ref.className,
+      motionStyle = _ref.style;
+    return /*#__PURE__*/React.createElement(PanelContent, {
+      ref: motionRef,
+      prefixCls: prefixCls,
+      className: motionClassName,
+      style: motionStyle,
+      isActive: isActive,
+      forceRender: forceRender,
+      role: accordion ? 'tabpanel' : void 0
+    }, children);
+  }));
 });
-export default CollapsePanel;
+export default CollapsePanel;

es/PanelContent.d.ts

 import React from 'react';
 import type { CollapsePanelProps } from './interface';
-declare const PanelContent: React.ForwardRefExoticComponent<
-  CollapsePanelProps & {
+declare const PanelContent: React.ForwardRefExoticComponent<CollapsePanelProps & {
     children: React.ReactNode;
-  } & React.RefAttributes<HTMLDivElement>
->;
+} & React.RefAttributes<HTMLDivElement>>;
 export default PanelContent;

es/PanelContent.js

@@ -1,6 +0,6 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import classnames from 'classnames';
 import React from 'react';
-var PanelContent = /*#__PURE__*/ React.forwardRef(function (props, ref) {
+var PanelContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classnames;
@@ -18,38 +18,20 @@ var prefixCls = props.prefixCls,
     setRendered = _React$useState2[1];
-  React.useEffect(
-    function () {
-      if (forceRender || isActive) {
-        setRendered(true);
-      }
-    },
-    [forceRender, isActive],
-  );
+  React.useEffect(function () {
+    if (forceRender || isActive) {
+      setRendered(true);
+    }
+  }, [forceRender, isActive]);
   if (!rendered) {
     return null;
   }
-  return /*#__PURE__*/ React.createElement(
-    'div',
-    {
-      ref: ref,
-      className: classnames(
-        ''.concat(prefixCls, '-content'),
-        ((_classnames = {}),
-        _defineProperty(_classnames, ''.concat(prefixCls, '-content-active'), isActive),
-        _defineProperty(_classnames, ''.concat(prefixCls, '-content-inactive'), !isActive),
-        _classnames),
-        className,
-      ),
-      style: style,
-      role: role,
-    },
-    /*#__PURE__*/ React.createElement(
-      'div',
-      {
-        className: ''.concat(prefixCls, '-content-box'),
-      },
-      children,
-    ),
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classnames("".concat(prefixCls, "-content"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-content-active"), isActive), _defineProperty(_classnames, "".concat(prefixCls, "-content-inactive"), !isActive), _classnames), className),
+    style: style,
+    role: role
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content-box")
+  }, children));
 });
 PanelContent.displayName = 'PanelContent';
-export default PanelContent;
+export default PanelContent;

lib/Collapse.d.ts

 import React from 'react';
 import type { CollapseProps } from './interface';
-declare const _default: React.ForwardRefExoticComponent<
-  CollapseProps & React.RefAttributes<HTMLDivElement>
-> & {
-  /**
-   * @deprecated use `items` instead, will be removed in `v4.0.0`
-   */
-  Panel: React.ForwardRefExoticComponent<
-    import('./interface').CollapsePanelProps & React.RefAttributes<HTMLDivElement>
-  >;
+declare const _default: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    /**
+     * @deprecated use `items` instead, will be removed in `v4.0.0`
+     */
+    Panel: React.ForwardRefExoticComponent<import("./interface").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

lib/Collapse.js

@@ -1,19 +0,17 @@
-'use strict';
+"use strict";
 
-var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
-Object.defineProperty(exports, '__esModule', {
-  value: true,
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 exports.default = void 0;
-var _toConsumableArray2 = _interopRequireDefault(
-  require('@babel/runtime/helpers/toConsumableArray'),
-);
-var _slicedToArray2 = _interopRequireDefault(require('@babel/runtime/helpers/slicedToArray'));
-var _typeof2 = _interopRequireDefault(require('@babel/runtime/helpers/typeof'));
-var _classnames = _interopRequireDefault(require('classnames'));
-var _useMergedState3 = _interopRequireDefault(require('rc-util/lib/hooks/useMergedState'));
-var _warning = _interopRequireDefault(require('rc-util/lib/warning'));
-var _react = _interopRequireDefault(require('react'));
-var _useItems = _interopRequireDefault(require('./hooks/useItems'));
-var _Panel = _interopRequireDefault(require('./Panel'));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _react = _interopRequireDefault(require("react"));
+var _useItems = _interopRequireDefault(require("./hooks/useItems"));
+var _Panel = _interopRequireDefault(require("./Panel"));
 function getActiveKeysArray(activeKey) {
@@ -23,4 +21,3 @@ var currentActiveKey = activeKey;
     var activeKeyType = (0, _typeof2.default)(currentActiveKey);
-    currentActiveKey =
-      activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
+    currentActiveKey = activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
   }
@@ -31,3 +28,3 @@ return currentActiveKey.map(function (key) {
 }
-var Collapse = /*#__PURE__*/ _react.default.forwardRef(function (props, ref) {
+var Collapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$prefixCls = props.prefixCls,
@@ -55,3 +52,3 @@ prefixCls = _props$prefixCls === void 0 ? 'rc-collapse' : _props$prefixCls,
       defaultValue: defaultActiveKey,
-      postState: getActiveKeysArray,
+      postState: getActiveKeysArray
     }),
@@ -78,4 +75,3 @@ _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
   // ======================== Children ========================
-  (0,
-  _warning.default)(!children, '`children` will be removed in next major version. Please use `items` instead.');
+  (0, _warning.default)(!children, '[rc-collapse] `children` will be removed in next major version. Please use `items` instead.');
   var mergedChildren = (0, _useItems.default)(items, children, {
@@ -89,23 +85,18 @@ prefixCls: prefixCls,
     onItemClick: onItemClick,
-    activeKey: activeKey,
+    activeKey: activeKey
   });
 
   // ======================== Render ========================
-  return /*#__PURE__*/ _react.default.createElement(
-    'div',
-    {
-      ref: ref,
-      className: collapseClassName,
-      style: style,
-      role: accordion ? 'tablist' : undefined,
-    },
-    mergedChildren,
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: collapseClassName,
+    style: style,
+    role: accordion ? 'tablist' : undefined
+  }, mergedChildren);
 });
-var _default = Object.assign(Collapse, {
+var _default = exports.default = Object.assign(Collapse, {
   /**
    * @deprecated use `items` instead, will be removed in `v4.0.0`
    */
-  Panel: _Panel.default,
-});
-exports.default = _default;
+  Panel: _Panel.default
+});

lib/hooks/useItems.d.ts

 import React from 'react';
 import type { CollapsePanelProps, CollapseProps, ItemType } from '../interface';
-type Props = Pick<CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon'> &
-  Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyInactivePanel'> & {
+type Props = Pick<CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon'> & Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyInactivePanel'> & {
     activeKey: React.Key[];
-  };
-declare function useItems(
-  items?: ItemType[],
-  rawChildren?: React.ReactNode,
-  props?: Props,
-): React.ReactElement<CollapsePanelProps>[];
+};
+declare function useItems(items?: ItemType[], rawChildren?: React.ReactNode, props?: Props): React.ReactElement<CollapsePanelProps>[];
 export default useItems;

lib/hooks/useItems.js

@@ -1,16 +0,14 @@
-'use strict';
+"use strict";
 
-var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
-Object.defineProperty(exports, '__esModule', {
-  value: true,
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require('@babel/runtime/helpers/extends'));
-var _objectWithoutProperties2 = _interopRequireDefault(
-  require('@babel/runtime/helpers/objectWithoutProperties'),
-);
-var _toArray = _interopRequireDefault(require('rc-util/lib/Children/toArray'));
-var _react = _interopRequireDefault(require('react'));
-var _Panel = _interopRequireDefault(require('../Panel'));
-var _excluded = ['children', 'label', 'key', 'collapsible', 'onItemClick', 'destroyInactivePanel'];
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+var _react = _interopRequireDefault(require("react"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _excluded = ["children", "label", "key", "collapsible", "onItemClick", "destroyInactivePanel"];
 var convertItemsToNodes = function convertItemsToNodes(items, props) {
@@ -37,12 +35,8 @@ var prefixCls = props.prefixCls,
     var key = String(rawKey !== null && rawKey !== void 0 ? rawKey : index);
-    var mergeCollapsible =
-      rawCollapsible !== null && rawCollapsible !== void 0 ? rawCollapsible : collapsible;
-    var mergeDestroyInactivePanel =
-      rawDestroyInactivePanel !== null && rawDestroyInactivePanel !== void 0
-        ? rawDestroyInactivePanel
-        : destroyInactivePanel;
+    var mergeCollapsible = rawCollapsible !== null && rawCollapsible !== void 0 ? rawCollapsible : collapsible;
+    var mergeDestroyInactivePanel = rawDestroyInactivePanel !== null && rawDestroyInactivePanel !== void 0 ? rawDestroyInactivePanel : destroyInactivePanel;
     var handleItemClick = function handleItemClick(value) {
       if (mergeCollapsible === 'disabled') return;
       onItemClick(value);
-      rawOnItemClick === null || rawOnItemClick === void 0 ? void 0 : rawOnItemClick(value);
+      rawOnItemClick === null || rawOnItemClick === void 0 || rawOnItemClick(value);
     };
@@ -55,19 +49,15 @@ var isActive = false;
     }
-    return /*#__PURE__*/ _react.default.createElement(
-      _Panel.default,
-      (0, _extends2.default)({}, restProps, {
-        prefixCls: prefixCls,
-        key: key,
-        panelKey: key,
-        isActive: isActive,
-        accordion: accordion,
-        openMotion: openMotion,
-        expandIcon: expandIcon,
-        header: label,
-        collapsible: mergeCollapsible,
-        onItemClick: handleItemClick,
-        destroyInactivePanel: mergeDestroyInactivePanel,
-      }),
-      children,
-    );
+    return /*#__PURE__*/_react.default.createElement(_Panel.default, (0, _extends2.default)({}, restProps, {
+      prefixCls: prefixCls,
+      key: key,
+      panelKey: key,
+      isActive: isActive,
+      accordion: accordion,
+      openMotion: openMotion,
+      expandIcon: expandIcon,
+      header: label,
+      collapsible: mergeCollapsible,
+      onItemClick: handleItemClick,
+      destroyInactivePanel: mergeDestroyInactivePanel
+    }), children);
   });
@@ -102,8 +92,7 @@ };
   }
-  var mergeCollapsible =
-    childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
+  var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
   var handleItemClick = function handleItemClick(value) {
     if (mergeCollapsible === 'disabled') return;
     onItemClick(value);
-    childOnItemClick === null || childOnItemClick === void 0 ? void 0 : childOnItemClick(value);
+    childOnItemClick === null || childOnItemClick === void 0 || childOnItemClick(value);
   };
@@ -117,6 +106,3 @@ var childProps = {
     prefixCls: prefixCls,
-    destroyInactivePanel:
-      childDestroyInactivePanel !== null && childDestroyInactivePanel !== void 0
-        ? childDestroyInactivePanel
-        : destroyInactivePanel,
+    destroyInactivePanel: childDestroyInactivePanel !== null && childDestroyInactivePanel !== void 0 ? childDestroyInactivePanel : destroyInactivePanel,
     openMotion: openMotion,
@@ -127,3 +113,3 @@ accordion: accordion,
     expandIcon: expandIcon,
-    collapsible: mergeCollapsible,
+    collapsible: mergeCollapsible
   };
@@ -140,3 +126,3 @@
   });
-  return /*#__PURE__*/ _react.default.cloneElement(child, childProps);
+  return /*#__PURE__*/_react.default.cloneElement(child, childProps);
 };
@@ -151,3 +137,2 @@ function useItems(items, rawChildren, props) {
 }
-var _default = useItems;
-exports.default = _default;
+var _default = exports.default = useItems;

lib/index.d.ts

@@ -8,4 +8,2 @@ /// <reference types="react" />
  */
-export declare const Panel: import('react').ForwardRefExoticComponent<
-  import('./interface').CollapsePanelProps & import('react').RefAttributes<HTMLDivElement>
->;
+export declare const Panel: import("react").ForwardRefExoticComponent<import("./interface").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>;

lib/index.js

@@ -1,15 +0,13 @@
-'use strict';
+"use strict";
 
-var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
-Object.defineProperty(exports, '__esModule', {
-  value: true,
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 exports.default = exports.Panel = void 0;
-var _Collapse = _interopRequireDefault(require('./Collapse'));
-var _default = _Collapse.default;
+var _Collapse = _interopRequireDefault(require("./Collapse"));
+var _default = exports.default = _Collapse.default;
 /**
  * @deprecated use `items` instead, will be removed in `v4.0.0`
  */
-exports.default = _default;
-var Panel = _Collapse.default.Panel;
-exports.Panel = Panel;
+var Panel = exports.Panel = _Collapse.default.Panel;

lib/interface.d.ts

 import type { CSSMotionProps } from 'rc-motion';
 import type * as React from 'react';
 export type CollapsibleType = 'header' | 'icon' | 'disabled';
-export interface ItemType
-  extends Omit<
-    CollapsePanelProps,
-    'header' | 'prefixCls' | 'panelKey' | 'isActive' | 'accordion' | 'openMotion' | 'expandIcon'
-  > {
-  key?: CollapsePanelProps['panelKey'];
-  label?: CollapsePanelProps['header'];
-  ref?: React.RefObject<HTMLDivElement>;
+export interface ItemType extends Omit<CollapsePanelProps, 'header' | 'prefixCls' | 'panelKey' | 'isActive' | 'accordion' | 'openMotion' | 'expandIcon'> {
+    key?: CollapsePanelProps['panelKey'];
+    label?: CollapsePanelProps['header'];
+    ref?: React.RefObject<HTMLDivElement>;
 }
 export interface CollapseProps {
-  prefixCls?: string;
-  activeKey?: React.Key | React.Key[];
-  defaultActiveKey?: React.Key | React.Key[];
-  openMotion?: CSSMotionProps;
-  onChange?: (key: React.Key | React.Key[]) => void;
-  accordion?: boolean;
-  className?: string;
-  style?: object;
-  destroyInactivePanel?: boolean;
-  expandIcon?: (props: object) => React.ReactNode;
-  collapsible?: CollapsibleType;
-  children?: React.ReactNode;
-  /**
-   * Collapse items content
-   * @since 3.6.0
-   */
-  items?: ItemType[];
+    prefixCls?: string;
+    activeKey?: React.Key | React.Key[];
+    defaultActiveKey?: React.Key | React.Key[];
+    openMotion?: CSSMotionProps;
+    onChange?: (key: React.Key | React.Key[]) => void;
+    accordion?: boolean;
+    className?: string;
+    style?: object;
+    destroyInactivePanel?: boolean;
+    expandIcon?: (props: object) => React.ReactNode;
+    collapsible?: CollapsibleType;
+    children?: React.ReactNode;
+    /**
+     * Collapse items content
+     * @since 3.6.0
+     */
+    items?: ItemType[];
 }
 export interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
-  id?: string;
-  header?: string | React.ReactNode;
-  prefixCls?: string;
-  headerClass?: string;
-  showArrow?: boolean;
-  className?: string;
-  style?: object;
-  isActive?: boolean;
-  openMotion?: CSSMotionProps;
-  destroyInactivePanel?: boolean;
-  accordion?: boolean;
-  forceRender?: boolean;
-  extra?: string | React.ReactNode;
-  onItemClick?: (panelKey: string | number) => void;
-  expandIcon?: (props: object) => React.ReactNode;
-  panelKey?: string | number;
-  role?: string;
-  collapsible?: CollapsibleType;
-  children?: React.ReactNode;
+    id?: string;
+    header?: string | React.ReactNode;
+    prefixCls?: string;
+    headerClass?: string;
+    showArrow?: boolean;
+    className?: string;
+    style?: object;
+    isActive?: boolean;
+    openMotion?: CSSMotionProps;
+    destroyInactivePanel?: boolean;
+    accordion?: boolean;
+    forceRender?: boolean;
+    extra?: string | React.ReactNode;
+    onItemClick?: (panelKey: React.Key) => void;
+    expandIcon?: (props: object) => React.ReactNode;
+    panelKey?: React.Key;
+    role?: string;
+    collapsible?: CollapsibleType;
+    children?: React.ReactNode;
 }

lib/interface.js

@@ -1,5 +0,5 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

lib/Panel.d.ts

 import React from 'react';
 import type { CollapsePanelProps } from './interface';
-declare const CollapsePanel: React.ForwardRefExoticComponent<
-  CollapsePanelProps & React.RefAttributes<HTMLDivElement>
->;
+declare const CollapsePanel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
 export default CollapsePanel;

lib/Panel.js

@@ -1,37 +0,18 @@
-'use strict';
+"use strict";
 
-var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
-Object.defineProperty(exports, '__esModule', {
-  value: true,
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require('@babel/runtime/helpers/extends'));
-var _defineProperty2 = _interopRequireDefault(require('@babel/runtime/helpers/defineProperty'));
-var _objectWithoutProperties2 = _interopRequireDefault(
-  require('@babel/runtime/helpers/objectWithoutProperties'),
-);
-var _classnames = _interopRequireDefault(require('classnames'));
-var _rcMotion = _interopRequireDefault(require('rc-motion'));
-var _KeyCode = _interopRequireDefault(require('rc-util/lib/KeyCode'));
-var _react = _interopRequireDefault(require('react'));
-var _PanelContent = _interopRequireDefault(require('./PanelContent'));
-var _excluded = [
-  'showArrow',
-  'headerClass',
-  'isActive',
-  'onItemClick',
-  'forceRender',
-  'className',
-  'prefixCls',
-  'collapsible',
-  'accordion',
-  'panelKey',
-  'extra',
-  'header',
-  'expandIcon',
-  'openMotion',
-  'destroyInactivePanel',
-  'children',
-];
-var CollapsePanel = /*#__PURE__*/ _react.default.forwardRef(function (props, ref) {
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+var _react = _interopRequireDefault(require("react"));
+var _PanelContent = _interopRequireDefault(require("./PanelContent"));
+var _excluded = ["showArrow", "headerClass", "isActive", "onItemClick", "forceRender", "className", "prefixCls", "collapsible", "accordion", "panelKey", "extra", "header", "expandIcon", "openMotion", "destroyInactivePanel", "children"];
+var CollapsePanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
@@ -61,10 +42,6 @@ var _props$showArrow = props.showArrow,
   var handleItemClick = function handleItemClick() {
-    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(panelKey);
+    onItemClick === null || onItemClick === void 0 || onItemClick(panelKey);
   };
   var handleKeyDown = function handleKeyDown(e) {
-    if (
-      e.key === 'Enter' ||
-      e.keyCode === _KeyCode.default.ENTER ||
-      e.which === _KeyCode.default.ENTER
-    ) {
+    if (e.key === 'Enter' || e.keyCode === _KeyCode.default.ENTER || e.which === _KeyCode.default.ENTER) {
       handleItemClick();
@@ -75,42 +52,13 @@ }
   // ======================== Icon ========================
-  var iconNode =
-    typeof expandIcon === 'function'
-      ? expandIcon(props)
-      : /*#__PURE__*/ _react.default.createElement('i', {
-          className: 'arrow',
-        });
+  var iconNode = typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/_react.default.createElement("i", {
+    className: "arrow"
+  });
   if (iconNode) {
-    iconNode = /*#__PURE__*/ _react.default.createElement(
-      'div',
-      {
-        className: ''.concat(prefixCls, '-expand-icon'),
-        onClick: ['header', 'icon'].includes(collapsible) ? handleItemClick : undefined,
-      },
-      iconNode,
-    );
+    iconNode = /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-expand-icon"),
+      onClick: ['header', 'icon'].includes(collapsible) ? handleItemClick : undefined
+    }, iconNode);
   }
-  var collapsePanelClassNames = (0, _classnames.default)(
-    ((_classNames = {}),
-    (0, _defineProperty2.default)(_classNames, ''.concat(prefixCls, '-item'), true),
-    (0, _defineProperty2.default)(_classNames, ''.concat(prefixCls, '-item-active'), isActive),
-    (0, _defineProperty2.default)(_classNames, ''.concat(prefixCls, '-item-disabled'), disabled),
-    _classNames),
-    className,
-  );
-  var headerClassName = (0, _classnames.default)(
-    headerClass,
-    ((_classNames2 = {}),
-    (0, _defineProperty2.default)(_classNames2, ''.concat(prefixCls, '-header'), true),
-    (0, _defineProperty2.default)(
-      _classNames2,
-      ''.concat(prefixCls, '-header-collapsible-only'),
-      collapsibleHeader,
-    ),
-    (0, _defineProperty2.default)(
-      _classNames2,
-      ''.concat(prefixCls, '-icon-collapsible-only'),
-      collapsibleIcon,
-    ),
-    _classNames2),
-  );
+  var collapsePanelClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item"), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item-active"), isActive), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-item-disabled"), disabled), _classNames), className);
+  var headerClassName = (0, _classnames.default)(headerClass, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-header"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-header-collapsible-only"), collapsibleHeader), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-icon-collapsible-only"), collapsibleIcon), _classNames2));
 
@@ -122,3 +70,3 @@ // ======================== HeaderProps ========================
     'aria-disabled': disabled,
-    onKeyDown: handleKeyDown,
+    onKeyDown: handleKeyDown
   };
@@ -132,63 +80,30 @@ if (!collapsibleHeader && !collapsibleIcon) {
   // ======================== Render ========================
-  return /*#__PURE__*/ _react.default.createElement(
-    'div',
-    (0, _extends2.default)({}, resetProps, {
-      ref: ref,
-      className: collapsePanelClassNames,
-    }),
-    /*#__PURE__*/ _react.default.createElement(
-      'div',
-      headerProps,
-      showArrow && iconNode,
-      /*#__PURE__*/ _react.default.createElement(
-        'span',
-        {
-          className: ''.concat(prefixCls, '-header-text'),
-          onClick: collapsible === 'header' ? handleItemClick : undefined,
-        },
-        header,
-      ),
-      ifExtraExist &&
-        /*#__PURE__*/ _react.default.createElement(
-          'div',
-          {
-            className: ''.concat(prefixCls, '-extra'),
-          },
-          extra,
-        ),
-    ),
-    /*#__PURE__*/ _react.default.createElement(
-      _rcMotion.default,
-      (0, _extends2.default)(
-        {
-          visible: isActive,
-          leavedClassName: ''.concat(prefixCls, '-content-hidden'),
-        },
-        openMotion,
-        {
-          forceRender: forceRender,
-          removeOnLeave: destroyInactivePanel,
-        },
-      ),
-      function (_ref, motionRef) {
-        var motionClassName = _ref.className,
-          motionStyle = _ref.style;
-        return /*#__PURE__*/ _react.default.createElement(
-          _PanelContent.default,
-          {
-            ref: motionRef,
-            prefixCls: prefixCls,
-            className: motionClassName,
-            style: motionStyle,
-            isActive: isActive,
-            forceRender: forceRender,
-            role: accordion ? 'tabpanel' : void 0,
-          },
-          children,
-        );
-      },
-    ),
-  );
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+    ref: ref,
+    className: collapsePanelClassNames
+  }), /*#__PURE__*/_react.default.createElement("div", headerProps, showArrow && iconNode, /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(prefixCls, "-header-text"),
+    onClick: collapsible === 'header' ? handleItemClick : undefined
+  }, header), ifExtraExist && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-extra")
+  }, extra)), /*#__PURE__*/_react.default.createElement(_rcMotion.default, (0, _extends2.default)({
+    visible: isActive,
+    leavedClassName: "".concat(prefixCls, "-content-hidden")
+  }, openMotion, {
+    forceRender: forceRender,
+    removeOnLeave: destroyInactivePanel
+  }), function (_ref, motionRef) {
+    var motionClassName = _ref.className,
+      motionStyle = _ref.style;
+    return /*#__PURE__*/_react.default.createElement(_PanelContent.default, {
+      ref: motionRef,
+      prefixCls: prefixCls,
+      className: motionClassName,
+      style: motionStyle,
+      isActive: isActive,
+      forceRender: forceRender,
+      role: accordion ? 'tabpanel' : void 0
+    }, children);
+  }));
 });
-var _default = CollapsePanel;
-exports.default = _default;
+var _default = exports.default = CollapsePanel;

lib/PanelContent.d.ts

 import React from 'react';
 import type { CollapsePanelProps } from './interface';
-declare const PanelContent: React.ForwardRefExoticComponent<
-  CollapsePanelProps & {
+declare const PanelContent: React.ForwardRefExoticComponent<CollapsePanelProps & {
     children: React.ReactNode;
-  } & React.RefAttributes<HTMLDivElement>
->;
+} & React.RefAttributes<HTMLDivElement>>;
 export default PanelContent;

lib/PanelContent.js

@@ -1,13 +0,13 @@
-'use strict';
+"use strict";
 
-var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
-Object.defineProperty(exports, '__esModule', {
-  value: true,
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require('@babel/runtime/helpers/defineProperty'));
-var _slicedToArray2 = _interopRequireDefault(require('@babel/runtime/helpers/slicedToArray'));
-var _classnames2 = _interopRequireDefault(require('classnames'));
-var _react = _interopRequireDefault(require('react'));
-var PanelContent = /*#__PURE__*/ _react.default.forwardRef(function (props, ref) {
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var PanelContent = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _classnames;
@@ -25,47 +25,20 @@ var prefixCls = props.prefixCls,
     setRendered = _React$useState2[1];
-  _react.default.useEffect(
-    function () {
-      if (forceRender || isActive) {
-        setRendered(true);
-      }
-    },
-    [forceRender, isActive],
-  );
+  _react.default.useEffect(function () {
+    if (forceRender || isActive) {
+      setRendered(true);
+    }
+  }, [forceRender, isActive]);
   if (!rendered) {
     return null;
   }
-  return /*#__PURE__*/ _react.default.createElement(
-    'div',
-    {
-      ref: ref,
-      className: (0, _classnames2.default)(
-        ''.concat(prefixCls, '-content'),
-        ((_classnames = {}),
-        (0, _defineProperty2.default)(
-          _classnames,
-          ''.concat(prefixCls, '-content-active'),
-          isActive,
-        ),
-        (0, _defineProperty2.default)(
-          _classnames,
-          ''.concat(prefixCls, '-content-inactive'),
-          !isActive,
-        ),
-        _classnames),
-        className,
-      ),
-      style: style,
-      role: role,
-    },
-    /*#__PURE__*/ _react.default.createElement(
-      'div',
-      {
-        className: ''.concat(prefixCls, '-content-box'),
-      },
-      children,
-    ),
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: (0, _classnames2.default)("".concat(prefixCls, "-content"), (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-content-active"), isActive), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-content-inactive"), !isActive), _classnames), className),
+    style: style,
+    role: role
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-content-box")
+  }, children));
 });
 PanelContent.displayName = 'PanelContent';
-var _default = PanelContent;
-exports.default = _default;
+var _default = exports.default = PanelContent;

package.json

 {
   "name": "rc-collapse",
-  "version": "3.7.1",
+  "version": "3.7.2",
   "description": "rc-collapse ui component for react",
@@ -52,9 +52,9 @@ "keywords": [
     "@rc-component/father-plugin": "^1.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.4.0",
     "@types/classnames": "^2.2.9",
-    "@types/jest": "^26.0.0",
+    "@types/jest": "^29.4.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@umijs/fabric": "^2.0.0",
+    "@umijs/fabric": "^3.0.0",
     "dumi": "^2.1.1",
@@ -65,10 +65,10 @@ "eslint": "^7.11.0",
     "jest": "^29.1.2",
-    "less": "^3.12.2",
-    "lint-staged": "^13.1.0",
-    "np": "^6.0.0",
-    "prettier": "^2.1.2",
+    "less": "^4.2.0",
+    "lint-staged": "^15.0.2",
+    "np": "^8.0.4",
+    "prettier": "^3.0.3",
     "rc-test": "^7.0.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^4.0.2"
+    "typescript": "^5.0.0"
   },
@@ -75,0 +75,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

50526

decreased by-3.72%

Lines of code

967

decreased by-23.38%

No dependency changes