rsuite 5.2.0 → 5.2.4

package/cjs/Picker/utils.js

@@ -405,9 +405,15 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
 
       if (event.key.length === 1 && /\w/.test(event.key)) {
-        var _searchInputRef$curre;
+        var _event$target;
 
-        searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        // Exclude Input
+        // eg: <SelectPicker renderExtraFooter={() => <Input />} />
+        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {
+          var _searchInputRef$curre;
+
+          (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        }
       }
     }
 
@@ -486,23 +492,14 @@ function useSearch(props) {
 
 /**
  * A hook of the exposed method of Picker
- *
- * {
- *   root: Element;
- *   overlay: Element;
- *   target?: Element;
- *   updatePosition:() => void;
- *   open:() => void;
- *   close:() => void;
- * }
- * @param ref
- * @param params
  */
-function usePublicMethods(ref, _ref, disabled) {
-  var triggerRef = _ref.triggerRef,
-      overlayRef = _ref.overlayRef,
-      targetRef = _ref.targetRef,
-      rootRef = _ref.rootRef;
+function usePublicMethods(ref, parmas) {
+  var triggerRef = parmas.triggerRef,
+      overlayRef = parmas.overlayRef,
+      targetRef = parmas.targetRef,
+      rootRef = parmas.rootRef,
+      listRef = parmas.listRef,
+      inline = parmas.inline;
   var handleOpen = (0, _react.useCallback)(function () {
     var _triggerRef$current3;
 
@@ -518,10 +515,9 @@ function usePublicMethods(ref, _ref, disabled) {
 
     (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
   }, [triggerRef]);
-
-  if (!disabled) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _react.useImperativeHandle)(ref, function () {
+  (0, _react.useImperativeHandle)(ref, function () {
+    // Tree and CheckTree
+    if (inline) {
       return {
         get root() {
           var _triggerRef$current6;
@@ -529,18 +525,43 @@ function usePublicMethods(ref, _ref, disabled) {
           return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root;
         },
 
-        get overlay() {
-          return overlayRef.current;
-        },
+        get list() {
+          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
+            throw new Error('The list is not found, please set `virtualized` for the component.');
+          }
 
-        get target() {
-          return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-        },
+          return listRef === null || listRef === void 0 ? void 0 : listRef.current;
+        }
 
-        updatePosition: handleUpdatePosition,
-        open: handleOpen,
-        close: handleClose
       };
-    });
-  }
+    }
+
+    return {
+      get root() {
+        var _triggerRef$current7;
+
+        return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root;
+      },
+
+      get overlay() {
+        return overlayRef.current;
+      },
+
+      get target() {
+        return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
+      },
+
+      get list() {
+        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
+          throw new Error("\n            The list is not found.\n            1.Please set virtualized for the component.\n            2.Please confirm whether the picker is open.\n          ");
+        }
+
+        return listRef === null || listRef === void 0 ? void 0 : listRef.current;
+      },
+
+      updatePosition: handleUpdatePosition,
+      open: handleOpen,
+      close: handleClose
+    };
+  });
 }

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/Sidenav/SidenavDropdownItem.js

@@ -29,6 +29,8 @@ var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
 var _DropdownContext = _interopRequireDefault(require("../Dropdown/DropdownContext"));
 
+var _useRenderDropdownItem = require("../Dropdown/useRenderDropdownItem");
+
 /**
  * Tree View Node
  * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
@@ -78,34 +80,39 @@ var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props
   var menuitemEventHandlers = {
     onClick: (0, _utils.createChainedFunction)(handleClick, onClick)
   };
+  var renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);
 
   if (divider) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem((0, _extends2.default)({
       ref: ref,
-      role: "separator",
+      role: 'separator',
       style: style,
       className: merge(prefix('divider'), className)
     }, rest));
   }
 
   if (panel) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem((0, _extends2.default)({
       ref: ref,
-      role: "none presentation",
+      role: 'none presentation',
       style: style,
       className: merge(prefix('panel'), className)
-    }, rest), children);
+    }, rest, {
+      children: children
+    }));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({
+  return renderDropdownItem((0, _extends2.default)({
     ref: ref
   }, rest, {
     style: style,
     className: classes,
-    "aria-current": selected || undefined
-  }, menuitemEventHandlers), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
-    className: prefix('menu-icon')
-  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+    'aria-current': selected || undefined
+  }, menuitemEventHandlers, {
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+      className: prefix('menu-icon')
+    }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null))
+  }), _SafeAnchor.default);
 });
 
 SidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';

package/cjs/TreePicker/TreePicker.js

@@ -437,10 +437,13 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();
   }, [activeNode, setSearchKeyword, valueKey]);
   (0, _Picker.usePublicMethods)(ref, {
+    rootRef: inline ? treeViewRef : null,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
-  }, inline);
+    targetRef: targetRef,
+    listRef: listRef,
+    inline: inline
+  });
   var handleFocusItem = (0, _react.useCallback)(function (key) {
     var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -650,7 +653,7 @@ var TreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "tree",
       id: id ? id + "-listbox" : undefined,
-      ref: inline ? (0, _utils.mergeRefs)(treeViewRef, ref) : treeViewRef,
+      ref: treeViewRef,
       className: classes,
       style: styles,
       onKeyDown: inline ? handleTreeKeyDown : undefined

package/cjs/utils/useElementResize.d.ts

@@ -5,4 +5,4 @@
  * @param eventTarget The target to listen for events on
  * @param listener An event handler
  */
-export default function useElementResize(eventTarget: EventTarget | (() => EventTarget), listener: EventListenerOrEventListenerObject): void;
+export default function useElementResize(eventTarget: Element | (() => Element), listener: ResizeObserverCallback): void;

package/cjs/utils/useElementResize.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 exports.__esModule = true;
 exports.default = useElementResize;
 
 var _react = require("react");
 
-var _elementResizeEvent = _interopRequireWildcard(require("element-resize-event"));
+var _resizeObserver = require("@juggle/resize-observer");
 
 /**
  * Attach the event handler directly to the specified DOM element,
@@ -17,11 +15,18 @@ var _elementResizeEvent = _interopRequireWildcard(require("element-resize-event"
  * @param listener An event handler
  */
 function useElementResize(eventTarget, listener) {
+  var resizeObserver = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
-    var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-    (0, _elementResizeEvent.default)(target, listener);
+    if (!resizeObserver.current) {
+      var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
+      resizeObserver.current = new _resizeObserver.ResizeObserver(listener);
+      resizeObserver.current.observe(target);
+    }
+
     return function () {
-      return (0, _elementResizeEvent.unbind)(target);
+      var _resizeObserver$curre;
+
+      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 ? void 0 : _resizeObserver$curre.disconnect();
     };
   }, [eventTarget, listener]);
 }

package/dist/rsuite-rtl.css

@@ -2057,6 +2057,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-red-700);
   --rs-btn-link-hover-text: var(--rs-red-800);
   --rs-btn-link-active-text: var(--rs-red-900);
+  --rs-iconbtn-primary-addon: var(--rs-red-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-red-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-red-800);
 }
 .rs-theme-dark .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-700);
@@ -2075,6 +2078,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-red-500);
   --rs-btn-link-hover-text: var(--rs-red-400);
   --rs-btn-link-active-text: var(--rs-red-200);
+  --rs-iconbtn-primary-addon: var(--rs-red-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-red-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-red-400);
 }
 .rs-theme-high-contrast .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-700);
@@ -2111,6 +2117,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-orange-700);
   --rs-btn-link-hover-text: var(--rs-orange-800);
   --rs-btn-link-active-text: var(--rs-orange-900);
+  --rs-iconbtn-primary-addon: var(--rs-orange-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-orange-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-orange-800);
 }
 .rs-theme-dark .rs-btn-orange {
   --rs-btn-primary-bg: var(--rs-orange-700);
@@ -2129,6 +2138,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-orange-500);
   --rs-btn-link-hover-text: var(--rs-orange-400);
   --rs-btn-link-active-text: var(--rs-orange-200);
+  --rs-iconbtn-primary-addon: var(--rs-orange-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-orange-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-orange-400);
 }
 .rs-theme-high-contrast .rs-btn-orange {
   --rs-btn-primary-bg: var(--rs-orange-700);
@@ -2165,6 +2177,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-yellow-700);
   --rs-btn-link-hover-text: var(--rs-yellow-800);
   --rs-btn-link-active-text: var(--rs-yellow-900);
+  --rs-iconbtn-primary-addon: var(--rs-yellow-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-yellow-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-yellow-800);
 }
 .rs-theme-dark .rs-btn-yellow {
   --rs-btn-primary-bg: var(--rs-yellow-700);
@@ -2183,6 +2198,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-yellow-500);
   --rs-btn-link-hover-text: var(--rs-yellow-400);
   --rs-btn-link-active-text: var(--rs-yellow-200);
+  --rs-iconbtn-primary-addon: var(--rs-yellow-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-yellow-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-yellow-400);
 }
 .rs-theme-high-contrast .rs-btn-yellow {
   --rs-btn-primary-bg: var(--rs-yellow-700);
@@ -2219,6 +2237,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-green-700);
   --rs-btn-link-hover-text: var(--rs-green-800);
   --rs-btn-link-active-text: var(--rs-green-900);
+  --rs-iconbtn-primary-addon: var(--rs-green-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-green-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-green-800);
 }
 .rs-theme-dark .rs-btn-green {
   --rs-btn-primary-bg: var(--rs-green-700);
@@ -2237,6 +2258,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-green-500);
   --rs-btn-link-hover-text: var(--rs-green-400);
   --rs-btn-link-active-text: var(--rs-green-200);
+  --rs-iconbtn-primary-addon: var(--rs-green-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-green-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-green-400);
 }
 .rs-theme-high-contrast .rs-btn-green {
   --rs-btn-primary-bg: var(--rs-green-700);
@@ -2273,6 +2297,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-cyan-700);
   --rs-btn-link-hover-text: var(--rs-cyan-800);
   --rs-btn-link-active-text: var(--rs-cyan-900);
+  --rs-iconbtn-primary-addon: var(--rs-cyan-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-cyan-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-cyan-800);
 }
 .rs-theme-dark .rs-btn-cyan {
   --rs-btn-primary-bg: var(--rs-cyan-700);
@@ -2291,6 +2318,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-cyan-500);
   --rs-btn-link-hover-text: var(--rs-cyan-400);
   --rs-btn-link-active-text: var(--rs-cyan-200);
+  --rs-iconbtn-primary-addon: var(--rs-cyan-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-cyan-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-cyan-400);
 }
 .rs-theme-high-contrast .rs-btn-cyan {
   --rs-btn-primary-bg: var(--rs-cyan-700);
@@ -2327,6 +2357,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-blue-700);
   --rs-btn-link-hover-text: var(--rs-blue-800);
   --rs-btn-link-active-text: var(--rs-blue-900);
+  --rs-iconbtn-primary-addon: var(--rs-blue-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-blue-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-blue-800);
 }
 .rs-theme-dark .rs-btn-blue {
   --rs-btn-primary-bg: var(--rs-blue-700);
@@ -2345,6 +2378,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-blue-500);
   --rs-btn-link-hover-text: var(--rs-blue-400);
   --rs-btn-link-active-text: var(--rs-blue-200);
+  --rs-iconbtn-primary-addon: var(--rs-blue-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-blue-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-blue-400);
 }
 .rs-theme-high-contrast .rs-btn-blue {
   --rs-btn-primary-bg: var(--rs-blue-700);
@@ -2381,6 +2417,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-violet-700);
   --rs-btn-link-hover-text: var(--rs-violet-800);
   --rs-btn-link-active-text: var(--rs-violet-900);
+  --rs-iconbtn-primary-addon: var(--rs-violet-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-violet-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-violet-800);
 }
 .rs-theme-dark .rs-btn-violet {
   --rs-btn-primary-bg: var(--rs-violet-700);
@@ -2399,6 +2438,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-violet-500);
   --rs-btn-link-hover-text: var(--rs-violet-400);
   --rs-btn-link-active-text: var(--rs-violet-200);
+  --rs-iconbtn-primary-addon: var(--rs-violet-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-violet-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-violet-400);
 }
 .rs-theme-high-contrast .rs-btn-violet {
   --rs-btn-primary-bg: var(--rs-violet-700);
@@ -10021,13 +10063,13 @@ textarea.rs-picker-search-input {
   border: 1px solid #e5e5ea;
   border: 1px solid var(--rs-border-primary);
 }
-.rs-panel-group .rs-panel {
+.rs-panel-group > .rs-panel {
   border: none;
 }
-.rs-panel-group .rs-panel + .rs-panel {
+.rs-panel-group > .rs-panel + .rs-panel {
   position: relative;
 }
-.rs-panel-group .rs-panel + .rs-panel::before {
+.rs-panel-group > .rs-panel + .rs-panel::before {
   content: '';
   position: absolute;
   top: 0;
@@ -12565,6 +12607,9 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   outline: 0;
   overflow: hidden;
 }
+.rs-sidenav-item:hover {
+  text-decoration: none;
+}
 .rs-sidenav-item:focus-visible,
 .rs-sidenav-item.rs-sidenav-item-focus {
   -webkit-box-shadow: inset var(--rs-state-focus-shadow-slim);
@@ -13835,9 +13880,6 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   border-left: 1px solid #f2f2f5;
   border-left: 1px solid var(--rs-border-secondary);
 }
-.rs-table-column-group-cell-content {
-  display: table-cell;
-}
 .rs-table-cell-expand-wrapper {
   margin-left: 10px;
   display: inline-block;