rsuite 5.4.2 → 5.5.1

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -72,10 +72,10 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         saturday: string;
         ok: string;
         today: string;
-        yesterday: string; /** Language configuration */
+        yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string;
+        seconds: string; /** Support right-to-left */
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -90,10 +90,10 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         saturday: string;
         ok: string;
         today: string;
-        yesterday: string; /** Language configuration */
+        yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string;
+        seconds: string; /** Support right-to-left */
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -109,10 +109,10 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         saturday: string;
         ok: string;
         today: string;
-        yesterday: string; /** Language configuration */
+        yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string;
+        seconds: string; /** Support right-to-left */
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -120,7 +120,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     Picker?: {
         noResultsText: string;
         placeholder: string;
-        searchPlaceholder: string; /** Supported themes */
+        searchPlaceholder: string;
         checkAll: string;
     } | undefined;
     InputPicker?: {
@@ -176,10 +176,10 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         saturday: string;
         ok: string;
         today: string;
-        yesterday: string; /** Language configuration */
+        yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string;
+        seconds: string; /** Support right-to-left */
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -194,10 +194,10 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         saturday: string;
         ok: string;
         today: string;
-        yesterday: string; /** Language configuration */
+        yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string;
+        seconds: string; /** Support right-to-left */
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -213,10 +213,10 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         saturday: string;
         ok: string;
         today: string;
-        yesterday: string; /** Language configuration */
+        yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string;
+        seconds: string; /** Support right-to-left */
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -224,7 +224,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
     Picker?: {
         noResultsText: string;
         placeholder: string;
-        searchPlaceholder: string; /** Supported themes */
+        searchPlaceholder: string;
         checkAll: string;
     } | undefined;
     InputPicker?: {

package/cjs/CustomProvider/CustomProvider.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _prefix = require("../utils/prefix");
 
@@ -37,7 +39,7 @@ var CustomProvider = function CustomProvider(props) {
     }, rest);
   }, [classPrefix, theme, rest]);
 
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     if (_DOMHelper.canUseDOM && theme) {
       (0, _DOMHelper.addClass)(document.body, (0, _prefix.prefix)(classPrefix, "theme-" + theme)); // Remove the className that will cause style conflicts
 
@@ -48,7 +50,6 @@ var CustomProvider = function CustomProvider(props) {
       });
     }
   }, [classPrefix, theme]);
-
   return /*#__PURE__*/_react.default.createElement(Provider, {
     value: value
   }, children);

package/cjs/DatePicker/DatePicker.d.ts

@@ -3,7 +3,7 @@ import { RangeType } from './Toolbar';
 import { DatePickerLocale } from '../locales';
 import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
 export type { RangeType } from './Toolbar';
-export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date> {
+export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null> {
     /** Configure shortcut options */
     ranges?: RangeType<Date>[];
     /** Calendar panel default presentation date and time */

package/cjs/DatePicker/DatePicker.js

@@ -15,8 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _isNil = _interopRequireDefault(require("lodash/isNil"));
-
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
@@ -194,11 +192,11 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       closeOverlay = true;
     }
 
-    var nextValue = !(0, _isNil.default)(nextPageDate) ? nextPageDate : calendarDate;
+    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;
     setCalendarDate(nextValue || new Date());
     setValue(nextValue);
 
-    if (nextValue !== value || !_utils.DateUtils.isSameDay(nextValue, value)) {
+    if (nextValue !== value) {
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     } // `closeOverlay` default value is `true`
 

package/cjs/DateRangePicker/Calendar.js

@@ -114,22 +114,8 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
-    var after;
-
-    if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {
-      return true;
-    }
-
-    if (showOneCalendar) return false;
-
-    if (index === 1) {
-      after = (0, _dateUtils.isAfter)(date, calendarDate[0]);
-      return !after;
-    }
-
-    after = (0, _dateUtils.isAfter)(calendarDate[1], date);
-    return !after;
-  }, [calendarDate, disabledDate, index, showOneCalendar, value]);
+    return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR);
+  }, [disabledDate, value]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     format: format,
     calendarState: calendarState,

package/cjs/Dropdown/Dropdown.d.ts

@@ -3,6 +3,7 @@ import DropdownMenu from './DropdownMenu';
 import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { IconProps } from '@rsuite/icons/lib/Icon';
 import DropdownItem from './DropdownItem';
+import Button from '../Button';
 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 */
@@ -48,6 +49,10 @@ export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttr
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
 export interface DropdownComponent extends RsRefForwardingComponent<'div', DropdownProps> {
+    <ToggleAs extends React.ElementType = typeof Button>(props: DropdownProps & {
+        ref?: React.Ref<any>;
+        toggleAs?: ToggleAs;
+    } & React.ComponentProps<ToggleAs>, context: any): JSX.Element | null;
     Item: typeof DropdownItem;
     Menu: typeof DropdownMenu;
 }

package/cjs/Dropdown/DropdownMenu.js

@@ -152,8 +152,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       var classes = mergeItemClassNames(className, withItemClassPrefix({
         disabled: disabled,
         open: open,
-        submenu: true // focus: hasFocus
-
+        submenu: true
       }));
       return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
         ref: (0, _utils.mergeRefs)(ref, containerRef),
@@ -161,13 +160,10 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }, props), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (_ref2, buttonRef) {
         var open = _ref2.open,
             buttonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["open"]);
-        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), // prefixItemClassName`submenu`,
-        withItemClassPrefix({
+        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), withItemClassPrefix({
           'with-icon': icon,
           open: open,
-          // active: selected,
-          disabled: disabled // focus: active
-
+          disabled: disabled
         }));
         return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
           ref: (0, _utils.mergeRefs)(buttonRef, buttonRef),
@@ -202,8 +198,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         var selected = _ref5.selected,
             active = _ref5.active,
             menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["selected", "active"]);
-        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), // prefixItemClassName`submenu`,
-        withItemClassPrefix({
+        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), withItemClassPrefix({
           'with-icon': icon,
           open: open,
           active: selected,
@@ -239,8 +234,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     var classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled: disabled,
       open: open,
-      submenu: true // focus: hasFocus
-
+      submenu: true
     }));
     return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),

package/cjs/Dropdown/test/Dropdown.test.d.ts

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

package/cjs/Dropdown/test/Dropdown.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Dropdown = _interopRequireDefault(require("../Dropdown"));
+
+var ref = /*#__PURE__*/_react.default.createRef(); // Infer `toggleAs` props (defaults to Button)
+
+
+/*#__PURE__*/
+_react.default.createElement(_Dropdown.default, {
+  ref: ref,
+  appearance: "subtle",
+  size: "sm"
+});
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+
+var CustomToggle = function CustomToggle(_props) {
+  return null;
+};
+
+/*#__PURE__*/
+_react.default.createElement(_Dropdown.default, {
+  ref: ref,
+  toggleAs: CustomToggle,
+  myProp: "myValue"
+});

package/cjs/InputNumber/InputNumber.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WithAsProps, TypeAttributes, FormControlBaseProps } from '../@types/common';
-export interface InputNumberProps<T = number | string> extends WithAsProps, FormControlBaseProps<T> {
+export interface InputNumberProps<T = number | string> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
     /** Button can have different appearances */
     buttonAppearance?: TypeAttributes.Appearance;
     /** An input can show that it is disabled */

package/cjs/InputNumber/InputNumber.js

@@ -114,15 +114,15 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       step = _props$step === void 0 ? 1 : _props$step,
       _props$buttonAppearan = props.buttonAppearance,
       buttonAppearance = _props$buttonAppearan === void 0 ? 'subtle' : _props$buttonAppearan,
-      _props$min = props.min,
-      min = _props$min === void 0 ? -Infinity : _props$min,
-      _props$max = props.max,
-      max = _props$max === void 0 ? Infinity : _props$max,
+      minProp = props.min,
+      maxProp = props.max,
       _props$scrollable = props.scrollable,
       scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
       onChange = props.onChange,
       onWheel = props.onWheel,
       restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "disabled", "readOnly", "plaintext", "value", "defaultValue", "size", "prefix", "postfix", "step", "buttonAppearance", "min", "max", "scrollable", "onChange", "onWheel"]);
+  var min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;
+  var max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;
 
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
       value = _useControlled[0],
@@ -187,6 +187,35 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var bit = decimals(val, step);
     handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
   }, [getSafeValue, handleChangeValue, step, value]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    switch (event.key) {
+      case _utils.KEY_VALUES.UP:
+        event.preventDefault();
+        handlePlus(event);
+        break;
+
+      case _utils.KEY_VALUES.DOWN:
+        event.preventDefault();
+        handleMinus(event);
+        break;
+
+      case _utils.KEY_VALUES.HOME:
+        if (typeof minProp !== 'undefined') {
+          event.preventDefault();
+          handleChangeValue(getSafeValue(minProp), event);
+        }
+
+        break;
+
+      case _utils.KEY_VALUES.END:
+        if (typeof maxProp !== 'undefined') {
+          event.preventDefault();
+          handleChangeValue(getSafeValue(maxProp), event);
+        }
+
+        break;
+    }
+  }, [handlePlus, handleMinus, minProp, maxProp, handleChangeValue, getSafeValue]);
   var handleWheel = (0, _react.useCallback)(function (event) {
     if (!disabled && !readOnly && event.target === document.activeElement) {
       event.preventDefault();
@@ -233,7 +262,7 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [handleWheel, scrollable]);
 
   var input = /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {
-    type: "text",
+    type: "number",
     autoComplete: "off",
     step: step,
     inputRef: inputRef,
@@ -243,7 +272,8 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     disabled: disabled,
     readOnly: readOnly,
     plaintext: plaintext,
-    ref: plaintext ? ref : undefined
+    ref: plaintext ? ref : undefined,
+    onKeyDown: handleKeyDown
   }));
 
   if (plaintext) {

package/cjs/InputNumber/test/InputNumber.test.d.ts

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

package/cjs/InputNumber/test/InputNumber.test.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputNumber = _interopRequireDefault(require("../InputNumber"));
+
+// Inherits <input type="number" /> attributes
+
+/*#__PURE__*/
+_react.default.createElement(_InputNumber.default, {
+  placeholder: "Enter number"
+});

package/cjs/Modal/utils.js

@@ -56,21 +56,29 @@ var useBodyStyles = function useBodyStyles(ref, options) {
 
     (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
     (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
+    windowResizeListener.current = null;
+    contentElementResizeObserver.current = null;
   }, []);
   var onChangeBodyStyles = (0, _react.useCallback)(function (entering) {
-    if (overflow && !drawer) {
+    if (overflow && !drawer && ref.current) {
       updateBodyStyles(undefined, entering);
       contentElement.current = ref.current.querySelector("." + prefix('content'));
-      windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);
-      contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
-        return updateBodyStyles();
-      });
-      contentElementResizeObserver.current.observe(contentElement.current);
+
+      if (!windowResizeListener.current) {
+        windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);
+      }
+
+      if (contentElement.current && !contentElementResizeObserver.current) {
+        contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
+          return updateBodyStyles();
+        });
+        contentElementResizeObserver.current.observe(contentElement.current);
+      }
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   (0, _react.useEffect)(function () {
-    onDestroyEvents();
-  }, [onDestroyEvents]);
+    return onDestroyEvents; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
 };
 

package/cjs/MultiCascader/MultiCascader.js

@@ -220,8 +220,11 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         children.then(function (data) {
           node.loading = false;
           node[childrenKey] = data;
-          addFlattenData(data, node);
-          addColumn(data, cascadePaths.length);
+
+          if (targetRef.current) {
+            addFlattenData(data, node);
+            addColumn(data, cascadePaths.length);
+          }
         });
       } else {
         node.loading = false;
@@ -258,7 +261,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
   }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);
   var handleClean = (0, _react.useCallback)(function (event) {
-    if (disabled) {
+    if (disabled || !targetRef.current) {
       return;
     }
 
@@ -479,6 +482,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {
     classPrefix: classPrefix,
     hasValue: hasValue,
+    countable: countable,
     name: 'cascader',
     appearance: appearance,
     cleanable: cleanable

package/cjs/Nav/NavItem.js

@@ -104,7 +104,9 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   if (navbar) {
-    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, props);
+    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, (0, _extends2.default)({
+      ref: ref
+    }, props));
   }
 
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({

package/cjs/Picker/DropdownMenu.js

@@ -122,6 +122,11 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   (0, _react.useEffect)(function () {
     var container = menuBodyContainerRef.current;
+
+    if (!container) {
+      return;
+    }
+
     var activeItem = container.querySelector("." + prefix('item-focus'));
 
     if (!activeItem) {

package/cjs/Picker/PickerToggle.js

@@ -111,11 +111,9 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   }, [input, onFocus]);
   var handleBlur = (0, _react.useCallback)(function (event) {
-    if (document.activeElement !== inputRef.current) {
-      var _inputRef$current2;
-
+    if (inputRef.current && document.activeElement !== inputRef.current) {
       setActive(false);
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      inputRef.current.blur();
     }
 
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);

package/cjs/RangeSlider/RangeSlider.d.ts

@@ -1,6 +1,16 @@
 import React from 'react';
 import { SliderProps } from '../Slider';
 export declare type Range = [number, number];
-export declare type RangeSliderProps = SliderProps<Range>;
-declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<unknown>>;
+export declare type RangeSliderProps = SliderProps<Range> & {
+    /**
+     * Add constraint to validate before onChange is dispatched
+     */
+    constraint?: (range: Range) => boolean;
+};
+declare const RangeSlider: React.ForwardRefExoticComponent<SliderProps<Range> & {
+    /**
+     * Add constraint to validate before onChange is dispatched
+     */
+    constraint?: ((range: Range) => boolean) | undefined;
+} & React.RefAttributes<unknown>>;
 export default RangeSlider;

package/cjs/RangeSlider/RangeSlider.js

@@ -45,6 +45,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       Component = _props$as === void 0 ? 'div' : _props$as,
       barClassName = props.barClassName,
       className = props.className,
+      constraint = props.constraint,
       _props$defaultValue = props.defaultValue,
       defaultValue = _props$defaultValue === void 0 ? defaultDefaultValue : _props$defaultValue,
       graduated = props.graduated,
@@ -71,7 +72,7 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       renderMark = props.renderMark,
       onChange = props.onChange,
       onChangeCommitted = props.onChangeCommitted,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "defaultValue", "graduated", "progress", "vertical", "disabled", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "as", "barClassName", "className", "constraint", "defaultValue", "graduated", "progress", "vertical", "disabled", "classPrefix", "min", "max", "step", "value", "handleClassName", "handleStyle", "handleTitle", "tooltip", "getAriaValueText", "renderTooltip", "renderMark", "onChange", "onChangeCommitted"]);
   var barRef = (0, _react.useRef)(null); // Define the parameter position of the handle
 
   var handleIndexs = (0, _react.useRef)([0, 1]);
@@ -180,14 +181,27 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return nextValue;
   }, [getRangeValue, getValidValue]);
+  /**
+   * Whether a range is valid against given constraint (if any)
+   * Should check before every `setValue` calls
+   */
+
+  var isRangeMatchingConstraint = (0, _react.useCallback)(function (range) {
+    // If no constraint is defined, any range is valid
+    if (!constraint) return true;
+    return constraint(range);
+  }, [constraint]);
   /**
    * Callback function that is fired when the mousemove is triggered
    */
 
   var handleDragMove = (0, _utils.useEventCallback)(function (event, dataset) {
     var nextValue = getNextValue(event, dataset);
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
   });
   /**
    * Callback function that is fired when the mouseup is triggered
@@ -195,9 +209,12 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var handleChangeCommitted = (0, _react.useCallback)(function (event, dataset) {
     var nextValue = getNextValue(event, dataset);
-    setValue(nextValue);
-    onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
-  }, [getNextValue, onChangeCommitted, setValue]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextValue, event);
+    }
+  }, [getNextValue, onChangeCommitted, isRangeMatchingConstraint, setValue]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var _event$target;
 
@@ -240,9 +257,12 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 
     event.preventDefault();
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  }, [max, min, onChange, rtl, setValue, step, value]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
+  }, [max, min, onChange, rtl, isRangeMatchingConstraint, setValue, step, value]);
   var handleClick = (0, _react.useCallback)(function (event) {
     if (disabled) {
       return;
@@ -259,9 +279,12 @@ var RangeSlider = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     var nextValue = getValidValue([start, end].sort());
-    setValue(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  }, [disabled, getValidValue, getValueByPosition, onChange, setValue, value]);
+
+    if (isRangeMatchingConstraint(nextValue)) {
+      setValue(nextValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+    }
+  }, [disabled, getValidValue, getValueByPosition, isRangeMatchingConstraint, onChange, setValue, value]);
   var handleProps = (0, _react.useMemo)(function () {
     return [{
       value: value[0],

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
+import { PickerInstance } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 export interface SelectProps<T> {
@@ -42,7 +43,9 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
 export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T> {
 }
 export interface SelectPickerComponent {
-    <T>(props: SelectPickerProps<T>): JSX.Element | null;
+    <T>(props: SelectPickerProps<T> & {
+        ref?: Ref<PickerInstance>;
+    }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;
 }

package/cjs/SelectPicker/test/SelectPicker.test.js

@@ -59,4 +59,12 @@ _react.default.createElement(_SelectPicker.default, {
   onChange: function onChange(newValue) {
     (0, _tsExpect.expectType)(newValue);
   }
+});
+
+var pickerRef = /*#__PURE__*/_react.default.createRef();
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  ref: pickerRef,
+  data: []
 });