rsuite 5.11.0 → 5.13.1

package/esm/Sidenav/SidenavItem.js

@@ -10,7 +10,17 @@ import NavContext from '../Nav/NavContext';
 import MenuItem from '../Menu/MenuItem';
 import omit from 'lodash/omit';
 import { SidenavContext } from './Sidenav';
+
+/**
+ * @private
+ */
 var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var sidenav = useContext(SidenavContext);
+
+  if (!sidenav) {
+    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
+  }
+
   var _props$as = props.as,
       Component = _props$as === void 0 ? SafeAnchor : _props$as,
       activeProp = props.active,
@@ -28,15 +38,9 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       panel = props.panel,
       rest = _objectWithoutPropertiesLoose(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel"]);
 
-  var sidenav = useContext(SidenavContext);
-
-  if (!sidenav) {
-    throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
-  }
-
-  var _useContext = useContext(NavContext),
-      activeKey = _useContext.activeKey,
-      onSelectFromNav = _useContext.onSelect;
+  var _ref = useContext(NavContext),
+      activeKey = _ref.activeKey,
+      onSelectFromNav = _ref.onSelect;
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -56,10 +60,10 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       selected: selected,
       disabled: disabled,
       onActivate: handleClick
-    }, function (_ref, menuitemRef) {
-      var selected = _ref.selected,
-          active = _ref.active,
-          menuitem = _objectWithoutPropertiesLoose(_ref, ["selected", "active"]);
+    }, function (_ref2, menuitemRef) {
+      var selected = _ref2.selected,
+          active = _ref2.active,
+          menuitem = _objectWithoutPropertiesLoose(_ref2, ["selected", "active"]);
 
       var classes = merge(className, withClassPrefix({
         focus: active,
@@ -74,7 +78,9 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
             disabled: Component === SafeAnchor ? disabled : undefined,
             className: classes,
             "data-event-key": eventKey
-          }, omit(rest, ['divider', 'panel']), triggerProps, menuitem), icon, _children, /*#__PURE__*/React.createElement(Ripple, null));
+          }, omit(rest, ['divider', 'panel']), triggerProps, menuitem), icon && /*#__PURE__*/React.cloneElement(icon, {
+            className: prefix('icon')
+          }), _children, /*#__PURE__*/React.createElement(Ripple, null));
         },
         message: _children,
         placement: 'right'
@@ -110,7 +116,9 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: style,
     "aria-selected": selected || undefined,
     "data-event-key": eventKey
-  }, rest), icon, _children, /*#__PURE__*/React.createElement(Ripple, null));
+  }, rest), icon && /*#__PURE__*/React.cloneElement(icon, {
+    className: prefix('icon')
+  }), _children, /*#__PURE__*/React.createElement(Ripple, null));
 });
 SidenavItem.displayName = 'Sidenav.Item';
 SidenavItem.propTypes = {

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/deprecateComponent.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useEffect } from 'react';
+import React from 'react';
+import warnOnce from './warnOnce';
 /**
  * HOC for display a deprecation message from a deprecated component
  * fixme: Only display deprecation message in non-production environment
@@ -10,9 +11,7 @@ export default function deprecateComponent(Component, message) {
 
   var componentDisplayName = (_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 ? _Component$displayNam : Component.name;
   var Deprecated = /*#__PURE__*/React.forwardRef(function (props, ref) {
-    useEffect(function () {
-      console.warn(message);
-    }, []);
+    warnOnce(message);
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: ref
     }, props));

package/esm/utils/deprecatePropType.d.ts

@@ -1,6 +1,2 @@
 import * as PropTypes from 'prop-types';
-declare function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;
-declare namespace deprecatePropType {
-    var _resetWarned: () => void;
-}
-export default deprecatePropType;
+export default function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;

package/esm/utils/deprecatePropType.js

@@ -1,15 +1,11 @@
 // Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
-var warned = {};
+import warnOnce from './warnOnce';
 export default function deprecatePropType(propType, explanation) {
   return function validate(props, propName, componentName) {
     // Note ...rest here
     if (props[propName] != null) {
       var message = "\"" + propName + "\" property of \"" + componentName + "\" has been deprecated.\n" + explanation;
-
-      if (!warned[message]) {
-        console.warn(message);
-        warned[message] = true;
-      }
+      warnOnce(message);
     }
 
     for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
@@ -18,10 +14,4 @@ export default function deprecatePropType(propType, explanation) {
 
     return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here
   };
-}
-
-function _resetWarned() {
-  warned = {};
-}
-
-deprecatePropType._resetWarned = _resetWarned;
+}

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/esm/utils/useInternalId.d.ts

@@ -1,4 +1,4 @@
 /**
  * Used for generating unique ID for DOM elements
  */
-export default function useInternalId(prefix?: string): string;
+export default function useInternalId(namespace?: string): string;

package/esm/utils/useInternalId.js

@@ -4,11 +4,11 @@ import uniqueId from 'lodash/uniqueId';
  * Used for generating unique ID for DOM elements
  */
 
-export default function useInternalId(prefix) {
+export default function useInternalId(namespace) {
   var idRef = useRef();
 
   if (!idRef.current) {
-    idRef.current = uniqueId("internal://" + prefix);
+    idRef.current = uniqueId("internal://" + namespace);
   }
 
   useDebugValue(idRef.current);

package/esm/utils/warnOnce.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Logs a warning message
+ * but dont warn a same message twice
+ */
+declare function warnOnce(message: string): void;
+declare namespace warnOnce {
+    var _resetWarned: () => void;
+}
+export default warnOnce;

package/esm/utils/warnOnce.js

@@ -0,0 +1,18 @@
+var warned = {};
+/**
+ * Logs a warning message
+ * but dont warn a same message twice
+ */
+
+export default function warnOnce(message) {
+  if (!warned[message]) {
+    console.warn(message);
+    warned[message] = true;
+  }
+}
+
+warnOnce._resetWarned = function () {
+  for (var _message in warned) {
+    delete warned[_message];
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.11.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

@@ -394,14 +394,17 @@
 
 // Sidenav
 
+@sidenav-item-caret-size:               16px;
 @sidenav-padding-vertical:              15px;
 @sidenav-children-padding-vertical:     11px;
 @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;