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

package/esm/Navbar/NavbarMegaMenu.js

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

package/esm/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/esm/Uploader/UploadTrigger.js

@@ -3,7 +3,9 @@ import React, { useRef, useState, useImperativeHandle } from 'react';
 import Button from "../Button/index.js";
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
+import classNames from 'classnames';
 const UploadTrigger = forwardRef((props, ref) => {
+  var _children$props;
   const {
     as: Component = Button,
     name,
@@ -27,11 +29,10 @@ const UploadTrigger = forwardRef((props, ref) => {
   const [dragOver, setDragOver] = useState(false);
   const inputRef = useRef(null);
   const {
-    merge,
     withPrefix,
     prefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix({
+  const classes = classNames(className, withPrefix({
     disabled,
     customize: children,
     'drag-over': dragOver
@@ -75,19 +76,25 @@ const UploadTrigger = 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.cloneElement(React.Children.only(children), buttonProps)) : /*#__PURE__*/React.createElement(Component, buttonProps, locale === null || locale === void 0 ? void 0 : locale.upload);
+  const trigger = children ? (/*#__PURE__*/React.cloneElement(children, {
+    ...buttonProps,
+    className: classNames((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.className, prefix('btn'))
+  })) : /*#__PURE__*/React.createElement(Component, buttonProps, locale === null || locale === void 0 ? void 0 : locale.upload);
   return /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
     className: classes

package/esm/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/esm/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/esm/internals/Box/Box.js

@@ -10,7 +10,6 @@ const Box = forwardRef((props, ref) => {
     classPrefix = 'box',
     className,
     children,
-    componentAs,
     visible,
     hidden,
     style,
@@ -23,13 +22,12 @@ const Box = forwardRef((props, ref) => {
     withPrefix
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix({
-    [`visible-${visible}`]: visible,
-    [`hidden-${hidden}`]: hidden
+    [`visible-from-${visible}`]: visible,
+    [`hidden-from-${hidden}`]: hidden
   }));
   const boxCSSVars = getBoxCSSVariables(boxProps);
   const boxStyle = mergeStyles(style, boxCSSVars);
-  const FinalComponent = componentAs || Component;
-  return /*#__PURE__*/React.createElement(FinalComponent, _extends({
+  return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     className: classes,
     style: boxStyle

package/internals/Box/styles/index.less

@@ -95,98 +95,63 @@
   }
 }
 
-// Mobile first breakpoint mixins
-.make-visible(@breakpoint) {
-  :where(.rs-box-visible-@{breakpoint}) {
+// Responsive visibility classes
+@media (max-width: (@screen-sm - 1)) {
+  :where(.rs-box-visible-from-xs) {
     display: none !important;
+  }
+}
+
+@media (min-width: @screen-sm) {
+  :where(.rs-box-hidden-from-xs) {
+    display: none !important;
+  }
+}
+
+@media (max-width: (@screen-md - 1)) {
+  :where(.rs-box-visible-from-sm) {
+    display: none !important;
+  }
+}
+
+@media (min-width: @screen-md) {
+  :where(.rs-box-hidden-from-sm) {
+    display: none !important;
+  }
+}
 
-    & when (@breakpoint = xs) {
-      @media (max-width: (@screen-sm - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = sm) {
-      @media (max-width: (@screen-md - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = md) {
-      @media (max-width: (@screen-lg - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = lg) {
-      @media (max-width: (@screen-xl - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = xl) {
-      @media (max-width: (@screen-xxl - 1)) {
-        display: var(--rs-box-display, inherit) !important;
-      }
-    }
-
-    & when (@breakpoint = xxl) {
-      display: var(--rs-box-display, inherit) !important;
-    }
+@media (max-width: (@screen-lg - 1)) {
+  :where(.rs-box-visible-from-md) {
+    display: none !important;
   }
 }
 
-.make-hidden(@breakpoint) {
-  :where(.rs-box-hidden-@{breakpoint}) {
-    display: var(--rs-box-display, inherit) !important;
-
-    & when (@breakpoint = xs) {
-      @media (max-width: (@screen-sm - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = sm) {
-      @media (max-width: (@screen-md - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = md) {
-      @media (max-width: (@screen-lg - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = lg) {
-      @media (max-width: (@screen-xl - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = xl) {
-      @media (max-width: (@screen-xxl - 1)) {
-        display: none !important;
-      }
-    }
-
-    & when (@breakpoint = xxl) {
-      display: none !important;
-    }
+@media (min-width: @screen-lg) {
+  :where(.rs-box-hidden-from-md) {
+    display: none !important;
   }
 }
 
-// Generate breakpoint classes
-.make-visible(xs);
-.make-visible(sm);
-.make-visible(md);
-.make-visible(lg);
-.make-visible(xl);
-.make-visible(xxl);
-
-.make-hidden(xs);
-.make-hidden(sm);
-.make-hidden(md);
-.make-hidden(lg);
-.make-hidden(xl);
-.make-hidden(xxl);
+@media (max-width: (@screen-xl - 1)) {
+  :where(.rs-box-visible-from-lg) {
+    display: none !important;
+  }
+}
+
+@media (min-width: @screen-xl) {
+  :where(.rs-box-hidden-from-lg) {
+    display: none !important;
+  }
+}
+
+@media (max-width: (@screen-xxl - 1)) {
+  :where(.rs-box-visible-from-xl) {
+    display: none !important;
+  }
+}
+
+@media (min-width: @screen-xxl) {
+  :where(.rs-box-hidden-from-xl) {
+    display: none !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-2025031415",
+  "version": "6.0.0-canary-20250315",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",