rsuite 5.75.0 → 6.0.0-canary-20241227

package/esm/Nav/NavDropdownMenu.js

@@ -1,16 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject, _templateObject2;
-var _excluded = ["onToggle", "eventKey", "title", "classPrefix", "children", "openDirection", "noCaret"],
-  _excluded2 = ["icon", "className", "disabled"],
-  _excluded3 = ["open"],
-  _excluded4 = ["selected", "active"],
-  _excluded5 = ["open"],
-  _excluded6 = ["open"];
 import React, { useCallback, useContext } from 'react';
-import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import Menu from "../internals/Menu/Menu.js";
 import MenuItem from "../internals/Menu/MenuItem.js";
@@ -19,65 +9,73 @@ import PageNextIcon from '@rsuite/icons/PageNext';
 import NavContext from "./NavContext.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
-import { deprecatePropType, oneOf } from "../internals/propTypes/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * @private
  */
-var NavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var nav = useContext(NavContext);
+const NavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const nav = useContext(NavContext);
   if (!nav) {
     throw new Error('<Nav.Dropdown.Menu> should be used within a <Nav> component.');
   }
-  var onToggle = props.onToggle,
-    eventKey = props.eventKey,
-    title = props.title,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,
-    children = props.children,
-    _props$openDirection = props.openDirection,
-    openDirection = _props$openDirection === void 0 ? 'end' : _props$openDirection,
-    noCaret = props.noCaret,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useCustom = useCustom(),
-    rtl = _useCustom.rtl;
-  var handleToggleSubmenu = useCallback(function (open, event) {
+  const {
+    onToggle,
+    eventKey,
+    title,
+    classPrefix = 'dropdown-menu',
+    children,
+    openDirection = 'end',
+    noCaret,
+    ...rest
+  } = props;
+  const {
+    rtl
+  } = useCustom();
+  const handleToggleSubmenu = useCallback((open, event) => {
     onToggle === null || onToggle === void 0 || onToggle(open, eventKey, event);
   }, [eventKey, onToggle]);
-  var _useClassNames = useClassNames(classPrefix),
-    prefix = _useClassNames.prefix;
-  var _useClassNames2 = useClassNames('dropdown-menu'),
-    withMenuClassPrefix = _useClassNames2.withClassPrefix,
-    mergeMenuClassName = _useClassNames2.merge;
-  var _useClassNames3 = useClassNames('dropdown-item'),
-    mergeItemClassNames = _useClassNames3.merge,
-    withItemClassPrefix = _useClassNames3.withClassPrefix,
-    prefixItemClassName = _useClassNames3.prefix;
+  const {
+    prefix
+  } = useClassNames(classPrefix);
+  const {
+    withClassPrefix: withMenuClassPrefix,
+    merge: mergeMenuClassName
+  } = useClassNames('dropdown-menu');
+  const {
+    merge: mergeItemClassNames,
+    withClassPrefix: withItemClassPrefix,
+    prefix: prefixItemClassName
+  } = useClassNames('dropdown-item');
 
   // Parent menu exists. This is a submenu.
   // Should render a `menuitem` that controls this submenu.
-  var _omit = omit(rest, ['trigger']),
-    icon = _omit.icon,
-    className = _omit.className,
-    disabled = _omit.disabled,
-    menuProps = _objectWithoutPropertiesLoose(_omit, _excluded2);
-  var Icon = rtl ? PagePreviousIcon : PageNextIcon;
+  const {
+    icon,
+    className,
+    disabled,
+    ...menuProps
+  } = omit(rest, ['trigger']);
+  const Icon = rtl ? PagePreviousIcon : PageNextIcon;
   return /*#__PURE__*/React.createElement(Menu, {
     openMenuOn: ['mouseover', 'click'],
-    renderMenuButton: function renderMenuButton(_ref, buttonRef) {
-      var open = _ref.open,
-        menuButtonProps = _objectWithoutPropertiesLoose(_ref, _excluded3);
+    renderMenuButton: (_ref, buttonRef) => {
+      let {
+        open,
+        ...menuButtonProps
+      } = _ref;
       return /*#__PURE__*/React.createElement(MenuItem, {
         disabled: disabled
-      }, function (_ref2, menuitemRef) {
-        var selected = _ref2.selected,
-          active = _ref2.active,
-          menuitem = _objectWithoutPropertiesLoose(_ref2, _excluded4);
-        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), withItemClassPrefix({
+      }, (_ref2, menuitemRef) => {
+        let {
+          selected,
+          active,
+          ...menuitem
+        } = _ref2;
+        const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
           'with-icon': icon,
-          open: open,
+          open,
           active: selected,
-          disabled: disabled,
+          disabled,
           focus: active
         }));
         return /*#__PURE__*/React.createElement("div", _extends({
@@ -88,14 +86,16 @@ var NavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }, menuitem, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
           className: prefix('menu-icon')
         }), title, !noCaret && /*#__PURE__*/React.createElement(Icon, {
-          className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+          className: prefix`toggle-icon`
         }));
       });
     },
-    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {
-      var open = _ref3.open,
-        popupProps = _objectWithoutPropertiesLoose(_ref3, _excluded5);
-      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
+    renderMenuPopup: (_ref3, popupRef) => {
+      let {
+        open,
+        ...popupProps
+      } = _ref3;
+      const menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/React.createElement("ul", _extends({
         ref: popupRef,
         className: menuClassName,
@@ -104,12 +104,14 @@ var NavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, popupProps, menuProps), children);
     },
     onToggleMenu: handleToggleSubmenu
-  }, function (_ref4, menuContainerRef) {
-    var open = _ref4.open,
-      menuContainer = _objectWithoutPropertiesLoose(_ref4, _excluded6);
-    var classes = mergeItemClassNames(className, withItemClassPrefix({
-      disabled: disabled,
-      open: open,
+  }, (_ref4, menuContainerRef) => {
+    let {
+      open,
+      ...menuContainer
+    } = _ref4;
+    const classes = mergeItemClassNames(className, withItemClassPrefix({
+      disabled,
+      open,
       submenu: true
     }));
     return /*#__PURE__*/React.createElement("li", _extends({
@@ -119,20 +121,4 @@ var NavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
 });
 NavDropdownMenu.displayName = 'Nav.Dropdown.Menu';
-NavDropdownMenu.propTypes = {
-  active: PropTypes.bool,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  icon: PropTypes.any,
-  classPrefix: PropTypes.string,
-  pullLeft: deprecatePropType(PropTypes.bool, 'Use openDirection="start" instead.'),
-  openDirection: oneOf(['start', 'end']),
-  noCaret: PropTypes.bool,
-  title: PropTypes.node,
-  open: PropTypes.bool,
-  eventKey: PropTypes.any,
-  expanded: PropTypes.bool,
-  collapsible: PropTypes.bool,
-  onToggle: PropTypes.func
-};
 export default NavDropdownMenu;

package/esm/Nav/NavDropdownToggle.js

@@ -1,13 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "className", "classPrefix", "renderToggle", "children", "noCaret"];
 import React from 'react';
-import PropTypes from 'prop-types';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import { useClassNames } from "../internals/hooks/index.js";
 import NavItem from "./NavItem.js";
-import { oneOf } from "../internals/propTypes/index.js";
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> call
@@ -17,25 +13,27 @@ import { oneOf } from "../internals/propTypes/index.js";
  *   </Nav.Menu>
  * </Nav>
  */
-var NavDropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? NavItem : _props$as,
-    className = props.className,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'dropdown-toggle' : _props$classPrefix,
-    renderToggle = props.renderToggle,
-    children = props.children,
-    noCaret = props.noCaret,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var _useClassNames2 = useClassNames('nav-item'),
-    prefixNavItem = _useClassNames2.prefix;
-  var classes = merge(className, withClassPrefix({
+const NavDropdownToggle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as: Component = NavItem,
+    className,
+    classPrefix = 'dropdown-toggle',
+    renderToggle,
+    children,
+    noCaret,
+    ...rest
+  } = props;
+  const {
+    withClassPrefix,
+    merge
+  } = useClassNames(classPrefix);
+  const {
+    prefix: prefixNavItem
+  } = useClassNames('nav-item');
+  const classes = merge(className, withClassPrefix({
     'no-caret': noCaret
   }));
-  var toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  const toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
   }), children, !noCaret && /*#__PURE__*/React.createElement(ArrowDownLineIcon, {
@@ -44,13 +42,4 @@ var NavDropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return renderToggle ? renderToggle(rest, ref) : toggle;
 });
 NavDropdownToggle.displayName = 'Nav.Dropdown.Toggle';
-NavDropdownToggle.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  classPrefix: PropTypes.string,
-  noCaret: PropTypes.bool,
-  as: PropTypes.elementType,
-  renderToggle: PropTypes.func,
-  placement: oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
-};
 export default NavDropdownToggle;

package/esm/Nav/NavItem.js

@@ -1,9 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "active", "disabled", "eventKey", "className", "classPrefix", "style", "children", "icon", "divider", "panel", "onClick", "onSelect"];
 import React, { useCallback, useContext } from 'react';
-import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
@@ -19,43 +16,46 @@ import classNames from 'classnames';
  * @see https://rsuitejs.com/components/nav
  *
  */
-var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var nav = useContext(NavContext);
+const NavItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const nav = useContext(NavContext);
   if (!nav) {
     throw new Error('<Nav.Item> must be rendered within a <Nav> component.');
   }
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? SafeAnchor : _props$as,
-    activeProp = props.active,
-    disabled = props.disabled,
-    eventKey = props.eventKey,
-    className = props.className,
-    _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'nav-item' : _props$classPrefix,
-    style = props.style,
-    children = props.children,
-    icon = props.icon,
-    divider = props.divider,
-    panel = props.panel,
-    onClick = props.onClick,
-    onSelectProp = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var activeKey = nav.activeKey,
-    onSelectFromNav = nav.onSelect;
-  var active = activeProp !== null && activeProp !== void 0 ? activeProp : !isNil(eventKey) && shallowEqual(eventKey, activeKey);
-  var emitSelect = useCallback(function (event) {
+  const {
+    as: Component = SafeAnchor,
+    active: activeProp,
+    disabled,
+    eventKey,
+    className,
+    classPrefix = 'nav-item',
+    style,
+    children,
+    icon,
+    divider,
+    panel,
+    onClick,
+    onSelect: onSelectProp,
+    ...rest
+  } = props;
+  const {
+    activeKey,
+    onSelect: onSelectFromNav
+  } = nav;
+  const active = activeProp !== null && activeProp !== void 0 ? activeProp : !isNil(eventKey) && shallowEqual(eventKey, activeKey);
+  const emitSelect = useCallback(event => {
     onSelectProp === null || onSelectProp === void 0 || onSelectProp(eventKey, event);
     onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);
   }, [eventKey, onSelectProp, onSelectFromNav]);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge,
-    prefix = _useClassNames.prefix;
-  var classes = merge(className, withClassPrefix({
-    active: active,
-    disabled: disabled
+  const {
+    withClassPrefix,
+    merge,
+    prefix
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    active,
+    disabled
   }));
-  var handleClick = useCallback(function (event) {
+  const handleClick = useCallback(event => {
     if (!disabled) {
       emitSelect(event);
       onClick === null || onClick === void 0 || onClick(event);
@@ -89,19 +89,4 @@ var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children, /*#__PURE__*/React.createElement(Ripple, null));
 });
 NavItem.displayName = 'Nav.Item';
-NavItem.propTypes = {
-  as: PropTypes.elementType,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  divider: PropTypes.bool,
-  panel: PropTypes.bool,
-  onClick: PropTypes.func,
-  style: PropTypes.object,
-  icon: PropTypes.node,
-  onSelect: PropTypes.func,
-  children: PropTypes.node,
-  eventKey: PropTypes.any
-};
 export default NavItem;

package/esm/Nav/NavMenu.js

@@ -9,30 +9,28 @@ import { NavbarContext } from "../Navbar/index.js";
 import NavbarDropdown from "../Navbar/NavbarDropdown.js";
 import NavbarDropdownMenu from "../Navbar/NavbarDropdownMenu.js";
 import SidenavDropdownMenu from "../Sidenav/SidenavDropdownMenu.js";
-export var NavMenuContext = /*#__PURE__*/React.createContext(null);
+export const NavMenuContext = /*#__PURE__*/React.createContext(null);
 NavMenuContext.displayName = 'NavMenu.Context';
-export var NavMenuActionType = /*#__PURE__*/function (NavMenuActionType) {
+export let NavMenuActionType = /*#__PURE__*/function (NavMenuActionType) {
   NavMenuActionType[NavMenuActionType["RegisterItem"] = 0] = "RegisterItem";
   NavMenuActionType[NavMenuActionType["UnregisterItem"] = 1] = "UnregisterItem";
   return NavMenuActionType;
 }({});
-var initilNavMenuState = {
+const initilNavMenuState = {
   items: []
 };
-var reducer = function reducer(state, action) {
+const reducer = (state, action) => {
   switch (action.type) {
     case NavMenuActionType.RegisterItem:
-      return _extends({}, state, {
-        items: [].concat(state.items.filter(function (item) {
-          return item._id !== action.payload._id;
-        }), [action.payload])
-      });
+      return {
+        ...state,
+        items: [...state.items.filter(item => item._id !== action.payload._id), action.payload]
+      };
     case NavMenuActionType.UnregisterItem:
-      return _extends({}, state, {
-        items: state.items.filter(function (item) {
-          return item._id !== action.payload._id;
-        })
-      });
+      return {
+        ...state,
+        items: state.items.filter(item => item._id !== action.payload._id)
+      };
     default:
       throw new Error('Unrecognizable action type: ' + action.type);
   }
@@ -46,11 +44,11 @@ var reducer = function reducer(state, action) {
  *
  * @see https://rsuitejs.com/components/nav
  */
-var NavMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var parentNavMenu = useContext(NavMenuContext);
-  var navMenuContext = useReducer(reducer, initilNavMenuState);
-  var navbar = useContext(NavbarContext);
-  var sidenav = useContext(SidenavContext);
+const NavMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const parentNavMenu = useContext(NavMenuContext);
+  const navMenuContext = useReducer(reducer, initilNavMenuState);
+  const navbar = useContext(NavbarContext);
+  const sidenav = useContext(SidenavContext);
   if (!parentNavMenu) {
     if (navbar) {
       return /*#__PURE__*/React.createElement(NavMenuContext.Provider, {

package/esm/Navbar/Navbar.js

@@ -1,33 +1,32 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["className", "as", "classPrefix", "appearance"];
 import React from 'react';
 import NavbarBody from "./NavbarBody.js";
 import NavbarHeader from "./NavbarHeader.js";
 import NavbarBrand from "./NavbarBrand.js";
 import { useClassNames } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
-export var NavbarContext = /*#__PURE__*/React.createContext(false);
+export const NavbarContext = /*#__PURE__*/React.createContext(false);
 /**
  * The `Navbar` component is used to create a navigation header.
  * @see https://rsuitejs.com/components/navbar
  */
-var Navbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useCustom = useCustom('Navbar', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var className = propsWithDefaults.className,
-    _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'nav' : _propsWithDefaults$as,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'navbar' : _propsWithDefaults$cl,
-    _propsWithDefaults$ap = propsWithDefaults.appearance,
-    appearance = _propsWithDefaults$ap === void 0 ? 'default' : _propsWithDefaults$ap,
-    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var _useClassNames = useClassNames(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix(appearance));
+const Navbar = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Navbar', props);
+  const {
+    className,
+    as: Component = 'nav',
+    classPrefix = 'navbar',
+    appearance = 'default',
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    merge
+  } = useClassNames(classPrefix);
+  const classes = merge(className, withClassPrefix(appearance));
   return /*#__PURE__*/React.createElement(NavbarContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {

package/esm/Navbar/NavbarBody.d.ts

@@ -1,4 +1,4 @@
 import { ComponentProps } from '../internals/utils';
 export type NavbarBodyProps = ComponentProps;
-declare const _default: import("../internals/types").RsRefForwardingComponent<"div", ComponentProps>;
+declare const _default: import("../internals/types").RsRefForwardingComponent<"div", ComponentProps, false>;
 export default _default;

package/esm/Navbar/NavbarBody.js

@@ -1,6 +1,6 @@
 'use client';
 import { deprecateComponent, createComponent } from "../internals/utils/index.js";
-var NavbarBody = createComponent({
+const NavbarBody = createComponent({
   name: 'NavbarBody'
 });
 export default deprecateComponent(NavbarBody, '<Navbar.Body> has been deprecated, you should <Nav> as direct child of <Navbar>');

package/esm/Navbar/NavbarBrand.d.ts

@@ -1,4 +1,4 @@
 import { ComponentProps } from '../internals/utils';
 export type NavbarBrandProps = ComponentProps;
-declare const NavbarBrand: import("../internals/types").RsRefForwardingComponent<"a", ComponentProps>;
+declare const NavbarBrand: import("../internals/types").RsRefForwardingComponent<"a", ComponentProps, false>;
 export default NavbarBrand;

package/esm/Navbar/NavbarBrand.js

@@ -1,6 +1,6 @@
 'use client';
 import { createComponent } from "../internals/utils/index.js";
-var NavbarBrand = createComponent({
+const NavbarBrand = createComponent({
   name: 'NavbarBrand',
   componentAs: 'a',
   componentClassPrefix: 'navbar-brand'

package/esm/Navbar/NavbarDropdown.d.ts

@@ -5,7 +5,7 @@ import Button from '../Button';
 import NavDropdownItem from '../Nav/NavDropdownItem';
 import NavDropdownMenu from '../Nav/NavDropdownMenu';
 export type NavbarDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface NavbarDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {
+export interface NavbarDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title'> {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */