rsuite 6.0.0-canary-20241227 → 6.0.0-canary-20250103

package/cjs/Accordion/Accordion.js

@@ -13,7 +13,7 @@ var _CustomProvider = require("../CustomProvider");
  * The `Accordion` component is used to display content that can be collapsed.
  * @see https://rsuitejs.com/components/accordion
  */
-const Accordion = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Accordion = /*#__PURE__*/_react.default.forwardRef(function Accordion(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Accordion', props);

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { PickerComponent } from '../internals/Picker';
-import { WithAsProps, FormControlPickerProps, TypeAttributes, ItemDataType } from '../internals/types';
+import { WithAsProps, FormControlPickerProps, TypeAttributes, Placement, ItemDataType } from '../internals/types';
 export interface AutoCompleteProps<T = string> extends WithAsProps, FormControlPickerProps<T, any, ItemDataType | string> {
     /** Additional classes for menu */
     menuClassName?: string;
     /** The placement of component */
-    placement?: TypeAttributes.Placement;
+    placement?: Placement;
     /** When set to false, the Enter key selection function is invalid */
     selectOnEnter?: boolean;
     /** A component can have different sizes */

package/cjs/AutoComplete/Combobox.js

@@ -8,7 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _Picker = require("../internals/Picker");
 var _Input = _interopRequireDefault(require("../Input"));
-const Combobox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Combobox = /*#__PURE__*/_react.default.forwardRef(function Combobox(props, ref) {
   const {
     id,
     popupType

package/cjs/Badge/Badge.d.ts

@@ -1,12 +1,47 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../internals/types';
+import { Color, WithAsProps, PlacementCorners, RsRefForwardingComponent } from '../internals/types';
 export interface BadgeProps extends WithAsProps {
-    /** Main content */
+    /**
+     * The content of the badge
+     */
     content?: React.ReactNode;
-    /** Max count */
+    /**
+     * The maximum value of the badge
+     */
     maxCount?: number;
-    /** A badge can have different colors */
-    color?: TypeAttributes.Color;
+    /**
+     * A badge can have different colors
+     */
+    color?: Color | React.CSSProperties['color'];
+    /**
+     * The badge will have an outline
+     * @version 6.0.0
+     */
+    outline?: boolean;
+    /**
+     * The placement of the badge
+     * @version 6.0.0
+     */
+    placement?: PlacementCorners;
+    /**
+     * If true, the Badge will have no padding, making it appear more compact and rounded.
+     */
+    compact?: boolean;
+    /**
+     * The shape of the wrapped element
+     * @version 6.0.0
+     */
+    shape?: 'rectangle' | 'circle';
+    /**
+     * Define the horizontal and vertical offset of the badge relative to its wrapped element
+     * @version 6.0.0
+     */
+    offset?: [number | string, number | string];
+    /**
+     * The badge will be hidden
+     * @version 6.0.0
+     */
+    invisible?: boolean;
 }
 /**
  * The Badge component is usually used to mark or highlight the status or quantity of an object.

package/cjs/Badge/Badge.js

@@ -5,9 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * The Badge component is usually used to mark or highlight the status or quantity of an object.
  * @see https://rsuitejs.com/components/badge
@@ -18,12 +22,19 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   } = (0, _CustomProvider.useCustom)('Badge', props);
   const {
     as: Component = 'div',
-    content: contentText,
+    content,
     color,
     className,
     classPrefix = 'badge',
     children,
+    compact,
     maxCount = 99,
+    offset,
+    outline = true,
+    placement = 'topEnd',
+    shape,
+    style,
+    invisible,
     ...rest
   } = propsWithDefaults;
   const {
@@ -31,30 +42,30 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     prefix,
     merge
   } = (0, _hooks.useClassNames)(classPrefix);
-  const dot = contentText === undefined || contentText === null;
-  const classes = merge(className, withClassPrefix(color, {
-    independent: !children,
+  const text = typeof content === 'number' && content > maxCount ? `${maxCount}+` : content;
+  const classes = merge(className, withClassPrefix((0, _utils.isPresetColor)(color) && color, shape, {
+    compact,
+    outline,
+    hidden: invisible,
     wrapper: children,
-    dot
+    independent: !children,
+    [(0, _kebabCase.default)(placement)]: children
   }));
-  if (contentText === false) {
-    return /*#__PURE__*/_react.default.cloneElement(children, {
-      ref
-    });
-  }
-  const content = typeof contentText === 'number' && contentText > maxCount ? `${maxCount}+` : contentText;
+  const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createOffsetStyles)(offset, '--rs-badge-offset'), (0, _utils.createColorVariables)(color, '--rs-badge-bg')), [style, offset, color]);
   if (!children) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref,
-      className: classes
-    }), content);
+      className: classes,
+      style: styles
+    }, rest), text);
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
-    className: classes
-  }), children, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes,
+    style: styles
+  }, rest), children, /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('content')
-  }, content));
+  }, text));
 });
 Badge.displayName = 'Badge';
 var _default = exports.default = Badge;

package/cjs/Breadcrumb/Breadcrumb.js

@@ -22,7 +22,7 @@ const Separator = (0, _utils.createComponent)({
  * The Breadcrumb component is used to indicate the current page location and navigate.
  * @see https://rsuitejs.com/components/breadcrumb
  */
-const Breadcrumb = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function Breadcrumb(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Breadcrumb', props);

package/cjs/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
-export interface ButtonProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+export interface ButtonProps extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
     /** A button can have different appearances. */
     appearance?: TypeAttributes.Appearance;
     /** A button can show it is currently the active user selection */
@@ -27,6 +27,10 @@ export interface ButtonProps extends WithAsProps, React.HTMLAttributes<HTMLEleme
     endIcon?: React.ReactNode;
     /** Defines HTML button type attribute */
     type?: 'button' | 'reset' | 'submit';
+    /** A button can toggle its state between active and inactive. */
+    toggleable?: boolean;
+    /** Called when the button is clicked */
+    onToggle?: (active: boolean, event: React.MouseEvent) => void;
 }
 /**
  * The Button component is used to trigger a custom action.

package/cjs/Button/Button.js

@@ -24,7 +24,7 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   } = (0, _CustomProvider.useCustom)('Button', props);
   const {
     as,
-    active,
+    active: activeProp,
     appearance = 'default',
     block,
     className,
@@ -38,8 +38,12 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     startIcon,
     endIcon,
     type: typeProp,
+    toggleable,
+    onToggle,
+    onClick,
     ...rest
   } = propsWithDefaults;
+  const [active, setActive] = (0, _hooks.useControlled)(activeProp, false);
   const buttonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);
   const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;
   const {
@@ -64,13 +68,22 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       className: prefix`end-icon`
     }, endIcon) : null, rippleElement);
   }, [appearance, children, endIcon, loading, prefix, ripple, startIcon]);
+  const handleClick = (0, _hooks.useEventCallback)(event => {
+    if (toggleable) {
+      const nextActive = !active;
+      setActive(nextActive);
+      onToggle === null || onToggle === void 0 || onToggle(nextActive, event);
+    }
+    onClick === null || onClick === void 0 || onClick(event);
+  });
   if (rest.href) {
     return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({}, rest, {
       as: as,
       ref: ref,
       "aria-disabled": disabled,
       disabled: disabled,
-      className: classes
+      className: classes,
+      onClick: handleClick
     }), buttonContent);
   }
   const Component = as || 'button';
@@ -82,7 +95,8 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ref: ref,
     disabled: disabled,
     "aria-disabled": disabled,
-    className: classes
+    className: classes,
+    onClick: handleClick
   }), buttonContent);
 });
 Button.displayName = 'Button';

package/cjs/Card/Card.js

@@ -11,7 +11,7 @@ var _CardBody = _interopRequireDefault(require("./CardBody"));
 var _CardFooter = _interopRequireDefault(require("./CardFooter"));
 var _CustomProvider = require("../CustomProvider");
 var _hooks = require("../internals/hooks");
-const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Card = /*#__PURE__*/_react.default.forwardRef(function Card(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Card', props);

package/cjs/CascadeTree/utils.js

@@ -32,7 +32,7 @@ function getColumnsAndPaths(items, pathTarget, options) {
   if (children && children.length > 0) {
     columns.unshift(children);
   }
-  for (let parent = getParent(pathTarget); !!parent; parent = getParent(parent)) {
+  for (let parent = getParent(pathTarget); parent; parent = getParent(parent)) {
     var _getChildren;
     columns.unshift((_getChildren = getChildren(parent)) !== null && _getChildren !== void 0 ? _getChildren : []);
     path.unshift(parent);

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -143,7 +143,9 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
-        dateLocale: any;
+        dateLocale: any; /**
+         * The prefix of the component CSS class
+         */
     } | undefined;
     Calendar?: {
         sunday: string;
@@ -164,7 +166,9 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
-        dateLocale: any;
+        dateLocale: any; /**
+         * The prefix of the component CSS class
+         */
     } | undefined;
     DatePicker?: {
         sunday: string;
@@ -185,7 +189,9 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
-        dateLocale: any;
+        dateLocale: any; /**
+         * The prefix of the component CSS class
+         */
     } | undefined;
     DateRangePicker?: {
         last7Days: string;
@@ -207,7 +213,9 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedDayPattern: string;
         shortDateFormat: string;
         shortTimeFormat: string;
-        dateLocale: any;
+        dateLocale: any; /**
+         * The prefix of the component CSS class
+         */
     } | undefined;
     Combobox?: {
         noResultsText: string;

package/cjs/CustomProvider/CustomProvider.js

@@ -28,7 +28,7 @@ function CustomProvider(props) {
     components,
     iconClassPrefix = classPrefix,
     theme,
-    toastContainer: container,
+    toastContainer = _ToastContainer.defaultToasterContainer,
     disableRipple,
     csp,
     disableInlineStyles,
@@ -38,7 +38,7 @@ function CustomProvider(props) {
   const {
     Portal
   } = (0, _hooks.usePortal)({
-    container,
+    container: toastContainer,
     waitMount: true
   });
   const value = (0, _react.useMemo)(() => ({
@@ -47,8 +47,9 @@ function CustomProvider(props) {
     toasters,
     disableRipple,
     components,
+    toastContainer,
     ...rest
-  }), [classPrefix, theme, disableRipple, components, rest]);
+  }), [classPrefix, theme, disableRipple, components, toastContainer, rest]);
   const iconContext = (0, _react.useMemo)(() => ({
     classPrefix: iconClassPrefix,
     csp,

package/cjs/DateInput/hooks/useDateInputState.js

@@ -47,15 +47,17 @@ function useDateInputState(_ref) {
         value = (0, _date.addMonths)(new Date(year, month), offset).getMonth() + 1;
         break;
       case 'd':
-        actionName = 'setDay';
-        const prevDate = new Date(year, month, day);
-        value = (0, _date.addDays)(prevDate, offset).getDate();
-        if (offset > 0) {
-          value = (0, _date.isLastDayOfMonth)(prevDate) ? 1 : value;
-        } else {
-          value = prevDate.getDate() === 1 ? (0, _date.lastDayOfMonth)(prevDate).getDate() : value;
+        {
+          actionName = 'setDay';
+          const prevDate = new Date(year, month, day);
+          value = (0, _date.addDays)(prevDate, offset).getDate();
+          if (offset > 0) {
+            value = (0, _date.isLastDayOfMonth)(prevDate) ? 1 : value;
+          } else {
+            value = prevDate.getDate() === 1 ? (0, _date.lastDayOfMonth)(prevDate).getDate() : value;
+          }
+          break;
         }
-        break;
       case 'H':
       case 'h':
         actionName = 'setHour';

package/cjs/DateInput/hooks/useKeyboardInputEvent.js

@@ -34,6 +34,7 @@ function useKeyboardInputEvent(_ref) {
         // Allow numeric keys to be entered
         onSegmentValueChangeWithNumericKeys === null || onSegmentValueChangeWithNumericKeys === void 0 || onSegmentValueChangeWithNumericKeys(event);
         event.preventDefault();
+        break;
       case (_key$match2 = key.match(/[a-z]/)) === null || _key$match2 === void 0 ? void 0 : _key$match2[0]:
         // Determine whether the Ctrl or Command key is pressed, does not affect user copy and paste
         if (event.ctrlKey || event.metaKey) {

package/cjs/DatePicker/PredefinedRanges.js

@@ -12,7 +12,7 @@ var _hooks = require("../internals/hooks");
 var _utils = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const PredefinedRanges = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function PredefinedRanges(props, ref) {
   const {
     className,
     disableShortcut,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  * @see https://rsuitejs.com/components/date-range-picker
  */
-const DateRangePicker = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function DateRangePicker(props, ref) {
   var _ref, _ref2;
   const {
     formatDate,

package/cjs/Drawer/Drawer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ModalProps } from '../Modal';
-import { TypeAttributes } from '../internals/types';
+import { PlacementCardinal } from '../internals/types';
 import DrawerBody from './DrawerBody';
 import DrawerHeader from './DrawerHeader';
 import DrawerActions from './DrawerActions';
@@ -8,7 +8,7 @@ import DrawerFooter from './DrawerFooter';
 import DrawerTitle from './DrawerTitle';
 export interface DrawerProps extends Omit<ModalProps, 'overflow'> {
     /** The placement of Drawer */
-    placement?: TypeAttributes.Placement4;
+    placement?: PlacementCardinal;
     /** Custom close button */
     closeButton?: React.ReactNode | boolean;
 }

package/cjs/Drawer/Drawer.js

@@ -20,7 +20,7 @@ var _DrawerTitle = _interopRequireDefault(require("./DrawerTitle"));
  * The Drawer component is used to display extra content from a main content.
  * @see https://rsuitejs.com/components/drawer
  */
-const Drawer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Drawer = /*#__PURE__*/_react.default.forwardRef(function Drawer(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Drawer', props);

package/cjs/Drawer/DrawerBody.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _ModalBody = _interopRequireDefault(require("../Modal/ModalBody"));
-const DrawerBody = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_ModalBody.default, (0, _extends2.default)({
-  classPrefix: "drawer-body"
-}, props, {
-  ref: ref
-})));
+const DrawerBody = /*#__PURE__*/_react.default.forwardRef(function DrawerBody(props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_ModalBody.default, (0, _extends2.default)({
+    classPrefix: "drawer-body"
+  }, props, {
+    ref: ref
+  }));
+});
 var _default = exports.default = DrawerBody;

package/cjs/Drawer/DrawerFooter.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _ModalFooter = _interopRequireDefault(require("../Modal/ModalFooter"));
-const DrawerFooter = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_ModalFooter.default, (0, _extends2.default)({
-  classPrefix: "drawer-footer"
-}, props, {
-  ref: ref
-})));
+const DrawerFooter = /*#__PURE__*/_react.default.forwardRef(function DrawerFooter(props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_ModalFooter.default, (0, _extends2.default)({
+    classPrefix: "drawer-footer"
+  }, props, {
+    ref: ref
+  }));
+});
 var _default = exports.default = DrawerFooter;

package/cjs/Drawer/DrawerHeader.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _ModalHeader = _interopRequireDefault(require("../Modal/ModalHeader"));
-const DrawerHeader = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_ModalHeader.default, (0, _extends2.default)({
-  classPrefix: "drawer-header"
-}, props, {
-  ref: ref
-})));
+const DrawerHeader = /*#__PURE__*/_react.default.forwardRef(function DrawerHeader(props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_ModalHeader.default, (0, _extends2.default)({
+    classPrefix: "drawer-header"
+  }, props, {
+    ref: ref
+  }));
+});
 var _default = exports.default = DrawerHeader;

package/cjs/Drawer/DrawerTitle.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _ModalTitle = _interopRequireDefault(require("../Modal/ModalTitle"));
-const DrawerTitle = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_ModalTitle.default, (0, _extends2.default)({
-  classPrefix: "drawer-title"
-}, props, {
-  ref: ref
-})));
+const DrawerTitle = /*#__PURE__*/_react.default.forwardRef(function DrawerTitle(props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_ModalTitle.default, (0, _extends2.default)({
+    classPrefix: "drawer-title"
+  }, props, {
+    ref: ref
+  }));
+});
 var _default = exports.default = DrawerTitle;

package/cjs/Dropdown/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import DropdownMenu from './DropdownMenu';
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import { PlacementCorners, WithAsProps, RsRefForwardingComponent } from '../internals/types';
 import { IconProps } from '@rsuite/icons/Icon';
 import DropdownItem from './DropdownItem';
 import Button from '../Button';
@@ -16,7 +16,7 @@ export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttr
     /** Triggering events */
     trigger?: DropdownTrigger | DropdownTrigger[];
     /** The placement of Menu */
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
     /** Whether or not component is disabled */
     disabled?: boolean;
     /** The style of the menu */

package/cjs/Dropdown/Dropdown.js

@@ -31,7 +31,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * - When used inside `<Sidenav>`, renders a `<TreeviewRootItem>`;
  * - Otherwise renders a `<MenuRoot>`
  */
-const Dropdown = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Dropdown = /*#__PURE__*/_react.default.forwardRef(function Dropdown(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Dropdown', props);

package/cjs/Dropdown/DropdownContext.d.ts

@@ -1,7 +1,7 @@
 import React, { Dispatch } from 'react';
 import { DropdownAction } from './DropdownState';
 export interface DropdownContextProps {
-    activeKey?: string;
+    activeKey?: string | number;
     onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
     hasSelectedItem?: boolean;
     dispatch?: Dispatch<DropdownAction>;

package/cjs/Dropdown/DropdownMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StandardProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface DropdownMenuProps<T = string> extends StandardProps {
+export interface DropdownMenuProps<T = string | number> extends StandardProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** The submenu expands from the left and defaults to the right */
@@ -40,5 +40,5 @@ export interface DropdownMenuProps<T = string> extends StandardProps {
  *   </Dropdown.Menu>
  * </Dropdown>
  */
-declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps<string> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect"> & React.RefAttributes<HTMLElement>>;
+declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps<string | number> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect"> & React.RefAttributes<HTMLElement>>;
 export default DropdownMenu;

package/cjs/Dropdown/DropdownToggle.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import Button from '../Button';
 import { IconProps } from '@rsuite/icons/Icon';
-import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../internals/types';
+import { WithAsProps, RsRefForwardingComponent, PlacementCorners } from '../internals/types';
 export interface DropdownToggleProps extends WithAsProps {
     icon?: React.ReactElement<IconProps>;
     noCaret?: boolean;
     renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
 }
 declare const DropdownToggle: RsRefForwardingComponent<typeof Button, DropdownToggleProps>;
 export default DropdownToggle;

package/cjs/FlexboxGrid/FlexboxGrid.js

@@ -13,7 +13,7 @@ var _CustomProvider = require("../CustomProvider");
  * The FlexboxGrid component is a box that can be used to layout other components.
  * @see https://rsuitejs.com/components/flexbox-grid
  */
-const FlexboxGrid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const FlexboxGrid = /*#__PURE__*/_react.default.forwardRef(function FlexboxGrid(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('FlexboxGrid', props);

package/cjs/Form/Form.js

@@ -26,7 +26,7 @@ const defaultSchema = (0, _schemaTyped.SchemaModel)({});
  * The `Form` component is a form interface for collecting and validating user input.
  * @see https://rsuitejs.com/components/form
  */
-const Form = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Form = /*#__PURE__*/_react.default.forwardRef(function Form(props, ref) {
   const {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Form', props);

package/cjs/FormControl/FormControl.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { CheckType } from 'schema-typed';
 import Input from '../Input';
-import { TypeAttributes, FormControlBaseProps, WithAsProps } from '../internals/types';
+import { TypeAttributes, PlacementCorners, FormControlBaseProps, WithAsProps } from '../internals/types';
 /**
  * Props that FormControl passes to its accepter
  */
@@ -30,7 +30,7 @@ export interface FormControlProps<P = any, ValueType = any> extends WithAsProps,
     /** Show error messages */
     errorMessage?: React.ReactNode;
     /** The placement of error messages */
-    errorPlacement?: TypeAttributes.Placement8;
+    errorPlacement?: PlacementCorners;
     /** Make the control readonly */
     readOnly?: boolean;
     /** Render the control as plain text */

package/cjs/FormErrorMessage/FormErrorMessage.d.ts

@@ -1,9 +1,9 @@
-import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import { PlacementCorners, WithAsProps, RsRefForwardingComponent } from '../internals/types';
 export interface FormErrorMessageProps extends WithAsProps {
     /** Show error messages */
     show?: boolean;
     /** The placement of error messages */
-    placement?: TypeAttributes.Placement8;
+    placement?: PlacementCorners;
 }
 /**
  * The `<Form.ErrorMessage>` component is used to display error messages in the form.