rsuite 5.75.0 → 6.0.0-canary-20241227

package/esm/internals/Menu/Menu.js

@@ -1,7 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback, useContext, useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import MenuContext, { MenuActionTypes, MoveFocusTo } from "./MenuContext.js";
 import useMenu from "./useMenu.js";
@@ -9,14 +8,14 @@ import { useUniqueId, useFocus, useClickOutside } from "../hooks/index.js";
 import { KEY_VALUES } from "../constants/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 import { isFocusLeaving, isFocusableElement } from "../utils/index.js";
-var defaultOpenMenuOn = ['click'];
+const defaultOpenMenuOn = ['click'];
 function getMenuItemTarget(event) {
   var _event$currentTarget;
-  var target = event.target;
+  const target = event.target;
   if (target.getAttribute('role') === 'menuitem') {
     return target;
   }
-  return Array.from((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.querySelectorAll('[role="menuitem"]')).find(function (item) {
+  return Array.from((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.querySelectorAll('[role="menuitem"]')).find(item => {
     return item.contains(target);
   });
 }
@@ -27,37 +26,39 @@ function getMenuItemTarget(event) {
  */
 function Menu(_ref) {
   var _items$activeItemInde;
-  var disabled = _ref.disabled,
-    children = _ref.children,
-    _ref$openMenuOn = _ref.openMenuOn,
-    openMenuOn = _ref$openMenuOn === void 0 ? defaultOpenMenuOn : _ref$openMenuOn,
-    _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-    openProp = _ref.open,
-    menuButtonText = _ref.menuButtonText,
-    renderMenuButton = _ref.renderMenuButton,
-    renderMenuPopup = _ref.renderMenuPopup,
-    onToggleMenu = _ref.onToggleMenu;
-  var buttonElementRef = useRef(null);
-  var menuElementRef = useRef(null);
-  var parentMenu = useContext(MenuContext);
-  var isSubmenu = !!parentMenu;
-  var menu = useMenu({
+  let {
+    disabled,
+    children,
+    openMenuOn = defaultOpenMenuOn,
+    defaultOpen = false,
+    open: openProp,
+    menuButtonText,
+    renderMenuButton,
+    renderMenuPopup,
+    onToggleMenu
+  } = _ref;
+  const buttonElementRef = useRef(null);
+  const menuElementRef = useRef(null);
+  const parentMenu = useContext(MenuContext);
+  const isSubmenu = !!parentMenu;
+  const menu = useMenu({
     open: defaultOpen
   });
-  var _menu$ = menu[0],
-    openState = _menu$.open,
-    items = _menu$.items,
-    activeItemIndex = _menu$.activeItemIndex,
-    dispatch = menu[1];
-  var openControlled = typeof openProp !== 'undefined';
-  var open = openControlled ? openProp : openState;
-  var _useCustom = useCustom(),
-    rtl = _useCustom.rtl;
-  var activeItem = isNil(activeItemIndex) ? null : (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
-  var _useFocus = useFocus(menuElementRef),
-    grabFocus = _useFocus.grab;
-  var openMenu = useCallback(function (event) {
+  const [{
+    open: openState,
+    items,
+    activeItemIndex
+  }, dispatch] = menu;
+  const openControlled = typeof openProp !== 'undefined';
+  const open = openControlled ? openProp : openState;
+  const {
+    rtl
+  } = useCustom();
+  const activeItem = isNil(activeItemIndex) ? null : (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
+  const {
+    grab: grabFocus
+  } = useFocus(menuElementRef);
+  const openMenu = useCallback(event => {
     dispatch({
       type: MenuActionTypes.OpenMenu
     });
@@ -70,7 +71,7 @@ function Menu(_ref) {
     onToggleMenu === null || onToggleMenu === void 0 || onToggleMenu(true, event);
     grabFocus();
   }, [dispatch, onToggleMenu, grabFocus]);
-  var closeMenu = useCallback(function (event, returnFocusToButton) {
+  const closeMenu = useCallback(function (event, returnFocusToButton) {
     if (returnFocusToButton === void 0) {
       returnFocusToButton = true;
     }
@@ -89,7 +90,7 @@ function Menu(_ref) {
       });
     }
   }, [dispatch, onToggleMenu, buttonElementRef]);
-  var toggleMenu = useCallback(function (event) {
+  const toggleMenu = useCallback(event => {
     if (!open) {
       openMenu(event);
     } else {
@@ -98,21 +99,19 @@ function Menu(_ref) {
   }, [open, openMenu, closeMenu]);
   useClickOutside({
     enabled: open,
-    isOutside: function isOutside(event) {
+    isOutside: event => {
       var _buttonElementRef$cur2, _menuElementRef$curre;
       return !((_buttonElementRef$cur2 = buttonElementRef.current) !== null && _buttonElementRef$cur2 !== void 0 && _buttonElementRef$cur2.contains(event.target)) && !((_menuElementRef$curre = menuElementRef.current) !== null && _menuElementRef$curre !== void 0 && _menuElementRef$curre.contains(event.target));
     },
     // fixme if clicking on a focusable element, don't move focus to menu button
-    handle: function handle(event) {
-      return closeMenu(event, !isFocusableElement(event.target));
-    }
+    handle: event => closeMenu(event, !isFocusableElement(event.target))
   });
 
   /**
    * Keyboard interaction on menu button
    * @see https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
    */
-  var handleButtonKeydown = useCallback(function (e) {
+  const handleButtonKeydown = useCallback(e => {
     switch (e.key) {
       // Open the menu
       case KEY_VALUES.ENTER:
@@ -144,13 +143,13 @@ function Menu(_ref) {
         break;
     }
   }, [open, openMenu, closeMenu, dispatch]);
-  var handleButtonClick = useCallback(function (event) {
+  const handleButtonClick = useCallback(event => {
     if (disabled) {
       return;
     }
     toggleMenu(event);
   }, [disabled, toggleMenu]);
-  var handleButtonContextMenu = useCallback(function (event) {
+  const handleButtonContextMenu = useCallback(event => {
     // prevents default contextmenu
     event.preventDefault();
 
@@ -159,8 +158,8 @@ function Menu(_ref) {
     if (disabled) return;
     openMenu(event);
   }, [open, disabled, openMenu]);
-  var buttonEventHandlers = useMemo(function () {
-    var buttonEventHandlers = {
+  const buttonEventHandlers = useMemo(() => {
+    const buttonEventHandlers = {
       onKeyDown: handleButtonKeydown
     };
 
@@ -176,9 +175,9 @@ function Menu(_ref) {
     }
     return buttonEventHandlers;
   }, [openMenuOn, handleButtonKeydown, handleButtonClick, handleButtonContextMenu]);
-  var buttonId = useUniqueId('menubutton-');
-  var menuId = useUniqueId('menu-');
-  var buttonAriaAttributes = useMemo(function () {
+  const buttonId = useUniqueId('menubutton-');
+  const menuId = useUniqueId('menu-');
+  const buttonAriaAttributes = useMemo(() => {
     // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14
     return {
       role: 'button',
@@ -188,18 +187,19 @@ function Menu(_ref) {
       'aria-controls': menuId
     };
   }, [open, menuId]);
-  var buttonProps = useMemo(function () {
-    return _extends({
-      id: buttonId
-    }, buttonAriaAttributes, buttonEventHandlers, {
+  const buttonProps = useMemo(() => {
+    return {
+      id: buttonId,
+      ...buttonAriaAttributes,
+      ...buttonEventHandlers,
       // render props
-      open: open
-    });
+      open
+    };
   }, [buttonId, buttonAriaAttributes, buttonEventHandlers, open]);
-  var customMenuButton = useMemo(function () {
+  const customMenuButton = useMemo(() => {
     return renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
   }, [renderMenuButton, buttonProps, buttonElementRef]);
-  var buttonElement = customMenuButton !== null && customMenuButton !== void 0 ? customMenuButton : /*#__PURE__*/React.createElement("button", _extends({
+  const buttonElement = customMenuButton !== null && customMenuButton !== void 0 ? customMenuButton : /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonElementRef
   }, buttonProps), menuButtonText);
 
@@ -207,7 +207,7 @@ function Menu(_ref) {
    * Keyboard interaction on menu
    * @see https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
    */
-  var handleMenuKeydown = useCallback(function (e) {
+  const handleMenuKeydown = useCallback(e => {
     switch (e.key) {
       // Move focus to previous item
       case KEY_VALUES.UP:
@@ -293,8 +293,8 @@ function Menu(_ref) {
   }, [dispatch, activeItem, isSubmenu, rtl, closeMenu]);
 
   // Only used for clicks bubbling from child `menuitem`s.
-  var handleMenuClick = useCallback(function (event) {
-    var target = getMenuItemTarget(event);
+  const handleMenuClick = useCallback(event => {
+    const target = getMenuItemTarget(event);
     if (!target) return;
 
     // Only handle clicks on `menuitem`s
@@ -309,68 +309,68 @@ function Menu(_ref) {
   }, [closeMenu, isSubmenu]);
 
   // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-13
-  var menuAriaAttributes = {
+  const menuAriaAttributes = {
     role: 'menu',
     'aria-labelledby': buttonId,
     'aria-activedescendant': activeItem === null || activeItem === void 0 ? void 0 : activeItem.id
   };
-  var menuEventHandlers = {
+  const menuEventHandlers = {
     onClick: handleMenuClick,
     onKeyDown: handleMenuKeydown
   };
-  var menuProps = _extends({
-    id: menuId
-  }, menuAriaAttributes, menuEventHandlers, {
+  const menuProps = {
+    id: menuId,
+    ...menuAriaAttributes,
+    ...menuEventHandlers,
     tabIndex: 0
-  });
-  var customMenuPopup = renderMenuPopup === null || renderMenuPopup === void 0 ? void 0 : renderMenuPopup(_extends({}, menuProps, {
-    open: open
-  }), menuElementRef);
+  };
+  const customMenuPopup = renderMenuPopup === null || renderMenuPopup === void 0 ? void 0 : renderMenuPopup({
+    ...menuProps,
+    open
+  }, menuElementRef);
 
   // fixme Wrong children here
-  var menuElement = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : /*#__PURE__*/React.createElement("ul", _extends({
+  const menuElement = customMenuPopup !== null && customMenuPopup !== void 0 ? customMenuPopup : /*#__PURE__*/React.createElement("ul", _extends({
     ref: menuElementRef
   }, menuProps, {
     hidden: !open
   }), children);
-  var handleMouseEnter = useCallback(function (e) {
+  const handleMouseEnter = useCallback(e => {
     if (!disabled) {
       openMenu(e);
     }
   }, [disabled, openMenu]);
-  var handleMouseLeave = useCallback(function (e) {
+  const handleMouseLeave = useCallback(e => {
     if (!disabled) {
       closeMenu(e);
     }
   }, [disabled, closeMenu]);
-  var rootElementRef = useRef(null);
-  var handleContainerBlur = useCallback(function (event) {
+  const rootElementRef = useRef(null);
+  const handleContainerBlur = useCallback(event => {
     /* istanbul ignore else */
     if (isFocusLeaving(event)) {
       closeMenu(event, false);
     }
   }, [closeMenu]);
-  var rootEventHandlers = {
+  const rootEventHandlers = {
     onBlur: handleContainerBlur
   };
   if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('mouseover')) {
     rootEventHandlers.onMouseEnter = handleMouseEnter;
     rootEventHandlers.onMouseLeave = handleMouseLeave;
   }
-  var rootProps = _extends({}, rootEventHandlers, {
+  const rootProps = {
+    ...rootEventHandlers,
     children: /*#__PURE__*/React.createElement(React.Fragment, null, buttonElement, /*#__PURE__*/React.createElement(MenuContext.Provider, {
       value: menu
     }, menuElement)),
     // render props
-    open: open
-  });
+    open
+  };
   if (isSubmenu) {
     rootProps.role = 'none presentation';
   }
   return children(rootProps, rootElementRef);
 }
 Menu.displayName = 'Menu';
-Menu.propTypes = {
-  children: PropTypes.func.isRequired
-};
 export default Menu;

package/esm/internals/Menu/MenuContext.js

@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-export var MenuActionTypes = /*#__PURE__*/function (MenuActionTypes) {
+export let MenuActionTypes = /*#__PURE__*/function (MenuActionTypes) {
   MenuActionTypes[MenuActionTypes["RegisterItem"] = 0] = "RegisterItem";
   MenuActionTypes[MenuActionTypes["UnregisterItem"] = 1] = "UnregisterItem";
   MenuActionTypes[MenuActionTypes["OpenMenu"] = 2] = "OpenMenu";
@@ -8,7 +8,7 @@ export var MenuActionTypes = /*#__PURE__*/function (MenuActionTypes) {
   MenuActionTypes[MenuActionTypes["MoveFocus"] = 4] = "MoveFocus";
   return MenuActionTypes;
 }({});
-export var MoveFocusTo = /*#__PURE__*/function (MoveFocusTo) {
+export let MoveFocusTo = /*#__PURE__*/function (MoveFocusTo) {
   MoveFocusTo[MoveFocusTo["Next"] = 0] = "Next";
   MoveFocusTo[MoveFocusTo["Prev"] = 1] = "Prev";
   MoveFocusTo[MoveFocusTo["Last"] = 2] = "Last";
@@ -18,6 +18,6 @@ export var MoveFocusTo = /*#__PURE__*/function (MoveFocusTo) {
   return MoveFocusTo;
 }({});
 // Defaults to null for checking whether a Menu is inside another menu
-var MenuContext = /*#__PURE__*/React.createContext(null);
+const MenuContext = /*#__PURE__*/React.createContext(null);
 MenuContext.displayName = 'MenuContext';
 export default MenuContext;

package/esm/internals/Menu/MenuItem.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export interface MenuItemProps {
     /** Active the current option */
     selected?: boolean;
@@ -21,11 +20,5 @@ export interface MenuitemRenderProps {
 declare function MenuItem(props: MenuItemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare namespace MenuItem {
     var displayName: string;
-    var propTypes: {
-        selected: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        children: PropTypes.Validator<(...args: any[]) => any>;
-        onActivate: PropTypes.Requireable<(...args: any[]) => any>;
-    };
 }
 export default MenuItem;

package/esm/internals/Menu/MenuItem.js

@@ -1,6 +1,5 @@
 'use client';
 import { useCallback, useContext, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import { useUniqueId } from "../hooks/index.js";
 import MenuContext, { MenuActionTypes, MoveFocusTo } from "./MenuContext.js";
@@ -10,24 +9,23 @@ import MenuContext, { MenuActionTypes, MoveFocusTo } from "./MenuContext.js";
  */
 function MenuItem(props) {
   var _menuState$items$menu;
-  var children = props.children,
-    _props$selected = props.selected,
-    selected = _props$selected === void 0 ? false : _props$selected,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    onActivate = props.onActivate;
-  var menuitemRef = useRef(null);
-  var menuitemId = useUniqueId('menuitem-');
-  var menu = useContext(MenuContext);
+  const {
+    children,
+    selected = false,
+    disabled = false,
+    onActivate
+  } = props;
+  const menuitemRef = useRef(null);
+  const menuitemId = useUniqueId('menuitem-');
+  const menu = useContext(MenuContext);
   if (!menu) {
     throw new Error('<MenuItem> must be rendered within a <Menu>');
   }
-  var menuState = menu[0],
-    dispatch = menu[1];
+  const [menuState, dispatch] = menu;
 
   // Whether this menuitem has focus (indicated by `aria-activedescendant` from parent menu)
-  var hasFocus = !isNil(menuitemRef.current) && !isNil(menuState.activeItemIndex) && ((_menuState$items$menu = menuState.items[menuState.activeItemIndex]) === null || _menuState$items$menu === void 0 ? void 0 : _menuState$items$menu.element) === menuitemRef.current;
-  var handleClick = useCallback(function (event) {
+  const hasFocus = !isNil(menuitemRef.current) && !isNil(menuState.activeItemIndex) && ((_menuState$items$menu = menuState.items[menuState.activeItemIndex]) === null || _menuState$items$menu === void 0 ? void 0 : _menuState$items$menu.element) === menuitemRef.current;
+  const handleClick = useCallback(event => {
     if (disabled) {
       return;
     }
@@ -36,7 +34,7 @@ function MenuItem(props) {
 
   // Gain/release focus on mousedown in `menubar`
 
-  var handleMouseDown = useCallback(function () {
+  const handleMouseDown = useCallback(() => {
     if (!isNil(menuitemRef.current) && !hasFocus) {
       dispatch({
         type: MenuActionTypes.MoveFocus,
@@ -47,7 +45,7 @@ function MenuItem(props) {
   }, [dispatch, hasFocus]);
 
   // Gain/release focus on mouseenter/mouseleave in `menu`
-  var handleMouseMove = useCallback(function () {
+  const handleMouseMove = useCallback(() => {
     if (!isNil(menuitemRef.current) && !hasFocus) {
       dispatch({
         type: MenuActionTypes.MoveFocus,
@@ -56,23 +54,23 @@ function MenuItem(props) {
       });
     }
   }, [hasFocus, dispatch]);
-  var handleMouseLeave = useCallback(function () {
+  const handleMouseLeave = useCallback(() => {
     dispatch({
       type: MenuActionTypes.MoveFocus,
       to: MoveFocusTo.None
     });
   }, [dispatch]);
-  useEffect(function () {
-    var menuitemElement = menuitemRef.current;
+  useEffect(() => {
+    const menuitemElement = menuitemRef.current;
     if (menuitemElement) {
       dispatch({
         type: MenuActionTypes.RegisterItem,
         element: menuitemElement,
         props: {
-          disabled: disabled
+          disabled
         }
       });
-      return function () {
+      return () => {
         dispatch({
           type: MenuActionTypes.UnregisterItem,
           id: menuitemElement.id
@@ -80,7 +78,7 @@ function MenuItem(props) {
       };
     }
   }, [menuitemRef, disabled, dispatch]);
-  var menuitemProps = {
+  const menuitemProps = {
     id: menuitemId,
     role: 'menuitem',
     // fixme Only use `aria-checked` on menuitemradio and menuitemcheckbox
@@ -90,7 +88,7 @@ function MenuItem(props) {
     onClick: handleClick,
     // render props
 
-    selected: selected,
+    selected,
     active: hasFocus
   };
 
@@ -107,10 +105,4 @@ function MenuItem(props) {
   return children(menuitemProps, menuitemRef);
 }
 MenuItem.displayName = 'MenuItem';
-MenuItem.propTypes = {
-  selected: PropTypes.bool,
-  disabled: PropTypes.bool,
-  children: PropTypes.func.isRequired,
-  onActivate: PropTypes.func
-};
 export default MenuItem;

package/esm/internals/Menu/Menubar.js

@@ -12,19 +12,20 @@ import { isFocusEntering, isFocusLeaving, isFocusableElement } from "../utils/in
  */
 export default function Menubar(_ref) {
   var _items$activeItemInde3;
-  var _ref$vertical = _ref.vertical,
-    vertical = _ref$vertical === void 0 ? false : _ref$vertical,
-    children = _ref.children,
-    onActivateItem = _ref.onActivateItem;
-  var menubar = useMenu({
+  let {
+    vertical = false,
+    children,
+    onActivateItem
+  } = _ref;
+  const menubar = useMenu({
     role: 'menubar'
   });
-  var _menubar$ = menubar[0],
-    items = _menubar$.items,
-    activeItemIndex = _menubar$.activeItemIndex,
-    dispatch = menubar[1];
-  var menubarElementRef = useRef(null);
-  var onFocus = useCallback(function (event) {
+  const [{
+    items,
+    activeItemIndex
+  }, dispatch] = menubar;
+  const menubarElementRef = useRef(null);
+  const onFocus = useCallback(event => {
     // Focus moves inside Menubar
     if (isFocusEntering(event) &&
     // Skip if focus is moving to a focusable element within this menu
@@ -37,7 +38,7 @@ export default function Menubar(_ref) {
       }
     }
   }, [activeItemIndex, dispatch]);
-  var onBlur = useCallback(function (event) {
+  const onBlur = useCallback(event => {
     // Focus moves outside of Menubar
     if (isFocusLeaving(event)) {
       dispatch({
@@ -46,11 +47,12 @@ export default function Menubar(_ref) {
       });
     }
   }, [dispatch]);
-  var _useCustom = useCustom(),
-    rtl = _useCustom.rtl;
-  var onKeyDown = useCallback(function (event) {
+  const {
+    rtl
+  } = useCustom();
+  const onKeyDown = useCallback(event => {
     var _items$activeItemInde, _items$activeItemInde2;
-    var activeItemElement = isNil(activeItemIndex) ? null : (_items$activeItemInde = (_items$activeItemInde2 = items[activeItemIndex]) === null || _items$activeItemInde2 === void 0 ? void 0 : _items$activeItemInde2.element) !== null && _items$activeItemInde !== void 0 ? _items$activeItemInde : null;
+    const activeItemElement = isNil(activeItemIndex) ? null : (_items$activeItemInde = (_items$activeItemInde2 = items[activeItemIndex]) === null || _items$activeItemInde2 === void 0 ? void 0 : _items$activeItemInde2.element) !== null && _items$activeItemInde !== void 0 ? _items$activeItemInde : null;
     switch (true) {
       case !vertical && !rtl && event.key === KEY_VALUES.RIGHT:
       case !vertical && rtl && event.key === KEY_VALUES.LEFT:
@@ -108,10 +110,8 @@ export default function Menubar(_ref) {
 
   // Only used for handling click events bubbling from children
   // Which indicates that a child menuitem is being activated
-  var onClick = useCallback(function (event) {
-    if (items.some(function (item) {
-      return item.element === event.target;
-    })) {
+  const onClick = useCallback(event => {
+    if (items.some(item => item.element === event.target)) {
       onActivateItem === null || onActivateItem === void 0 || onActivateItem(event);
     }
   }, [items, onActivateItem]);
@@ -120,10 +120,10 @@ export default function Menubar(_ref) {
   }, children({
     role: 'menubar',
     tabIndex: 0,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onKeyDown: onKeyDown,
-    onClick: onClick,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onClick,
     'aria-activedescendant': isNil(activeItemIndex) ? undefined : (_items$activeItemInde3 = items[activeItemIndex]) === null || _items$activeItemInde3 === void 0 ? void 0 : _items$activeItemInde3.element.id,
     'aria-orientation': vertical ? 'vertical' : undefined // implicitly set 'horizontal'
   }, menubarElementRef));