rsuite 5.0.1 → 5.2.0

package/cjs/Calendar/TimeDropdown.js

@@ -17,7 +17,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getPosition2 = _interopRequireDefault(require("dom-lib/getPosition"));
+
+var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 
 var _partial = _interopRequireDefault(require("lodash/partial"));
 
@@ -99,10 +101,10 @@ var scrollTo = function scrollTo(time, row) {
     var node = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + type + "-" + value + "\"]");
 
     if (node && container) {
-      var _getPosition = (0, _domLib.getPosition)(node, container),
+      var _getPosition = (0, _getPosition2.default)(node, container),
           top = _getPosition.top;
 
-      (0, _utils.scrollTopAnimation)(container, top, (0, _domLib.scrollTop)(container) !== 0);
+      (0, _utils.scrollTopAnimation)(container, top, (0, _scrollTop.default)(container) !== 0);
     }
   });
 };

package/cjs/Cascader/Cascader.d.ts

@@ -25,7 +25,7 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T,
     /** Called when clean */
     onClean?: (event: React.SyntheticEvent) => void;
     /** Called when searching */
-    onSearch?: (searchKeyword: string, event: React.SyntheticEvent<HTMLElement>) => void;
+    onSearch?: (searchKeyword: string, event: React.SyntheticEvent) => void;
     /** Asynchronously load the children of the tree node. */
     getChildren?: (node: ItemDataType) => ItemDataType[] | Promise<ItemDataType[]>;
 }

package/cjs/Cascader/Cascader.js

@@ -473,7 +473,9 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends3.default)({}, props, {
     classPrefix: classPrefix,
     hasValue: hasValue,
-    name: 'cascader'
+    name: 'cascader',
+    appearance: appearance,
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1]; // TODO: bad api design

package/cjs/Cascader/DropdownMenu.js

@@ -17,8 +17,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Spinner = _interopRequireDefault(require("@rsuite/icons/legacy/Spinner"));
 
-var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));
-
 var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
 
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
@@ -31,6 +29,10 @@ var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"
 
 var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
 
+var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
+
+var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
+
 var emptyArray = [];
 
 var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -83,10 +85,9 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }
 
       if (activeItem) {
-        var position = _DOMHelper.default.getPosition(activeItem, column); // Let the active option scroll into view.
-
+        var position = (0, _getPosition.default)(activeItem, column); // Let the active option scroll into view.
 
-        _DOMHelper.default.scrollTop(column, position.top);
+        (0, _scrollTop.default)(column, position.top);
       }
     });
   }, [prefix]);

package/cjs/CheckTreePicker/CheckTreeNode.d.ts

@@ -20,7 +20,7 @@ export interface CheckTreeNodeProps extends WithAsProps {
     uncheckable?: boolean;
     allUncheckable?: boolean;
     onExpand?: (nodeData: any) => void;
-    onSelect?: (nodeData: any, event: React.SyntheticEvent<any>) => void;
+    onSelect?: (nodeData: any, event: React.SyntheticEvent) => void;
     onRenderTreeIcon?: (nodeData: any, expandIcon?: React.ReactNode) => React.ReactNode;
     onRenderTreeNode?: (nodeData: any) => React.ReactNode;
 }

package/cjs/CheckTreePicker/CheckTreePicker.d.ts

@@ -14,7 +14,7 @@ export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, It
     /** Custom render selected items */
     renderValue?: (value: any[], selectedItems: any[], selectedElement: React.ReactNode) => React.ReactNode;
     /** Called when scrolling */
-    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onScroll?: (event: React.SyntheticEvent) => void;
 }
 declare const CheckTreePicker: PickerComponent<CheckTreePickerProps>;
 export default CheckTreePicker;

package/cjs/Checkbox/Checkbox.d.ts

@@ -31,11 +31,11 @@ export interface CheckboxProps<V = ValueType> extends WithAsProps {
     /** Used for the name of the form */
     name?: string;
     /** Called when the user attempts to change the checked state. */
-    onChange?: (value: V, checked: boolean, event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (value: V, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Called when the checkbox or label is clicked. */
-    onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onClick?: (event: React.SyntheticEvent) => void;
     /** Called when the checkbox is clicked. */
-    onCheckboxClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onCheckboxClick?: (event: React.SyntheticEvent) => void;
 }
 declare const Checkbox: RsRefForwardingComponent<'div', CheckboxProps>;
 export default Checkbox;

package/cjs/CheckboxGroup/CheckboxGroupContext.d.ts

@@ -8,6 +8,6 @@ export interface CheckboxGroupContextValue {
     disabled?: boolean;
     readOnly?: boolean;
     plaintext?: boolean;
-    onChange?: (value: any, checked: boolean, event: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (value: any, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextValue>;

package/cjs/DOMHelper/index.d.ts

@@ -2,34 +2,17 @@ import * as helpers from 'dom-lib';
 export * from 'dom-lib';
 declare const DOMHelper: {
     isElement: (node: HTMLElement) => boolean;
-    animation: typeof helpers.animation;
-    transition: () => {
-        end: any;
-        backfaceVisibility: string;
-        transform: string;
-        property: string;
-        timing: string;
-        delay: string;
-        duration: string;
-    };
-    translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number, y?: number) => CSSStyleDeclaration;
-    getVendorPrefixedName: typeof helpers.getVendorPrefixedName;
-    BrowserSupportCore: {
-        hasCSSAnimations: () => boolean;
-        hasCSSTransforms: () => boolean;
-        hasCSS3DTransforms: () => boolean;
-        hasCSSTransitions: () => boolean;
-    };
-    DOMMouseMoveTracker: typeof helpers.DOMMouseMoveTracker;
+    on: typeof helpers.on;
+    off: typeof helpers.off;
     WheelHandler: typeof helpers.WheelHandler;
+    DOMMouseMoveTracker: typeof helpers.DOMMouseMoveTracker;
     addClass: (target: Element, className: string) => Element;
-    hasClass: (target: Element, className: string) => boolean;
     removeClass: (target: Element, className: string) => Element;
+    hasClass: (target: Element, className: string) => boolean;
     toggleClass: (target: Element, className: string) => Element;
-    getStyle: (node: Element, property?: string) => string | CSSStyleDeclaration;
-    removeStyle: (node: Element, keys: string | string[]) => void;
-    addStyle: (node: Element, property: string | import("dom-lib/lib/style/addStyle").CSSProperty, value?: string | number) => void;
-    getComputedStyle: (node: Element) => CSSStyleDeclaration;
+    cancelAnimationFramePolyfill: typeof clearTimeout;
+    requestAnimationFramePolyfill: typeof requestAnimationFrame;
+    getAnimationEnd: typeof helpers.getAnimationEnd;
     ownerDocument: (node: Element) => Document;
     ownerWindow: (componentOrElement: Element) => Window;
     getWindow: (node: any) => Window;
@@ -46,18 +29,20 @@ declare const DOMHelper: {
     } | DOMRect;
     nodeName: (node: Element) => string;
     getOffsetParent: (node: Element) => Element;
-    getPosition: (node: Element, offsetParent?: Element) => DOMRect | {
+    getPosition: (node: Element, offsetParent?: Element, calcMargin?: boolean) => DOMRect | {
         top: number;
         left: number;
         height: number;
         width: number;
     };
     isOverflowing: (container: Element) => boolean;
-    activeElement: (doc?: Document) => Element;
     getScrollbarSize: (recalc?: boolean) => number | void;
     getHeight: (node: Element | Window, client?: Element) => number;
     getWidth: (node: Element | Window, client?: Element) => number;
-    on: typeof helpers.on;
-    off: typeof helpers.off;
+    isFocusable: typeof helpers.isFocusable;
+    getStyle: (node: Element, property?: string) => string | CSSStyleDeclaration;
+    removeStyle: (node: Element, keys: string | string[]) => void;
+    addStyle: (node: Element, property: string | import("dom-lib/esm/addStyle").CSSProperty, value?: string | number) => void;
+    translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number, y?: number) => CSSStyleDeclaration;
 };
 export default DOMHelper;

package/cjs/DOMHelper/index.js

@@ -18,10 +18,11 @@ Object.keys(helpers).forEach(function (key) {
   if (key in exports && exports[key] === helpers[key]) return;
   exports[key] = helpers[key];
 });
+
+var _isElement = _interopRequireDefault(require("./isElement"));
+
 var DOMHelper = (0, _extends2.default)({}, helpers, {
-  isElement: function isElement(node) {
-    return (node === null || node === void 0 ? void 0 : node.nodeType) && typeof (node === null || node === void 0 ? void 0 : node.nodeName) === 'string';
-  }
+  isElement: _isElement.default
 });
 var _default = DOMHelper;
 exports.default = _default;

package/cjs/DOMHelper/isElement.d.ts

@@ -0,0 +1,2 @@
+declare const isElement: (node: HTMLElement) => boolean;
+export default isElement;

package/cjs/DOMHelper/isElement.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var isElement = function isElement(node) {
+  return (node === null || node === void 0 ? void 0 : node.nodeType) === 1 && typeof (node === null || node === void 0 ? void 0 : node.nodeName) === 'string';
+};
+
+var _default = isElement;
+exports.default = _default;

package/cjs/DatePicker/DatePicker.d.ts

@@ -41,19 +41,19 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     /** Hidden seconds */
     hideSeconds?: (second: number, date: Date) => boolean;
     /** Called when the calendar panel date changes */
-    onChangeCalendarDate?: (date: Date, event?: React.SyntheticEvent<HTMLElement>) => void;
+    onChangeCalendarDate?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called when opening the month view */
     onToggleMonthDropdown?: (toggle: boolean) => void;
     /** Called when opening the time view */
     onToggleTimeDropdown?: (toggle: boolean) => void;
     /** Called when the option is selected */
-    onSelect?: (date: Date, event?: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after the prev month */
     onPrevMonth?: (date: Date) => void;
     /** Called after the next month */
     onNextMonth?: (date: Date) => void;
     /** Called after clicking the OK button */
-    onOk?: (date: Date, event: React.SyntheticEvent<HTMLElement>) => void;
+    onOk?: (date: Date, event: React.SyntheticEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */

package/cjs/DatePicker/DatePicker.js

@@ -328,7 +328,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * The callback after the enter key is triggered on the input
    */
 
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
+  var handleInputPressEnd = (0, _react.useCallback)(function (event) {
     if (inputState === 'Typing') {
       updateValue(event, calendarDate);
     }
@@ -417,7 +417,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
     classPrefix: classPrefix,
     name: 'date',
-    hasValue: hasValue
+    appearance: appearance,
+    hasValue: hasValue,
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];
@@ -458,7 +460,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
     inputMask: _utils.DateUtils.getDateMask(formatStr),
     onInputChange: handleInputChange,
-    onInputBlur: handleInputBlur,
+    onInputBlur: handleInputPressEnd,
+    onInputPressEnter: handleInputPressEnd,
     onKeyDown: onPickerKeyDown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,

package/cjs/DateRangePicker/Calendar.d.ts

@@ -16,7 +16,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     onChangeCalendarDate?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
     onMouseMove?: (date: Date) => void;
-    onSelect?: (date: Date, event?: React.SyntheticEvent<any>) => void;
+    onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     showOneCalendar?: boolean;
     showWeekNumbers?: boolean;
     value?: ValueType;

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -26,9 +26,9 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     /** Disabled date */
     disabledDate?: DisabledDateFunction;
     /** Called when the option is selected */
-    onSelect?: (date: Date, event?: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after clicking the OK button */
-    onOk?: (date: ValueType, event: React.SyntheticEvent<HTMLElement>) => void;
+    onOk?: (date: ValueType, event: React.SyntheticEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -98,7 +98,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
       locale = _useCustom.locale,
-      formatDate = _useCustom.formatDate;
+      formatDate = _useCustom.formatDate,
+      parseDate = _useCustom.parseDate;
 
   var rangeFormatStr = "" + formatStr + character + formatStr;
 
@@ -393,13 +394,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var rangeValue = value.split(character); // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
     // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
 
-    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr)) {
+    if (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {
+      locale: locale.dateLocale
+    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {
+      locale: locale.dateLocale
+    })) {
       setInputState('Error');
       return;
     }
 
-    var startDate = new Date(rangeValue[0]);
-    var endDate = new Date(rangeValue[1]);
+    var startDate = parseDate(rangeValue[0], formatStr);
+    var endDate = parseDate(rangeValue[1], formatStr);
     var selectValue = [startDate, endDate];
 
     if (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {
@@ -421,7 +426,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * The callback after the enter key is triggered on the input
    */
 
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
+  var handleInputPressEnd = (0, _react.useCallback)(function (event) {
     if (inputState === 'Typing') {
       handleValueUpdate(event, selectValue);
     }
@@ -569,7 +574,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
     classPrefix: classPrefix,
     name: 'daterange',
-    hasValue: hasValue
+    appearance: appearance,
+    hasValue: hasValue,
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];
@@ -595,7 +602,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     inputValue: value ? getDisplayString(value, true) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,
     onInputChange: handleInputChange,
-    onInputBlur: handleInputBlur,
+    onInputBlur: handleInputPressEnd,
+    onInputPressEnter: handleInputPressEnd,
     onKeyDown: onPickerKeyDown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,

package/cjs/Disclosure/Disclosure.d.ts

@@ -12,7 +12,7 @@ export interface DisclosureProps {
     defaultOpen?: boolean;
     hideOnClickOutside?: boolean;
     /** Callback when disclosure button is being activated to update the open state */
-    onToggle?: (open: boolean, event: React.SyntheticEvent<HTMLElement>) => void;
+    onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
 }
 declare function Disclosure(props: DisclosureProps): JSX.Element;
 declare namespace Disclosure {

package/cjs/Disclosure/DisclosureContext.d.ts

@@ -13,7 +13,7 @@ export declare type DisclosureContextProps = [
     DisclosureState,
     Dispatch<DisclosureAction>,
     {
-        onToggle: (open: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
+        onToggle: (open: boolean, event?: React.SyntheticEvent) => void;
     }
 ];
 declare const DisclosureContext: React.Context<DisclosureContextProps>;

package/cjs/Dropdown/DropdownItem.d.ts

@@ -32,7 +32,7 @@ export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.
      */
     open?: boolean;
     /** Select the callback function for the current option  */
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<HTMLElement>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
 }
 /**
  * The <Dropdown.Item> API

package/cjs/Dropdown/DropdownItem.js

@@ -54,7 +54,13 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       eventKey = props.eventKey,
       onSelect = props.onSelect,
       icon = props.icon,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "active", "eventKey", "onSelect", "icon"]);
+      _props$as = props.as,
+      Component = _props$as === void 0 ? 'li' : _props$as,
+      divider = props.divider,
+      panel = props.panel,
+      children = props.children,
+      disabled = props.disabled,
+      restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["classPrefix", "className", "active", "eventKey", "onSelect", "icon", "as", "divider", "panel", "children", "disabled"]);
   var internalId = (0, _useInternalId.default)('DropdownItem');
   var nav = (0, _react.useContext)(_NavContext.default);
   var dropdown = (0, _react.useContext)(_DropdownContext.default);
@@ -106,6 +112,15 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       };
     }
   }, [internalId, selected, dispatch]);
+  var renderDropdownItem = (0, _react.useCallback)(function (ui) {
+    if (Component === 'li') {
+      return ui;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("li", {
+      role: "none presentation"
+    }, ui);
+  }, [Component]);
 
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_SidenavDropdownItem.default, (0, _extends2.default)({
@@ -113,28 +128,19 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, props));
   }
 
-  var _rest$as = rest.as,
-      Component = _rest$as === void 0 ? 'li' : _rest$as,
-      divider = rest.divider,
-      panel = rest.panel,
-      children = rest.children,
-      disabled = rest.disabled,
-      restProps = (0, _objectWithoutPropertiesLoose2.default)(rest, ["as", "divider", "panel", "children", "disabled"]);
-
   if (divider) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref,
       role: "separator",
       className: merge(prefix('divider'), className)
-    }, restProps));
+    }, restProps)));
   }
 
   if (panel) {
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: ref,
-      role: "none presentation",
       className: merge(prefix('panel'), className)
-    }, restProps), children);
+    }, restProps), children));
   }
 
   if (navbar) {
@@ -158,6 +164,7 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       className: classes,
       "aria-current": selected || undefined
     }, dataAttributes, restProps, {
+      as: Component,
       onClick: (0, _utils.createChainedFunction)(handleClickNavbarDropdownItem, restProps.onClick)
     }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
       className: prefix('menu-icon')
@@ -188,12 +195,12 @@ var DropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       dataAttributes['data-event-key-type'] = typeof eventKey;
     }
 
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return renderDropdownItem( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuitemRef),
       className: classes
     }, menuitem, dataAttributes, restProps), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
       className: prefix('menu-icon')
-    }), children);
+    }), children));
   });
 });
 

package/cjs/Dropdown/DropdownMenu.d.ts

@@ -19,8 +19,8 @@ export interface DropdownMenuProps<T = string> extends StandardProps {
     disabled?: boolean;
     activeKey?: T;
     trigger?: 'hover' | 'click';
-    onSelect?: (eventKey: T, event: React.SyntheticEvent<Element>) => void;
-    onToggle?: (eventKey: T, event: React.SyntheticEvent<Element>) => void;
+    onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
+    onToggle?: (eventKey: T, event: React.SyntheticEvent) => void;
 }
 /**
  * The <Dropdown.Menu> API

package/cjs/Form/Form.d.ts

@@ -33,7 +33,7 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
     /** The error message comes from context */
     errorFromContext?: boolean;
     /** Callback fired when data changing */
-    onChange?: (formValue: T, event: React.SyntheticEvent<HTMLElement>) => void;
+    onChange?: (formValue: T, event: React.SyntheticEvent) => void;
     /** Callback fired when error checking */
     onError?: (formError: E) => void;
     /** Callback fired when data cheking */

package/cjs/FormControl/FormControl.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TypeAttributes, FormControlBaseProps, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import Input from '../Input';
+import { TypeAttributes, FormControlBaseProps, WithAsProps } from '../@types/common';
 /**
  * Props that FormControl passes to its accepter
  */
@@ -12,7 +13,7 @@ export interface FormControlProps<P = any, ValueType = any> extends WithAsProps,
     /** Value */
     value?: ValueType;
     /** Callback fired when data changing */
-    onChange?(value: ValueType, event: React.SyntheticEvent<HTMLElement>): void;
+    onChange?(value: ValueType, event: React.SyntheticEvent): void;
     /** The data validation trigger type, and it wiill overrides the setting on <Form> */
     checkTrigger?: TypeAttributes.CheckTrigger;
     /** Show error messages */
@@ -28,5 +29,10 @@ export interface FormControlProps<P = any, ValueType = any> extends WithAsProps,
     /** Asynchronous check value */
     checkAsync?: boolean;
 }
-declare const FormControl: RsRefForwardingComponent<'div', FormControlProps>;
+interface FormControlComponent extends React.FC<FormControlProps> {
+    <Accepter extends React.ElementType = typeof Input>(props: FormControlProps & {
+        accepter?: Accepter;
+    } & React.ComponentPropsWithRef<Accepter>): React.ReactElement;
+}
+declare const FormControl: FormControlComponent;
 export default FormControl;

package/cjs/FormControl/FormControl.js

@@ -138,14 +138,18 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   }
 
-  var ariaDescribedby = controlId ? controlId + "-" + (messageNode ? 'error-message' : 'help-text') : null;
+  var ariaDescribedby = controlId ? controlId + "-help-text" : null;
+  var fieldHasError = Boolean(messageNode);
+  var ariaErrormessage = fieldHasError && controlId ? controlId + "-error-message" : undefined;
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends3.default)({
     id: controlId,
     "aria-labelledby": controlId ? controlId + "-control-label" : null,
-    "aria-describedby": ariaDescribedby
+    "aria-describedby": ariaDescribedby,
+    "aria-invalid": fieldHasError || undefined,
+    "aria-errormessage": ariaErrormessage
   }, rest, {
     readOnly: readOnly,
     plaintext: plaintext,

package/cjs/Input/Input.d.ts

@@ -3,7 +3,7 @@ import { WithAsProps, RsRefForwardingComponent, TypeAttributes, FormControlBaseP
 export interface LocaleType {
     unfilled: string;
 }
-export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps<string | number | ReadonlyArray<string>> {
+export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps {
     /** The HTML input type */
     type?: string;
     /** The HTML input id */
@@ -12,6 +12,7 @@ export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<
     size?: TypeAttributes.Size;
     /** Ref of input element */
     inputRef?: React.Ref<any>;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Called on press enter */
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }

package/cjs/InputNumber/InputNumber.js

@@ -21,7 +21,7 @@ var _AngleUp = _interopRequireDefault(require("@rsuite/icons/legacy/AngleUp"));
 
 var _AngleDown = _interopRequireDefault(require("@rsuite/icons/legacy/AngleDown"));
 
-var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));
+var _on = _interopRequireDefault(require("dom-lib/on"));
 
 var _InputGroup = _interopRequireDefault(require("../InputGroup/InputGroup"));
 
@@ -216,7 +216,7 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var wheelListener;
 
     if (inputRef.current && scrollable) {
-      wheelListener = _DOMHelper.default.on(inputRef.current, 'wheel', handleWheel, {
+      wheelListener = (0, _on.default)(inputRef.current, 'wheel', handleWheel, {
         passive: false
       });
     }

package/cjs/InputPicker/InputPicker.js

@@ -33,7 +33,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
 
-var _domLib = require("dom-lib");
+var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
 
 var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
 
@@ -232,7 +232,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     // In multiple selection, you need to set a maximum width for the input.
     if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {
-      setMaxWidth((0, _domLib.getWidth)(triggerRef.current.root));
+      setMaxWidth((0, _getWidth.default)(triggerRef.current.root));
     }
   }, []); // Update the position of the menu when the search keyword and value change
 
@@ -674,7 +674,8 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     classPrefix: classPrefix,
     appearance: appearance,
     hasValue: hasValue,
-    name: 'input'
+    name: 'input',
+    cleanable: cleanable
   })),
       pickerClasses = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];