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

package/esm/Navbar/NavbarMegaMenu.js

@@ -0,0 +1,52 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback } from 'react';
+import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
+import Whisper from "../Whisper/index.js";
+import Popover from "../Popover/index.js";
+import NavbarItem from "./NavbarItem.js";
+import { useStyles } from "../internals/hooks/index.js";
+const NavbarMegaMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as: Component = NavbarItem,
+    className,
+    classPrefix = 'mega-menu',
+    children,
+    title,
+    open,
+    placement = 'autoVertical',
+    ...rest
+  } = props;
+  const {
+    merge,
+    prefix,
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const renderMenu = useCallback((_ref, ref) => {
+    let {
+      onClose
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Popover, {
+      ref: ref,
+      full: true,
+      arrow: false
+    }, typeof children === 'function' ? children({
+      onClose
+    }) : children);
+  }, [children]);
+  return /*#__PURE__*/React.createElement(Whisper, {
+    preventOverflow: true,
+    placement: placement,
+    trigger: "click",
+    speaker: renderMenu,
+    open: open
+  }, /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    className: classes
+  }, rest), title, /*#__PURE__*/React.createElement(ArrowDownLineIcon, {
+    className: prefix`toggle-icon`
+  })));
+});
+NavbarMegaMenu.displayName = 'NavbarMegaMenu';
+export default NavbarMegaMenu;

package/esm/Notification/Notification.js

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
 import CloseButton from "../internals/CloseButton/index.js";
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
-import { useClassNames, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -30,10 +30,10 @@ const Notification = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const [display, setDisplay] = useState('show');
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const isMounted = useIsMounted();
   const targetRef = React.useRef(null);
 
@@ -57,22 +57,10 @@ const Notification = forwardRef((props, ref) => {
       }
     }, 1000);
   });
-  const renderHeader = () => {
-    if (!header) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: prefix('title')
-    }, type ? /*#__PURE__*/React.createElement("div", {
-      className: prefix`title-with-icon`
-    }, MESSAGE_STATUS_ICONS[type], header) : /*#__PURE__*/React.createElement("div", {
-      className: prefix('title')
-    }, header));
-  };
   if (display === 'hide') {
     return null;
   }
-  const classes = merge(className, withClassPrefix(type, display, {
+  const classes = merge(className, withPrefix(type, {
     closable
   }));
   return /*#__PURE__*/React.createElement(Component, _extends({
@@ -80,9 +68,13 @@ const Notification = forwardRef((props, ref) => {
   }, rest, {
     ref: mergeRefs(targetRef, ref),
     className: classes
-  }), /*#__PURE__*/React.createElement("div", {
+  }), type && /*#__PURE__*/React.createElement("div", {
+    className: prefix`icon`
+  }, MESSAGE_STATUS_ICONS[type]), /*#__PURE__*/React.createElement("div", {
     className: prefix`content`
-  }, renderHeader(), /*#__PURE__*/React.createElement("div", {
+  }, header && /*#__PURE__*/React.createElement("div", {
+    className: prefix('header')
+  }, header), /*#__PURE__*/React.createElement("div", {
     className: prefix('description')
   }, typeof children === 'function' ? children() : children)), closable && /*#__PURE__*/React.createElement(CloseButton, {
     onClick: handleClose

package/esm/Pagination/LimitPicker.d.ts

@@ -1,12 +1,12 @@
 import { type SelectPickerProps } from '../SelectPicker';
 import { PaginationLocale } from '../locales';
-import type { OnChangeCallback, SizeType } from '../internals/types';
+import type { OnChangeCallback, Size } from '../internals/types';
 interface LimitPickerProps extends Omit<SelectPickerProps<any>, 'locale' | 'disabled' | 'data'> {
     disabled?: boolean | ((eventKey: number | string) => boolean);
     limitOptions: number[];
     locale: PaginationLocale;
     limit: number;
-    size?: SizeType;
+    size?: Size;
     prefix: (input: string) => string;
     onChangeLimit: OnChangeCallback<any>;
 }

package/esm/Pagination/LimitPicker.js

@@ -34,7 +34,7 @@ const LimitPicker = forwardRef((props, ref) => {
     data: formatlimitOptions,
     value: limit,
     onChange: onChangeLimit,
-    menuStyle: {
+    popupStyle: {
       minWidth: 'auto'
     },
     disabled: disabledPicker,

package/esm/Pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WithAsProps, SizeType } from '../internals/types';
+import type { WithAsProps, Size } from '../internals/types';
 import type { PaginationLocale } from '../locales';
 export interface PaginationProps extends WithAsProps {
     /** Current page number */
@@ -29,7 +29,7 @@ export interface PaginationProps extends WithAsProps {
     /** Custom locale */
     locale?: PaginationLocale;
     /** A pagination can have different sizes */
-    size?: SizeType;
+    size?: Size;
     /** callback function for pagination clicked */
     onSelect?: (eventKey: string | number, event: React.MouseEvent) => void;
 }

package/esm/Pagination/Pagination.js

@@ -8,14 +8,14 @@ import PageNextIcon from '@rsuite/icons/PageNext';
 import PageEndIcon from '@rsuite/icons/PageEnd';
 import PaginationButton from "./PaginationButton.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-const PAGINATION_ICONS = {
+const icons = {
   more: /*#__PURE__*/React.createElement(MoreIcon, null),
-  prev: /*#__PURE__*/React.createElement(PagePreviousIcon, null),
-  next: /*#__PURE__*/React.createElement(PageNextIcon, null),
   first: /*#__PURE__*/React.createElement(PageTopIcon, null),
-  last: /*#__PURE__*/React.createElement(PageEndIcon, null)
+  last: /*#__PURE__*/React.createElement(PageEndIcon, null),
+  prev: /*#__PURE__*/React.createElement(PagePreviousIcon, null),
+  next: /*#__PURE__*/React.createElement(PageNextIcon, null)
 };
 /**
  * Pagination component for displaying page numbers.
@@ -41,7 +41,7 @@ const Pagination = forwardRef((props, ref) => {
     prev,
     next,
     last,
-    size = 'xs',
+    size = 'sm',
     linkAs,
     linkProps,
     onSelect,
@@ -49,9 +49,9 @@ const Pagination = forwardRef((props, ref) => {
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const renderItem = (key, itemProps) => {
     const {
       eventKey,
@@ -70,6 +70,7 @@ const Pagination = forwardRef((props, ref) => {
       key: `${key}-${eventKey}`,
       eventKey: eventKey,
       as: linkAs,
+      size: size,
       disabled: disabledButton,
       onSelect: disabledButton ? undefined : onSelect
     }));
@@ -83,7 +84,7 @@ const Pagination = forwardRef((props, ref) => {
       disabled: activePage === 1,
       children: /*#__PURE__*/React.createElement("span", {
         className: prefix`symbol`
-      }, first === true ? PAGINATION_ICONS.first : first)
+      }, first === true ? icons.first : first)
     });
   };
   const renderPrev = () => {
@@ -95,19 +96,19 @@ const Pagination = forwardRef((props, ref) => {
       disabled: activePage === 1,
       children: /*#__PURE__*/React.createElement("span", {
         className: prefix`symbol`
-      }, prev === true ? PAGINATION_ICONS.prev : prev)
+      }, prev === true ? icons.prev : prev)
     });
   };
   const renderPageButtons = () => {
     const pageButtons = [];
     let startPage;
     let endPage;
-    let hasHiddenPagesAfter;
+    let shouldShowEllipsisAfter;
     if (maxButtons) {
       const hiddenPagesBefore = activePage - Math.floor(maxButtons / 2);
       startPage = hiddenPagesBefore > 1 ? hiddenPagesBefore : 1;
-      hasHiddenPagesAfter = startPage + maxButtons <= pages;
-      if (!hasHiddenPagesAfter) {
+      shouldShowEllipsisAfter = startPage + maxButtons <= pages;
+      if (!shouldShowEllipsisAfter) {
         endPage = pages;
         startPage = pages - maxButtons + 1;
         if (startPage < 1) {
@@ -133,20 +134,20 @@ const Pagination = forwardRef((props, ref) => {
         disabled: true,
         children: /*#__PURE__*/React.createElement("span", {
           className: prefix`symbol`
-        }, ellipsis === true ? PAGINATION_ICONS.more : ellipsis)
+        }, ellipsis === true ? icons.more : ellipsis)
       }));
       pageButtons.unshift(renderItem(1, {
         eventKey: 1,
         children: 1
       }));
     }
-    if (maxButtons && hasHiddenPagesAfter && ellipsis) {
+    if (maxButtons && shouldShowEllipsisAfter && ellipsis) {
       pageButtons.push(renderItem('more', {
         eventKey: 'ellipsis',
         disabled: true,
         children: /*#__PURE__*/React.createElement("span", {
           className: prefix`symbol`
-        }, ellipsis === true ? PAGINATION_ICONS.more : ellipsis)
+        }, ellipsis === true ? icons.more : ellipsis)
       }));
       if (boundaryLinks && endPage !== pages) {
         pageButtons.push(renderItem(pages, {
@@ -167,7 +168,7 @@ const Pagination = forwardRef((props, ref) => {
       disabled: activePage >= pages,
       children: /*#__PURE__*/React.createElement("span", {
         className: prefix`symbol`
-      }, next === true ? PAGINATION_ICONS.next : next)
+      }, next === true ? icons.next : next)
     });
   };
   const renderLast = () => {
@@ -179,10 +180,10 @@ const Pagination = forwardRef((props, ref) => {
       disabled: activePage >= pages,
       children: /*#__PURE__*/React.createElement("span", {
         className: prefix`symbol`
-      }, last === true ? PAGINATION_ICONS.last : last)
+      }, last === true ? icons.last : last)
     });
   };
-  const classes = merge(className, withClassPrefix(size));
+  const classes = merge(className, withPrefix(size));
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes

package/esm/Pagination/PaginationButton.d.ts

@@ -1,18 +1,22 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface PaginationButtonProps<T = number | string> extends WithAsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+export interface PaginationButtonProps<T = number | string> extends WithAsProps, HTMLPropsWithoutSelect<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>> {
     /** The value of the current option */
     eventKey: T;
-    /** Called when the button is clicked. */
-    onClick?: React.MouseEventHandler;
     /** A button can show it is currently unable to be interacted with */
     disabled?: boolean;
     /** A button can show it is currently the active user selection */
     active?: boolean;
     /** Primary content */
     children?: React.ReactNode;
-    /** Select the callback function for the current option  */
-    onSelect?: (eventKey: T, event: React.MouseEvent) => void;
+    /** Called when the button is clicked */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Select the callback function for the current option */
+    onSelect?: (eventKey: T, event: React.MouseEvent<HTMLElement>) => void;
 }
+/**
+ * PaginationButton component for pagination navigation.
+ * Renders a button that can be used in pagination contexts.
+ */
 declare const PaginationButton: import("../internals/types").InternalRefForwardingComponent<"button", PaginationButtonProps<string | number>, never> & Record<string, never>;
 export default PaginationButton;

package/esm/Pagination/PaginationButton.js

@@ -1,28 +1,31 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import Ripple from "../internals/Ripple/index.js";
-import { useClassNames, useEventCallback } from "../internals/hooks/index.js";
-import { forwardRef, createChainedFunction } from "../internals/utils/index.js";
+import React, { useMemo } from 'react';
+import Button from "../Button/index.js";
+import { useStyles, useEventCallback } from "../internals/hooks/index.js";
+import { forwardRef } from "../internals/utils/index.js";
+/**
+ * PaginationButton component for pagination navigation.
+ * Renders a button that can be used in pagination contexts.
+ */
 const PaginationButton = forwardRef((props, ref) => {
   const {
-    as: Component = 'button',
+    as: Component = Button,
     active,
     disabled,
     className,
     classPrefix = 'pagination-btn',
     children,
     eventKey,
-    style,
     onSelect,
     onClick,
     ...rest
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     active,
     disabled
   }));
@@ -30,20 +33,29 @@ const PaginationButton = forwardRef((props, ref) => {
     if (disabled) {
       return;
     }
-    onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
+    onClick === null || onClick === void 0 || onClick(event);
+
+    // Only call onSelect if the event hasn't been prevented
+    if (!event.defaultPrevented && onSelect) {
+      onSelect(eventKey, event);
+    }
   });
-  const asProps = {};
-  if (typeof Component !== 'string') {
-    asProps.eventKey = eventKey;
-    asProps.active = active;
-  }
+
+  // Determine props to pass based on component type
+  const asProps = useMemo(() => Component !== Button && typeof Component !== 'string' ? {
+    eventKey,
+    active,
+    role: 'button'
+  } : {}, [Component, eventKey, active]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, asProps, {
     disabled: disabled,
-    onClick: createChainedFunction(onClick, handleClick),
+    onClick: handleClick,
     ref: ref,
     className: classes,
-    style: style
-  }), children, !disabled ? /*#__PURE__*/React.createElement(Ripple, null) : null);
+    role: "button",
+    "aria-disabled": disabled,
+    "aria-current": active ? 'page' : undefined
+  }), children);
 });
 PaginationButton.displayName = 'PaginationButton';
 export default PaginationButton;

package/esm/Pagination/PaginationGroup.js

@@ -6,7 +6,7 @@ import Pagination from "./Pagination.js";
 import Divider from "../Divider/index.js";
 import Input from "../Input/index.js";
 import LimitPicker from "./LimitPicker.js";
-import { useClassNames, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, tplTransform } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 
@@ -48,12 +48,12 @@ const PaginationGroup = forwardRef((props, ref) => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const [limit, setLimit] = useControlled(limitProp, 30);
   const [activePage, setActivePage] = useControlled(activePageProp, 1);
   const pages = Math.floor(total / limit) + (total % limit ? 1 : 0);
-  const classes = merge(className, withClassPrefix(size));
+  const classes = merge(className, withPrefix(size));
   const {
     getLocale
   } = useCustom();

package/esm/Panel/AccordionButton.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Icon from '@rsuite/icons/Icon';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const AccordionButton = props => {
   const {
     classPrefix = 'panel-btn',
@@ -18,21 +18,20 @@ const AccordionButton = props => {
   } = props;
   const {
     prefix,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   return /*#__PURE__*/React.createElement("button", _extends({
     id: id,
     type: "button",
     "aria-controls": controlId,
     "aria-expanded": expanded,
     "aria-disabled": disabled,
-    className: withClassPrefix(className),
+    className: withPrefix(className),
     disabled: disabled
   }, rest), children, /*#__PURE__*/React.createElement(Icon, {
     as: caretAs,
     "aria-hidden": "true",
     className: prefix`icon`,
-    rotate: expanded ? 180 : 0,
     "data-testid": "caret icon"
   }));
 };

package/esm/Panel/Panel.js

@@ -5,7 +5,7 @@ import PanelHeader from "./PanelHeader.js";
 import PanelBody from "./PanelBody.js";
 import useExpanded from "./hooks/useExpanded.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { PanelGroupContext } from "../PanelGroup/index.js";
 /**
@@ -50,8 +50,8 @@ const Panel = forwardRef((props, ref) => {
   const buttonId = `${id}-btn`;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const {
     onGroupSelect
   } = useContext(PanelGroupContext) || {};
@@ -66,7 +66,7 @@ const Panel = forwardRef((props, ref) => {
     onGroupSelect === null || onGroupSelect === void 0 || onGroupSelect(eventKey, event);
     setExpanded(!expanded);
   });
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     in: expanded,
     collapsible,
     bordered,

package/esm/Panel/PanelBody.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Collapse from "../Animation/Collapse.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import ScrollView from "../internals/ScrollView/index.js";
 const PanelBody = props => {
   const {
@@ -28,9 +28,9 @@ const PanelBody = props => {
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const bodyClasses = merge(className, withClassPrefix({
+    withPrefix
+  } = useStyles(classPrefix);
+  const bodyClasses = merge(className, withPrefix({
     fill: bodyFill
   }));
   const renderBody = bodyProps => {

package/esm/Panel/PanelHeader.js

@@ -4,7 +4,7 @@ import React, { isValidElement, cloneElement } from 'react';
 import get from 'lodash/get';
 import Heading from "../Heading/index.js";
 import AccordionButton from "./AccordionButton.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 const PanelHeader = props => {
   const {
     as: Component = Heading,
@@ -24,7 +24,7 @@ const PanelHeader = props => {
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   let headerElement;
   if (! /*#__PURE__*/isValidElement(children) || Array.isArray(children)) {
     headerElement = /*#__PURE__*/React.createElement("span", {

package/esm/PanelGroup/PanelGroup.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import { forwardRef } from "../internals/utils/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";
 export const PanelGroupContext = /*#__PURE__*/React.createContext({});
 
@@ -27,11 +27,11 @@ const PanelGroup = forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const [activeKey, setActiveKey] = useControlled(activeProp, defaultActiveKey);
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     accordion,
     bordered
   }));

package/esm/Placeholder/PlaceholderGraph.js

@@ -1,9 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef } from "../internals/utils/index.js";
+import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
 /**
  * The `Placeholder.Graph` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder
@@ -15,29 +15,28 @@ const PlaceholderGraph = forwardRef((props, ref) => {
   const {
     as: Component = 'div',
     className,
+    classPrefix = 'placeholder',
     width,
-    height = 200,
+    height,
     style,
     active,
-    classPrefix = 'placeholder',
     ...rest
   } = propsWithDefaults;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix('graph', {
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix('graph', {
     active
   }));
   const styles = {
-    width: width || '100%',
-    height,
-    ...style
+    '--rs-placeholder-graph-width': getCssValue(width),
+    '--rs-placeholder-graph-height': getCssValue(height)
   };
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes,
-    style: styles
+    style: mergeStyles(styles, style)
   }));
 });
 PlaceholderGraph.displayName = 'PlaceholderGraph';

package/esm/Placeholder/PlaceholderGrid.js

@@ -1,9 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef } from "../internals/utils/index.js";
+import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
 /**
  * The `Placeholder.Grid` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder
@@ -18,20 +18,24 @@ const PlaceholderGrid = forwardRef((props, ref) => {
     classPrefix = 'placeholder',
     rows = 5,
     columns = 5,
-    rowHeight = 10,
-    rowMargin = 20,
-    rowSpacing = rowMargin,
+    rowHeight,
+    rowSpacing,
     active,
+    style,
     ...rest
   } = propsWithDefaults;
   const {
     merge,
     prefix,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix('grid', {
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix('grid', {
     active
   }));
+  const styles = {
+    '--rs-placeholder-row-height': getCssValue(rowHeight),
+    '--rs-placeholder-row-spacing': getCssValue(rowSpacing)
+  };
   const items = useMemo(() => {
     const colItems = [];
     const rowClassName = prefix`row`;
@@ -41,10 +45,6 @@ const PlaceholderGrid = forwardRef((props, ref) => {
       for (let j = 0; j < rows; j++) {
         rowItems.push(/*#__PURE__*/React.createElement("div", {
           key: j,
-          style: {
-            height: rowHeight,
-            marginTop: j > 0 ? rowSpacing : undefined
-          },
           className: rowClassName
         }));
       }
@@ -57,7 +57,8 @@ const PlaceholderGrid = forwardRef((props, ref) => {
   }, [columns, prefix, rowHeight, rowSpacing, rows]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: mergeStyles(styles, style)
   }), items);
 });
 PlaceholderGrid.displayName = 'PlaceholderGrid';