rsuite 5.61.0 → 5.62.0

package/cjs/Navbar/NavbarDropdownToggle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '../Button';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '@/internals/types';
 export interface NavbarDropdownToggleProps extends WithAsProps {
     noCaret?: boolean;
     renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;

package/cjs/Navbar/NavbarDropdownToggle.js

@@ -9,7 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 var _NavbarItem = _interopRequireDefault(require("./NavbarItem"));
 var _propTypes2 = require("../internals/propTypes");
 /**
@@ -31,7 +31,7 @@ var NavbarDropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (prop
     children = props.children,
     noCaret = props.noCaret,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "renderToggle", "children", "noCaret"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;

package/cjs/Navbar/NavbarHeader.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from '../utils/createComponent';
+import { ComponentProps } from '@/internals/utils';
 export declare type NavbarHeaderProps = ComponentProps;
-declare const _default: import("../@types/common").RsRefForwardingComponent<"div", ComponentProps>;
+declare const _default: import("../internals/types").RsRefForwardingComponent<"div", ComponentProps>;
 export default _default;

package/cjs/Navbar/NavbarHeader.js

@@ -1,13 +1,11 @@
 'use client';
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _createComponent = _interopRequireDefault(require("../utils/createComponent"));
-var _deprecateComponent = _interopRequireDefault(require("../utils/deprecateComponent"));
-var NavbarHeader = (0, _createComponent.default)({
+var _utils = require("../internals/utils");
+var NavbarHeader = (0, _utils.createComponent)({
   name: 'NavbarHeader'
 });
-var _default = (0, _deprecateComponent.default)(NavbarHeader, '<Navbar.Header> has been deprecated, use <Navbar.Brand> instead.');
+var _default = (0, _utils.deprecateComponent)(NavbarHeader, '<Navbar.Header> has been deprecated, use <Navbar.Brand> instead.');
 exports.default = _default;

package/cjs/Navbar/NavbarItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconProps } from '@rsuite/icons/lib/Icon';
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import { RsRefForwardingComponent, WithAsProps } from '@/internals/types';
 export interface NavbarItemProps<T = string> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Activation status */
     active?: boolean;

package/cjs/Navbar/NavbarItem.js

@@ -12,7 +12,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _classnames = _interopRequireDefault(require("classnames"));
 /**
@@ -41,7 +42,7 @@ var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);
     onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);
   }, [eventKey, onSelectProp, onSelectFromNav]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;

package/cjs/Notification/Notification.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent } from '@/internals/types';
 export declare type MessageType = 'info' | 'success' | 'warning' | 'error';
 export interface NotificationProps extends WithAsProps {
     /** Title of the message */

package/cjs/Notification/Notification.js

@@ -10,7 +10,8 @@ var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtim
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _statusIcons = require("../internals/constants/statusIcons");
+var _hooks = require("../internals/hooks");
 var _propTypes2 = require("../internals/propTypes");
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
 var _ToastContext = _interopRequireDefault(require("../toaster/ToastContext"));
@@ -37,16 +38,16 @@ var Notification = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState = (0, _react.useState)('show'),
     display = _useState[0],
     setDisplay = _useState[1];
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
-  var isMounted = (0, _utils.useIsMounted)();
+  var isMounted = (0, _hooks.useIsMounted)();
   var _useContext = (0, _react.useContext)(_ToastContext.default),
     usedToaster = _useContext.usedToaster; // Timed close message
-  var _useTimeout = (0, _utils.useTimeout)(onClose, duration, usedToaster && duration > 0),
+  var _useTimeout = (0, _hooks.useTimeout)(onClose, duration, usedToaster && duration > 0),
     clear = _useTimeout.clear; // Click to trigger to close the message
-  var handleClose = (0, _utils.useEventCallback)(function (event) {
+  var handleClose = (0, _hooks.useEventCallback)(function (event) {
     setDisplay('hiding');
     onClose === null || onClose === void 0 ? void 0 : onClose(event);
     clear();
@@ -64,7 +65,7 @@ var Notification = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       className: prefix('title')
     }, type ? /*#__PURE__*/_react.default.createElement("div", {
       className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["title-with-icon"])))
-    }, _utils.MESSAGE_STATUS_ICONS[type], header) : /*#__PURE__*/_react.default.createElement("div", {
+    }, _statusIcons.MESSAGE_STATUS_ICONS[type], header) : /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('title')
     }, header));
   };

package/cjs/Pagination/LimitPicker.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type SelectPickerProps } from '../SelectPicker';
 import { PaginationLocale } from '../locales';
-import { OnChangeCallback, TypeAttributes } from '../@types/common';
+import { OnChangeCallback, TypeAttributes } from '@/internals/types';
 interface LimitPickerProps extends Omit<SelectPickerProps<any>, 'locale' | 'disabled' | 'data'> {
     disabled?: boolean | ((eventKey: number | string) => boolean);
     limitOptions: number[];

package/cjs/Pagination/LimitPicker.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _SelectPicker = _interopRequireDefault(require("../SelectPicker"));
-var _utils = require("../utils");
+var _utils = require("../internals/utils");
 var LimitPicker = function LimitPicker(props) {
   var disabled = props.disabled,
     limitOptions = props.limitOptions,

package/cjs/Pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RsRefForwardingComponent, WithAsProps, TypeAttributes } from '../@types/common';
+import { RsRefForwardingComponent, WithAsProps, TypeAttributes } from '@/internals/types';
 import { PaginationLocale } from '../locales';
 export interface PaginationProps extends WithAsProps {
     /** Current page number */

package/cjs/Pagination/Pagination.js

@@ -15,7 +15,7 @@ var _PageNext = _interopRequireDefault(require("@rsuite/icons/legacy/PageNext"))
 var _PageTop = _interopRequireDefault(require("@rsuite/icons/legacy/PageTop"));
 var _PageEnd = _interopRequireDefault(require("@rsuite/icons/legacy/PageEnd"));
 var _PaginationButton = _interopRequireDefault(require("./PaginationButton"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var PAGINATION_ICONS = {
   more: /*#__PURE__*/_react.default.createElement(_More.default, null),
@@ -54,11 +54,11 @@ var Pagination = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     linkProps = props.linkProps,
     onSelect = props.onSelect,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "disabled", "locale", "activePage", "maxButtons", "pages", "ellipsis", "boundaryLinks", "first", "prev", "next", "last", "size", "linkAs", "linkProps", "onSelect"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
-  var _useCustom = (0, _utils.useCustom)('Pagination', overrideLocale),
+  var _useCustom = (0, _hooks.useCustom)('Pagination', overrideLocale),
     locale = _useCustom.locale;
   var renderItem = function renderItem(key, itemProps) {
     var eventKey = itemProps.eventKey,

package/cjs/Pagination/PaginationButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent } from '@/internals/types';
 export interface PaginationButtonProps<T = number | string> extends WithAsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
     /** The value of the current option */
     eventKey: T;

package/cjs/Pagination/PaginationButton.js

@@ -8,7 +8,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var PaginationButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'button' : _props$as,
@@ -23,14 +24,14 @@ var PaginationButton = /*#__PURE__*/_react.default.forwardRef(function (props, r
     onSelect = props.onSelect,
     onClick = props.onClick,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "disabled", "className", "classPrefix", "children", "eventKey", "style", "onSelect", "onClick"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = merge(className, withClassPrefix({
     active: active,
     disabled: disabled
   }));
-  var handleClick = (0, _utils.useEventCallback)(function (event) {
+  var handleClick = (0, _hooks.useEventCallback)(function (event) {
     if (disabled) {
       return;
     }

package/cjs/Pagination/PaginationGroup.d.ts

@@ -1,5 +1,5 @@
 import { PaginationProps } from './Pagination';
-import { RsRefForwardingComponent } from '../@types/common';
+import { RsRefForwardingComponent } from '@/internals/types';
 /**
  * The layout of the paging component.
  */

package/cjs/Pagination/PaginationGroup.js

@@ -12,7 +12,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _Pagination = _interopRequireDefault(require("./Pagination"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _Input = _interopRequireDefault(require("../Input"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _LimitPicker = _interopRequireDefault(require("./LimitPicker"));
 /**
  * The layout of the paging component.
@@ -51,21 +52,21 @@ var PaginationGroup = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onChangePage = props.onChangePage,
     onChangeLimit = props.onChangeLimit,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "activePage", "classPrefix", "className", "disabled", "size", "style", "total", "prev", "next", "first", "last", "limitOptions", "limit", "locale", "layout", "maxButtons", "onChangePage", "onChangeLimit"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var _useControlled = (0, _utils.useControlled)(limitProp, 30),
+  var _useControlled = (0, _hooks.useControlled)(limitProp, 30),
     limit = _useControlled[0],
     setLimit = _useControlled[1];
-  var _useControlled2 = (0, _utils.useControlled)(activePageProp, 1),
+  var _useControlled2 = (0, _hooks.useControlled)(activePageProp, 1),
     activePage = _useControlled2[0],
     setActivePage = _useControlled2[1];
-  var _useCustom = (0, _utils.useCustom)('Pagination', localeProp),
+  var _useCustom = (0, _hooks.useCustom)('Pagination', localeProp),
     locale = _useCustom.locale;
   var pages = Math.floor(total / limit) + (total % limit ? 1 : 0);
   var classes = merge(className, withClassPrefix(size));
-  var handleInputBlur = (0, _utils.useEventCallback)(function (event) {
+  var handleInputBlur = (0, _hooks.useEventCallback)(function (event) {
     var value = parseInt(event.target.value);
     if (value > 0 && value <= pages) {
       onChangePage === null || onChangePage === void 0 ? void 0 : onChangePage(value);
@@ -73,11 +74,11 @@ var PaginationGroup = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
     event.target.value = '';
   });
-  var handleInputPressEnter = (0, _utils.useEventCallback)(function (event) {
+  var handleInputPressEnter = (0, _hooks.useEventCallback)(function (event) {
     var _event$target;
     (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.blur();
   });
-  var handleChangeLimit = (0, _utils.useEventCallback)(function (value) {
+  var handleChangeLimit = (0, _hooks.useEventCallback)(function (value) {
     setLimit(value);
     onChangeLimit === null || onChangeLimit === void 0 ? void 0 : onChangeLimit(value);
   });

package/cjs/Panel/AccordionButton.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _icons = require("@rsuite/icons");
 var _AngleDown = _interopRequireDefault(require("@rsuite/icons/legacy/AngleDown"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 var _templateObject;
 var AccordionButton = function AccordionButton(props) {
   var _props$classPrefix = props.classPrefix,
@@ -24,7 +24,7 @@ var AccordionButton = function AccordionButton(props) {
     _props$caretAs = props.caretAs,
     caretAs = _props$caretAs === void 0 ? _AngleDown.default : _props$caretAs,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "expanded", "id", "className", "controlId", "children", "disabled", "caretAs"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
   return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({

package/cjs/Panel/Panel.d.ts

@@ -1,37 +1,69 @@
 import React from 'react';
-import { AnimationEventProps, RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import { AnimationEventProps, RsRefForwardingComponent, WithAsProps } from '@/internals/types';
 export interface PanelProps<T = string | number> extends WithAsProps, AnimationEventProps {
-    /** Show border */
+    /**
+     * Show border
+     */
     bordered?: boolean;
-    /** Content area filled with containers */
+    /**
+     * Content area filled with containers
+     */
     bodyFill?: boolean;
-    /** Whether it is a collapsible panel */
+    /**
+     * Custom body style
+     */
+    bodyProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Whether it is a collapsible panel
+     */
     collapsible?: boolean;
     /**
-     * The icon on the right side of the title.
+     * The icon on the right side of the title
      */
     caretAs?: React.ElementType;
-    /** Expand then panel by default */
+    /**
+     * Expand then panel by default
+     */
     defaultExpanded?: boolean;
-    /** Whether the panel is disabled */
+    /**
+     * Whether the panel is disabled
+     */
     disabled?: boolean;
-    /** Expand then panel */
+    /**
+     * Expand then panel
+     */
     expanded?: boolean;
-    /** The event key corresponding to the panel. */
+    /**
+     * The event key corresponding to the panel
+     */
     eventKey?: T;
-    /** The head displays information. */
+    /**
+     * The head displays information
+     */
     header?: React.ReactNode;
-    /** ID */
+    /**
+     * The id attribute of the panel
+     */
     id?: string;
     /**
-     * Role of header
+     * The role attribute of the header
      */
     headerRole?: string;
-    /** Role of Panel */
+    /**
+     * The role attribute of the panel
+     */
     panelRole?: string;
-    /** With shadow */
+    /**
+     * Whether there is a shadow
+     */
     shaded?: boolean;
-    /** callback function for the panel clicked */
+    /**
+     * The shadow of the content when scrolling
+     */
+    scrollShadow?: boolean;
+    /**
+     * Called when the panel is selected
+     */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 /**

package/cjs/Panel/Panel.js

@@ -9,12 +9,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _get = _interopRequireDefault(require("lodash/get"));
-var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
 var _PanelGroup = require("../PanelGroup");
-var _Heading = _interopRequireDefault(require("../Heading"));
-var _AccordionButton = _interopRequireDefault(require("./AccordionButton"));
+var _PanelHeader = _interopRequireDefault(require("./PanelHeader"));
+var _PanelBody = _interopRequireDefault(require("./PanelBody"));
+var _useExpanded2 = _interopRequireDefault(require("./hooks/useExpanded"));
 /**
  * The `Panel` component is used to display content that can be collapsed.
  * @see https://rsuitejs.com/components/panel
@@ -23,6 +22,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     bodyFill = props.bodyFill,
+    bodyProps = props.bodyProps,
     bordered = props.bordered,
     children = props.children,
     className = props.className,
@@ -39,6 +39,7 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _props$panelRole = props.panelRole,
     panelRole = _props$panelRole === void 0 ? 'region' : _props$panelRole,
     shaded = props.shaded,
+    scrollShadow = props.scrollShadow,
     idProp = props.id,
     onEnter = props.onEnter,
     onEntered = props.onEntered,
@@ -47,99 +48,29 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onExited = props.onExited,
     onExiting = props.onExiting,
     onSelect = props.onSelect,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bodyFill", "bordered", "children", "className", "classPrefix", "caretAs", "collapsible", "defaultExpanded", "disabled", "eventKey", "expanded", "header", "headerRole", "panelRole", "shaded", "id", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "onSelect"]);
-  var id = (0, _utils.useUniqueId)('rs-', idProp);
-  var panelId = id + "-panel";
-  var btnId = id + "-btn";
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bodyFill", "bodyProps", "bordered", "children", "className", "classPrefix", "caretAs", "collapsible", "defaultExpanded", "disabled", "eventKey", "expanded", "header", "headerRole", "panelRole", "shaded", "scrollShadow", "id", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "onSelect"]);
+  var id = (0, _hooks.useUniqueId)('rs-', idProp);
+  var bodyId = id + "-panel";
+  var buttonId = id + "-btn";
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
-    prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
   var _ref = (0, _react.useContext)(_PanelGroup.PanelGroupContext) || {},
-    accordion = _ref.accordion,
-    activeKey = _ref.activeKey,
     onGroupSelect = _ref.onGroupSelect;
-  var _useControlled = (0, _utils.useControlled)(expandedProp, defaultExpanded || typeof activeKey !== 'undefined' && activeKey === eventKey),
-    expandedState = _useControlled[0],
-    setExpanded = _useControlled[1];
-  var collapsible = collapsibleProp;
-  var expanded = expandedState;
-  if (accordion) {
-    collapsible = true;
-  }
-  if (collapsible) {
-    if (typeof activeKey !== 'undefined' && activeKey !== eventKey) {
-      expanded = false;
-    }
-  }
-  (0, _react.useEffect)(function () {
-    if (accordion && typeof activeKey !== 'undefined') {
-      setExpanded(activeKey === eventKey);
-    }
-  }, [accordion, activeKey, eventKey, setExpanded]);
-  var handleSelect = (0, _utils.useEventCallback)(function (event) {
+  var _useExpanded = (0, _useExpanded2.default)({
+      expanded: expandedProp,
+      defaultExpanded: defaultExpanded,
+      eventKey: eventKey,
+      collapsible: collapsibleProp
+    }),
+    expanded = _useExpanded[0],
+    setExpanded = _useExpanded[1],
+    collapsible = _useExpanded[2];
+  var handleSelect = (0, _hooks.useEventCallback)(function (event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
     onGroupSelect === null || onGroupSelect === void 0 ? void 0 : onGroupSelect(eventKey, event);
     setExpanded(!expanded);
   });
-  var renderBody = function renderBody(bodyProps) {
-    var classes = prefix('body', {
-      'body-fill': bodyFill
-    });
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, bodyProps, {
-      className: classes
-    }), children);
-  };
-  var renderCollapsibleBody = function renderCollapsibleBody() {
-    return /*#__PURE__*/_react.default.createElement(_Collapse.default, {
-      in: expanded,
-      onEnter: onEnter,
-      onEntering: onEntering,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExiting: onExiting,
-      onExited: onExited
-    }, function (transitionProps, ref) {
-      var className = transitionProps.className,
-        rest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, ["className"]);
-      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
-        className: merge(className, prefix('collapse')),
-        ref: ref
-      }), renderBody({
-        role: panelRole,
-        id: panelId,
-        'aria-labelledby': btnId
-      }));
-    });
-  };
-  var renderHeading = function renderHeading() {
-    if (!header) {
-      return null;
-    }
-    var headerElement;
-    if (! /*#__PURE__*/_react.default.isValidElement(header) || Array.isArray(header)) {
-      headerElement = /*#__PURE__*/_react.default.createElement("span", {
-        className: prefix('title')
-      }, header);
-    } else {
-      var _className = merge(prefix('title'), (0, _get.default)(header, 'props.className'));
-      headerElement = /*#__PURE__*/_react.default.cloneElement(header, {
-        className: _className
-      });
-    }
-    return /*#__PURE__*/_react.default.createElement(_Heading.default, {
-      level: 2,
-      className: prefix('header')
-    }, collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {
-      id: btnId,
-      role: headerRole,
-      caretAs: caretAs,
-      controlId: panelId,
-      disabled: disabled,
-      expanded: expanded,
-      onClick: handleSelect
-    }, headerElement) : headerElement);
-  };
   var classes = merge(className, withClassPrefix({
     in: expanded,
     collapsible: collapsible,
@@ -150,7 +81,30 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: ref,
     className: classes,
     id: idProp
-  }), renderHeading(), collapsible ? renderCollapsibleBody() : renderBody());
+  }), header && /*#__PURE__*/_react.default.createElement(_PanelHeader.default, {
+    collapsible: collapsible,
+    expanded: expanded,
+    caretAs: caretAs,
+    role: headerRole,
+    buttonId: buttonId,
+    bodyId: bodyId,
+    disabled: disabled,
+    onClickButton: handleSelect
+  }, header), /*#__PURE__*/_react.default.createElement(_PanelBody.default, (0, _extends2.default)({
+    collapsible: collapsible,
+    expanded: expanded,
+    bodyFill: bodyFill,
+    role: panelRole,
+    id: bodyId,
+    scrollShadow: scrollShadow,
+    labelId: buttonId,
+    onEnter: onEnter,
+    onEntering: onEntering,
+    onEntered: onEntered,
+    onExit: onExit,
+    onExiting: onExiting,
+    onExited: onExited
+  }, bodyProps), children));
 });
 Panel.displayName = 'Panel';
 Panel.propTypes = {

package/cjs/Panel/PanelBody.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WithAsProps, AnimationEventProps } from '@/internals/types';
+interface PanelBodyProps extends WithAsProps, AnimationEventProps, React.HTMLAttributes<HTMLDivElement> {
+    collapsible?: boolean;
+    expanded?: boolean;
+    bodyFill?: boolean;
+    scrollShadow?: boolean;
+    role?: string;
+    id?: string;
+    labelId?: string;
+}
+declare const PanelBody: (props: PanelBodyProps) => JSX.Element;
+export default PanelBody;