rsuite 5.13.0 → 5.13.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.13.1](https://github.com/rsuite/rsuite/compare/v5.13.0...v5.13.1) (2022-05-27)
+
+### Bug Fixes
+
+- **CheckTreePicker:** fix duplicated key when data changed ([#2486](https://github.com/rsuite/rsuite/issues/2486)) ([#2500](https://github.com/rsuite/rsuite/issues/2500)) ([d155719](https://github.com/rsuite/rsuite/commit/d155719a9ae9d9cec119a0c33281c628379b4a78))
+- **Sidenav:** correct Sidenav.Toggle styles ([#2497](https://github.com/rsuite/rsuite/issues/2497)) ([b3168e4](https://github.com/rsuite/rsuite/commit/b3168e426c3a2caad1689e9e9d3babf1d76022b8))
+- **Sidenav:** correct subtle Sidenav item hover styles ([#2498](https://github.com/rsuite/rsuite/issues/2498)) ([2d853ee](https://github.com/rsuite/rsuite/commit/2d853ee8419a3283683bbf897442b9bc789b5a2a))
+- **Sidenav:** fix Sidenav.Toggle icon direction ([#2495](https://github.com/rsuite/rsuite/issues/2495)) ([c490632](https://github.com/rsuite/rsuite/commit/c490632cc613807ff27124140b4250fc132aa8b2))
+- **Whisper:** correct type declarations for ref ([856877a](https://github.com/rsuite/rsuite/commit/856877aec5a20710b94f6ddf241be76ecd34c88d))
+
+### Features
+
+- export WhisperInstance ([1c4eb5f](https://github.com/rsuite/rsuite/commit/1c4eb5ffbb6b5e69987436c03cc133f39c245866))
+
 # [5.13.0](https://github.com/rsuite/rsuite/compare/v5.12.0...v5.13.0) (2022-05-19)
 
 ### Bug Fixes

package/Sidenav/styles/index.less

@@ -12,6 +12,8 @@
 .rs-sidenav {
   transition: width @sidenav-collapse-transition-config;
   width: @sidenav-default-width;
+  display: flex;
+  flex-direction: column;
 }
 
 .rs-sidenav-nav {
@@ -185,6 +187,22 @@
   }
 }
 
+// TODO Consider rename as sidenav-footer
+.rs-sidenav-toggle {
+  height: @sidenav-footer-height;
+  border-top: 1px solid;
+  margin-top: auto;
+
+  &-button {
+    float: right;
+    width: @sidenav-compact-width;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+    color: inherit;
+  }
+}
+
 // Expanded styles
 .rs-sidenav-collapse-in {
   width: @sidenav-collapse-in-width;
@@ -414,12 +432,14 @@
   color: var(--rs-sidenav-default-text);
 
   .rs-sidenav-item,
-  .rs-dropdown-toggle {
+  .rs-dropdown-toggle,
+  .rs-sidenav-toggle-button {
     background-color: var(--rs-sidenav-default-bg);
   }
 
   .rs-sidenav-item:hover,
   .rs-dropdown .rs-dropdown-toggle:hover,
+  .rs-sidenav-toggle-button:hover,
   .rs-dropdown.rs-dropdown-open .rs-dropdown-toggle {
     background-color: var(--rs-sidenav-default-hover-bg);
     color: var(--rs-sidenav-default-hover-text);
@@ -431,6 +451,10 @@
     color: var(--rs-sidenav-default-selected-text);
   }
 
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-default-footer-border);
+  }
+
   // Collapsed
   &.rs-sidenav-collapse-out {
     .rs-dropdown-item.rs-dropdown-item-active {
@@ -480,6 +504,7 @@
 
   .rs-sidenav-item,
   .rs-dropdown .rs-dropdown-toggle,
+  .rs-sidenav-toggle-button,
   .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle {
     background-color: var(--rs-sidenav-inverse-bg);
 
@@ -491,7 +516,8 @@
 
   .rs-dropdown-item,
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
-  .rs-dropdown-item > .rs-dropdown-item-toggle {
+  .rs-dropdown-item > .rs-dropdown-item-toggle,
+  .rs-sidenav-toggle-button {
     color: var(--rs-sidenav-inverse-text);
 
     &:hover,
@@ -527,6 +553,10 @@
   .rs-dropdown-item.rs-dropdown-item-active {
     background-color: var(--rs-sidenav-inverse-selected-bg);
   }
+
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-inverse-footer-border);
+  }
 }
 
 // Subtle Sidenav
@@ -535,12 +565,14 @@
   color: var(--rs-sidenav-subtle-text);
 
   .rs-sidenav-item,
-  .rs-dropdown .rs-dropdown-toggle {
+  .rs-dropdown .rs-dropdown-toggle,
+  .rs-dropdown .rs-dropdown-item:not(.rs-dropdown-item-submenu),
+  .rs-sidenav-toggle-button {
     background-color: transparent;
 
     &:hover,
     &:focus {
-      background-color: transparent;
+      background-color: var(--rs-sidenav-subtle-hover-bg);
       color: var(--rs-sidenav-subtle-hover-text);
     }
   }
@@ -560,6 +592,10 @@
       background-color: var(--rs-sidenav-subtle-hover-bg);
     }
   }
+
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-subtle-footer-border);
+  }
 }
 
 .rs-sidenav-subtle.rs-sidenav-collapse-in,

package/cjs/Overlay/OverlayTrigger.d.ts

@@ -56,10 +56,10 @@ export interface OverlayTriggerProps extends StandardProps, AnimationEventProps
     onClose?: () => void;
 }
 export interface OverlayTriggerInstance {
-    root: HTMLElement;
+    root: HTMLElement | undefined;
     updatePosition: () => void;
-    open: () => void;
-    close: () => void;
+    open: (delay?: number) => void;
+    close: (delay?: number) => void;
 }
-declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<unknown>>;
+declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerInstance>>;
 export default OverlayTrigger;

package/cjs/Sidenav/SidenavToggle.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface SidenavToggleProps extends WithAsProps {
-    /** Expand then nav */
+    /**
+     * Expand then nav
+     *
+     * @deprecated Use <Sidenav expanded> instead.
+     */
     expanded?: boolean;
     /** Callback function for menu state switching */
     onToggle?: (expanded: boolean, event: React.MouseEvent) => void;

package/cjs/Sidenav/SidenavToggle.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,24 +23,37 @@ var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"
 
 var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
 
+var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+
+var _Sidenav = require("./Sidenav");
+
 var SidenavToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
+
+  if (!sidenav) {
+    throw new Error('<Sidenav.Toggle> must be rendered within a <Sidenav>');
+  }
+
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
-      expanded = props.expanded,
+      DEPRECATED_expanded = props.expanded,
       className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'sidenav-toggle' : _props$classPrefix,
       onToggle = props.onToggle,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "expanded", "className", "classPrefix", "onToggle"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "expanded", "className", "classPrefix", "onToggle"]); // if `expanded` prop is provided, it takes priority
+
+  var expanded = DEPRECATED_expanded !== null && DEPRECATED_expanded !== void 0 ? DEPRECATED_expanded : sidenav.expanded;
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix;
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix;
 
   var classes = merge(className, withClassPrefix({
     collapsed: !expanded
   }));
-  var Icon = expanded ? _AngleRight.default : _AngleLeft.default;
+  var Icon = expanded ? _AngleLeft.default : _AngleRight.default;
 
   var handleToggle = function handleToggle(event) {
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded, event);
@@ -48,17 +63,18 @@ var SidenavToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    appearance: "default",
     icon: /*#__PURE__*/_react.default.createElement(Icon, null),
-    onClick: handleToggle
+    className: prefix('button'),
+    onClick: handleToggle,
+    "aria-label": expanded ? 'Collapse' : 'Expand'
   }));
 });
 
-SidenavToggle.displayName = 'SidenavToggle';
+SidenavToggle.displayName = 'Sidenav.Toggle';
 SidenavToggle.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
-  expanded: _propTypes.default.bool,
+  expanded: (0, _deprecatePropType.default)(_propTypes.default.bool, 'Use <Sidenav expanded> instead.'),
   onToggle: _propTypes.default.func
 };
 var _default = SidenavToggle;

package/cjs/Whisper/Whisper.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
+import { OverlayTriggerInstance } from '../Overlay/OverlayTrigger';
 import { OverlayTriggerProps } from '../Overlay/OverlayTrigger';
 export declare type WhisperProps = OverlayTriggerProps;
-export interface WhisperInstance extends React.Component<WhisperProps> {
-    open: (delay?: number) => void;
-    close: (delay?: number) => void;
-}
-declare const Whisper: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<unknown>>;
+export declare type WhisperInstance = OverlayTriggerInstance;
+declare const Whisper: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerInstance>>;
 export default Whisper;

package/cjs/Whisper/test/Whisper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/Whisper/test/Whisper.test.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Whisper = _interopRequireDefault(require("../Whisper"));
+
+var _whisperRef$current, _whisperRef$current2, _whisperRef$current3, _whisperRef$current4, _whisperRef$current5;
+
+var whisperRef = /*#__PURE__*/_react.default.createRef();
+
+/*#__PURE__*/
+_react.default.createElement(_Whisper.default, {
+  ref: whisperRef,
+  speaker: /*#__PURE__*/_react.default.createElement("div", null)
+}, /*#__PURE__*/_react.default.createElement("div", null));
+
+(_whisperRef$current = whisperRef.current) === null || _whisperRef$current === void 0 ? void 0 : _whisperRef$current.open();
+(_whisperRef$current2 = whisperRef.current) === null || _whisperRef$current2 === void 0 ? void 0 : _whisperRef$current2.open(300);
+(_whisperRef$current3 = whisperRef.current) === null || _whisperRef$current3 === void 0 ? void 0 : _whisperRef$current3.close();
+(_whisperRef$current4 = whisperRef.current) === null || _whisperRef$current4 === void 0 ? void 0 : _whisperRef$current4.close(300);
+(_whisperRef$current5 = whisperRef.current) === null || _whisperRef$current5 === void 0 ? void 0 : _whisperRef$current5.updatePosition();

package/cjs/index.d.ts

@@ -7,7 +7,7 @@ export type { ButtonToolbarProps } from './ButtonToolbar';
 export { default as ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
 export { default as Whisper } from './Whisper';
-export type { WhisperProps } from './Whisper';
+export type { WhisperProps, WhisperInstance } from './Whisper';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { default as Popover } from './Popover';

package/cjs/utils/treeUtils.js

@@ -776,11 +776,7 @@ function useFlattenTreeData(_ref8) {
   var forceUpdate = (0, _react.useCallback)(function () {
     dispatch(Object.create(null));
   }, [dispatch]);
-
-  var _useRef = (0, _react.useRef)({}),
-      _useRef$current = _useRef.current,
-      flattenNodes = _useRef$current === void 0 ? {} : _useRef$current;
-
+  var flattenNodes = (0, _react.useRef)({});
   var flattenTreeData = (0, _react.useCallback)(function (treeData, ref, parent, layer) {
     if (layer === void 0) {
       layer = 1;
@@ -795,20 +791,20 @@ function useFlattenTreeData(_ref8) {
 
       var refKey = ref + "-" + index;
       node.refKey = refKey;
-      flattenNodes[refKey] = (0, _extends3.default)((_extends2 = {
+      flattenNodes.current[refKey] = (0, _extends3.default)((_extends2 = {
         layer: layer
       }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {
         return (0, _utils2.shallowEqual)(node[valueKey], value);
       }), _extends2), node);
 
       if (parent) {
-        flattenNodes[refKey].parent = (0, _omit2.default)(parent, 'parent', 'children');
+        flattenNodes.current[refKey].parent = (0, _omit2.default)(parent, 'parent', 'children');
       }
 
       flattenTreeData(node[childrenKey], refKey, node, layer + 1);
     });
-    callback === null || callback === void 0 ? void 0 : callback(flattenNodes);
-  }, [childrenKey, valueKey, labelKey, callback, uncheckableItemValues, flattenNodes]);
+    callback === null || callback === void 0 ? void 0 : callback(flattenNodes.current);
+  }, [childrenKey, valueKey, labelKey, callback, uncheckableItemValues]);
   var serializeListOnlyParent = (0, _react.useCallback)(function (nodes, key) {
     var list = [];
     Object.keys(nodes).forEach(function (refKey) {
@@ -909,12 +905,14 @@ function useFlattenTreeData(_ref8) {
   };
 
   (0, _react.useEffect)(function () {
+    // when data is changed, should clear the flattenNodes, avoid duplicate keys
+    flattenNodes.current = {};
     flattenTreeData(data, '0');
   }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     forceUpdate: forceUpdate,
-    flattenNodes: flattenNodes,
+    flattenNodes: flattenNodes.current,
     flattenTreeData: flattenTreeData,
     serializeListOnlyParent: serializeListOnlyParent,
     unSerializeList: unSerializeList,

package/dist/rsuite-rtl.css

@@ -231,15 +231,18 @@
   --rs-sidenav-default-selected-text: #1675e0;
   --rs-sidenav-default-hover-bg: #e5e5ea;
   --rs-sidenav-default-hover-text: #575757;
+  --rs-sidenav-default-footer-border: #e5e5ea;
   --rs-sidenav-inverse-bg: #3498ff;
   --rs-sidenav-inverse-text: #fff;
   --rs-sidenav-inverse-selected-bg: #1675e0;
   --rs-sidenav-inverse-hover-bg: #2589f5;
+  --rs-sidenav-inverse-footer-border: #2589f5;
   --rs-sidenav-subtle-bg: #fff;
   --rs-sidenav-subtle-text: #8e8e93;
   --rs-sidenav-subtle-selected-text: #1675e0;
   --rs-sidenav-subtle-hover-bg: #f7f7fa;
   --rs-sidenav-subtle-hover-text: #575757;
+  --rs-sidenav-subtle-footer-border: #e5e5ea;
   --rs-input-bg: #fff;
   --rs-input-focus-border: #3498ff;
   --rs-input-disabled-bg: #f7f7fa;
@@ -550,15 +553,18 @@
   --rs-sidenav-default-selected-text: #34c3ff;
   --rs-sidenav-default-hover-bg: #292d33;
   --rs-sidenav-default-hover-text: #e9ebf0;
+  --rs-sidenav-default-footer-border: #3c3f43;
   --rs-sidenav-inverse-bg: #169de0;
   --rs-sidenav-inverse-text: #fff;
   --rs-sidenav-inverse-selected-bg: #59d0ff;
   --rs-sidenav-inverse-hover-bg: #25b3f5;
+  --rs-sidenav-inverse-footer-border: #25b3f5;
   --rs-sidenav-subtle-bg: transparent;
   --rs-sidenav-subtle-text: #a4a9b3;
   --rs-sidenav-subtle-selected-text: #34c3ff;
   --rs-sidenav-subtle-hover-bg: #292d33;
   --rs-sidenav-subtle-hover-text: #e9ebf0;
+  --rs-sidenav-subtle-footer-border: #3c3f43;
   --rs-input-bg: #1a1d24;
   --rs-input-focus-border: #34c3ff;
   --rs-input-disabled-bg: #292d33;
@@ -875,16 +881,19 @@
   --rs-sidenav-default-selected-text: #ffff00;
   --rs-sidenav-default-hover-bg: transparent;
   --rs-sidenav-default-hover-text: #ffff00;
+  --rs-sidenav-default-footer-border: #e9ebf0;
   --rs-sidenav-inverse-bg: #1a1d24;
   --rs-sidenav-inverse-text: #e9ebf0;
   --rs-sidenav-inverse-selected-bg: transparent;
   --rs-sidenav-inverse-selected-text: #ffff00;
   --rs-sidenav-inverse-hover-bg: transparent;
+  --rs-sidenav-inverse-footer-border: #e9ebf0;
   --rs-sidenav-subtle-bg: #1a1d24;
   --rs-sidenav-subtle-text: #e9ebf0;
   --rs-sidenav-subtle-selected-text: #ffff00;
   --rs-sidenav-subtle-hover-bg: transparent;
   --rs-sidenav-subtle-hover-text: #ffff00;
+  --rs-sidenav-subtle-footer-border: #e9ebf0;
   --rs-input-bg: #1a1d24;
   --rs-input-focus-border: #ffff00;
   --rs-input-disabled-bg: #292d33;
@@ -12488,6 +12497,13 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-transition: width 0.2s ease-in;
   transition: width 0.2s ease-in;
   width: 56px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 .rs-sidenav-nav {
   list-style: none;
@@ -12673,6 +12689,19 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-theme-high-contrast .rs-sidenav-item.rs-sidenav-item-focus {
   outline-offset: 2px;
 }
+.rs-sidenav-toggle {
+  height: 50px;
+  border-top: 1px solid;
+  margin-top: auto;
+}
+.rs-sidenav-toggle-button {
+  float: left;
+  width: 56px;
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+}
 .rs-sidenav-collapse-in {
   width: 100%;
 }
@@ -12902,12 +12931,14 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   color: var(--rs-sidenav-default-text);
 }
 .rs-sidenav-default .rs-sidenav-item,
-.rs-sidenav-default .rs-dropdown-toggle {
+.rs-sidenav-default .rs-dropdown-toggle,
+.rs-sidenav-default .rs-sidenav-toggle-button {
   background-color: #f7f7fa;
   background-color: var(--rs-sidenav-default-bg);
 }
 .rs-sidenav-default .rs-sidenav-item:hover,
 .rs-sidenav-default .rs-dropdown .rs-dropdown-toggle:hover,
+.rs-sidenav-default .rs-sidenav-toggle-button:hover,
 .rs-sidenav-default .rs-dropdown.rs-dropdown-open .rs-dropdown-toggle {
   background-color: #e5e5ea;
   background-color: var(--rs-sidenav-default-hover-bg);
@@ -12920,6 +12951,10 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   color: #1675e0;
   color: var(--rs-sidenav-default-selected-text);
 }
+.rs-sidenav-default .rs-sidenav-toggle {
+  border-top-color: #e5e5ea;
+  border-top-color: var(--rs-sidenav-default-footer-border);
+}
 .rs-sidenav-default.rs-sidenav-collapse-out .rs-dropdown-item.rs-dropdown-item-active {
   background-color: rgba(204, 233, 255, 0.5);
   background-color: var(--rs-menuitem-active-bg);
@@ -12982,34 +13017,41 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-sidenav-inverse .rs-sidenav-item,
 .rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle,
+.rs-sidenav-inverse .rs-sidenav-toggle-button,
 .rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle {
   background-color: #3498ff;
   background-color: var(--rs-sidenav-inverse-bg);
 }
 .rs-sidenav-inverse .rs-sidenav-item:hover,
 .rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle:hover,
+.rs-sidenav-inverse .rs-sidenav-toggle-button:hover,
 .rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle:hover,
 .rs-sidenav-inverse .rs-sidenav-item:focus,
 .rs-sidenav-inverse .rs-dropdown .rs-dropdown-toggle:focus,
+.rs-sidenav-inverse .rs-sidenav-toggle-button:focus,
 .rs-sidenav-inverse .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle:focus {
   background-color: #2589f5;
   background-color: var(--rs-sidenav-inverse-hover-bg);
 }
 .rs-sidenav-inverse .rs-dropdown-item,
 .rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-menu-toggle,
-.rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle {
+.rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle,
+.rs-sidenav-inverse .rs-sidenav-toggle-button {
   color: #fff;
   color: var(--rs-sidenav-inverse-text);
 }
 .rs-sidenav-inverse .rs-dropdown-item:hover,
 .rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-menu-toggle:hover,
 .rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle:hover,
+.rs-sidenav-inverse .rs-sidenav-toggle-button:hover,
 .rs-sidenav-inverse .rs-dropdown-item:focus,
 .rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-menu-toggle:focus,
 .rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle:focus,
+.rs-sidenav-inverse .rs-sidenav-toggle-button:focus,
 .rs-sidenav-inverse .rs-dropdown-item.rs-dropdown-item-focus,
 .rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-menu-toggle.rs-dropdown-item-focus,
-.rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus {
+.rs-sidenav-inverse .rs-dropdown-item > .rs-dropdown-item-toggle.rs-dropdown-item-focus,
+.rs-sidenav-inverse .rs-sidenav-toggle-button.rs-dropdown-item-focus {
   background-color: #2589f5;
   background-color: var(--rs-sidenav-inverse-hover-bg);
   color: #fff;
@@ -13042,20 +13084,31 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   background-color: #1675e0;
   background-color: var(--rs-sidenav-inverse-selected-bg);
 }
+.rs-sidenav-inverse .rs-sidenav-toggle {
+  border-top-color: #2589f5;
+  border-top-color: var(--rs-sidenav-inverse-footer-border);
+}
 .rs-sidenav-subtle {
   background-color: transparent;
   color: #8e8e93;
   color: var(--rs-sidenav-subtle-text);
 }
 .rs-sidenav-subtle .rs-sidenav-item,
-.rs-sidenav-subtle .rs-dropdown .rs-dropdown-toggle {
+.rs-sidenav-subtle .rs-dropdown .rs-dropdown-toggle,
+.rs-sidenav-subtle .rs-dropdown .rs-dropdown-item:not(.rs-dropdown-item-submenu),
+.rs-sidenav-subtle .rs-sidenav-toggle-button {
   background-color: transparent;
 }
 .rs-sidenav-subtle .rs-sidenav-item:hover,
 .rs-sidenav-subtle .rs-dropdown .rs-dropdown-toggle:hover,
+.rs-sidenav-subtle .rs-dropdown .rs-dropdown-item:not(.rs-dropdown-item-submenu):hover,
+.rs-sidenav-subtle .rs-sidenav-toggle-button:hover,
 .rs-sidenav-subtle .rs-sidenav-item:focus,
-.rs-sidenav-subtle .rs-dropdown .rs-dropdown-toggle:focus {
-  background-color: transparent;
+.rs-sidenav-subtle .rs-dropdown .rs-dropdown-toggle:focus,
+.rs-sidenav-subtle .rs-dropdown .rs-dropdown-item:not(.rs-dropdown-item-submenu):focus,
+.rs-sidenav-subtle .rs-sidenav-toggle-button:focus {
+  background-color: #f7f7fa;
+  background-color: var(--rs-sidenav-subtle-hover-bg);
   color: #575757;
   color: var(--rs-sidenav-subtle-hover-text);
 }
@@ -13073,6 +13126,10 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   background-color: #f7f7fa;
   background-color: var(--rs-sidenav-subtle-hover-bg);
 }
+.rs-sidenav-subtle .rs-sidenav-toggle {
+  border-top-color: #e5e5ea;
+  border-top-color: var(--rs-sidenav-subtle-footer-border);
+}
 .rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-menu-toggle,
 .rs-sidenav-subtle.rs-sidenav-collapsing .rs-dropdown-item > .rs-dropdown-menu-toggle,
 .rs-sidenav-subtle.rs-sidenav-collapse-in .rs-dropdown-item > .rs-dropdown-item-toggle,