rsuite 6.0.0-canary-2025031415 → 6.0.0-canary-20250315

package/Box/styles/index.css

@@ -77,91 +77,53 @@
 :where(.rs-box)[style*='--rs-box-shadow'] {
   box-shadow: var(--rs-box-shadow);
 }
-:where(.rs-box-visible-xs) {
-  display: none !important;
-}
 @media (max-width: 575px) {
-  :where(.rs-box-visible-xs) {
-    display: var(--rs-box-display, inherit) !important;
-  }
-}
-:where(.rs-box-visible-sm) {
-  display: none !important;
-}
-@media (max-width: 767px) {
-  :where(.rs-box-visible-sm) {
-    display: var(--rs-box-display, inherit) !important;
-  }
-}
-:where(.rs-box-visible-md) {
-  display: none !important;
-}
-@media (max-width: 991px) {
-  :where(.rs-box-visible-md) {
-    display: var(--rs-box-display, inherit) !important;
-  }
-}
-:where(.rs-box-visible-lg) {
-  display: none !important;
-}
-@media (max-width: 1199px) {
-  :where(.rs-box-visible-lg) {
-    display: var(--rs-box-display, inherit) !important;
-  }
-}
-:where(.rs-box-visible-xl) {
-  display: none !important;
-}
-@media (max-width: 1399px) {
-  :where(.rs-box-visible-xl) {
-    display: var(--rs-box-display, inherit) !important;
+  :where(.rs-box-visible-from-xs) {
+    display: none !important;
   }
 }
-:where(.rs-box-visible-xxl) {
-  display: none !important;
-  display: var(--rs-box-display, inherit) !important;
-}
-:where(.rs-box-hidden-xs) {
-  display: var(--rs-box-display, inherit) !important;
-}
-@media (max-width: 575px) {
-  :where(.rs-box-hidden-xs) {
+@media (min-width: 576px) {
+  :where(.rs-box-hidden-from-xs) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-sm) {
-  display: var(--rs-box-display, inherit) !important;
-}
 @media (max-width: 767px) {
-  :where(.rs-box-hidden-sm) {
+  :where(.rs-box-visible-from-sm) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-md) {
-  display: var(--rs-box-display, inherit) !important;
+@media (min-width: 768px) {
+  :where(.rs-box-hidden-from-sm) {
+    display: none !important;
+  }
 }
 @media (max-width: 991px) {
-  :where(.rs-box-hidden-md) {
+  :where(.rs-box-visible-from-md) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-lg) {
-  display: var(--rs-box-display, inherit) !important;
+@media (min-width: 992px) {
+  :where(.rs-box-hidden-from-md) {
+    display: none !important;
+  }
 }
 @media (max-width: 1199px) {
-  :where(.rs-box-hidden-lg) {
+  :where(.rs-box-visible-from-lg) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-xl) {
-  display: var(--rs-box-display, inherit) !important;
+@media (min-width: 1200px) {
+  :where(.rs-box-hidden-from-lg) {
+    display: none !important;
+  }
 }
 @media (max-width: 1399px) {
-  :where(.rs-box-hidden-xl) {
+  :where(.rs-box-visible-from-xl) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-xxl) {
-  display: var(--rs-box-display, inherit) !important;
-  display: none !important;
+@media (min-width: 1400px) {
+  :where(.rs-box-hidden-from-xl) {
+    display: none !important;
+  }
 }

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [5.78.1](https://github.com/rsuite/rsuite/compare/v5.78.0...v5.78.1) (2025-03-14)
+
+
+### Bug Fixes
+
+* **Uploader:** refine children prop type and improve class handling ([#4175](https://github.com/rsuite/rsuite/issues/4175)) ([58d3eea](https://github.com/rsuite/rsuite/commit/58d3eea86e186590586a14068773a8418fb5f3f9))
+
+
+
 # [5.78.0](https://github.com/rsuite/rsuite/compare/v5.77.1...v5.78.0) (2025-02-21)
 
 

package/Popover/styles/index.css

@@ -139,7 +139,7 @@
   transition: opacity 0.1s linear, transform 0.1s ease-out;
 }
 .rs-popover.rs-anim-in {
-  opacity: 1;
+  --rs-popover-opacity: 1;
   transition: opacity 0.15s linear, transform 0.15s ease-in;
 }
 .rs-theme-high-contrast .rs-popover {

package/Popover/styles/index.less

@@ -36,7 +36,8 @@
   }
 
   &.rs-anim-in {
-    opacity: 1;
+    --rs-popover-opacity: 1;
+
     transition:
       opacity 0.15s linear,
       transform 0.15s ease-in;

package/cjs/Navbar/NavbarMegaMenu.js

@@ -30,14 +30,16 @@ const NavbarMegaMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
-  const renderMenu = (0, _react.useCallback)((_ref, ref) => {
-    let {
-      onClose
-    } = _ref;
+  const renderMenu = (0, _react.useCallback)((menuProps, ref) => {
+    const {
+      onClose,
+      className
+    } = menuProps;
     return /*#__PURE__*/_react.default.createElement(_Popover.default, {
       ref: ref,
       full: true,
-      arrow: false
+      arrow: false,
+      className: className
     }, typeof children === 'function' ? children({
       onClose
     }) : children);

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

package/cjs/Uploader/Uploader.d.ts

@@ -33,7 +33,7 @@ export interface UploaderProps extends WithAsProps, Omit<UploadTriggerProps, 'on
     /** Automatically upload files after selecting them */
     autoUpload?: boolean;
     /** Primary content */
-    children?: React.ReactNode;
+    children?: React.ReactElement;
     /** List of uploaded files */
     defaultFileList?: FileType[];
     /** List of uploaded files （Controlled） */

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

@@ -3,9 +3,9 @@ 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'];
-    /** Display element */
+    /** Breakpoint below which the component is hidden with `display: none` */
     visible?: Breakpoints;
-    /** Hide element */
+    /** Breakpoint above which the component is hidden with `display: none` */
     hidden?: Breakpoints;
     /** Display property */
     display?: CSS['display'];

package/cjs/internals/Box/Box.js

@@ -15,7 +15,6 @@ const Box = (0, _utils.forwardRef)((props, ref) => {
     classPrefix = 'box',
     className,
     children,
-    componentAs,
     visible,
     hidden,
     style,
@@ -28,13 +27,12 @@ const Box = (0, _utils.forwardRef)((props, ref) => {
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix({
-    [`visible-${visible}`]: visible,
-    [`hidden-${hidden}`]: hidden
+    [`visible-from-${visible}`]: visible,
+    [`hidden-from-${hidden}`]: hidden
   }));
   const boxCSSVars = (0, _utils2.getBoxCSSVariables)(boxProps);
   const boxStyle = (0, _utils.mergeStyles)(style, boxCSSVars);
-  const FinalComponent = componentAs || Component;
-  return /*#__PURE__*/_react.default.createElement(FinalComponent, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     className: classes,
     style: boxStyle

package/dist/rsuite-no-reset-rtl.css

@@ -10295,7 +10295,7 @@ textarea.rs-input {
   transition: opacity 0.1s linear, transform 0.1s ease-out;
 }
 .rs-popover.rs-anim-in {
-  opacity: 1;
+  --rs-popover-opacity: 1;
   transition: opacity 0.15s linear, transform 0.15s ease-in;
 }
 .rs-theme-high-contrast .rs-popover {
@@ -14916,91 +14916,53 @@ kbd.rs-text {
 :where(.rs-box)[style*='--rs-box-shadow'] {
   box-shadow: var(--rs-box-shadow);
 }
-:where(.rs-box-visible-xs) {
-  display: none !important;
-}
 @media (max-width: 575px) {
-  :where(.rs-box-visible-xs) {
-    display: var(--rs-box-display, inherit) !important;
-  }
-}
-:where(.rs-box-visible-sm) {
-  display: none !important;
-}
-@media (max-width: 767px) {
-  :where(.rs-box-visible-sm) {
-    display: var(--rs-box-display, inherit) !important;
-  }
-}
-:where(.rs-box-visible-md) {
-  display: none !important;
-}
-@media (max-width: 991px) {
-  :where(.rs-box-visible-md) {
-    display: var(--rs-box-display, inherit) !important;
-  }
-}
-:where(.rs-box-visible-lg) {
-  display: none !important;
-}
-@media (max-width: 1199px) {
-  :where(.rs-box-visible-lg) {
-    display: var(--rs-box-display, inherit) !important;
-  }
-}
-:where(.rs-box-visible-xl) {
-  display: none !important;
-}
-@media (max-width: 1399px) {
-  :where(.rs-box-visible-xl) {
-    display: var(--rs-box-display, inherit) !important;
+  :where(.rs-box-visible-from-xs) {
+    display: none !important;
   }
 }
-:where(.rs-box-visible-xxl) {
-  display: none !important;
-  display: var(--rs-box-display, inherit) !important;
-}
-:where(.rs-box-hidden-xs) {
-  display: var(--rs-box-display, inherit) !important;
-}
-@media (max-width: 575px) {
-  :where(.rs-box-hidden-xs) {
+@media (min-width: 576px) {
+  :where(.rs-box-hidden-from-xs) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-sm) {
-  display: var(--rs-box-display, inherit) !important;
-}
 @media (max-width: 767px) {
-  :where(.rs-box-hidden-sm) {
+  :where(.rs-box-visible-from-sm) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-md) {
-  display: var(--rs-box-display, inherit) !important;
+@media (min-width: 768px) {
+  :where(.rs-box-hidden-from-sm) {
+    display: none !important;
+  }
 }
 @media (max-width: 991px) {
-  :where(.rs-box-hidden-md) {
+  :where(.rs-box-visible-from-md) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-lg) {
-  display: var(--rs-box-display, inherit) !important;
+@media (min-width: 992px) {
+  :where(.rs-box-hidden-from-md) {
+    display: none !important;
+  }
 }
 @media (max-width: 1199px) {
-  :where(.rs-box-hidden-lg) {
+  :where(.rs-box-visible-from-lg) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-xl) {
-  display: var(--rs-box-display, inherit) !important;
+@media (min-width: 1200px) {
+  :where(.rs-box-hidden-from-lg) {
+    display: none !important;
+  }
 }
 @media (max-width: 1399px) {
-  :where(.rs-box-hidden-xl) {
+  :where(.rs-box-visible-from-xl) {
     display: none !important;
   }
 }
-:where(.rs-box-hidden-xxl) {
-  display: var(--rs-box-display, inherit) !important;
-  display: none !important;
+@media (min-width: 1400px) {
+  :where(.rs-box-hidden-from-xl) {
+    display: none !important;
+  }
 }