rsuite 5.40.0 → 5.41.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [5.41.0](https://github.com/rsuite/rsuite/compare/v5.38.0...v5.41.0) (2023-10-20)
+
+### Bug Fixes
+
+- add a safety check for the deprecated findDOMNode ([#3362](https://github.com/rsuite/rsuite/issues/3362)) ([a20d77e](https://github.com/rsuite/rsuite/commit/a20d77e0a11f00eb2ca3d541d5f8150cfa3e675d))
+- **InputGroup:** fix child element's event not firing after InputGroup is disabled ([#3398](https://github.com/rsuite/rsuite/issues/3398)) ([3170408](https://github.com/rsuite/rsuite/commit/3170408f54eba3b0369e9615d471d049b06b75b4))
+- **Modal,Drawer:** fix Modal and Drawer being automatically closed when clicked ([#3400](https://github.com/rsuite/rsuite/issues/3400)) ([b4c6222](https://github.com/rsuite/rsuite/commit/b4c622244ecd2c3f6866278e3fcd6a90707fd8a9))
+- **Navbar:** fix background color of the subtle navigation items incorrect ([#3392](https://github.com/rsuite/rsuite/issues/3392)) ([e49e3e7](https://github.com/rsuite/rsuite/commit/e49e3e763691e131954a5dff3c59280c85e83974))
+- **OverlayTrigger:** fix Overlay should not be open when cursor is not on element ([#3401](https://github.com/rsuite/rsuite/issues/3401)) ([4a340f3](https://github.com/rsuite/rsuite/commit/4a340f357b04825a4a1300c2050613baefcddf52))
+- Typo in docs ([#3368](https://github.com/rsuite/rsuite/issues/3368)) ([dee34c7](https://github.com/rsuite/rsuite/commit/dee34c7e29abbe47fa3d81ab0535a27d5a089afc))
+
+### Features
+
+- add a script to prepend the use client directive ([#3407](https://github.com/rsuite/rsuite/issues/3407)) ([3812779](https://github.com/rsuite/rsuite/commit/38127797adb6d2409d7978df84039a5121f49629))
+- **Button,Nav:** improved font color contrast in subtle appearance ([#3391](https://github.com/rsuite/rsuite/issues/3391)) ([266846a](https://github.com/rsuite/rsuite/commit/266846ac5cdeeb5a24e685da29a49460ea21ea92))
+
+### Reverts
+
+- Revert "refactor(SelectPicker): move grouped options into group element (#3313)" (#3389) ([8b327e3](https://github.com/rsuite/rsuite/commit/8b327e371afbac9f6eb431191900a2ddcaa66ce1)), closes [#3313](https://github.com/rsuite/rsuite/issues/3313) [#3389](https://github.com/rsuite/rsuite/issues/3389)
+
 # [5.40.0](https://github.com/rsuite/rsuite/compare/v5.39.0...v5.40.0) (2023-09-10)
 
 ### Bug Fixes

package/Navbar/styles/index.less

@@ -192,7 +192,7 @@
   .rs-dropdown .rs-dropdown-toggle {
     &:hover,
     &:focus {
-      background-color: transparent;
+      background-color: var(--rs-navbar-subtle-hover-bg);
       color: var(--rs-navbar-subtle-hover-text);
     }
   }

package/SelectPicker/styles/index.less

@@ -11,6 +11,10 @@
   .picker-menu-group-common(picker);
   .picker-menu-group-title(picker);
   .picker-menu-group-closed(picker);
+
+  .rs-picker-menu-group ~ [role='option'] > .rs-picker-select-menu-item {
+    padding-left: 26px;
+  }
 }
 
 // Menu item (the option)
@@ -41,11 +45,3 @@
     padding-left: @picker-group-children-padding-left;
   }
 }
-
-.rs-picker-menu-group .rs-picker-select-menu-item {
-  padding-left: @picker-group-children-padding-left;
-}
-
-.rs-picker-menu-group.folded [role='option'] {
-  display: none;
-}

package/cjs/@types/common.js

@@ -1 +1,2 @@
+'use client';
 "use strict";

package/cjs/@types/utils.js

@@ -1,14 +1,24 @@
+'use client';
 "use strict";
 
 exports.__esModule = true;
 exports.tuple = void 0;
-
 var tuple = function tuple() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-
   return args;
 };
 
+/**
+ * Prepend arguments to function
+ * Useful for prepend `newValue` arg to native `onChange` callbacks
+ *
+ * @see https://stackoverflow.com/a/69668215
+ * @example
+ *
+ * type SomeFunc = (a: string, b: number, c: someCustomType) => number;
+ * type SomeFuncAltered = PrependParameters<SomeFunc, [d: number]>;
+ * // SomeFuncAltered = (d: number, a:string, b:number, c:someCustomType) => number;
+ */
 exports.tuple = tuple;

package/cjs/Affix/Affix.js

@@ -1,133 +1,118 @@
+'use client';
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
-
 var _utils = require("../utils");
-
 /**
  * Get the layout size and offset of the mount element
  */
 function useOffset(mountRef, onOffsetChange) {
   var _useState = (0, _react.useState)(null),
-      offset = _useState[0],
-      setOffset = _useState[1];
-
+    offset = _useState[0],
+    setOffset = _useState[1];
   var updateOffset = (0, _react.useCallback)(function () {
     if (!mountRef.current) {
       return;
     }
-
     var newOffset = (0, _getOffset.default)(mountRef.current);
-
     if ((newOffset === null || newOffset === void 0 ? void 0 : newOffset.height) !== (offset === null || offset === void 0 ? void 0 : offset.height) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.width) !== (offset === null || offset === void 0 ? void 0 : offset.width) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.top) !== (offset === null || offset === void 0 ? void 0 : offset.top) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.left) !== (offset === null || offset === void 0 ? void 0 : offset.left)) {
       setOffset(newOffset);
-
       if (offset !== null && newOffset !== null) {
         onOffsetChange === null || onOffsetChange === void 0 ? void 0 : onOffsetChange(newOffset);
       }
     }
-  }, [mountRef, offset, onOffsetChange]); // Update after the element size changes
+  }, [mountRef, offset, onOffsetChange]);
 
+  // Update after the element size changes
   (0, _utils.useElementResize)(function () {
     return mountRef.current;
-  }, updateOffset); // Initialize after the first render
+  }, updateOffset);
 
-  (0, _utils.useMount)(updateOffset); // Update after window size changes
+  // Initialize after the first render
+  (0, _utils.useMount)(updateOffset);
 
-  (0, _utils.useEventListener)(window, 'resize', updateOffset, false); // Update after window scroll
+  // Update after window size changes
+  (0, _utils.useEventListener)(window, 'resize', updateOffset, false);
 
+  // Update after window scroll
   (0, _utils.useEventListener)(window, 'scroll', (0, _debounce.default)(updateOffset, 100), false);
   return offset;
 }
+
 /**
  * Get the layout size and offset of the container element
  * @param container
  */
-
-
 function useContainerOffset(container) {
   var _useState2 = (0, _react.useState)(null),
-      offset = _useState2[0],
-      setOffset = _useState2[1];
-
+    offset = _useState2[0],
+    setOffset = _useState2[1];
   (0, _react.useEffect)(function () {
     var node = typeof container === 'function' ? container() : container;
     setOffset(node ? (0, _getOffset.default)(node) : null);
   }, [container]);
   return offset;
 }
+
 /**
  * Check whether the current element should be in a fixed state.
  * @param offset
  * @param containerOffset
  * @param props
  */
-
-
 function useFixed(offset, containerOffset, props) {
   var top = props.top,
-      onChange = props.onChange;
-
+    onChange = props.onChange;
   var _useState3 = (0, _react.useState)(false),
-      fixed = _useState3[0],
-      setFixed = _useState3[1];
-
+    fixed = _useState3[0],
+    setFixed = _useState3[1];
   var handleScroll = (0, _react.useCallback)(function () {
     if (!offset) {
       return;
     }
+    var scrollY = window.scrollY || window.pageYOffset;
 
-    var scrollY = window.scrollY || window.pageYOffset; // When the scroll distance exceeds the element's top value, it is fixed.
+    // When the scroll distance exceeds the element's top value, it is fixed.
+    var nextFixed = scrollY - (Number(offset === null || offset === void 0 ? void 0 : offset.top) - Number(top)) >= 0;
 
-    var nextFixed = scrollY - (Number(offset === null || offset === void 0 ? void 0 : offset.top) - Number(top)) >= 0; // If the current element is specified in the container,
+    // If the current element is specified in the container,
     // add to determine whether the current container is in the window range.
-
     if (containerOffset) {
       nextFixed = nextFixed && scrollY < Number(containerOffset.top) + Number(containerOffset.height);
     }
-
     if (nextFixed !== fixed) {
       setFixed(nextFixed);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextFixed);
     }
-  }, [offset, top, containerOffset, fixed, onChange]); // Add scroll event to window
+  }, [offset, top, containerOffset, fixed, onChange]);
 
+  // Add scroll event to window
   (0, _utils.useEventListener)(window, 'scroll', handleScroll, false);
   return fixed;
 }
-
 var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _merge;
-
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'affix' : _props$classPrefix,
-      className = props.className,
-      children = props.children,
-      container = props.container,
-      _props$top = props.top,
-      top = _props$top === void 0 ? 0 : _props$top,
-      onChange = props.onChange,
-      onOffsetChange = props.onOffsetChange,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "children", "container", "top", "onChange", "onOffsetChange"]);
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'affix' : _props$classPrefix,
+    className = props.className,
+    children = props.children,
+    container = props.container,
+    _props$top = props.top,
+    top = _props$top === void 0 ? 0 : _props$top,
+    onChange = props.onChange,
+    onOffsetChange = props.onOffsetChange,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "children", "container", "top", "onChange", "onOffsetChange"]);
   var mountRef = (0, _react.useRef)(null);
   var offset = useOffset(mountRef, onOffsetChange);
   var containerOffset = useContainerOffset(container);
@@ -135,17 +120,13 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     top: top,
     onChange: onChange
   });
-
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
-
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
   var classes = merge(className, (_merge = {}, _merge[withClassPrefix()] = fixed, _merge));
-
   var _ref = offset || {},
-      width = _ref.width,
-      height = _ref.height;
-
+    width = _ref.width,
+    height = _ref.height;
   var placeholderStyles = fixed ? {
     width: width,
     height: height
@@ -167,7 +148,6 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     style: placeholderStyles
   }));
 });
-
 Affix.displayName = 'Affix';
 Affix.propTypes = {
   top: _propTypes.default.number,

package/cjs/Affix/index.js

@@ -1,11 +1,9 @@
+'use client';
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = void 0;
-
 var _Affix = _interopRequireDefault(require("./Affix"));
-
 var _default = _Affix.default;
 exports.default = _default;

package/cjs/Animation/Bounce.js

@@ -1,28 +1,20 @@
+'use client';
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Transition = _interopRequireDefault(require("./Transition"));
-
 var _utils = require("../utils");
-
 var Bounce = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
-      props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout"]);
-
+    timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout"]);
   var _useClassNames = (0, _utils.useClassNames)('anim'),
-      prefix = _useClassNames.prefix;
-
+    prefix = _useClassNames.prefix;
   return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, props, {
     ref: ref,
     animation: true,
@@ -33,7 +25,6 @@ var Bounce = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     exitedClassName: prefix('bounce-out')
   }));
 });
-
 Bounce.displayName = 'Bounce';
 var _default = Bounce;
 exports.default = _default;

package/cjs/Animation/Collapse.js

@@ -1,83 +1,63 @@
+'use client';
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = exports.DIMENSION = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _getStyle = _interopRequireDefault(require("dom-lib/getStyle"));
-
 var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
-
 var _Transition = _interopRequireWildcard(require("./Transition"));
-
 var _utils = require("../utils");
-
 var DIMENSION;
 exports.DIMENSION = DIMENSION;
-
 (function (DIMENSION) {
   DIMENSION["HEIGHT"] = "height";
   DIMENSION["WIDTH"] = "width";
 })(DIMENSION || (exports.DIMENSION = DIMENSION = {}));
-
 var triggerBrowserReflow = function triggerBrowserReflow(node) {
   return (0, _get.default)(node, 'offsetHeight');
 };
-
 var MARGINS = {
   height: ['marginTop', 'marginBottom'],
   width: ['marginLeft', 'marginRight']
 };
-
 function defaultGetDimensionValue(dimension, elem) {
   var value = (0, _get.default)(elem, "offset" + (0, _capitalize.default)(dimension));
   var margins = MARGINS[dimension];
   return value + parseInt((0, _getStyle.default)(elem, margins[0]), 10) + parseInt((0, _getStyle.default)(elem, margins[1]), 10);
 }
-
 function getScrollDimensionValue(elem, dimension) {
   var value = (0, _get.default)(elem, "scroll" + (0, _capitalize.default)(dimension));
   return value + "px";
 }
-
 var Collapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var className = props.className,
-      _props$timeout = props.timeout,
-      timeout = _props$timeout === void 0 ? 300 : _props$timeout,
-      _props$dimension = props.dimension,
-      dimensionProp = _props$dimension === void 0 ? DIMENSION.HEIGHT : _props$dimension,
-      exitedClassName = props.exitedClassName,
-      exitingClassName = props.exitingClassName,
-      enteredClassName = props.enteredClassName,
-      enteringClassName = props.enteringClassName,
-      _props$getDimensionVa = props.getDimensionValue,
-      getDimensionValue = _props$getDimensionVa === void 0 ? defaultGetDimensionValue : _props$getDimensionVa,
-      onEnter = props.onEnter,
-      onEntering = props.onEntering,
-      onEntered = props.onEntered,
-      onExit = props.onExit,
-      onExiting = props.onExiting,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "timeout", "dimension", "exitedClassName", "exitingClassName", "enteredClassName", "enteringClassName", "getDimensionValue", "onEnter", "onEntering", "onEntered", "onExit", "onExiting"]);
-
+    _props$timeout = props.timeout,
+    timeout = _props$timeout === void 0 ? 300 : _props$timeout,
+    _props$dimension = props.dimension,
+    dimensionProp = _props$dimension === void 0 ? DIMENSION.HEIGHT : _props$dimension,
+    exitedClassName = props.exitedClassName,
+    exitingClassName = props.exitingClassName,
+    enteredClassName = props.enteredClassName,
+    enteringClassName = props.enteringClassName,
+    _props$getDimensionVa = props.getDimensionValue,
+    getDimensionValue = _props$getDimensionVa === void 0 ? defaultGetDimensionValue : _props$getDimensionVa,
+    onEnter = props.onEnter,
+    onEntering = props.onEntering,
+    onEntered = props.onEntered,
+    onExit = props.onExit,
+    onExiting = props.onExiting,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "timeout", "dimension", "exitedClassName", "exitingClassName", "enteredClassName", "enteringClassName", "getDimensionValue", "onEnter", "onEntering", "onEntered", "onExit", "onExiting"]);
   var _useClassNames = (0, _utils.useClassNames)('anim'),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   var dimension = typeof dimensionProp === 'function' ? dimensionProp() : dimensionProp;
   var handleEnter = (0, _react.useCallback)(function (elem) {
     (0, _addStyle.default)(elem, dimension, 0);
@@ -113,7 +93,6 @@ var Collapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onExiting: (0, _utils.createChainedFunction)(handleExiting, onExiting)
   }));
 });
-
 Collapse.displayName = 'Collapse';
 Collapse.propTypes = (0, _extends2.default)({}, _Transition.transitionPropTypes, {
   dimension: _propTypes.default.any,

package/cjs/Animation/Fade.js

@@ -1,30 +1,22 @@
+'use client';
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Transition = _interopRequireDefault(require("./Transition"));
-
 var _utils = require("../utils");
-
 var Fade = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
-      className = _ref.className,
-      props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout", "className"]);
-
+    timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
+    className = _ref.className,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout", "className"]);
   var _useClassNames = (0, _utils.useClassNames)('anim'),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, props, {
     ref: ref,
     timeout: timeout,
@@ -33,7 +25,6 @@ var Fade = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     enteringClassName: prefix('in')
   }));
 });
-
 Fade.displayName = 'Fade';
 var _default = Fade;
 exports.default = _default;

package/cjs/Animation/Slide.js

@@ -1,30 +1,22 @@
+'use client';
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Transition = _interopRequireDefault(require("./Transition"));
-
 var _utils = require("../utils");
-
 var Slide = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'right' : _ref$placement,
-      props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout", "placement"]);
-
+    timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["timeout", "placement"]);
   var _useClassNames = (0, _utils.useClassNames)('anim'),
-      prefix = _useClassNames.prefix;
-
+    prefix = _useClassNames.prefix;
   var enterClassName = prefix('slide-in', placement);
   var exitClassName = prefix('slide-out', placement);
   return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, props, {
@@ -37,7 +29,6 @@ var Slide = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     exitedClassName: exitClassName
   }));
 });
-
 Slide.displayName = 'Slide';
 var _default = Slide;
 exports.default = _default;