rsuite 5.2.2 → 5.2.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [5.2.3](https://github.com/rsuite/rsuite/compare/v5.2.2...v5.2.3) (2021-11-26)
+
+### Bug Fixes
+
+- **useElementResize:** fix ResizeObserver being created repeatedly ([#2161](https://github.com/rsuite/rsuite/issues/2161)) ([32e2fa7](https://github.com/rsuite/rsuite/commit/32e2fa76a396945498f198d176b630ac09a4e20d))
+- focus handler ([#2154](https://github.com/rsuite/rsuite/issues/2154)) ([3b17fbc](https://github.com/rsuite/rsuite/commit/3b17fbcae6da59ca58788c6b3aa60d79692dffa1))
+- **TagPicker:** fix tag misplacement in plaintext mode ([#2152](https://github.com/rsuite/rsuite/issues/2152)) ([6d32c71](https://github.com/rsuite/rsuite/commit/6d32c714e1b9be743d57b3ae4f1622d006e0f52c))
+
+### Performance Improvements
+
+- **Menu:** prevent uneccesary re-render when mouseove on menuitems ([#2148](https://github.com/rsuite/rsuite/issues/2148)) ([dc06498](https://github.com/rsuite/rsuite/commit/dc0649822fd68964281f44c4ec2daf84953edc63))
+
 ## [5.2.2](https://github.com/rsuite/rsuite/compare/v5.2.1...v5.2.2) (2021-11-19)
 
 ### Bug Fixes

package/cjs/CheckboxGroup/CheckboxGroup.js

@@ -83,10 +83,10 @@ var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, [disabled, handleChange, inline, isControlled, name, plaintext, readOnly, value]);
   return /*#__PURE__*/_react.default.createElement(_CheckboxGroupContext.CheckboxGroupContext.Provider, {
     value: contextValue
-  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
+  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
     ref: ref,
     localeKey: "notSelected"
-  }, value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, rest), value !== null && value !== void 0 && value.length ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     role: "group",
     className: classes

package/cjs/InputPicker/InputPicker.js

@@ -696,7 +696,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var plaintextProps = {}; // TagPicker has -6px margin-left on the plaintext wrapper
     // for fixing margin-left on tags from 2nd line on
 
-    if (multi) {
+    if (multi && hasValue) {
       plaintextProps.style = {
         marginLeft: -6
       };

package/cjs/Menu/Menu.js

@@ -21,7 +21,7 @@ var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
 
 var _useMenu = _interopRequireDefault(require("./useMenu"));
 
-var _useFocus = _interopRequireDefault(require("../utils/useFocus"));
+var _useFocus2 = _interopRequireDefault(require("../utils/useFocus"));
 
 var _useClickOutside = _interopRequireDefault(require("../utils/useClickOutside"));
 
@@ -60,7 +60,10 @@ function Menu(props) {
       rtl = _useCustom.rtl;
 
   var activeItem = (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
-  var menuFocus = (0, _useFocus.default)(menuElementRef);
+
+  var _useFocus = (0, _useFocus2.default)(menuElementRef),
+      grabFocus = _useFocus.grab;
+
   var openMenu = (0, _react.useCallback)(function (event) {
     dispatch({
       type: _MenuContext.MenuActionTypes.OpenMenu
@@ -74,8 +77,8 @@ function Menu(props) {
     }
 
     onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(true, event);
-    menuFocus.grab();
-  }, [dispatch, onToggleMenu, menuFocus]);
+    grabFocus();
+  }, [dispatch, onToggleMenu, grabFocus]);
   var closeMenu = (0, _react.useCallback)(function (event, returnFocusToButton) {
     if (returnFocusToButton === void 0) {
       returnFocusToButton = true;
@@ -170,39 +173,48 @@ function Menu(props) {
     if (disabled) return;
     openMenu(event);
   }, [open, disabled, openMenu]);
-  var buttonEventHandlers = {
-    onKeyDown: handleButtonKeydown
-  };
-  /**
-   * Bind event of trigger,
-   * not used in  in the expanded state of '<Sidenav>'
-   */
-
-  if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {
-    buttonEventHandlers.onClick = handleButtonClick;
-  }
+  var buttonEventHandlers = (0, _react.useMemo)(function () {
+    var buttonEventHandlers = {
+      onKeyDown: handleButtonKeydown
+    };
+    /**
+     * Bind event of trigger,
+     * not used in  in the expanded state of '<Sidenav>'
+     */
+
+    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {
+      buttonEventHandlers.onClick = handleButtonClick;
+    }
 
-  if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {
-    buttonEventHandlers.onContextMenu = handleButtonContextMenu;
-  }
+    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {
+      buttonEventHandlers.onContextMenu = handleButtonContextMenu;
+    }
 
+    return buttonEventHandlers;
+  }, [openMenuOn, handleButtonKeydown, handleButtonClick, handleButtonContextMenu]);
   var buttonId = (0, _useUniqueId.default)('menubutton-');
-  var menuId = (0, _useUniqueId.default)('menu-'); // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14
-
-  var buttonAriaAttributes = {
-    role: 'button',
-    'aria-haspopup': 'menu',
-    'aria-expanded': open || undefined,
-    // it's recommend to remove aria-expanded when menu is hidden
-    'aria-controls': menuId
-  };
-  var buttonProps = (0, _extends2.default)({
-    id: buttonId
-  }, buttonAriaAttributes, buttonEventHandlers, {
-    // render props
-    open: open
-  });
-  var customMenuButton = renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
+  var menuId = (0, _useUniqueId.default)('menu-');
+  var buttonAriaAttributes = (0, _react.useMemo)(function () {
+    // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14
+    return {
+      role: 'button',
+      'aria-haspopup': 'menu',
+      'aria-expanded': open || undefined,
+      // it's recommend to remove aria-expanded when menu is hidden
+      'aria-controls': menuId
+    };
+  }, [open, menuId]);
+  var buttonProps = (0, _react.useMemo)(function () {
+    return (0, _extends2.default)({
+      id: buttonId
+    }, buttonAriaAttributes, buttonEventHandlers, {
+      // render props
+      open: open
+    });
+  }, [buttonId, buttonAriaAttributes, buttonEventHandlers, open]);
+  var customMenuButton = (0, _react.useMemo)(function () {
+    return renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
+  }, [renderMenuButton, buttonProps, buttonElementRef]);
   var buttonElement = customMenuButton !== null && customMenuButton !== void 0 ? customMenuButton : /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
     ref: buttonElementRef
   }, buttonProps), menuButtonText);

package/cjs/Menu/MenuItem.js

@@ -44,20 +44,24 @@ function MenuItem(props) {
   }, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`
 
   var handleMouseDown = (0, _react.useCallback)(function () {
-    dispatch({
-      type: _MenuContext.MenuActionTypes.MoveFocus,
-      to: _MenuContext.MoveFocusTo.Specific,
-      id: menuitemRef.current.id
-    });
-  }, [dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
+    if (!hasFocus) {
+      dispatch({
+        type: _MenuContext.MenuActionTypes.MoveFocus,
+        to: _MenuContext.MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
+  }, [hasFocus, dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
 
   var handleMouseMove = (0, _react.useCallback)(function () {
-    dispatch({
-      type: _MenuContext.MenuActionTypes.MoveFocus,
-      to: _MenuContext.MoveFocusTo.Specific,
-      id: menuitemRef.current.id
-    });
-  }, [dispatch]);
+    if (!hasFocus) {
+      dispatch({
+        type: _MenuContext.MenuActionTypes.MoveFocus,
+        to: _MenuContext.MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
+  }, [hasFocus, dispatch]);
   var handleMouseLeave = (0, _react.useCallback)(function () {
     dispatch({
       type: _MenuContext.MenuActionTypes.MoveFocus,

package/cjs/Picker/PickerToggle.js

@@ -104,15 +104,17 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
 
     if (input) {
-      inputRef.current.focus();
+      var _inputRef$current;
+
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
   }, [input, onFocus]);
   var handleBlur = (0, _react.useCallback)(function (event) {
     if (document.activeElement !== inputRef.current) {
-      var _inputRef$current;
+      var _inputRef$current2;
 
       setActive(false);
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
     }
 
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);

package/cjs/RadioGroup/RadioGroup.js

@@ -73,10 +73,10 @@ var RadioGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [disabled, handleChange, inline, isControlled, name, plaintext, readOnly, value]);
   return /*#__PURE__*/_react.default.createElement(RadioContext.Provider, {
     value: contextValue
-  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
+  }, plaintext ? /*#__PURE__*/_react.default.createElement(_Plaintext.default, (0, _extends2.default)({
     ref: ref,
     localeKey: "notSelected"
-  }, value ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  }, rest), value ? children : null) : /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "radiogroup"
   }, rest, {
     ref: ref,

package/cjs/Rate/Rate.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _Star = _interopRequireDefault(require("@rsuite/icons/legacy/Star"));
 
 var _utils = require("../utils");
@@ -138,7 +140,7 @@ var Rate = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
       localeKey: "notSelected",
       className: className
-    }, value + "(" + max + ")");
+    }, !(0, _isNil.default)(value) ? value + "(" + max + ")" : null);
   }
 
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({

package/cjs/utils/useElementResize.js

@@ -17,9 +17,12 @@ var _resizeObserver = require("@juggle/resize-observer");
 function useElementResize(eventTarget, listener) {
   var resizeObserver = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
-    var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-    resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
-    resizeObserver.current.observe(target);
+    if (!resizeObserver.current) {
+      var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
+      resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
+      resizeObserver.current.observe(target);
+    }
+
     return function () {
       var _resizeObserver$curre;