rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250424

package/esm/Input/Input.js

@@ -1,15 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import Plaintext from "../internals/Plaintext/index.js";
-import Box from "../internals/Box/index.js";
+import InputBase from "../internals/InputBase/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useFormGroup } from "../FormGroup/index.js";
 import { InputGroupContext } from "../InputGroup/InputGroup.js";
-import { KEY_VALUES } from "../internals/constants/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { createChainedFunction, mergeRefs } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useCustom } from "../internals/hooks/index.js";
 /**
  * The `<Input>` component is used to get user input in a text field.
  *
@@ -21,79 +16,22 @@ const Input = forwardRef((props, ref) => {
   } = useCustom('Input', props);
   const inputGroup = useContext(InputGroupContext);
   const {
-    as = 'input',
-    className,
-    classPrefix = 'input',
     type = 'text',
-    disabled,
-    value,
-    defaultValue,
-    inputRef,
-    id,
-    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
     htmlSize,
-    plaintext,
-    placeholder,
-    readOnly,
-    onPressEnter,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    onChange,
+    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
+    classPrefix = 'input',
     ...rest
   } = propsWithDefaults;
-  const handleKeyDown = event => {
-    if (event.key === KEY_VALUES.ENTER) {
-      onPressEnter === null || onPressEnter === void 0 || onPressEnter(event);
-    }
-    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-  };
-  const handleChange = event => {
-    var _event$target;
-    onChange === null || onChange === void 0 || onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
-  };
-  const {
-    withPrefix,
-    merge
-  } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    plaintext
-  }));
-  const {
-    controlId
-  } = useFormGroup();
-
-  // Make the Input component display in plain text,
-  // and display default characters when there is no value.
-  if (plaintext) {
-    return /*#__PURE__*/React.createElement(Plaintext, {
-      ref: ref,
-      localeKey: "unfilled",
-      placeholder: placeholder
-    }, typeof value === 'undefined' ? defaultValue : value);
-  }
-  const inputable = !disabled && !readOnly;
-  const eventProps = {};
-  if (inputable) {
-    eventProps.onChange = handleChange;
-    eventProps.onKeyDown = handleKeyDown;
-    eventProps.onFocus = createChainedFunction(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
-    eventProps.onBlur = createChainedFunction(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
-  }
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: as
-  }, rest, eventProps, {
-    ref: mergeRefs(ref, inputRef),
-    className: classes,
+  return /*#__PURE__*/React.createElement(InputBase, _extends({
+    as: "input",
+    ref: ref,
+    classPrefix: classPrefix,
+    size: size,
     type: type,
-    id: id || controlId,
-    value: value,
-    defaultValue: defaultValue,
-    disabled: disabled,
-    readOnly: readOnly,
-    size: htmlSize,
-    placeholder: placeholder
-  }));
+    inputProps: {
+      size: htmlSize
+    }
+  }, rest));
 });
 Input.displayName = 'Input';
 export default Input;

package/esm/InputGroup/InputGroup.js

@@ -5,8 +5,7 @@ import Box from "../internals/Box/index.js";
 import InputGroupAddon from "./InputGroupAddon.js";
 import InputGroupButton from "./InputGroupButton.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 export const InputGroupContext = /*#__PURE__*/React.createContext(null);
 const Subcomponents = {
   Addon: InputGroupAddon,

package/esm/InputNumber/index.d.ts

@@ -1,4 +1,14 @@
-import InputNumber from './InputNumber';
-export type { InputNumberProps } from './InputNumber';
+/// <reference types="react" />
+import { NumberInputProps as InputNumberProps } from '../NumberInput';
+/**
+ * The `InputNumber` component is used to enter a numerical value.
+ * @see https://rsuitejs.com/components/number-input
+ * @deprecated Use `NumberInput` instead.
+ */
+declare const InputNumber: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("..").InputGroupProps, never> & {
+    Addon: import("../internals/types").InternalRefForwardingComponent<"span", import("..").InputGroupAddonProps, never> & Record<string, never>;
+    Button: import("react").ForwardRefExoticComponent<import("..").ButtonProps & import("react").RefAttributes<any>>;
+}, InputNumberProps<string | number | null>, never> & Record<string, never>;
+export type { InputNumberProps };
 export { InputNumber };
 export default InputNumber;

package/esm/InputNumber/index.js

@@ -1,5 +1,12 @@
 'use client';
-import InputNumber from "./InputNumber.js";
+import NumberInput from "../NumberInput/index.js";
+
+/**
+ * The `InputNumber` component is used to enter a numerical value.
+ * @see https://rsuitejs.com/components/number-input
+ * @deprecated Use `NumberInput` instead.
+ */
+const InputNumber = NumberInput;
 
 // export types
 

package/esm/InputPicker/InputPicker.js

@@ -14,11 +14,10 @@ import useInput from "./hooks/useInput.js";
 import useData from "./hooks/useData.js";
 import Plaintext from "../internals/Plaintext/index.js";
 import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
 import { useTagContext } from "./InputPickerContext.js";
 import { convertSize } from "./utils.js";
-import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef, shallowEqual, getDataGroupBy, createChainedFunction, tplTransform, mergeRefs, isOneOf, mergeStyles } from "../internals/utils/index.js";
 import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, useSearch, usePickerRef, useToggleKeyDownEvent, triggerPropKeys } from "../internals/Picker/index.js";
 import { getPositionStyle } from "../internals/Overlay/Position.js";

package/esm/InputPicker/utils.d.ts

@@ -1 +1 @@
-export declare const convertSize: (size?: string) => "sm" | "md" | "lg";
+export declare const convertSize: (size?: string) => "lg" | "md" | "sm";

package/esm/Kbd/Kbd.js

@@ -3,8 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  *
  * The `Kbd` component is used to display a Kbd.

package/esm/Link/Link.js

@@ -2,8 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import SafeAnchor from "../internals/SafeAnchor/index.js";
 import ExternalLinkIcon from "./ExternalLinkIcon.js";
 const Link = forwardRef((props, ref) => {

package/esm/List/List.js

@@ -5,9 +5,8 @@ import useSortHelper from "./helper/useSortHelper.js";
 import ListContext from "./ListContext.js";
 import ListItem from "./ListItem.js";
 import Box from "../internals/Box/index.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 const Subcomponents = {
   Item: ListItem
 };

package/esm/Loader/Loader.js

@@ -3,8 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles, useUniqueId } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useUniqueId } from "../internals/hooks/index.js";
 /**
  * The `Loader` component is used to indicate the loading state of a page or a section.
  * @see https://rsuitejs.com/components/loader

package/esm/MaskedInput/MaskedInput.js

@@ -4,7 +4,7 @@ import React from 'react';
 import TextMask from "./TextMask.js";
 import Input from "../Input/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useCustom } from "../internals/hooks/index.js";
 const MaskedInput = forwardRef((props, ref) => {
   const {
     propsWithDefaults

package/esm/Message/Message.js

@@ -6,8 +6,7 @@ import useDelayedClosure from "../toaster/hooks/useDelayedClosure.js";
 import Box from "../internals/Box/index.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 import { MESSAGE_STATUS_ICONS } from "../internals/constants/statusIcons.js";
-import { useStyles, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useIsMounted, useEventCallback } from "../internals/hooks/index.js";
 /**
  * The `Message` component is used to display important messages to users.
  * @see https://rsuitejs.com/components/message

package/esm/Modal/Modal.js

@@ -11,11 +11,10 @@ import ModalBody from "./ModalBody.js";
 import ModalHeader from "./ModalHeader.js";
 import ModalTitle from "./ModalTitle.js";
 import ModalFooter from "./ModalFooter.js";
-import { useStyles, useWillUnmount, useUniqueId } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useWillUnmount, useUniqueId } from "../internals/hooks/index.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 import { ModalContext } from "./ModalContext.js";
 import { useBodyStyles } from "./utils.js";
-import { useCustom } from "../CustomProvider/index.js";
 const modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
 const Subcomponents = {
   Body: ModalBody,

package/esm/Modal/ModalHeader.js

@@ -25,7 +25,6 @@ const ModalHeader = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix());
   const context = useContext(ModalContext);
   const {
-    isDrawer,
     onModalClose
   } = context || {};
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -34,7 +33,7 @@ const ModalHeader = forwardRef((props, ref) => {
     ref: ref,
     className: classes
   }), closeButton && /*#__PURE__*/React.createElement(CloseButton, {
-    as: isDrawer ? IconButton : 'button',
+    as: IconButton,
     className: prefix('close'),
     onClick: createChainedFunction(onClose, onModalClose)
   }), children);

package/esm/MultiCascadeTree/MultiCascadeTree.js

@@ -6,8 +6,7 @@ import SearchView from "./SearchView.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useCascadeValue, useSelect, useSearch } from "./hooks/index.js";
-import { useStyles, useControlled } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useControlled } from "../internals/hooks/index.js";
 const emptyArray = [];
 
 /**

package/esm/MultiCascadeTree/SearchView.js

@@ -4,8 +4,7 @@ import React from 'react';
 import SearchBox from "../internals/SearchBox/index.js";
 import Checkbox from "../Checkbox/index.js";
 import Highlight from "../Highlight/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { isSomeChildChecked, getNodeParents } from "./utils.js";
 function SearchView(props) {
   const {

package/esm/MultiCascadeTree/TreeView.js

@@ -4,11 +4,10 @@ import React from 'react';
 import SpinnerIcon from '@rsuite/icons/Spinner';
 import ArrowLeftLineIcon from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLineIcon from '@rsuite/icons/ArrowRightLine';
-import { useStyles, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, shallowEqual, mergeStyles } from "../internals/utils/index.js";
 import { ListCheckItem, useCombobox } from "../internals/Picker/index.js";
 import { isSomeParentChecked, isSomeChildChecked } from "./utils.js";
-import { useCustom } from "../CustomProvider/index.js";
 const emptyArray = [];
 const TreeView = forwardRef((props, ref) => {
   const {

package/esm/MultiCascader/MultiCascader.js

@@ -8,11 +8,10 @@ import TreeView from "../MultiCascadeTree/TreeView.js";
 import SearchView from "../MultiCascadeTree/SearchView.js";
 import useActive from "../Cascader/useActive.js";
 import { findNodeOfTree } from "../internals/Tree/utils/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { getColumnsAndPaths } from "../CascadeTree/utils.js";
 import { forwardRef, createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { useCascadeValue, useSearch, useSelect } from "../MultiCascadeTree/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 import { PickerToggle, PickerPopup, SelectedElement, PickerToggleTrigger, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, triggerPropKeys } from "../internals/Picker/index.js";
 const emptyArray = [];
 

package/esm/Nav/Nav.js

@@ -11,10 +11,9 @@ import NavDropdownMenu from "./NavDropdownMenu.js";
 import AdaptiveNavItem from "./AdaptiveNavItem.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef, deprecateComponent } from "../internals/utils/index.js";
-import { useStyles, useEnsuredRef, useControlled } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useEnsuredRef, useControlled } from "../internals/hooks/index.js";
 import { NavbarContext } from "../Navbar/NavbarContext.js";
 import { SidenavContext } from "../Sidenav/Sidenav.js";
-import { useCustom } from "../CustomProvider/index.js";
 const DeprecatedNavDropdown = deprecateComponent(NavDropdown, '<Nav.Dropdown> is deprecated, use <Nav.Menu> instead.');
 DeprecatedNavDropdown.Menu = deprecateComponent(NavDropdownMenu, '<Nav.Dropdown.Menu> is deprecated, use <Nav.Menu> instead');
 DeprecatedNavDropdown.Item = deprecateComponent(NavDropdownItem, '<Nav.Dropdown.Item> is deprecated, use <Nav.Item> instead');

package/esm/Nav/NavDropdownMenu.js

@@ -7,9 +7,8 @@ import MenuItem from "../internals/Menu/MenuItem.js";
 import PagePreviousIcon from '@rsuite/icons/PagePrevious';
 import PageNextIcon from '@rsuite/icons/PageNext';
 import NavContext from "./NavContext.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * @private
  */

package/esm/Nav/NavMegaMenu.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import { NavbarMegaMenuProps } from '../Navbar/NavbarMegaMenu';
 export type NavMegaMenuProps = NavbarMegaMenuProps;
+/**
+ * The `Nav.MegaMenu` component is used to create a mega menu.
+ * @see https://rsuitejs.com/components/navbar/#mega-menu
+ * @version 6.0.0
+ */
 declare const NavMegaMenu: React.ForwardRefExoticComponent<NavbarMegaMenuProps & React.RefAttributes<any>>;
 export default NavMegaMenu;

package/esm/Nav/NavMegaMenu.js

@@ -3,6 +3,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import NavbarMegaMenu from "../Navbar/NavbarMegaMenu.js";
 import { NavbarContext } from "../Navbar/index.js";
+/**
+ * The `Nav.MegaMenu` component is used to create a mega menu.
+ * @see https://rsuitejs.com/components/navbar/#mega-menu
+ * @version 6.0.0
+ */
 const NavMegaMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const navbar = useContext(NavbarContext);
   if (!navbar) {

package/esm/Navbar/Navbar.d.ts

@@ -17,7 +17,7 @@ export interface NavbarProps extends BoxProps {
 declare const Navbar: import("../internals/types").InternalRefForwardingComponent<"div", NavbarProps, never> & {
     Brand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
     Content: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>, Partial<import("./NavbarContent").NavbarContentProps>, never> & Record<string, never>;
-    Toggle: React.ForwardRefExoticComponent<import("..").IconButtonProps & React.RefAttributes<any>>;
+    Toggle: React.ForwardRefExoticComponent<import("./NavbarToggle").NavbarToggleProps & React.RefAttributes<any>>;
     Drawer: React.ForwardRefExoticComponent<import("..").DrawerProps & React.RefAttributes<any>>;
 };
 export default Navbar;

package/esm/Navbar/Navbar.js

@@ -7,8 +7,7 @@ import NavbarToggle from "./NavbarToggle.js";
 import NavbarDrawer from "./NavbarDrawer.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { NavbarContext } from "./NavbarContext.js";
 const Subcomponents = {
   Brand: NavbarBrand,

package/esm/Navbar/NavbarDropdownMenu.js

@@ -8,9 +8,8 @@ import PageNextIcon from '@rsuite/icons/PageNext';
 import Disclosure from "../internals/Disclosure/index.js";
 import NavContext from "../Nav/NavContext.js";
 import { mergeRefs } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { NavbarContext } from "./NavbarContext.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> within a <Navbar>

package/esm/Navbar/NavbarToggle.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
-import { IconButtonProps } from '../IconButton';
-export type NavbarToggleProps = IconButtonProps;
-declare const NavbarToggle: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<any>>;
+import { BurgerProps } from '../internals/Burger';
+export interface NavbarToggleProps extends Omit<BurgerProps, 'onToggle'> {
+    /**
+     * Callback function that is called when the toggle is clicked.
+     */
+    onToggle?: (open: boolean) => void;
+}
+declare const NavbarToggle: React.ForwardRefExoticComponent<NavbarToggleProps & React.RefAttributes<any>>;
 export default NavbarToggle;

package/esm/Navbar/NavbarToggle.js

@@ -1,36 +1,31 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import IconButton from "../IconButton/index.js";
-import MenuIcon from '@rsuite/icons/Menu';
+import { Burger } from "../internals/Burger/index.js";
 import { useEventCallback } from "../internals/hooks/index.js";
-import { createComponent, createChainedFunction } from "../internals/utils/index.js";
+import { createChainedFunction } from "../internals/utils/index.js";
 import { NavbarContext } from "./NavbarContext.js";
-const Toggle = createComponent({
-  name: 'NavbarToggle',
-  componentAs: IconButton,
-  componentClassPrefix: 'navbar-toggle',
-  icon: /*#__PURE__*/React.createElement(MenuIcon, null)
-});
 const NavbarToggle = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    appearance: navbarAppearance,
     navbarId,
-    onToggle
+    open: contextOpen,
+    onToggle: onToggleContext
   } = useContext(NavbarContext) || {};
   const {
-    appearance = navbarAppearance === 'inverse' ? 'primary' : 'subtle',
+    open,
     onClick,
+    onToggle,
     ...rest
   } = props;
   const handleClick = useEventCallback(() => {
     onToggle === null || onToggle === void 0 || onToggle(true);
+    onToggleContext === null || onToggleContext === void 0 || onToggleContext(true);
   });
-  return /*#__PURE__*/React.createElement(Toggle, _extends({
+  return /*#__PURE__*/React.createElement(Burger, _extends({
     ref: ref,
-    appearance: appearance,
     onClick: createChainedFunction(handleClick, onClick),
-    "aria-controls": `${navbarId}-drawer`
+    "aria-controls": `${navbarId}-drawer`,
+    open: typeof open === 'boolean' ? open : contextOpen
   }, rest));
 });
 NavbarToggle.displayName = 'NavbarToggle';