rsuite 6.0.0-canary-20250315 → 6.0.0-canary-20250319

package/cjs/TagGroup/TagGroup.d.ts

@@ -5,7 +5,5 @@ export type TagGroupProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/tag/
  */
-declare const TagGroup: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const TagGroup: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default TagGroup;

package/cjs/Text/Text.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { WithAsProps, Color, TextSize } from '../internals/types';
-export interface TextProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import { TextSize } from '../internals/types';
+export interface TextProps extends BoxProps {
     /**
      * The font color of the text.
      * Accepts preset colors or CSS color values
      */
-    color?: Color | React.CSSProperties['color'];
+    color?: BoxProps['c'];
     /**
      * The font size of the text.
      */

package/cjs/Text/Text.js

@@ -5,14 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
-var _types = require("../internals/types");
-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 fontSizes = Object.values(_types.TypographySizeEnum);
 /**
  *
  * The `Text` component is used to display text.
@@ -24,7 +21,7 @@ const Text = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Text', props);
   const {
-    as: Component = 'p',
+    as = 'p',
     align,
     classPrefix = 'text',
     color,
@@ -39,29 +36,21 @@ const Text = (0, _utils.forwardRef)((props, ref) => {
   } = propsWithDefaults;
   const {
     withPrefix,
+    cssVar,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  const hasSize = size && fontSizes.includes(size);
-  const classes = merge(className, withPrefix((0, _utils.isPresetColor)(color) && color, align, weight, transform, hasSize && size, {
+  const classes = merge(className, withPrefix(align, weight, transform, {
     muted,
     ellipsis: maxLines
   }));
-  const styles = (0, _react.useMemo)(() => {
-    const textStyles = (0, _utils.mergeStyles)({
-      ...(maxLines ? {
-        WebkitLineClamp: maxLines
-      } : null)
-    }, (0, _utils.createColorVariables)(color, '--rs-text-color'), style);
-    if (size && !hasSize) {
-      textStyles.fontSize = size;
-    }
-    return textStyles;
-  }, [style, color, size, maxLines]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const styles = (0, _utils.mergeStyles)(style, (0, _utils.getSizeStyle)(size, 'font'), cssVar('max-lines', maxLines));
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    c: color,
     ref: ref,
     className: classes,
     style: styles
-  }));
+  }, rest));
 });
 Text.displayName = 'Text';
 var _default = exports.default = Text;

package/cjs/Timeline/Timeline.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface TimelineProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface TimelineProps extends BoxProps {
     /** The content of the component */
     children?: React.ReactNode;
     /** TimeLine content relative position  **/

package/cjs/Timeline/Timeline.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _some = _interopRequireDefault(require("lodash/some"));
 var _TimelineItem = _interopRequireDefault(require("./TimelineItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
@@ -29,8 +30,8 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Timeline', props);
   const {
+    as = 'ul',
     children,
-    as: Component = 'ul',
     classPrefix = 'timeline',
     className,
     align = 'left',
@@ -51,10 +52,11 @@ const Timeline = (0, _utils.forwardRef)((props, ref) => {
     endless,
     'with-time': withTime
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
-  }), _utils.ReactChildren.mapCloneElement(children, (_child, index) => ({
+  }, rest), _utils.ReactChildren.mapCloneElement(children, (_child, index) => ({
     last: index + 1 === count,
     INTERNAL_active: isItemActive(index, count),
     align

package/cjs/Timeline/TimelineItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface TimelineItemProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface TimelineItemProps extends BoxProps {
     /**
      * Whether the last item
      *

package/cjs/Timeline/TimelineItem.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 /**
@@ -15,7 +16,7 @@ var _utils = require("../internals/utils");
  */
 const TimelineItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     children,
     classPrefix = 'timeline-item',
     last: DEPRECATED_last,
@@ -34,10 +35,11 @@ const TimelineItem = (0, _utils.forwardRef)((props, ref) => {
     last: DEPRECATED_last,
     active: INTERNAL_active
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }, rest), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('tail')
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('dot', {

package/cjs/Toggle/Toggle.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { SanitizedInputProps, WithAsProps, Color, Size } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { SanitizedInputProps, Color, Size } from '../internals/types';
 import type { ToggleLocale } from '../locales';
-export interface ToggleProps extends WithAsProps, SanitizedInputProps {
+export interface ToggleProps extends BoxProps, SanitizedInputProps {
     /**
      * The color of the toggle.
      */

package/cjs/Toggle/Toggle.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var _Loader = _interopRequireDefault(require("../Loader"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -23,7 +24,7 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Toggle', props);
   const {
-    as: Component = 'span',
+    as = 'label',
     disabled,
     readOnly,
     loading = false,
@@ -72,7 +73,8 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
   if (plaintext) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, null, inner || label);
   }
-  return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
   }, restProps), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, {
@@ -90,7 +92,7 @@ const Toggle = (0, _utils.forwardRef)((props, ref) => {
     "aria-labelledby": labelledby,
     "aria-label": labelledby ? undefined : label,
     "aria-busy": loading || undefined
-  })), /*#__PURE__*/_react.default.createElement(Component, {
+  })), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('presentation')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('inner'),

package/cjs/Tooltip/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { Placement, WithAsProps } from '../internals/types';
-export interface TooltipProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Placement } from '../internals/types';
+export interface TooltipProps extends BoxProps {
     /** Dispaly placement */
     placement?: Placement;
     /** Whether visible */

package/cjs/Tooltip/Tooltip.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -21,7 +22,7 @@ const Tooltip = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Tooltip', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'tooltip',
     children,
@@ -40,7 +41,8 @@ const Tooltip = (0, _utils.forwardRef)((props, ref) => {
   const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, {
     ['--rs-opacity']: visible ? 1 : undefined
   }), [visible, style]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "tooltip"
   }, rest, {
     ref: ref,

package/cjs/Tree/Tree.d.ts

@@ -1,4 +1,4 @@
-import { type TreeViewProps } from './TreeView';
+import { TreeViewProps } from './TreeView';
 import type { TreeExtraProps, WithTreeDragProps } from './types';
 export interface TreeProps<T = string | number | null> extends WithTreeDragProps<TreeViewProps<T>>, TreeExtraProps {
     /**

package/cjs/Tree/TreeNode.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 import type { TreeNode as TreeNodeData } from '../internals/Tree/types';
 export type DragStatus = 'drag-over' | 'drag-over-top' | 'drag-over-bottom';
 interface TreeDragEventProps {
@@ -31,7 +31,7 @@ interface TreeDragEventProps {
 /**
  * Props for the TreeNode component.
  */
-export interface TreeNodeProps extends WithAsProps, TreeDragEventProps {
+export interface TreeNodeProps extends BoxProps, TreeDragEventProps {
     /**
      * The layer of the node in the tree hierarchy.
      */

package/cjs/Tree/TreeNode.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _TreeNodeToggle = _interopRequireDefault(require("./TreeNodeToggle"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _TreeProvider = require("../internals/Tree/TreeProvider");
@@ -20,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const TreeNode = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     label,
     layer,
     active,
@@ -107,9 +108,10 @@ const TreeNode = (0, _utils.forwardRef)((props, ref) => {
   }));
   const treeItemRef = (0, _hooks.useFocusVirtualListItem)(focus);
   const styles = virtualized ? (0, _utils.mergeStyles)(style, (0, _utils2.indentTreeNode)(rtl, layer - 1)) : style;
-  return visible ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
-    ref: (0, _utils.mergeRefs)(treeItemRef, ref),
+  return visible ? /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "treeitem",
+    ref: (0, _utils.mergeRefs)(treeItemRef, ref),
     tabIndex: -1,
     "aria-expanded": expanded,
     "aria-label": labelStr,
@@ -129,7 +131,7 @@ const TreeNode = (0, _utils.forwardRef)((props, ref) => {
     onDragLeave: handleDragLeave,
     onDragEnd: handleDragEnd,
     onDrop: handleDrop
-  }), /*#__PURE__*/_react.default.createElement(_TreeNodeToggle.default, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_TreeNodeToggle.default, {
     "aria-label": (expanded ? 'Collapse' : 'Expand') + ` ${labelStr}`,
     data: nodeData,
     loading: loading,

package/cjs/Tree/TreeView.js

@@ -15,6 +15,7 @@ var _useFocusTree = _interopRequireDefault(require("./hooks/useFocusTree"));
 var _useVirtualizedTreeData = _interopRequireDefault(require("./hooks/useVirtualizedTreeData"));
 var _useTreeNodeProps = _interopRequireDefault(require("./hooks/useTreeNodeProps"));
 var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _Windowing = require("../internals/Windowing");
 var _utils = require("../internals/utils");
 var _utils2 = require("../internals/Tree/utils");
@@ -35,7 +36,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const TreeView = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     data = [],
     style,
     showIndentLine,
@@ -256,7 +257,8 @@ const TreeView = (0, _utils.forwardRef)((props, ref) => {
     virtualized
   }), className);
   const formattedNodes = getFormattedNodes(renderNode);
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     ref: ref,
     className: classes,
     style: style

package/cjs/Tree/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { StandardProps } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
 import type { ListProps } from '../internals/Windowing';
 import type { TreeNode } from '../internals/Tree/types';
 /**
@@ -80,7 +80,7 @@ export type WithTreeDragProps<P> = P & TreeDragProps;
 /**
  * Represents the props for the Tree component.
  */
-export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends StandardProps {
+export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends BoxProps {
     /**
      * The height of the tree.
      */

package/cjs/TreePicker/TreePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type TreeViewProps } from '../Tree/TreeView';
+import { TreeViewProps } from '../Tree/TreeView';
 import { PickerLocale } from '../locales';
 import { PickerToggleProps } from '../internals/Picker';
 import { TreeNode } from '../internals/Tree/types';

package/cjs/TreePicker/TreePicker.js

@@ -15,6 +15,7 @@ var _useFlattenTree = _interopRequireDefault(require("../Tree/hooks/useFlattenTr
 var _useFocusState = _interopRequireDefault(require("./hooks/useFocusState"));
 var _useExpandTree = _interopRequireDefault(require("../Tree/hooks/useExpandTree"));
 var _TreeView = _interopRequireDefault(require("../Tree/TreeView"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _utils2 = require("../Tree/utils");
@@ -33,7 +34,7 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('TreePicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     classPrefix = 'picker',
     cleanable = true,
@@ -267,7 +268,8 @@ const TreePicker = (0, _utils.forwardRef)((props, ref) => {
     ref: trigger,
     placement: placement,
     speaker: renderTreeView
-  }, triggerProps), /*#__PURE__*/_react.default.createElement(Component, {
+  }, triggerProps), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/cjs/Uploader/UploadFileItem.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import type { FileType } from './Uploader';
-import type { WithAsProps } from '../internals/types';
 import type { UploaderLocale } from '../locales';
-export interface UploadFileItemProps extends WithAsProps {
+export interface UploadFileItemProps extends BoxProps {
     file: FileType;
     listType?: 'text' | 'picture-text' | 'picture';
     disabled?: boolean;

package/cjs/Uploader/UploadFileItem.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Attachment = _interopRequireDefault(require("@rsuite/icons/Attachment"));
 var _Reload = _interopRequireDefault(require("@rsuite/icons/Reload"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _previewFile = require("./utils/previewFile");
@@ -39,7 +40,7 @@ const formatSize = function (size) {
 exports.formatSize = formatSize;
 const UploadFileItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     disabled,
     allowReupload = true,
     file,
@@ -245,18 +246,24 @@ const UploadFileItem = (0, _utils.forwardRef)((props, ref) => {
     }, renderFileInfo ? renderFileInfo(file, fileElement) : fileElement, renderErrorStatus(), renderFileSize()));
   };
   if (listType === 'picture') {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as
+    }, rest, {
       ref: ref,
       className: classes
     }), renderIcon(), renderPreview(), renderErrorStatus(), renderRemoveButton());
   }
   if (listType === 'picture-text') {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as
+    }, rest, {
       ref: ref,
       className: classes
     }), renderIcon(), renderPreview(), renderFilePanel(), renderProgressBar(), renderRemoveButton());
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), renderIcon(), renderFilePanel(), renderProgressBar(), renderRemoveButton());

package/cjs/Uploader/Uploader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ErrorStatus } from './utils/ajaxUpload';
 import { UploadTriggerProps } from './UploadTrigger';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 import type { UploaderLocale } from '../locales';
 export interface FileType {
     /** File Name */
@@ -21,7 +21,7 @@ export interface UploaderInstance {
     root: HTMLElement;
     start: (file?: FileType) => void;
 }
-export interface UploaderProps extends WithAsProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
+export interface UploaderProps extends BoxProps, Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {
     /**
      * Custom ref for Uploader
      */

package/cjs/Uploader/Uploader.js

@@ -11,6 +11,7 @@ var _UploadFileItem = _interopRequireDefault(require("./UploadFileItem"));
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
 var _ajaxUpload = _interopRequireDefault(require("./utils/ajaxUpload"));
 var _UploadTrigger = _interopRequireDefault(require("./UploadTrigger"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -98,7 +99,7 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Uploader', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'uploader',
     className,
     listType = 'text',
@@ -388,7 +389,8 @@ const Uploader = (0, _utils.forwardRef)((props, ref) => {
   if (listType === 'picture') {
     renderList.reverse();
   }
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     ref: rootRef,
     className: classes,
     style: style

package/cjs/VisuallyHidden/VisuallyHidden.d.ts

@@ -6,8 +6,5 @@ export type VisuallyHiddenProps = ComponentProps;
  * @version 5.52.0
  * @see https://rsuitejs.com/components/visually-hidden/
  */
-declare const VisuallyHidden: import("../internals/types").InternalRefForwardingComponent<"span", Partial<{
-    name: string;
-    componentAs: "span";
-}>, never> & Record<string, never>;
+declare const VisuallyHidden: import("../internals/types").InternalRefForwardingComponent<"span", Partial<ComponentProps>, never> & Record<string, never>;
 export default VisuallyHidden;

package/cjs/internals/Box/Box.d.ts

@@ -1,12 +1,10 @@
 import { CSSProperties as CSS } from 'react';
 import type { WithAsProps, Breakpoints, ColorScheme, Size } from '../types';
 export interface BoxProps extends WithAsProps {
-    /** Override the 'as' prop when Box is used as a base component */
-    componentAs?: WithAsProps['as'];
-    /** Breakpoint below which the component is hidden with `display: none` */
-    visible?: Breakpoints;
+    /** Breakpoint below which the component is shown with `display: block` */
+    showFrom?: Breakpoints;
     /** Breakpoint above which the component is hidden with `display: none` */
-    hidden?: Breakpoints;
+    hideFrom?: Breakpoints;
     /** Display property */
     display?: CSS['display'];
     /** Padding */
@@ -29,15 +27,21 @@ export interface BoxProps extends WithAsProps {
     w?: CSS['width'];
     h?: CSS['height'];
     /** Box Color */
-    color?: ColorScheme | CSS['color'];
+    c?: ColorScheme | CSS['color'];
+    /** Box Border */
+    bd?: CSS['border'];
     /** Box Background */
     bg?: ColorScheme | CSS['backgroundColor'];
     /** Box Border Radius */
     rounded?: Size | CSS['borderRadius'] | 'full';
-    /** Box Border */
-    border?: CSS['border'];
     /** Box Shadow */
     shadow?: Size | CSS['boxShadow'];
 }
+/**
+ * Box component is the base component for all components,
+ * providing shorthand for style properties.
+ *
+ * @see https://rsuitejs.com/components/box
+ */
 declare const Box: import("../types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>;
 export default Box;

package/cjs/internals/Box/Box.js

@@ -6,35 +6,37 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _utils = require("../utils");
-var _hooks = require("../hooks");
+var _forwardRef = require("../utils/forwardRef");
 var _utils2 = require("./utils");
-const Box = (0, _utils.forwardRef)((props, ref) => {
+/**
+ * Box component is the base component for all components,
+ * providing shorthand for style properties.
+ *
+ * @see https://rsuitejs.com/components/box
+ */
+const Box = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
     as: Component = 'div',
-    classPrefix = 'box',
     className,
     children,
-    visible,
-    hidden,
+    showFrom,
+    hideFrom,
     style,
     ...rest
   } = props;
   const boxProps = (0, _utils2.extractBoxProps)(rest);
   const domProps = (0, _utils2.omitBoxProps)(rest);
-  const {
-    merge,
-    withPrefix
-  } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix({
-    [`visible-from-${visible}`]: visible,
-    [`hidden-from-${hidden}`]: hidden
-  }));
   const boxCSSVars = (0, _utils2.getBoxCSSVariables)(boxProps);
   const boxStyle = (0, _utils.mergeStyles)(style, boxCSSVars);
+  const isBox = !(0, _isEmpty.default)(boxCSSVars) || showFrom || hideFrom;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
-    className: classes,
+    "data-rs": isBox ? 'box' : undefined,
+    "data-visible-from": showFrom,
+    "data-hidden-from": hideFrom,
+    className: className,
     style: boxStyle
   }, domProps), children);
 });

package/cjs/internals/Box/utils.js

@@ -33,7 +33,7 @@ const sizeStyleMap = {
 };
 
 // Derive box property keys from style mappings
-const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'rounded', 'border', 'shadow', 'display', 'color', 'bg'];
+const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'bd', 'bg', 'c', 'display', 'rounded', 'shadow'];
 
 /**
  * Extract box properties from props
@@ -99,14 +99,14 @@ const getBoxCSSVariables = props => {
       cssVars[`--rs-box-${propKey}`] = (0, _utils.getCssValue)(props[propKey]);
     }
   });
-  if (props.border !== undefined) {
-    cssVars['--rs-box-border'] = (0, _utils.getCssValue)(props.border);
+  if (props.bd !== undefined) {
+    cssVars['--rs-box-bd'] = (0, _utils.getCssValue)(props.bd);
   }
   if (props.display !== undefined) {
     cssVars['--rs-box-display'] = props.display;
   }
-  if (props.color !== undefined) {
-    cssVars['--rs-box-color'] = (0, _utils.getColorVar)(props.color);
+  if (props.c !== undefined) {
+    cssVars['--rs-box-c'] = (0, _utils.getColorVar)(props.c);
   }
   if (props.bg !== undefined) {
     cssVars['--rs-box-bg'] = (0, _utils.getColorVar)(props.bg);