rsuite 6.0.0-canary-2025031415 → 6.0.0-canary-20250319

package/cjs/Tabs/TabPanel.js

@@ -6,11 +6,12 @@ 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 _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 const TabPanel = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'tab-panel',
     children,
     active,
@@ -21,7 +22,8 @@ const TabPanel = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "tabpanel",
     ref: ref,
     tabIndex: 0,

package/cjs/Tabs/Tabs.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 /**
  * Props for the Tabs component.
  */
-export interface TabsProps extends WithAsProps {
+export interface TabsProps extends BoxProps {
     /**
      * The appearance of the tabs.
      * @default 'tabs'

package/cjs/Tabs/Tabs.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Nav = _interopRequireDefault(require("../Nav"));
 var _Tab = _interopRequireDefault(require("./Tab"));
 var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -118,7 +119,7 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
     rtl
   } = (0, _CustomProvider.useCustom)('Tabs', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'tabs',
     appearance = 'tabs',
     className,
@@ -184,7 +185,8 @@ const Tabs = (0, _utils.forwardRef)((props, ref) => {
     }
   });
   const hasChildren = _react.default.Children.toArray(children).some(child => /*#__PURE__*/_react.default.isValidElement(child) && child.props.children);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     className: merge(className, withPrefix({
       reversed,
       vertical

package/cjs/Tag/Tag.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { WithAsProps, Color } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { Color } from '../internals/types';
 import type { CommonLocale } from '../locales';
-export interface TagProps extends WithAsProps {
+export interface TagProps extends BoxProps {
     /** Different sizes */
     size?: 'lg' | 'md' | 'sm';
     /** A tag can have different colors */

package/cjs/Tag/Tag.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 var _utils = require("../internals/utils");
@@ -24,7 +25,7 @@ const Tag = (0, _utils.forwardRef)((props, ref) => {
     getLocale
   } = (0, _CustomProvider.useCustom)('Tag', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'tag',
     size = 'md',
     color,
@@ -46,7 +47,8 @@ const Tag = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix(size, (0, _utils.isPresetColor)(color) && color));
   const styles = (0, _react.useMemo)(() => (0, _utils.mergeStyles)(style, (0, _utils.createColorVariables)(color, '--rs-tag-bg', '--rs-tag-text')), [style, color]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes,
     style: styles

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/UploadTrigger.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import { ButtonProps } from '../Button';
 import type { UploaderLocale } from '../locales';
 export interface UploadTriggerProps extends ButtonProps {
+    children?: React.ReactElement<any>;
+    className?: string;
+    disabled?: boolean;
     name?: string;
     multiple?: boolean;
-    disabled?: boolean;
     readOnly?: boolean;
     draggable?: boolean;
     accept?: string;

package/cjs/Uploader/UploadTrigger.js

@@ -8,9 +8,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
+var _classnames = _interopRequireDefault(require("classnames"));
 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 UploadTrigger = (0, _utils.forwardRef)((props, ref) => {
+  var _children$props;
   const {
     as: Component = _Button.default,
     name,
@@ -34,11 +36,10 @@ const UploadTrigger = (0, _utils.forwardRef)((props, ref) => {
   const [dragOver, setDragOver] = (0, _react.useState)(false);
   const inputRef = (0, _react.useRef)(null);
   const {
-    merge,
     withPrefix,
     prefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix({
+  const classes = (0, _classnames.default)(className, withPrefix({
     disabled,
     customize: children,
     'drag-over': dragOver
@@ -82,19 +83,25 @@ const UploadTrigger = (0, _utils.forwardRef)((props, ref) => {
     root: rootRef.current,
     clearInput: handleClearInput
   }));
+
+  // Prepare button props with event handlers conditionally applied
   const buttonProps = {
     ...rest,
     disabled,
-    className: prefix('btn')
+    className: prefix('btn'),
+    // Only add event handlers if component is interactive
+    ...(!disabled && !readOnly && {
+      onClick: handleClick,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop
+    })
   };
-  if (!disabled && !readOnly) {
-    buttonProps.onClick = handleClick;
-    buttonProps.onDragEnter = handleDragEnter;
-    buttonProps.onDragLeave = handleDragLeave;
-    buttonProps.onDragOver = handleDragOver;
-    buttonProps.onDrop = handleDrop;
-  }
-  const trigger = children ? (/*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(children), buttonProps)) : /*#__PURE__*/_react.default.createElement(Component, buttonProps, locale === null || locale === void 0 ? void 0 : locale.upload);
+  const trigger = children ? (/*#__PURE__*/_react.default.cloneElement(children, {
+    ...buttonProps,
+    className: (0, _classnames.default)((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.className, prefix('btn'))
+  })) : /*#__PURE__*/_react.default.createElement(Component, buttonProps, locale === null || locale === void 0 ? void 0 : locale.upload);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: rootRef,
     className: classes