rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/esm/Sidenav/SidenavItem.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useCallback } from 'react';
 import classNames from 'classnames';
 import isNil from 'lodash/isNil';
-import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
 import NavContext from "../Nav/NavContext.js";
 import MenuItem from "../internals/Menu/MenuItem.js";
@@ -11,8 +10,13 @@ import omit from 'lodash/omit';
 import Whisper from "../Whisper/index.js";
 import Tooltip from "../Tooltip/index.js";
 import { forwardRef, shallowEqual, mergeRefs, createChainedFunction } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { SidenavContext } from "./Sidenav.js";
+
+/**
+ * Props of SidenavItem component
+ */
+
 /**
  * @private
  */
@@ -24,18 +28,18 @@ const SidenavItem = forwardRef((props, ref) => {
   const {
     as: Component = SafeAnchor,
     active: activeProp,
+    classPrefix = 'sidenav-item',
     children,
     className,
     disabled,
-    classPrefix = 'sidenav-item',
-    icon,
+    divider,
     eventKey,
+    icon,
+    panel,
     style,
+    tooltip = children,
     onClick,
     onSelect,
-    divider,
-    panel,
-    tooltip = children,
     ...rest
   } = props;
   const {
@@ -44,9 +48,9 @@ const SidenavItem = forwardRef((props, ref) => {
   } = useContext(NavContext);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const selected = activeProp !== null && activeProp !== void 0 ? activeProp : !isNil(eventKey) && shallowEqual(activeKey, eventKey);
   const whisperRef = React.useRef(null);
   const handleClick = useCallback(event => {
@@ -60,7 +64,13 @@ const SidenavItem = forwardRef((props, ref) => {
   const clonedIcon = icon ? /*#__PURE__*/React.cloneElement(icon, {
     className: classNames(prefix('icon'), icon.props.className)
   }) : null;
+  const title = typeof children === 'string' ? /*#__PURE__*/React.createElement("span", {
+    className: prefix('title')
+  }, children) : children;
   if (!sidenav.expanded) {
+    if (panel || divider) {
+      return null;
+    }
     return /*#__PURE__*/React.createElement(Whisper, {
       trigger: "hover",
       speaker: /*#__PURE__*/React.createElement(Tooltip, null, tooltip),
@@ -76,7 +86,7 @@ const SidenavItem = forwardRef((props, ref) => {
         active,
         ...menuitem
       } = _ref;
-      const classes = merge(className, withClassPrefix({
+      const classes = merge(className, withPrefix({
         focus: active,
         active: selected,
         disabled
@@ -91,7 +101,7 @@ const SidenavItem = forwardRef((props, ref) => {
       }, omit(rest, ['divider', 'panel']), triggerProps, menuitem, {
         onMouseOver: createChainedFunction(menuitem.onMouseOver, triggerProps.onMouseOver),
         onMouseOut: createChainedFunction(menuitem.onMouseOut, triggerProps.onMouseOut)
-      }), clonedIcon, children, /*#__PURE__*/React.createElement(Ripple, null));
+      }), clonedIcon, title);
     }));
   }
   if (divider) {
@@ -112,7 +122,7 @@ const SidenavItem = forwardRef((props, ref) => {
   }
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
-    className: merge(className, withClassPrefix({
+    className: merge(className, withPrefix({
       active: selected,
       disabled
     })),
@@ -120,7 +130,7 @@ const SidenavItem = forwardRef((props, ref) => {
     style: style,
     "aria-selected": selected || undefined,
     "data-event-key": eventKey
-  }, rest), clonedIcon, children, /*#__PURE__*/React.createElement(Ripple, null));
+  }, rest), clonedIcon, title);
 });
 SidenavItem.displayName = 'Sidenav.Item';
 export default SidenavItem;

package/esm/Sidenav/SidenavToggle.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
 import type { WithAsProps } from '../internals/types';
 export interface SidenavToggleProps extends WithAsProps {
-    /**
-     * Expand then nav
-     *
-     * @deprecated Use <Sidenav expanded> instead.
-     */
-    expanded?: boolean;
     /** Callback function for menu state switching */
     onToggle?: (expanded: boolean, event: React.MouseEvent) => void;
 }

package/esm/Sidenav/SidenavToggle.js

@@ -1,46 +1,40 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import PagePreviousIcon from '@rsuite/icons/PagePrevious';
-import PageNextIcon from '@rsuite/icons/PageNext';
+import ArrowLeftLineIcon from '@rsuite/icons/ArrowLeftLine';
 import IconButton from "../IconButton/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { SidenavContext } from "./Sidenav.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const SidenavToggle = forwardRef((props, ref) => {
   const sidenav = useContext(SidenavContext);
   if (!sidenav) {
-    throw new Error('<Sidenav.Toggle> must be rendered within a <Sidenav>');
+    console.error('<Sidenav.Toggle> must be rendered within a <Sidenav>');
+    return null;
   }
   const {
-    as: Component = 'div',
-    expanded: DEPRECATED_expanded,
     className,
     classPrefix = 'sidenav-toggle',
     onToggle,
     ...rest
   } = props;
-
-  // if `expanded` prop is provided, it takes priority
-  const expanded = DEPRECATED_expanded !== null && DEPRECATED_expanded !== void 0 ? DEPRECATED_expanded : sidenav.expanded;
+  const expanded = sidenav.expanded;
   const {
     merge,
-    withClassPrefix,
-    prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     collapsed: !expanded
   }));
-  const Icon = expanded ? PagePreviousIcon : PageNextIcon;
   const handleToggle = event => {
     onToggle === null || onToggle === void 0 || onToggle(!expanded, event);
   };
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(IconButton, _extends({}, rest, {
     ref: ref,
-    className: classes
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Icon, null),
-    className: prefix('button'),
+    className: classes,
+    icon: /*#__PURE__*/React.createElement(ArrowLeftLineIcon, {
+      "aria-label": ""
+    }),
     onClick: handleToggle,
     "aria-label": expanded ? 'Collapse' : 'Expand'
   }));

package/esm/Sidenav/index.d.ts

@@ -2,11 +2,13 @@ import Sidenav from './Sidenav';
 import SidenavToggle from './SidenavToggle';
 import SidenavHeader from './SidenavHeader';
 import SidenavBody from './SidenavBody';
+import SidenavFooter from './SidenavFooter';
 import SidenavItem from './SidenavItem';
 import SidenavDropdown from './SidenavDropdown';
 import SidenavDropdownItem from './SidenavDropdownItem';
 import SidenavDropdownMenu from './SidenavDropdownMenu';
 import SidenavDropdownToggle from './SidenavDropdownToggle';
+import SidenavGroupLabel from './SidenavGroupLabel';
 export type { SidenavProps } from './Sidenav';
 export type { SidenavToggleProps } from './SidenavToggle';
 export type { SidenavHeaderProps } from './SidenavHeader';
@@ -16,5 +18,5 @@ export type { SidenavDropdownProps } from './SidenavDropdown';
 export type { SidenavDropdownItemProps } from './SidenavDropdownItem';
 export type { SidenavDropdownMenuProps } from './SidenavDropdownMenu';
 export type { SidenavDropdownToggleProps } from './SidenavDropdownToggle';
-export { Sidenav, SidenavToggle, SidenavHeader, SidenavBody, SidenavItem, SidenavDropdown, SidenavDropdownItem, SidenavDropdownMenu, SidenavDropdownToggle };
+export { Sidenav, SidenavToggle, SidenavHeader, SidenavBody, SidenavFooter, SidenavItem, SidenavDropdown, SidenavDropdownItem, SidenavDropdownMenu, SidenavDropdownToggle, SidenavGroupLabel };
 export default Sidenav;

package/esm/Sidenav/index.js

@@ -3,14 +3,16 @@ import Sidenav from "./Sidenav.js";
 import SidenavToggle from "./SidenavToggle.js";
 import SidenavHeader from "./SidenavHeader.js";
 import SidenavBody from "./SidenavBody.js";
+import SidenavFooter from "./SidenavFooter.js";
 import SidenavItem from "./SidenavItem.js";
 import SidenavDropdown from "./SidenavDropdown.js";
 import SidenavDropdownItem from "./SidenavDropdownItem.js";
 import SidenavDropdownMenu from "./SidenavDropdownMenu.js";
 import SidenavDropdownToggle from "./SidenavDropdownToggle.js";
+import SidenavGroupLabel from "./SidenavGroupLabel.js";
 
 // export types
 
 // export components
-export { Sidenav, SidenavToggle, SidenavHeader, SidenavBody, SidenavItem, SidenavDropdown, SidenavDropdownItem, SidenavDropdownMenu, SidenavDropdownToggle };
+export { Sidenav, SidenavToggle, SidenavHeader, SidenavBody, SidenavFooter, SidenavItem, SidenavDropdown, SidenavDropdownItem, SidenavDropdownMenu, SidenavDropdownToggle, SidenavGroupLabel };
 export default Sidenav;

package/esm/Slider/Graduated.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import Mark from "./Mark.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { precisionMath } from "./utils.js";
 const Graduated = forwardRef((props, ref) => {
   const {
@@ -19,7 +19,7 @@ const Graduated = forwardRef((props, ref) => {
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const activeIndexs = [];
   let startIndex = 0;
   let endIndex = 0;

package/esm/Slider/Handle.js

@@ -4,8 +4,8 @@ import React from 'react';
 import Tooltip from "../Tooltip/index.js";
 import Input from "./Input.js";
 import useDrag from "./useDrag.js";
-import { forwardRef, mergeRefs } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { forwardRef, mergeRefs, mergeStyles } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const Handle = forwardRef((props, ref) => {
   const {
     as: Component = 'div',
@@ -32,14 +32,13 @@ const Handle = forwardRef((props, ref) => {
   } = props;
   const horizontalKey = rtl ? 'right' : 'left';
   const direction = vertical ? 'bottom' : horizontalKey;
-  const styles = {
-    ...style,
+  const styles = mergeStyles(style, {
     [direction]: `${position}%`
-  };
+  });
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     active,
     onMoveStart,

package/esm/Slider/Input.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import { mergeStyles } from "../internals/utils/index.js";
 const rangeStyles = {
   position: 'absolute',
   overflow: 'hidden',
@@ -17,10 +18,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: "range",
     readOnly: true,
     ref: ref,
-    style: {
-      ...rangeStyles,
-      ...style
-    }
+    style: mergeStyles(rangeStyles, style)
   }, rest));
 });
 Input.displayName = 'Input';

package/esm/Slider/Mark.js

@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 const Mark = forwardRef((props, ref) => {
   const {
@@ -14,9 +14,9 @@ const Mark = forwardRef((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     last
   }));
   if (renderMark) {

package/esm/Slider/ProgressBar.js

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
-import { forwardRef } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { forwardRef, mergeStyles } from "../internals/utils/index.js";
 const ProgressBar = forwardRef((props, ref) => {
   const {
     as: Component = 'div',
@@ -15,17 +15,16 @@ const ProgressBar = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const sizeKey = vertical ? 'height' : 'width';
   const dirKey = rtl ? 'right' : 'left';
   const startKey = vertical ? 'bottom' : dirKey;
-  const styles = {
-    ...style,
+  const styles = mergeStyles(style, {
     [startKey]: `${start}%`,
     [sizeKey]: `${end - start}%`
-  };
-  const classes = merge(className, withClassPrefix());
+  });
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Component, {
     ref: ref,
     style: styles,

package/esm/Slider/Slider.js

@@ -8,7 +8,7 @@ import ProgressBar from "./ProgressBar.js";
 import Handle from "./Handle.js";
 import Graduated from "./Graduated.js";
 import Plaintext from "../internals/Plaintext/index.js";
-import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { precisionMath, checkValue, getPosition } from "./utils.js";
@@ -55,13 +55,13 @@ const Slider = forwardRef((props, ref) => {
   const barRef = useRef(null);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     rtl
   } = useCustom('Slider');
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     vertical,
     disabled,
     graduated,

package/esm/Slider/useDrag.d.ts

@@ -8,8 +8,8 @@ interface DragProps {
 }
 declare const useDrag: (props: DragProps) => {
     active: boolean;
-    rootRef: import("react").RefObject<HTMLDivElement>;
-    tooltipRef: import("react").RefObject<HTMLDivElement>;
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    tooltipRef: import("react").RefObject<HTMLDivElement | null>;
     onMoveStart: (...args: any[]) => any;
     onMouseEnter: (...args: any[]) => any;
 };

package/esm/Slider/useDrag.js

@@ -15,7 +15,7 @@ const useDrag = props => {
     onDragStart
   } = props;
   const [active, setActive] = useState(false);
-  const moveTracker = useRef();
+  const moveTracker = useRef(null);
 
   // Release the move event
   const releaseMoves = useCallback(() => {

package/esm/Stack/HStack.d.ts

@@ -6,6 +6,6 @@ export interface HStackProps extends Omit<StackProps, 'direction'> {
     reverse?: boolean;
 }
 declare const HStack: import("../internals/types").InternalRefForwardingComponent<"div", HStackProps, never> & {
-    Item: typeof import("./StackItem").default;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./StackItem").StackItemProps, never> & Record<string, never>;
 };
 export default HStack;

package/esm/Stack/HStack.js

@@ -9,15 +9,10 @@ const Subcomponents = {
 const HStack = forwardRef((props, ref) => {
   const {
     reverse,
-    spacing = 6,
-    childrenRenderMode = 'clone',
     ...rest
   } = props;
   const direction = reverse ? 'row-reverse' : 'row';
-  return /*#__PURE__*/React.createElement(Stack, _extends({
-    spacing: spacing,
-    childrenRenderMode: childrenRenderMode
-  }, rest, {
+  return /*#__PURE__*/React.createElement(Stack, _extends({}, rest, {
     direction: direction,
     ref: ref
   }));

package/esm/Stack/Stack.d.ts

@@ -1,35 +1,30 @@
-import React from 'react';
-import StackItem from './StackItem';
-import type { WithAsProps } from '../internals/types';
-export interface StackProps extends WithAsProps {
+import React, { CSSProperties } from 'react';
+import type { WithAsProps, ResponsiveValue } from '../internals/types';
+interface DeprecatedStackProps {
     /**
-     * The direction of the children in the stack.
+     * Define the alignment of the children in the stack on the inline axis
+     * @deprecated  Use `justify` instead
      */
-    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    justifyContent?: CSSProperties['justifyContent'];
     /**
      * Define the alignment of the children in the stack on the cross axis
+     * @deprecated  Use `align` instead
      */
-    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
-    /**
-     *  Define the alignment of the children in the stack on the inline axis
-     */
-    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
-    /**
-     * Define the spacing between immediate children
-     */
+    alignItems?: CSSProperties['alignItems'];
+}
+export interface StackProps extends WithAsProps, DeprecatedStackProps {
+    /** Define the alignment of the children in the stack on the cross axis */
+    align?: CSSProperties['alignItems'];
+    /** The direction of the children in the stack */
+    direction?: CSSProperties['flexDirection'] | ResponsiveValue<CSSProperties['flexDirection']>;
+    /** Define the alignment of the children in the stack on the inline axis */
+    justify?: CSSProperties['justifyContent'];
+    /** Define the spacing between immediate children */
     spacing?: number | string | (number | string)[];
-    /**
-     * Add an element between each child
-     */
+    /** Add an element between each child */
     divider?: React.ReactNode;
-    /**
-     * Define whether the children in the stack are forced onto one line or can wrap onto multiple lines
-     */
+    /** Define whether the children in the stack are forced onto one line or can wrap onto multiple lines */
     wrap?: boolean;
-    /**
-     * The render mode of the children.
-     */
-    childrenRenderMode?: 'clone' | 'wrap';
 }
 /**
  * The `Stack` component is a quick layout component through Flexbox,
@@ -38,6 +33,6 @@ export interface StackProps extends WithAsProps {
  * @see https://rsuitejs.com/components/stack
  */
 declare const Stack: import("../internals/types").InternalRefForwardingComponent<"div", StackProps, never> & {
-    Item: typeof StackItem;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./StackItem").StackItemProps, never> & Record<string, never>;
 };
 export default Stack;

package/esm/Stack/Stack.js

@@ -2,13 +2,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import StackItem from "./StackItem.js";
-import { forwardRef, ReactChildren } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import Box from "../internals/Box/index.js";
+import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-function isStackItem(child) {
-  var _child$type;
-  return child.type === StackItem || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'StackItem';
-}
 const Subcomponents = {
   Item: StackItem
 };
@@ -24,14 +21,15 @@ const Stack = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Stack', props);
   const {
-    as: Component = 'div',
-    alignItems = 'center',
+    as,
+    alignItems,
+    align = alignItems,
     classPrefix = 'stack',
-    childrenRenderMode = 'wrap',
     className,
     children,
     direction,
     justifyContent,
+    justify = justifyContent,
     spacing,
     divider,
     style,
@@ -39,38 +37,24 @@ const Stack = forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
-    prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
-  const styles = {
-    alignItems,
-    justifyContent,
-    flexDirection: direction,
-    flexWrap: wrap ? 'wrap' : undefined,
-    gap: spacing,
-    ...style
-  };
-
-  /*
-   * toArray remove undefined, null and boolean
-   */
-  const filterChildren = React.Children.toArray(children);
-  const count = ReactChildren.count(filterChildren);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    cssVar,
+    responsive
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(), ...responsive(direction));
+  const styles = mergeStyles(style, cssVar('spacing', spacing, getCssValue), cssVar('align', align), cssVar('justify', justify), cssVar('wrap', wrap ? 'wrap' : undefined));
+  const filteredChildren = React.Children.toArray(children);
+  const childCount = filteredChildren.length;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    display: "flex",
+    as: as,
     ref: ref,
     className: classes,
     style: styles
-  }), ReactChildren.map(filterChildren, (child, index) => {
-    const childNode = childrenRenderMode === 'wrap' && !isStackItem(child) ? /*#__PURE__*/React.createElement(StackItem, {
-      key: index,
-      className: prefix('item')
-    }, child) : (/*#__PURE__*/React.cloneElement(child, {
-      className: merge(prefix('item'), child.props.className)
-    }));
-    return [childNode, index < count - 1 ? divider : null];
-  }));
+  }, rest), filteredChildren.map((child, index) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: index
+  }, child, index < childCount - 1 && divider)));
 }, Subcomponents);
 Stack.displayName = 'Stack';
 export default Stack;

package/esm/Stack/StackItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WithAsProps } from '../internals/types';
 export interface StackItemProps extends WithAsProps {
-    alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    alignSelf?: React.CSSProperties['alignSelf'];
     flex?: React.CSSProperties['flex'];
     grow?: React.CSSProperties['flexGrow'];
     shrink?: React.CSSProperties['flexShrink'];
@@ -13,8 +13,5 @@ export interface StackItemProps extends WithAsProps {
  *
  * @see https://rsuitejs.com/components/stack
  */
-declare function StackItem(props: StackItemProps): React.JSX.Element;
-declare namespace StackItem {
-    var displayName: string;
-}
+declare const StackItem: import("../internals/types").InternalRefForwardingComponent<"div", StackItemProps, never> & Record<string, never>;
 export default StackItem;

package/esm/Stack/StackItem.js

@@ -1,14 +1,17 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import { forwardRef, mergeStyles } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 /**
  * The `Stack.Item` component is used to set the layout of the child element in the `Stack` component.
  *
  * @see https://rsuitejs.com/components/stack
  */
-export default function StackItem(props) {
+const StackItem = forwardRef((props, ref) => {
   const {
     as: Component = 'div',
+    classPrefix = 'stack-item',
     style,
     className,
     alignSelf,
@@ -19,20 +22,18 @@ export default function StackItem(props) {
     basis,
     ...rest
   } = props;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = mergeStyles(style, cssVar('align-self', alignSelf), cssVar('order', order), cssVar('flex', flex), cssVar('grow', grow), cssVar('shrink', shrink), cssVar('basis', basis));
   return /*#__PURE__*/React.createElement(Component, _extends({
-    className: className,
-    style: {
-      alignSelf,
-      order,
-      ...(flex ? {
-        flex
-      } : {
-        flexGrow: grow,
-        flexShrink: shrink,
-        flexBasis: basis
-      }),
-      ...style
-    }
+    ref: ref,
+    className: classes,
+    style: styles
   }, rest));
-}
-StackItem.displayName = 'StackItem';
+});
+StackItem.displayName = 'StackItem';
+export default StackItem;

package/esm/Stack/VStack.d.ts

@@ -3,6 +3,6 @@ export interface VStackProps extends Omit<StackProps, 'direction'> {
     reverse?: boolean;
 }
 declare const VStack: import("../internals/types").InternalRefForwardingComponent<"div", VStackProps, never> & {
-    Item: typeof import("./StackItem").default;
+    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("./StackItem").StackItemProps, never> & Record<string, never>;
 };
 export default VStack;