rsuite 5.57.0 → 5.58.0

package/Text/styles/index.less

@@ -0,0 +1,117 @@
+@import '../../styles/common';
+
+// Heading
+// -------------------------
+
+.rs-text {
+  font-family: @font-family-base;
+  line-height: @line-height-base;
+  color: var(--rs-text-primary);
+  margin: 0;
+
+  blockquote& {
+    font-style: italic;
+    padding-left: 1.5rem;
+    border-left: 2px solid var(--rs-gray-200);
+  }
+
+  kbd& {
+    background-color: var(--rs-bg-well);
+    border: solid #c8c8c8;
+    border-image: initial;
+    border-radius: 0.25em;
+    border-width: 1px 1px 2px;
+    box-sizing: border-box;
+    font-size: 0.875em;
+    padding: 0.2em 0.3em;
+  }
+
+  &.rs-text-muted {
+    color: var(--rs-text-secondary);
+  }
+
+  // Text Align: left | center | right | justify
+  &-left {
+    text-align: left;
+  }
+
+  &-center {
+    text-align: center;
+  }
+
+  &-right {
+    text-align: right;
+  }
+
+  &-justify {
+    text-align: justify;
+  }
+
+  // Text Transform: none | uppercase | lowercase | capitalize
+  &-uppercase {
+    text-transform: uppercase;
+  }
+
+  &-lowercase {
+    text-transform: lowercase;
+  }
+
+  &-capitalize {
+    text-transform: capitalize;
+  }
+
+  // Text Weight: thin | light | regular | medium | semibold | bold | extrabold
+  &-thin {
+    font-weight: var(--rs-text-weight-thin);
+  }
+
+  &-light {
+    font-weight: var(--rs-text-weight-light);
+  }
+
+  &-medium {
+    font-weight: var(--rs-text-weight-medium);
+  }
+
+  &-semibold {
+    font-weight: var(--rs-text-weight-semibold);
+  }
+
+  &-bold {
+    font-weight: var(--rs-text-weight-bold);
+  }
+
+  &-extrabold {
+    font-weight: var(--rs-text-weight-extrabold);
+  }
+
+  &-pre-line {
+    white-space: pre-line;
+  }
+
+  &-ellipsis {
+    overflow: hidden;
+
+    @supports (-webkit-line-clamp: 1) {
+      & {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    @supports not (-webkit-line-clamp: 1) {
+      & {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        word-wrap: break-word;
+      }
+    }
+  }
+}
+
+// Colorful tags
+each(@spectrum, .(@color) {
+  .rs-text-@{color} {
+    color: var(~'--rs-@{color}-500');
+  }
+});

package/cjs/Cascader/Cascader.js

@@ -75,8 +75,6 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onChange = props.onChange,
     onSelect = props.onSelect,
     onSearch = props.onSearch,
-    onClose = props.onClose,
-    onOpen = props.onOpen,
     getChildren = props.getChildren,
     DEPRECATED_menuClassName = props.menuClassName,
     DEPRECATED_menuStyle = props.menuStyle,
@@ -84,7 +82,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     DEPRECATED_menuHeight = props.menuHeight,
     DEPRECATED_renderMenuItem = props.renderMenuItem,
     DEPRECATED_renderMenu = props.renderMenu,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "classPrefix", "childrenKey", "valueKey", "labelKey", "defaultValue", "placeholder", "disabled", "disabledItemValues", "appearance", "cleanable", "locale", "toggleAs", "style", "value", "popupClassName", "popupStyle", "columnHeight", "columnWidth", "searchable", "parentSelectable", "placement", "id", "renderColumn", "renderTreeNode", "renderSearchItem", "renderValue", "renderExtraFooter", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "getChildren", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "renderMenuItem", "renderMenu"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "classPrefix", "childrenKey", "valueKey", "labelKey", "defaultValue", "placeholder", "disabled", "disabledItemValues", "appearance", "cleanable", "locale", "toggleAs", "style", "value", "popupClassName", "popupStyle", "columnHeight", "columnWidth", "searchable", "parentSelectable", "placement", "id", "renderColumn", "renderTreeNode", "renderSearchItem", "renderValue", "renderExtraFooter", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "getChildren", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "renderMenuItem", "renderMenu"]);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -231,8 +229,6 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSearchKeyword = _useSearch.setSearchKeyword,
     handleSearch = _useSearch.handleSearch;
   var _useActive = (0, _useActive2.default)({
-      onOpen: onOpen,
-      onClose: onClose,
       onEntered: onEntered,
       onExited: onExited,
       target: target,

package/cjs/CheckPicker/CheckPicker.js

@@ -85,9 +85,7 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClean = props.onClean,
     onChange = props.onChange,
     onSelect = props.onSelect,
-    onClose = props.onClose,
-    onOpen = props.onOpen,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "classPrefix", "countable", "data", "disabledItemValues", "valueKey", "labelKey", "searchable", "virtualized", "cleanable", "placement", "menuAutoWidth", "menuMaxHeight", "menuClassName", "menuStyle", "locale", "placeholder", "disabled", "toggleAs", "style", "sticky", "value", "defaultValue", "groupBy", "listProps", "id", "sort", "searchBy", "renderMenuItem", "renderMenuGroup", "renderValue", "renderExtraFooter", "renderMenu", "onGroupTitleClick", "onSearch", "onEnter", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onClose", "onOpen"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "classPrefix", "countable", "data", "disabledItemValues", "valueKey", "labelKey", "searchable", "virtualized", "cleanable", "placement", "menuAutoWidth", "menuMaxHeight", "menuClassName", "menuStyle", "locale", "placeholder", "disabled", "toggleAs", "style", "sticky", "value", "defaultValue", "groupBy", "listProps", "id", "sort", "searchBy", "renderMenuItem", "renderMenuGroup", "renderValue", "renderExtraFooter", "renderMenu", "onGroupTitleClick", "onSearch", "onEnter", "onEntered", "onExited", "onClean", "onChange", "onSelect"]);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -191,10 +189,7 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onExit: handleClean,
     onMenuKeyDown: onFocusItem,
     onMenuPressEnter: handleMenuPressEnter,
-    onMenuPressBackspace: handleClean,
-    onClose: function onClose() {
-      setFocusItemValue(null);
-    }
+    onMenuPressBackspace: handleClean
   }, rest));
   var handleSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextItemValue, item, event);
@@ -215,13 +210,11 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   });
   var handleEntered = (0, _utils.useEventCallback)(function () {
     setActive(true);
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
   });
   var handleExited = (0, _utils.useEventCallback)(function () {
     resetSearch();
     setFocusItemValue(null);
     setActive(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
   });
   var selectedItems = data.filter(function (item) {
     return value === null || value === void 0 ? void 0 : value.some(function (val) {

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -99,18 +99,16 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onEntered = props.onEntered,
     onChange = props.onChange,
     onClean = props.onClean,
-    onClose = props.onClose,
     onExited = props.onExited,
     onSearch = props.onSearch,
     onSelect = props.onSelect,
     onSelectItem = props.onSelectItem,
-    onOpen = props.onOpen,
     onScroll = props.onScroll,
     onExpand = props.onExpand,
     renderValue = props.renderValue,
     renderTreeIcon = props.renderTreeIcon,
     renderTreeNode = props.renderTreeNode,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuMaxHeight", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onSelectItem", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuMaxHeight", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onExited", "onSearch", "onSelect", "onSelectItem", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
   var _useContext = (0, _react.useContext)(_TreeContext.default),
     inline = _useContext.inline;
   var _usePickerRef = (0, _Picker.usePickerRef)(ref, {
@@ -371,18 +369,13 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }));
   });
   var handleOpen = (0, _utils.useEventCallback)(function () {
-    var _trigger$current, _trigger$current$open;
-    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$open = _trigger$current.open) === null || _trigger$current$open === void 0 ? void 0 : _trigger$current$open.call(_trigger$current);
     setFocusItemValue(activeNode === null || activeNode === void 0 ? void 0 : activeNode[valueKey]);
     focusActiveNode();
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
   });
   var handleClose = (0, _utils.useEventCallback)(function () {
-    var _trigger$current2, _trigger$current2$clo, _target$current;
-    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);
+    var _target$current;
     setSearchKeyword('');
-    onClose === null || onClose === void 0 ? void 0 : onClose();
     setFocusItemValue(null);
     setActive(false);
 
@@ -499,7 +492,6 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     searchInput: searchInput,
     active: active,
     onExit: handleClean,
-    onClose: handleClose,
     onMenuKeyDown: function onMenuKeyDown(event) {
       (0, _Picker.onMenuKeyDown)(event, {
         down: function down() {

package/cjs/DatePicker/DatePicker.js

@@ -90,19 +90,17 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onChange = props.onChange,
     onChangeCalendarDate = props.onChangeCalendarDate,
     onClean = props.onClean,
-    onClose = props.onClose,
     onEntered = props.onEntered,
     onExited = props.onExited,
     onNextMonth = props.onNextMonth,
     onOk = props.onOk,
-    onOpen = props.onOpen,
     onPrevMonth = props.onPrevMonth,
     onSelect = props.onSelect,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     renderCell = props.renderCell,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell"]);
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEntered", "onExited", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell"]);
   var id = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -495,12 +493,14 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);
   }, [caretAsProp, formatStr]);
   var handleTriggerClose = (0, _utils.useEventCallback)(function (cause) {
+    var _props$onClose;
     // Unless overlay is closing on user clicking "OK" button,
     // reset the selected date on calendar panel
     if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {
       resetCalendarDate();
     }
     setShowMonthDropdown(false);
+    (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
   });
   var showCleanButton = cleanable && hasValue && !readOnly;
   var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {
@@ -516,8 +516,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: trigger,
     placement: placement,
     onClose: handleTriggerClose,
-    onEntered: (0, _utils.createChainedFunction)(onOpen, onEntered),
-    onExited: (0, _utils.createChainedFunction)(onClose, onExited),
+    onEntered: onEntered,
+    onExited: onExited,
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),

package/cjs/DateRangePicker/DateRangePicker.js

@@ -90,16 +90,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     valueProp = props.value,
     onChange = props.onChange,
     onClean = props.onClean,
-    onClose = props.onClose,
     onEnter = props.onEnter,
     onEntered = props.onEntered,
     onExited = props.onExited,
     onOk = props.onOk,
-    onOpen = props.onOpen,
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "onShortcutClick", "renderTitle"]);
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onEntered", "onExited", "onOk", "onSelect", "onShortcutClick", "renderTitle"]);
   var id = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -712,8 +710,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     placement: placement,
     onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),
-    onEntered: (0, _utils.createChainedFunction)(onOpen, onEntered),
-    onExited: (0, _utils.createChainedFunction)(onClose, onExited),
+    onEntered: onEntered,
+    onExited: onExited,
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.createElement(Component, {
     ref: root,

package/cjs/Dropdown/DropdownItem.d.ts

@@ -1,6 +1,6 @@
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 import React from 'react';
 import { IconProps } from '@rsuite/icons/lib/Icon';
+import type { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Active the current option */
     active?: boolean;
@@ -35,7 +35,15 @@ export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.
      * @internal
      */
     open?: boolean;
-    /** Select the callback function for the current option  */
+    /**
+     * The dropdown item keyboard shortcut.
+     *
+     * @version 5.58.0
+     */
+    shortcut?: React.ReactNode;
+    /**
+     * Select the callback function for the current option
+     */
     onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
 }
 /**

package/cjs/Dropdown/DropdownItem.js

@@ -9,6 +9,7 @@ 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 _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes2 = require("../internals/propTypes");
 var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
@@ -21,8 +22,8 @@ var _DropdownState = require("./DropdownState");
 var _useRenderDropdownItem = require("./useRenderDropdownItem");
 var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
 var _Nav = _interopRequireDefault(require("../Nav"));
+var _Text = _interopRequireDefault(require("../Text"));
 var _DropdownSeparator = _interopRequireDefault(require("./DropdownSeparator"));
-var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * The `<Dropdown.Item>` API
  * - When used inside `<Sidenav>`, renders a `<TreeviewItem>`
@@ -32,6 +33,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,
     className = props.className,
+    shortcut = props.shortcut,
     activeProp = props.active,
     eventKey = props.eventKey,
     onSelect = props.onSelect,
@@ -42,7 +44,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     panel = props.panel,
     children = props.children,
     disabled = props.disabled,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "active", "eventKey", "onSelect", "icon", "as", "divider", "panel", "children", "disabled"]);
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "shortcut", "active", "eventKey", "onSelect", "icon", "as", "divider", "panel", "children", "disabled"]);
   var internalId = (0, _useInternalId.default)('DropdownItem');
   var nav = (0, _react.useContext)(_NavContext.default);
   var dropdown = (0, _react.useContext)(_DropdownContext.default);
@@ -128,7 +130,14 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, menuitem, dataAttributes, restProps, {
       children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
         className: (0, _classnames.default)(prefix('menu-icon'), icon.props.className)
-      }), children)
+      }), /*#__PURE__*/_react.default.createElement(_Text.default, {
+        as: "span",
+        className: prefix('content')
+      }, children), shortcut && /*#__PURE__*/_react.default.createElement(_Text.default, {
+        as: "kbd",
+        className: prefix('shortcut'),
+        muted: true
+      }, shortcut))
     }));
   });
 });

package/cjs/Heading/Heading.d.ts

@@ -0,0 +1,16 @@
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+export interface HeadingProps extends WithAsProps {
+    /**
+     * Sets heading level, h1 through h6.
+     * @default 3
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+/**
+ *
+ * The `Heading` component is used to display a heading.
+ *
+ * @see https://rsuitejs.com/components/heading
+ */
+declare const Heading: RsRefForwardingComponent<'h3', HeadingProps>;
+export default Heading;

package/cjs/Heading/Heading.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+/**
+ *
+ * The `Heading` component is used to display a heading.
+ *
+ * @see https://rsuitejs.com/components/heading
+ */
+var Heading = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var as = props.as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'heading' : _props$classPrefix,
+    className = props.className,
+    _props$level = props.level,
+    level = _props$level === void 0 ? 3 : _props$level,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "level"]);
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var Component = as || "h" + level;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    ref: ref,
+    className: classes
+  }));
+});
+Heading.displayName = 'Heading';
+Heading.propTypes = {
+  className: _propTypes.default.string,
+  classPrefix: _propTypes.default.string,
+  as: _propTypes.default.elementType,
+  level: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6])
+};
+var _default = Heading;
+exports.default = _default;

package/cjs/Heading/index.d.ts

@@ -0,0 +1,3 @@
+import Heading from './Heading';
+export { type HeadingProps } from './Heading';
+export default Heading;

package/cjs/Heading/index.js

@@ -0,0 +1,10 @@
+'use client';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+exports.__esModule = true;
+exports.default = exports.HeadingProps = void 0;
+var _Heading = _interopRequireWildcard(require("./Heading"));
+exports.HeadingProps = _Heading.HeadingProps;
+var _default = _Heading.default;
+exports.default = _default;

package/cjs/HeadingGroup/HeadingGroup.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from '../utils/createComponent';
+export declare type HeadingGroupProps = ComponentProps;
+/**
+ * HeadingGroup is a group of headings.
+ * @see https://rsuitejs.com/components/heading
+ */
+declare const HeadingGroup: import("../@types/common").RsRefForwardingComponent<"hgroup", ComponentProps>;
+export default HeadingGroup;

package/cjs/HeadingGroup/HeadingGroup.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _createComponent = _interopRequireDefault(require("../utils/createComponent"));
+/**
+ * HeadingGroup is a group of headings.
+ * @see https://rsuitejs.com/components/heading
+ */
+var HeadingGroup = (0, _createComponent.default)({
+  name: 'HeadingGroup',
+  componentAs: 'hgroup'
+});
+var _default = HeadingGroup;
+exports.default = _default;

package/cjs/HeadingGroup/index.d.ts

@@ -0,0 +1,3 @@
+import HeadingGroup from './HeadingGroup';
+export type { HeadingGroupProps } from './HeadingGroup';
+export default HeadingGroup;

package/cjs/HeadingGroup/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _HeadingGroup = _interopRequireDefault(require("./HeadingGroup"));
+var _default = _HeadingGroup.default;
+exports.default = _default;

package/cjs/InputPicker/InputPicker.js

@@ -110,14 +110,13 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onCreate = props.onCreate,
     onSearch = props.onSearch,
     onSelect = props.onSelect,
-    onOpen = props.onOpen,
-    onClose = props.onClose,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     searchBy = props.searchBy,
+    size = props.size,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "shouldDisplayCreateOption", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onOpen", "onClose", "onBlur", "onFocus", "searchBy", "placement"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "cleanable", "cacheData", "classPrefix", "data", "disabled", "readOnly", "plaintext", "defaultValue", "defaultOpen", "disabledItemValues", "locale", "toggleAs", "style", "searchable", "open", "placeholder", "groupBy", "menuClassName", "menuStyle", "menuAutoWidth", "menuMaxHeight", "creatable", "shouldDisplayCreateOption", "value", "valueKey", "virtualized", "labelKey", "listProps", "id", "tabIndex", "sort", "renderMenu", "renderExtraFooter", "renderValue", "renderMenuItem", "renderMenuGroup", "onEnter", "onEntered", "onExit", "onExited", "onChange", "onClean", "onCreate", "onSearch", "onSelect", "onBlur", "onFocus", "searchBy", "size", "placement"]);
   var _useContext = (0, _react.useContext)(_InputPickerContext.default),
     multi = _useContext.multi,
     tagProps = _useContext.tagProps,
@@ -466,7 +465,6 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleExited = (0, _utils.useEventCallback)(function () {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
     resetSearch();
-    onClose === null || onClose === void 0 ? void 0 : onClose();
   });
   var handleFocus = (0, _utils.useEventCallback)(function () {
     if (!readOnly) {
@@ -528,7 +526,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         role: "option"
       }, tagRest, {
         key: tag,
-        size: convertSize(rest.size),
+        size: convertSize(size),
         closable: !disabled && closable && !readOnly && !plaintext,
         title: typeof itemNode === 'string' ? itemNode : undefined,
         onClose: (0, _utils.createChainedFunction)(handleRemoveItemByTag.bind(null, tag), onClose)
@@ -629,7 +627,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     })),
     pickerClasses = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
-  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["disabled-options"])))] = disabledOptions, _merge));
+  var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["tag"])))] = multi, _merge[prefix((multi ? 'tag' : 'input') + "-" + size)] = size, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
   var editable = searchable && !disabled && !rest.loading;
   var inputProps = multi ? {
@@ -663,7 +661,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: triggerRef,
     trigger: "active",
     onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),
-    onEntered: (0, _utils.createChainedFunction)(onEntered, onOpen),
+    onEntered: onEntered,
     onExit: (0, _utils.createChainedFunction)(handleExit, onExit),
     onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
     speaker: renderPopup,
@@ -689,7 +687,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     placement: placement,
     inputValue: value,
     focusItemValue: focusItemValue,
-    caret: !disabledOptions
+    caret: !disabledOptions,
+    size: size
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/_react.default.createElement(_TextBox.default, {
     showTagList: hasValue && multi,
     tags: tagElements,

package/cjs/MultiCascader/MultiCascader.js

@@ -81,8 +81,6 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onSearch = props.onSearch,
     onSelect = props.onSelect,
     onChange = props.onChange,
-    onOpen = props.onOpen,
-    onClose = props.onClose,
     onCheck = props.onCheck,
     DEPRECATED_menuClassName = props.menuClassName,
     DEPRECATED_menuStyle = props.menuStyle,
@@ -90,7 +88,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     DEPRECATED_menuHeight = props.menuHeight,
     DEPRECATED_renderMenu = props.renderMenu,
     DEPRECATED_renderMenuItem = props.renderMenuItem,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "classPrefix", "defaultValue", "columnHeight", "columnWidth", "childrenKey", "cleanable", "data", "disabled", "disabledItemValues", "value", "valueKey", "labelKey", "locale", "toggleAs", "style", "countable", "cascade", "placeholder", "placement", "popupClassName", "popupStyle", "searchable", "uncheckableItemValues", "id", "getChildren", "renderValue", "renderExtraFooter", "renderColumn", "renderTreeNode", "onEntered", "onExited", "onClean", "onSearch", "onSelect", "onChange", "onOpen", "onClose", "onCheck", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "renderMenu", "renderMenuItem"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "classPrefix", "defaultValue", "columnHeight", "columnWidth", "childrenKey", "cleanable", "data", "disabled", "disabledItemValues", "value", "valueKey", "labelKey", "locale", "toggleAs", "style", "countable", "cascade", "placeholder", "placement", "popupClassName", "popupStyle", "searchable", "uncheckableItemValues", "id", "getChildren", "renderValue", "renderExtraFooter", "renderColumn", "renderTreeNode", "onEntered", "onExited", "onClean", "onSearch", "onSelect", "onChange", "onCheck", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "renderMenu", "renderMenuItem"]);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
@@ -199,8 +197,6 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setSearchKeyword = _useSearch.setSearchKeyword,
     handleSearch = _useSearch.handleSearch;
   var _useActive = (0, _useActive2.default)({
-      onOpen: onOpen,
-      onClose: onClose,
       onEntered: onEntered,
       onExited: onExited,
       target: target,

package/cjs/Panel/Panel.js

@@ -13,6 +13,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));
 var _utils = require("../utils");
 var _PanelGroup = require("../PanelGroup");
+var _Heading = _interopRequireDefault(require("../Heading"));
 var _AccordionButton = _interopRequireDefault(require("./AccordionButton"));
 /**
  * The `Panel` component is used to display content that can be collapsed.
@@ -126,7 +127,8 @@ var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         className: _className
       });
     }
-    return /*#__PURE__*/_react.default.createElement("h2", {
+    return /*#__PURE__*/_react.default.createElement(_Heading.default, {
+      level: 2,
       className: prefix('header')
     }, collapsible ? /*#__PURE__*/_react.default.createElement(_AccordionButton.default, {
       id: btnId,