rsuite 5.23.3 → 5.24.0

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

@@ -33,6 +33,7 @@ var AutoComplete = /*#__PURE__*/React.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,
@@ -46,7 +47,7 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onFocus = props.onFocus,
       onBlur = props.onBlur,
       onMenuFocus = props.onMenuFocus,
-      rest = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = transformData(data);
 
@@ -211,6 +212,7 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id: id,
     disabled: disabled,
     value: value,
+    size: size,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     onChange: handleChange,
@@ -239,6 +241,7 @@ AutoComplete.propTypes = _extends({}, animationPropTypes, {
   renderMenu: PropTypes.func,
   renderMenuItem: PropTypes.func,
   style: PropTypes.object,
+  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
   open: PropTypes.bool,
   selectOnEnter: PropTypes.bool,
   filterBy: PropTypes.func

package/esm/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/esm/Calendar/MonthDropdown.js

@@ -7,6 +7,17 @@ import { DateUtils, useClassNames } from '../utils';
 import MonthDropdownItem from './MonthDropdownItem';
 import { useCalendarContext } from './CalendarContext';
 var monthMap = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+export function isEveryDateInMonth(year, month, predicate) {
+  var days = 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.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -41,15 +52,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [limitEndYear, startYear, thisYear]);
   var isMonthDisabled = useCallback(function (year, month) {
     if (disabledMonth) {
-      var days = 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/esm/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/esm/DatePicker/DatePicker.js

@@ -9,6 +9,7 @@ import IconCalendar from '@rsuite/icons/legacy/Calendar';
 import IconClockO from '@rsuite/icons/legacy/ClockO';
 import CalendarContainer from '../Calendar/CalendarContainer';
 import useCalendarDate from '../Calendar/useCalendarDate';
+import { isEveryDateInMonth } from '../Calendar/MonthDropdown';
 import Toolbar from './Toolbar';
 import Stack from '../Stack';
 import PredefinedRanges from './PredefinedRanges';
@@ -305,6 +306,20 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var allowTime = DateUtils.disabledTime(props, date);
     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 = useCallback(function (selectedDate) {
+    if (DateUtils.shouldRenderMonth(formatStr) && !DateUtils.shouldRenderDate(formatStr)) {
+      return isEveryDateInMonth(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
+    }
+
+    return disabledToolbarHandle(selectedDate);
+  }, [disabledToolbarHandle, formatStr]);
   var calendarProps = useMemo(function () {
     return mapValues(pick(props, DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
@@ -373,7 +388,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
-      disabledOkBtn: disabledToolbarHandle,
+      disabledOkBtn: isOKButtonDisabled,
       disabledShortcut: disabledToolbarHandle,
       onClickShortcut: handleShortcutPageDate,
       onOk: handleOK,

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

@@ -16,6 +16,7 @@ import NavContext from '../Nav/NavContext';
 import { initialState, reducer } from './DropdownState';
 import warnOnce from '../utils/warnOnce';
 import Nav from '../Nav';
+import DropdownSeparator from './DropdownSeparator';
 
 /**
  * The <Dropdown> API
@@ -163,6 +164,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Dropdown.Item = DropdownItem;
 Dropdown.Menu = DropdownMenu;
+Dropdown.Separator = DropdownSeparator;
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = {
   activeKey: PropTypes.any,

package/esm/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/esm/Dropdown/DropdownItem.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _pick from "lodash/pick";
 import React, { useCallback, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import deprecatePropType from '../utils/deprecatePropType';
+import deprecatePropType, { deprecatePropTypeNew } from '../utils/deprecatePropType';
 import MenuItem from '../Menu/MenuItem';
 import DropdownContext from './DropdownContext';
 import isNil from 'lodash/isNil';
@@ -13,6 +14,7 @@ import { DropdownActionType } from './DropdownState';
 import { useRenderDropdownItem } from './useRenderDropdownItem';
 import warnOnce from '../utils/warnOnce';
 import Nav from '../Nav';
+import DropdownSeparator from './DropdownSeparator';
 
 /**
  * The <Dropdown.Item> API
@@ -84,11 +86,7 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   if (divider) {
-    return renderDropdownItem(_extends({
-      ref: ref,
-      role: 'separator',
-      className: merge(prefix('divider'), className)
-    }, restProps));
+    return /*#__PURE__*/React.createElement(DropdownSeparator, _pick(props, ['data-testid']));
   }
 
   if (panel) {
@@ -137,7 +135,7 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 DropdownItem.displayName = 'Dropdown.Item';
 DropdownItem.propTypes = {
   as: PropTypes.elementType,
-  divider: PropTypes.bool,
+  divider: deprecatePropTypeNew(PropTypes.bool, 'Use Dropdown.Separator component instead.'),
   panel: PropTypes.bool,
   trigger: PropTypes.oneOfType([PropTypes.array, PropTypes.oneOf(['click', 'hover'])]),
   open: deprecatePropType(PropTypes.bool),

package/esm/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/esm/Dropdown/DropdownSeparator.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useClassNames } from '../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.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 = _objectWithoutPropertiesLoose(props, ["classPrefix", "className", "as"]);
+
+  var _useClassNames = useClassNames(classPrefix),
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix;
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    role: "separator",
+    className: merge(withClassPrefix(), className)
+  }, restProps));
+});
+DropdownSeparator.displayName = 'Dropdown.Separator';
+DropdownSeparator.propTypes = {
+  as: PropTypes.elementType
+};
+export default DropdownSeparator;

package/esm/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 import React, { useCallback, useContext } from 'react';
 import isNil from 'lodash/isNil';
@@ -77,6 +77,7 @@ var ExpandedSidenavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props,
       // open,
       disabled: disabled
     }));
+    var iconClasses = merge(className, prefix('toggle-icon'), prefix((open ? 'expand' : 'collapse') + "-icon"));
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: ref
     }, rest, {
@@ -90,7 +91,7 @@ var ExpandedSidenavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props,
       }, omit(buttonProps, ['open'])), icon && /*#__PURE__*/React.cloneElement(icon, {
         className: prefix('menu-icon')
       }), title, /*#__PURE__*/React.createElement(Icon, {
-        className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+        className: iconClasses
       }), /*#__PURE__*/React.createElement(Ripple, null));
     }), /*#__PURE__*/React.createElement(Disclosure.Content, null, function (_ref2) {
       var open = _ref2.open;

package/esm/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/esm/utils/deprecatePropType.js

@@ -1,5 +1,11 @@
 // Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
 import warnOnce from './warnOnce';
+/**
+ * Prints deprecation message when user uses a deprecated prop
+ *
+ * @deprecated Use {@link deprecatePropTypeNew} which prints clearer messages.
+ */
+
 export default function deprecatePropType(propType, explanation) {
   return function validate(props, propName, componentName) {
     // Note ...rest here
@@ -12,6 +18,25 @@ export default 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
+ */
+
+export 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;
+      warnOnce(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/package.json

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