rsuite 5.13.0 → 5.13.1

package/esm/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/esm/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/esm/Sidenav/SidenavToggle.js

@@ -1,29 +1,41 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '../IconButton';
 import { useClassNames } from '../utils';
 import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
+import deprecatePropType from '../utils/deprecatePropType';
+import { SidenavContext } from './Sidenav';
 var SidenavToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var sidenav = useContext(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 = _objectWithoutPropertiesLoose(props, ["as", "expanded", "className", "classPrefix", "onToggle"]);
+      rest = _objectWithoutPropertiesLoose(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 = 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 : AngleLeft;
+  var Icon = expanded ? AngleLeft : AngleRight;
 
   var handleToggle = function handleToggle(event) {
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded, event);
@@ -33,16 +45,17 @@ var SidenavToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     className: classes
   }), /*#__PURE__*/React.createElement(IconButton, {
-    appearance: "default",
     icon: /*#__PURE__*/React.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.string,
   className: PropTypes.string,
-  expanded: PropTypes.bool,
+  expanded: deprecatePropType(PropTypes.bool, 'Use <Sidenav expanded> instead.'),
   onToggle: PropTypes.func
 };
 export default SidenavToggle;

package/esm/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/esm/Whisper/test/Whisper.test.d.ts

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

package/esm/Whisper/test/Whisper.test.js

@@ -0,0 +1,16 @@
+var _whisperRef$current, _whisperRef$current2, _whisperRef$current3, _whisperRef$current4, _whisperRef$current5;
+
+import React from 'react';
+import Whisper from '../Whisper';
+var whisperRef = /*#__PURE__*/React.createRef();
+
+/*#__PURE__*/
+React.createElement(Whisper, {
+  ref: whisperRef,
+  speaker: /*#__PURE__*/React.createElement("div", null)
+}, /*#__PURE__*/React.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/esm/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/esm/utils/treeUtils.js

@@ -686,11 +686,7 @@ export function useFlattenTreeData(_ref8) {
   var forceUpdate = useCallback(function () {
     dispatch(Object.create(null));
   }, [dispatch]);
-
-  var _useRef = useRef({}),
-      _useRef$current = _useRef.current,
-      flattenNodes = _useRef$current === void 0 ? {} : _useRef$current;
-
+  var flattenNodes = useRef({});
   var flattenTreeData = useCallback(function (treeData, ref, parent, layer) {
     if (layer === void 0) {
       layer = 1;
@@ -705,20 +701,20 @@ export function useFlattenTreeData(_ref8) {
 
       var refKey = ref + "-" + index;
       node.refKey = refKey;
-      flattenNodes[refKey] = _extends((_extends2 = {
+      flattenNodes.current[refKey] = _extends((_extends2 = {
         layer: layer
       }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {
         return shallowEqual(node[valueKey], value);
       }), _extends2), node);
 
       if (parent) {
-        flattenNodes[refKey].parent = _omit(parent, 'parent', 'children');
+        flattenNodes.current[refKey].parent = _omit(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 = useCallback(function (nodes, key) {
     var list = [];
     Object.keys(nodes).forEach(function (refKey) {
@@ -819,12 +815,14 @@ export function useFlattenTreeData(_ref8) {
   };
 
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.13.0",
+  "version": "5.13.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/dark.less

@@ -167,15 +167,18 @@
   --rs-sidenav-default-selected-text: @H500;
   --rs-sidenav-default-hover-bg: @B700;
   --rs-sidenav-default-hover-text: @B050;
+  --rs-sidenav-default-footer-border: @B600;
   --rs-sidenav-inverse-bg: @H700;
   --rs-sidenav-inverse-text: #fff;
   --rs-sidenav-inverse-selected-bg: @H400;
   --rs-sidenav-inverse-hover-bg: @H600;
+  --rs-sidenav-inverse-footer-border: @H600;
   --rs-sidenav-subtle-bg: transparent;
   --rs-sidenav-subtle-text: @B200;
   --rs-sidenav-subtle-selected-text: @H500;
   --rs-sidenav-subtle-hover-bg: @B700;
   --rs-sidenav-subtle-hover-text: @B050;
+  --rs-sidenav-subtle-footer-border: @B600;
 
   // Input
   --rs-input-bg: @B800;

package/styles/color-modes/high-contrast.less

@@ -175,16 +175,19 @@
   --rs-sidenav-default-selected-text: @H500;
   --rs-sidenav-default-hover-bg: transparent;
   --rs-sidenav-default-hover-text: @H500;
+  --rs-sidenav-default-footer-border: @B050;
   --rs-sidenav-inverse-bg: @B800;
   --rs-sidenav-inverse-text: @B050;
   --rs-sidenav-inverse-selected-bg: transparent;
   --rs-sidenav-inverse-selected-text: @H500;
   --rs-sidenav-inverse-hover-bg: transparent;
+  --rs-sidenav-inverse-footer-border: @B050;
   --rs-sidenav-subtle-bg: @B800;
   --rs-sidenav-subtle-text: @B050;
   --rs-sidenav-subtle-selected-text: @H500;
   --rs-sidenav-subtle-hover-bg: transparent;
   --rs-sidenav-subtle-hover-text: @H500;
+  --rs-sidenav-subtle-footer-border: @B050;
 
   // Input
   --rs-input-bg: @B800;

package/styles/color-modes/light.less

@@ -174,15 +174,18 @@
   --rs-sidenav-default-selected-text: @H700;
   --rs-sidenav-default-hover-bg: @B200;
   --rs-sidenav-default-hover-text: @B800;
+  --rs-sidenav-default-footer-border: @B200;
   --rs-sidenav-inverse-bg: @H500;
   --rs-sidenav-inverse-text: #fff;
   --rs-sidenav-inverse-selected-bg: @H700;
   --rs-sidenav-inverse-hover-bg: @H600;
+  --rs-sidenav-inverse-footer-border: @H600;
   --rs-sidenav-subtle-bg: #fff;
   --rs-sidenav-subtle-text: @B600;
   --rs-sidenav-subtle-selected-text: @H700;
   --rs-sidenav-subtle-hover-bg: @B050;
   --rs-sidenav-subtle-hover-text: @B800;
+  --rs-sidenav-subtle-footer-border: @B200;
 
   // Input
   --rs-input-bg: @B000;

package/styles/variables.less

@@ -400,9 +400,11 @@
 @sidenav-padding-horizontal:            20px;
 @sidenav-collapse-in-width:             100%;
 @sidenav-default-width:                 56px;
+@sidenav-compact-width:                 @sidenav-default-width; // TODO Replace sidenav-default-width
 @sidenav-item-height:                   (@sidenav-padding-vertical * 2 + @line-height-computed);
 @sidenav-menu-max-height:               (@sidenav-item-height * 40);
 @sidenav-menu-animation-time:           1.5s;
+@sidenav-footer-height:                 @sidenav-item-height; // Footer is same height as a sidenav item
 @sidenav-level1-item-font-size:         @font-size-large;
 @sidenav-level1-item-line-height:       unit((@line-height-computed / @font-size-large));
 @sidenav-icon-spacing:                  20px;