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

package/esm/Accordion/Accordion.js

@@ -8,7 +8,7 @@ import { useCustom } from "../CustomProvider/index.js";
  * The `Accordion` component is used to display content that can be collapsed.
  * @see https://rsuitejs.com/components/accordion
  */
-const Accordion = /*#__PURE__*/React.forwardRef((props, ref) => {
+const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(props, ref) {
   const {
     propsWithDefaults
   } = useCustom('Accordion', props);

package/esm/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/esm/AutoComplete/Combobox.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { useCombobox } from "../internals/Picker/index.js";
 import Input from "../Input/index.js";
-const Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {
+const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   const {
     id,
     popupType

package/esm/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/esm/Badge/Badge.js

@@ -1,7 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
+import kebabCase from 'lodash/kebabCase';
 import { useClassNames } from "../internals/hooks/index.js";
+import { mergeStyles, createOffsetStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The Badge component is usually used to mark or highlight the status or quantity of an object.
@@ -13,12 +15,19 @@ const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = 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 {
@@ -26,30 +35,30 @@ const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
     prefix,
     merge
   } = 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(isPresetColor(color) && color, shape, {
+    compact,
+    outline,
+    hidden: invisible,
     wrapper: children,
-    dot
+    independent: !children,
+    [kebabCase(placement)]: children
   }));
-  if (contentText === false) {
-    return /*#__PURE__*/React.cloneElement(children, {
-      ref
-    });
-  }
-  const content = typeof contentText === 'number' && contentText > maxCount ? `${maxCount}+` : contentText;
+  const styles = useMemo(() => mergeStyles(style, createOffsetStyles(offset, '--rs-badge-offset'), createColorVariables(color, '--rs-badge-bg')), [style, offset, color]);
   if (!children) {
-    return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(Component, _extends({
       ref: ref,
-      className: classes
-    }), content);
+      className: classes,
+      style: styles
+    }, rest), text);
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
-    className: classes
-  }), children, /*#__PURE__*/React.createElement("div", {
+    className: classes,
+    style: styles
+  }, rest), children, /*#__PURE__*/React.createElement("div", {
     className: prefix('content')
-  }, content));
+  }, text));
 });
 Badge.displayName = 'Badge';
 export default Badge;

package/esm/Breadcrumb/Breadcrumb.js

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

package/esm/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/esm/Button/Button.js

@@ -5,7 +5,7 @@ import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
 import { ButtonGroupContext } from "../ButtonGroup/index.js";
 import { isOneOf } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The Button component is used to trigger a custom action.
@@ -17,7 +17,7 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = useCustom('Button', props);
   const {
     as,
-    active,
+    active: activeProp,
     appearance = 'default',
     block,
     className,
@@ -31,8 +31,12 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     startIcon,
     endIcon,
     type: typeProp,
+    toggleable,
+    onToggle,
+    onClick,
     ...rest
   } = propsWithDefaults;
+  const [active, setActive] = useControlled(activeProp, false);
   const buttonGroup = useContext(ButtonGroupContext);
   const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.size;
   const {
@@ -57,13 +61,22 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
       className: prefix`end-icon`
     }, endIcon) : null, rippleElement);
   }, [appearance, children, endIcon, loading, prefix, ripple, startIcon]);
+  const handleClick = 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.createElement(SafeAnchor, _extends({}, rest, {
       as: as,
       ref: ref,
       "aria-disabled": disabled,
       disabled: disabled,
-      className: classes
+      className: classes,
+      onClick: handleClick
     }), buttonContent);
   }
   const Component = as || 'button';
@@ -75,7 +88,8 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref,
     disabled: disabled,
     "aria-disabled": disabled,
-    className: classes
+    className: classes,
+    onClick: handleClick
   }), buttonContent);
 });
 Button.displayName = 'Button';

package/esm/Card/Card.js

@@ -6,7 +6,7 @@ import CardBody from "./CardBody.js";
 import CardFooter from "./CardFooter.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { useClassNames } from "../internals/hooks/index.js";
-const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
+const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
   const {
     propsWithDefaults
   } = useCustom('Card', props);

package/esm/CascadeTree/utils.js

@@ -28,7 +28,7 @@ export 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/esm/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/esm/CustomProvider/CustomProvider.js

@@ -4,7 +4,7 @@ import IconProvider from '@rsuite/icons/IconProvider';
 import { usePortal, useIsomorphicLayoutEffect } from "../internals/hooks/index.js";
 import { getClassNamePrefix, prefix } from "../internals/utils/prefix.js";
 import { addClass, removeClass, canUseDOM } from "../DOMHelper/index.js";
-import ToastContainer, { toastPlacements } from "../toaster/ToastContainer.js";
+import ToastContainer, { toastPlacements, defaultToasterContainer } from "../toaster/ToastContainer.js";
 export const CustomContext = /*#__PURE__*/React.createContext({});
 const themes = ['light', 'dark', 'high-contrast'];
 
@@ -20,7 +20,7 @@ export default function CustomProvider(props) {
     components,
     iconClassPrefix = classPrefix,
     theme,
-    toastContainer: container,
+    toastContainer = defaultToasterContainer,
     disableRipple,
     csp,
     disableInlineStyles,
@@ -30,7 +30,7 @@ export default function CustomProvider(props) {
   const {
     Portal
   } = usePortal({
-    container,
+    container: toastContainer,
     waitMount: true
   });
   const value = useMemo(() => ({
@@ -39,8 +39,9 @@ export default function CustomProvider(props) {
     toasters,
     disableRipple,
     components,
+    toastContainer,
     ...rest
-  }), [classPrefix, theme, disableRipple, components, rest]);
+  }), [classPrefix, theme, disableRipple, components, toastContainer, rest]);
   const iconContext = useMemo(() => ({
     classPrefix: iconClassPrefix,
     csp,

package/esm/DateInput/hooks/useDateInputState.js

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

package/esm/DateInput/hooks/useKeyboardInputEvent.js

@@ -29,6 +29,7 @@ export 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/esm/DatePicker/PredefinedRanges.js

@@ -5,7 +5,7 @@ import Button from "../Button/index.js";
 import Stack from "../Stack/index.js";
 import { useUpdateEffect } from "../internals/hooks/index.js";
 import { getDefaultRanges, getRanges } from "./utils.js";
-const PredefinedRanges = /*#__PURE__*/React.forwardRef((props, ref) => {
+const PredefinedRanges = /*#__PURE__*/React.forwardRef(function PredefinedRanges(props, ref) {
   const {
     className,
     disableShortcut,

package/esm/DateRangePicker/DateRangePicker.js

@@ -28,7 +28,7 @@ import { useCustom } from "../CustomProvider/index.js";
  *
  * @see https://rsuitejs.com/components/date-range-picker
  */
-const DateRangePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
+const DateRangePicker = /*#__PURE__*/React.forwardRef(function DateRangePicker(props, ref) {
   var _ref, _ref2;
   const {
     formatDate,

package/esm/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/esm/Drawer/Drawer.js

@@ -15,7 +15,7 @@ import DrawerTitle from "./DrawerTitle.js";
  * The Drawer component is used to display extra content from a main content.
  * @see https://rsuitejs.com/components/drawer
  */
-const Drawer = /*#__PURE__*/React.forwardRef((props, ref) => {
+const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
   const {
     propsWithDefaults
   } = useCustom('Drawer', props);

package/esm/Drawer/DrawerBody.js

@@ -2,9 +2,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import ModalBody from "../Modal/ModalBody.js";
-const DrawerBody = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ModalBody, _extends({
-  classPrefix: "drawer-body"
-}, props, {
-  ref: ref
-})));
+const DrawerBody = /*#__PURE__*/React.forwardRef(function DrawerBody(props, ref) {
+  return /*#__PURE__*/React.createElement(ModalBody, _extends({
+    classPrefix: "drawer-body"
+  }, props, {
+    ref: ref
+  }));
+});
 export default DrawerBody;

package/esm/Drawer/DrawerFooter.js

@@ -2,9 +2,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import ModalFooter from "../Modal/ModalFooter.js";
-const DrawerFooter = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ModalFooter, _extends({
-  classPrefix: "drawer-footer"
-}, props, {
-  ref: ref
-})));
+const DrawerFooter = /*#__PURE__*/React.forwardRef(function DrawerFooter(props, ref) {
+  return /*#__PURE__*/React.createElement(ModalFooter, _extends({
+    classPrefix: "drawer-footer"
+  }, props, {
+    ref: ref
+  }));
+});
 export default DrawerFooter;

package/esm/Drawer/DrawerHeader.js

@@ -2,9 +2,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import ModalHeader from "../Modal/ModalHeader.js";
-const DrawerHeader = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ModalHeader, _extends({
-  classPrefix: "drawer-header"
-}, props, {
-  ref: ref
-})));
+const DrawerHeader = /*#__PURE__*/React.forwardRef(function DrawerHeader(props, ref) {
+  return /*#__PURE__*/React.createElement(ModalHeader, _extends({
+    classPrefix: "drawer-header"
+  }, props, {
+    ref: ref
+  }));
+});
 export default DrawerHeader;

package/esm/Drawer/DrawerTitle.js

@@ -2,9 +2,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import ModalTitle from "../Modal/ModalTitle.js";
-const DrawerTitle = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ModalTitle, _extends({
-  classPrefix: "drawer-title"
-}, props, {
-  ref: ref
-})));
+const DrawerTitle = /*#__PURE__*/React.forwardRef(function DrawerTitle(props, ref) {
+  return /*#__PURE__*/React.createElement(ModalTitle, _extends({
+    classPrefix: "drawer-title"
+  }, props, {
+    ref: ref
+  }));
+});
 export default DrawerTitle;

package/esm/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/esm/Dropdown/Dropdown.js

@@ -24,7 +24,7 @@ import DropdownSeparator from "./DropdownSeparator.js";
  * - When used inside `<Sidenav>`, renders a `<TreeviewRootItem>`;
  * - Otherwise renders a `<MenuRoot>`
  */
-const Dropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
+const Dropdown = /*#__PURE__*/React.forwardRef(function Dropdown(props, ref) {
   const {
     propsWithDefaults
   } = useCustom('Dropdown', props);

package/esm/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/esm/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/esm/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/esm/FlexboxGrid/FlexboxGrid.js

@@ -8,7 +8,7 @@ import { useCustom } from "../CustomProvider/index.js";
  * 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.forwardRef((props, ref) => {
+const FlexboxGrid = /*#__PURE__*/React.forwardRef(function FlexboxGrid(props, ref) {
   const {
     propsWithDefaults
   } = useCustom('FlexboxGrid', props);

package/esm/Form/Form.js

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

package/esm/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/esm/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.