rsuite 5.23.3 → 5.24.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [5.24.0](https://github.com/rsuite/rsuite/compare/v5.23.3...v5.24.0) (2022-12-30)
+
+### Bug Fixes
+
+- **AutoComplete:** fix AutoComplete size property not working ([#2990](https://github.com/rsuite/rsuite/issues/2990)) ([add665b](https://github.com/rsuite/rsuite/commit/add665b82b9d2cbd21e07576bf77f74e18991e21))
+- **DatePicker:** fix inconsistency between month selectable state and ok button clickable state ([#2984](https://github.com/rsuite/rsuite/issues/2984)) ([70e6aba](https://github.com/rsuite/rsuite/commit/70e6aba0b7a3216c9f8b59b033826e55bebac1a1))
+- **Sidenav:** fix Sidenav multilevel Nav.Menu arrow icon exception ([#2986](https://github.com/rsuite/rsuite/issues/2986)) ([87f6748](https://github.com/rsuite/rsuite/commit/87f67482b60eae4ed445246fe3e6ac9b0cad0385))
+
+### Features
+
+- **Dropdown:** add Dropdown.Separator component ([#2979](https://github.com/rsuite/rsuite/issues/2979)) ([db6fcbb](https://github.com/rsuite/rsuite/commit/db6fcbbd88961e3506f6b2d2146cf43717d1e1db))
+
 ## [5.23.3](https://github.com/rsuite/rsuite/compare/v5.23.2...v5.23.3) (2022-12-16)
 
 ### Bug Fixes

package/Sidenav/styles/index.less

@@ -76,14 +76,19 @@
         top: @sidenav-children-padding-vertical;
         // width: auto;
         // height: @sidenav-dropdown-toggle-caret-width;
-        transform: rotate(90deg);
+        // transform: rotate(90deg);
       }
     }
 
     // Expanded submenu toggle icon
-    .rs-dropdown-item-expand .rs-dropdown-item-toggle-icon {
+    .rs-dropdown-item-expand-icon {
       transform: rotate(270deg);
     }
+
+    // Collapse submenu toggle icon
+    .rs-dropdown-item-collapse-icon {
+      transform: rotate(90deg);
+    }
   }
 
   .high-contrast-mode({

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -9,6 +9,8 @@ export interface AutoCompleteProps<T = ValueType> extends WithAsProps, FormContr
     placement?: TypeAttributes.Placement;
     /** When set to false, the Enter key selection function is invalid */
     selectOnEnter?: boolean;
+    /** A component can have different sizes */
+    size?: TypeAttributes.Size;
     /** Open the menu and control it */
     open?: boolean;
     /** Placeholder text */

package/cjs/AutoComplete/AutoComplete.js

@@ -52,6 +52,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       valueProp = props.value,
       open = props.open,
       style = props.style,
+      size = props.size,
       menuClassName = props.menuClassName,
       id = props.id,
       renderMenu = props.renderMenu,
@@ -65,7 +66,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       onFocus = props.onFocus,
       onBlur = props.onBlur,
       onMenuFocus = props.onMenuFocus,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "menuClassName", "id", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
   var datalist = (0, _utils3.transformData)(data);
 
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
@@ -231,6 +232,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     id: id,
     disabled: disabled,
     value: value,
+    size: size,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     onChange: handleChange,
@@ -260,6 +262,7 @@ AutoComplete.propTypes = (0, _extends2.default)({}, _utils2.animationPropTypes,
   renderMenu: _propTypes.default.func,
   renderMenuItem: _propTypes.default.func,
   style: _propTypes.default.object,
+  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs']),
   open: _propTypes.default.bool,
   selectOnEnter: _propTypes.default.bool,
   filterBy: _propTypes.default.func

package/cjs/Calendar/MonthDropdown.d.ts

@@ -22,5 +22,6 @@ export interface RowProps {
     /** Style object to be applied to row (to position it); */
     style?: React.CSSProperties;
 }
+export declare function isEveryDateInMonth(year: number, month: number, predicate: (date: Date) => boolean): boolean;
 declare const MonthDropdown: RsRefForwardingComponent<'div', MonthDropdownProps>;
 export default MonthDropdown;

package/cjs/Calendar/MonthDropdown.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.isEveryDateInMonth = isEveryDateInMonth;
 exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -25,6 +26,18 @@ var _CalendarContext = require("./CalendarContext");
 
 var monthMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
+function isEveryDateInMonth(year, month, predicate) {
+  var days = _utils.DateUtils.getDaysInMonth(new Date(year, month));
+
+  for (var i = 1; i <= days; i++) {
+    if (!predicate(new Date(year, month, i))) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -60,16 +73,7 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, [limitEndYear, startYear, thisYear]);
   var isMonthDisabled = (0, _react.useCallback)(function (year, month) {
     if (disabledMonth) {
-      var days = _utils.DateUtils.getDaysInMonth(new Date(year, month)); // If all dates in a month are disabled, disable the current month
-
-
-      for (var i = 1; i <= days; i++) {
-        if (!disabledMonth(new Date(year, month, i))) {
-          return false;
-        }
-      }
-
-      return true;
+      return isEveryDateInMonth(year, month, disabledMonth);
     }
 
     return false;

package/cjs/DatePicker/DatePicker.d.ts

@@ -29,7 +29,11 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     showMeridian?: boolean;
     /** one tap to select */
     oneTap?: boolean;
-    /** Disabled date */
+    /**
+     * Whether to disable a date on the calendar view
+     *
+     * @returns date should be disabled (not selectable)
+     */
     disabledDate?: (date?: Date) => boolean;
     /** Disabled hours */
     disabledHours?: (hour: number, date: Date) => boolean;

package/cjs/DatePicker/DatePicker.js

@@ -29,6 +29,8 @@ var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarCon
 
 var _useCalendarDate2 = _interopRequireDefault(require("../Calendar/useCalendarDate"));
 
+var _MonthDropdown = require("../Calendar/MonthDropdown");
+
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 
 var _Stack = _interopRequireDefault(require("../Stack"));
@@ -336,6 +338,20 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return allowDate || allowTime;
   }, [disabledDateProp, props]);
+  /**
+   * Whether "OK" button is disabled
+   *
+   * - If format is date, disable ok button if selected date is disabled
+   * - If format is month, disable ok button if all dates in the month of selected date are disabled
+   */
+
+  var isOKButtonDisabled = (0, _react.useCallback)(function (selectedDate) {
+    if (_utils.DateUtils.shouldRenderMonth(formatStr) && !_utils.DateUtils.shouldRenderDate(formatStr)) {
+      return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
+    }
+
+    return disabledToolbarHandle(selectedDate);
+  }, [disabledToolbarHandle, formatStr]);
   var calendarProps = (0, _react.useMemo)(function () {
     return (0, _mapValues.default)((0, _pick.default)(props, _utils.DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
@@ -406,7 +422,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
-      disabledOkBtn: disabledToolbarHandle,
+      disabledOkBtn: isOKButtonDisabled,
       disabledShortcut: disabledToolbarHandle,
       onClickShortcut: handleShortcutPageDate,
       onOk: handleOK,

package/cjs/Dropdown/Dropdown.d.ts

@@ -4,6 +4,7 @@ import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types
 import { IconProps } from '@rsuite/icons/lib/Icon';
 import DropdownItem from './DropdownItem';
 import Button from '../Button';
+import DropdownSeparator from './DropdownSeparator';
 export declare type DropdownTrigger = 'click' | 'hover' | 'contextMenu';
 export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {
     /** Define the title as a submenu */
@@ -58,6 +59,7 @@ export interface DropdownComponent extends RsRefForwardingComponent<'div', Dropd
     } & React.ComponentProps<ToggleAs>, context: any): JSX.Element | null;
     Item: typeof DropdownItem;
     Menu: typeof DropdownMenu;
+    Separator: typeof DropdownSeparator;
 }
 /**
  * The <Dropdown> API

package/cjs/Dropdown/Dropdown.js

@@ -43,6 +43,8 @@ var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
 
 var _Nav = _interopRequireDefault(require("../Nav"));
 
+var _DropdownSeparator = _interopRequireDefault(require("./DropdownSeparator"));
+
 /**
  * The <Dropdown> API
  * When used inside <Sidenav>, renders a <TreeviewRootItem>;
@@ -186,6 +188,7 @@ var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 Dropdown.Item = _DropdownItem.default;
 Dropdown.Menu = _DropdownMenu.default;
+Dropdown.Separator = _DropdownSeparator.default;
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
   activeKey: _propTypes.default.any,

package/cjs/Dropdown/DropdownItem.d.ts

@@ -8,7 +8,11 @@ export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.
     children?: React.ReactNode;
     /** You can use a custom element for this component */
     as?: React.ElementType;
-    /** Whether to display the divider */
+    /**
+     * Whether to display the divider
+     *
+     * @deprecated Use dedicated <Dropdown.Separator> component instead
+     */
     divider?: boolean;
     /** Disable the current option */
     disabled?: boolean;

package/cjs/Dropdown/DropdownItem.js

@@ -11,11 +11,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+var _deprecatePropType = _interopRequireWildcard(require("../utils/deprecatePropType"));
 
 var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
 
@@ -37,6 +39,8 @@ var _warnOnce = _interopRequireDefault(require("../utils/warnOnce"));
 
 var _Nav = _interopRequireDefault(require("../Nav"));
 
+var _DropdownSeparator = _interopRequireDefault(require("./DropdownSeparator"));
+
 /**
  * The <Dropdown.Item> API
  * When used inside <Sidenav>, renders a <TreeviewItem>
@@ -106,11 +110,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
 
   if (divider) {
-    return renderDropdownItem((0, _extends2.default)({
-      ref: ref,
-      role: 'separator',
-      className: merge(prefix('divider'), className)
-    }, restProps));
+    return /*#__PURE__*/_react.default.createElement(_DropdownSeparator.default, (0, _pick2.default)(props, ['data-testid']));
   }
 
   if (panel) {
@@ -159,7 +159,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 DropdownItem.displayName = 'Dropdown.Item';
 DropdownItem.propTypes = {
   as: _propTypes.default.elementType,
-  divider: _propTypes.default.bool,
+  divider: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.bool, 'Use Dropdown.Separator component instead.'),
   panel: _propTypes.default.bool,
   trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover'])]),
   open: (0, _deprecatePropType.default)(_propTypes.default.bool),

package/cjs/Dropdown/DropdownSeparator.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+export interface DropdownSeparatorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+    /** You can use a custom element for this component */
+    as?: React.ElementType;
+}
+/**
+ * The <Dropdown.Separator> API
+ *
+ * Renders a non-focusable and non-interactive `separator`
+ * Per ARIA APG https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+ */
+declare const DropdownSeparator: RsRefForwardingComponent<'li', DropdownSeparatorProps>;
+export default DropdownSeparator;

package/cjs/Dropdown/DropdownSeparator.js

@@ -0,0 +1,48 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils");
+
+/**
+ * The <Dropdown.Separator> API
+ *
+ * Renders a non-focusable and non-interactive `separator`
+ * Per ARIA APG https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+ */
+var DropdownSeparator = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item-divider' : _props$classPrefix,
+      className = props.className,
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'li' : _props$as,
+      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "as"]);
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix;
+
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    role: "separator",
+    className: merge(withClassPrefix(), className)
+  }, restProps));
+});
+
+DropdownSeparator.displayName = 'Dropdown.Separator';
+DropdownSeparator.propTypes = {
+  as: _propTypes.default.elementType
+};
+var _default = DropdownSeparator;
+exports.default = _default;

package/cjs/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -37,7 +37,7 @@ var _Ripple = _interopRequireDefault(require("../Ripple"));
 
 var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 /**
  * Tree View Node
@@ -99,6 +99,7 @@ var ExpandedSidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(functio
       // open,
       disabled: disabled
     }));
+    var iconClasses = merge(className, prefix('toggle-icon'), prefix((open ? 'expand' : 'collapse') + "-icon"));
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref
     }, rest, {
@@ -112,7 +113,7 @@ var ExpandedSidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(functio
       }, (0, _omit.default)(buttonProps, ['open'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
         className: prefix('menu-icon')
       }), title, /*#__PURE__*/_react.default.createElement(Icon, {
-        className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
+        className: iconClasses
       }), /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
     }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref2) {
       var open = _ref2.open;

package/cjs/utils/deprecatePropType.d.ts

@@ -1,2 +1,11 @@
 import * as PropTypes from 'prop-types';
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ *
+ * @deprecated Use {@link deprecatePropTypeNew} which prints clearer messages.
+ */
 export default function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ */
+export declare function deprecatePropTypeNew<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;

package/cjs/utils/deprecatePropType.js

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 exports.__esModule = true;
 exports.default = deprecatePropType;
+exports.deprecatePropTypeNew = deprecatePropTypeNew;
 
 var _warnOnce = _interopRequireDefault(require("./warnOnce"));
 
 // Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
+
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ *
+ * @deprecated Use {@link deprecatePropTypeNew} which prints clearer messages.
+ */
 function deprecatePropType(propType, explanation) {
   return function validate(props, propName, componentName) {
     // Note ...rest here
@@ -20,6 +27,26 @@ function deprecatePropType(propType, explanation) {
       rest[_key - 3] = arguments[_key];
     }
 
+    return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here
+  };
+}
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ */
+
+
+function deprecatePropTypeNew(propType, explanation) {
+  return function validate(props, propName, componentName) {
+    // Note ...rest here
+    if (props[propName] != null) {
+      var message = "[rsuite] \"" + propName + "\" property of " + componentName + " component has been deprecated.\n" + explanation;
+      (0, _warnOnce.default)(message);
+    }
+
+    for (var _len2 = arguments.length, rest = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
+      rest[_key2 - 3] = arguments[_key2];
+    }
+
     return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here
   };
 }

package/dist/rsuite-rtl.css

@@ -13184,13 +13184,15 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   position: absolute;
   left: 20px;
   top: 11px;
-  -webkit-transform: rotate(-90deg);
-          transform: rotate(-90deg);
 }
-.rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-expand .rs-dropdown-item-toggle-icon {
+.rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-expand-icon {
   -webkit-transform: rotate(-270deg);
           transform: rotate(-270deg);
 }
+.rs-sidenav-nav > .rs-dropdown .rs-dropdown-item-collapse-icon {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
 .rs-theme-high-contrast .rs-sidenav-nav .rs-dropdown-toggle,
 .rs-theme-high-contrast .rs-sidenav-nav .rs-dropdown-menu {
   border: none;