rsuite 5.1.0 → 5.2.0

package/Button/styles/index.less

@@ -23,7 +23,7 @@
   text-decoration: none;
   color: var(--rs-btn-default-text);
   background-color: var(--rs-btn-default-bg);
-  border-radius: 6px;
+  border-radius: @border-radius;
 
   .high-contrast-mode({
     transition: none;

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [5.2.0](https://github.com/rsuite/rsuite/compare/v5.1.0...v5.2.0) (2021-11-05)
+
+### Bug Fixes
+
+- **Button:** Add button radius variable ([#2106](https://github.com/rsuite/rsuite/issues/2106)) ([63a61c4](https://github.com/rsuite/rsuite/commit/63a61c4eede3b22c91eef126b72fc1afb280a18e))
+- **less:** palette function accepts rgb color ([#2107](https://github.com/rsuite/rsuite/issues/2107)) ([92c2dc5](https://github.com/rsuite/rsuite/commit/92c2dc5cf9273a26de189cee6e79b57740e17b49))
+- can't perform a React state update on an unmounted component ([#2105](https://github.com/rsuite/rsuite/issues/2105)) ([44439af](https://github.com/rsuite/rsuite/commit/44439afdfdf481887a78fbd86f527e29eafb1a78))
+- **dts:** remove redundant generics on SyntheticEvent ([#2099](https://github.com/rsuite/rsuite/issues/2099)) ([30ccd68](https://github.com/rsuite/rsuite/commit/30ccd685fb09092fb1fa693929cdba5d26967f96))
+- **fa_IR:** trim long text of days to shorter ones ([#2076](https://github.com/rsuite/rsuite/issues/2076)) ([a893b82](https://github.com/rsuite/rsuite/commit/a893b82b835f9268a0053ede64565c96e6110095))
+- **FormControl:** infer additional props from accepter ([#2084](https://github.com/rsuite/rsuite/issues/2084)) ([5d39fed](https://github.com/rsuite/rsuite/commit/5d39fed6e56418e85367df9dd5aeb7b49774380b))
+- **Input:** correct value argument type for onChange callback ([#2087](https://github.com/rsuite/rsuite/issues/2087)) ([7a4ff02](https://github.com/rsuite/rsuite/commit/7a4ff02e1e01b40f2e2bffea105181500848d2c9))
+- **Slider,RangeSlider:** reverse marks order in vertical orientation ([#2080](https://github.com/rsuite/rsuite/issues/2080)) ([07fdd09](https://github.com/rsuite/rsuite/commit/07fdd09bb504ea7e876e6e6b4da439a725f716a9))
+
 # [5.1.0](https://github.com/rsuite/rsuite/compare/v5.0.3...v5.1.0) (2021-10-29)
 
 ### Bug Fixes

package/README.md

@@ -183,7 +183,6 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [npm-home]: https://www.npmjs.com/package/rsuite
 [actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=master
 [actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amaster+workflow%3A%22Node.js+CI%22
-[coverage-home]: https://coveralls.io/github/rsuite/rsuite?branch=master
 [discord-svg]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
 [discord-invite]: https://discord.gg/R8mnjwh
 [rsuite-design]: https://rsuitejs.com/design/default

package/Slider/styles/index.less

@@ -83,9 +83,13 @@
     }
   }
 
-  .rs-slider-vertical &::before {
-    left: ((@slider-handle-diameter - @slider-bar-side-length)/2);
-    margin-top: (-@slider-handle-diameter / 2);
+  .rs-slider-vertical & {
+    top: unset;
+
+    &::before {
+      left: ((@slider-handle-diameter - @slider-bar-side-length)/2);
+      margin-top: (-@slider-handle-diameter / 2);
+    }
   }
 }
 
@@ -127,12 +131,12 @@
 .rs-slider-graduator {
   width: 100%;
 
-  ul,
+  ol,
   li {
     list-style: none;
   }
 
-  > ul {
+  > ol {
     display: flex;
     padding-left: 0;
     width: 100%;
@@ -157,7 +161,8 @@
 
         // Vertical styles
         .rs-slider-vertical & {
-          top: -4px;
+          top: unset;
+          bottom: -4px;
           margin-left: -1px;
         }
       }
@@ -168,8 +173,8 @@
         // Vertical styles
         .rs-slider-vertical & {
           left: 0;
-          top: auto;
-          bottom: -4px;
+          bottom: unset;
+          top: -4px;
         }
       }
 
@@ -188,10 +193,10 @@
     display: block;
     height: 100%;
 
-    > ul {
+    > ol {
       width: @slider-bar-side-length;
       display: flex;
-      flex-direction: column;
+      flex-direction: column-reverse;
       height: 100%;
       padding: 0;
 
@@ -212,7 +217,7 @@
 
   .rs-slider-vertical & {
     width: @slider-bar-side-length;
-    border-radius: (@slider-bar-side-length / 2) (@slider-bar-side-length / 2) 0 0;
+    border-radius: 0 0 (@slider-bar-side-length / 2) (@slider-bar-side-length / 2);
   }
 }
 
@@ -222,7 +227,8 @@
 
   // Reset all setting
   .rs-slider-mark {
-    top: -8px;
+    top: unset;
+    bottom: -8px;
     left: (@slider-bar-side-length + @slider-mark-margin-top);
 
     &-content {
@@ -231,7 +237,7 @@
   }
 
   .rs-slider-mark-last {
-    top: auto;
-    bottom: -8px;
+    bottom: unset;
+    top: -8px;
   }
 }

package/Toggle/styles/index.less

@@ -8,10 +8,23 @@
 
 // The switch trail
 // todo: Consider renaming as .rs-toggle
-.rs-btn-toggle {
+.rs-toggle {
+  position: relative;
+
   // Default size is middle.
-  .btn-toggle(md);
+  .toggle(md);
+}
 
+.rs-toggle-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
+
+.rs-toggle-presentation {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -27,25 +40,19 @@
     box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb);
   });
 
+  .rs-toggle-input:focus-visible + & {
+    .focus-ring();
+
+    .high-contrast-mode({
+      box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb), var(--rs-state-focus-shadow);;
+    });
+  }
+
   &:hover {
     background-color: var(--rs-toggle-hover-bg);
   }
 
   // The switch thumb
-  &-loader {
-    position: absolute;
-    transition: left @toggle-transition, margin-left @toggle-transition, width @toggle-transition;
-
-    .rs-loader-spin {
-      &::before {
-        border-color: var(--rs-toggle-loader-ring);
-      }
-      &::after {
-        border-top-color: var(--rs-toggle-loader-rotor);
-      }
-    }
-  }
-
   &::after {
     content: '';
     cursor: pointer;
@@ -59,7 +66,7 @@
   }
 
   // disabled state
-  &&-disabled {
+  .rs-toggle-disabled & {
     background-color: var(--rs-toggle-disabled-bg);
     color: var(--rs-toggle-disabled-thumb);
     box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
@@ -67,7 +74,7 @@
   }
 
   // checked state
-  &&-checked {
+  .rs-toggle-checked & {
     background-color: var(--rs-toggle-checked-bg);
     color: var(--rs-toggle-checked-thumb);
     box-shadow: none;
@@ -77,12 +84,12 @@
     }
   }
 
-  &&-disabled&-checked {
+  .rs-toggle-disabled.rs-toggle-checked & {
     background-color: var(--rs-toggle-checked-disabled-bg);
     color: var(--rs-toggle-checked-disabled-thumb);
   }
 
-  &&-loading {
+  .rs-toggle-loading & {
     &::after {
       display: none;
     }
@@ -90,7 +97,7 @@
 }
 
 // Label text inside the switch
-.rs-btn-toggle-inner {
+.rs-toggle-inner {
   display: block;
   transition: margin @toggle-transition;
 
@@ -99,17 +106,31 @@
   });
 }
 
+.rs-toggle-loader {
+  position: absolute;
+  transition: left @toggle-transition, margin-left @toggle-transition, width @toggle-transition;
+
+  .rs-loader-spin {
+    &::before {
+      border-color: var(--rs-toggle-loader-ring);
+    }
+    &::after {
+      border-top-color: var(--rs-toggle-loader-rotor);
+    }
+  }
+}
+
 // small
-.rs-btn-toggle-sm {
-  .btn-toggle(sm);
+.rs-toggle-sm {
+  .toggle(sm);
 }
 
 // middle
-.rs-btn-toggle-md {
-  .btn-toggle(md);
+.rs-toggle-md {
+  .toggle(md);
 }
 
 // large
-.rs-btn-toggle-lg {
-  .btn-toggle(lg);
+.rs-toggle-lg {
+  .toggle(lg);
 }

package/Toggle/styles/mixin.less

@@ -1,18 +1,20 @@
 .toggle-size-variant(@toogle-height,@min-width,@toggle-handle-gap,@toggle-inner-margin,@toggle-inner-font-size) {
   @handle-diameter: (@toogle-height - @toggle-handle-gap*2);
 
-  height: @toogle-height;
-  min-width: @min-width;
-  border-radius: (@toogle-height / 2);
-
-  &-loader {
+  .rs-toggle-loader {
     width: @handle-diameter;
     height: @handle-diameter;
     left: @toggle-handle-gap;
     top: @toggle-handle-gap;
   }
 
-  &::after {
+  .rs-toggle-presentation {
+    height: @toogle-height;
+    min-width: @min-width;
+    border-radius: (@toogle-height / 2);
+  }
+
+  .rs-toggle-presentation::after {
     width: @handle-diameter;
     height: @handle-diameter;
     left: @toggle-handle-gap;
@@ -20,11 +22,11 @@
     border-radius: (@handle-diameter / 2);
   }
 
-  &:active::after {
+  .rs-toggle-presentation:active::after {
     width: (@handle-diameter * @toggle-active-scale);
   }
 
-  .rs-btn-toggle-inner {
+  .rs-toggle-inner {
     margin-left: @toogle-height;
     margin-right: @toggle-inner-margin;
     height: @toogle-height;
@@ -36,7 +38,7 @@
     }
   }
 
-  &.rs-btn-toggle-checked {
+  &.rs-toggle-checked .rs-toggle-presentation {
     &::after {
       left: 100%;
       margin-left: -(@handle-diameter + @toggle-handle-gap);
@@ -46,20 +48,20 @@
       margin-left: -(@handle-diameter * @toggle-active-scale + @toggle-handle-gap);
     }
 
-    .rs-btn-toggle-inner {
+    .rs-toggle-inner {
       margin-right: @toogle-height;
       margin-left: @toggle-inner-margin;
     }
   }
 
-  &.rs-btn-toggle-checked &-loader {
+  &.rs-toggle-checked .rs-toggle-loader {
     left: 100%;
     margin-left: -(@handle-diameter + @toggle-handle-gap);
   }
 }
 
 // Small
-.btn-toggle(sm) {
+.toggle(sm) {
   .toggle-size-variant(
     @toggle-sm-height,
     @toggle-sm-min-width,
@@ -70,7 +72,7 @@
 }
 
 // Middle
-.btn-toggle(md) {
+.toggle(md) {
   .toggle-size-variant(
     @toggle-md-height,
     @toggle-md-min-width,
@@ -81,7 +83,7 @@
 }
 
 // Large
-.btn-toggle(lg) {
+.toggle(lg) {
   .toggle-size-variant(
     @toggle-lg-height,
     @toggle-lg-min-width,

package/cjs/@types/common.d.ts

@@ -80,12 +80,18 @@ export interface PickerBaseProps<LocaleType = any> extends WithAsProps, Animatio
     /** Custom render extra footer */
     renderExtraFooter?: () => React.ReactNode;
 }
-export interface FormControlBaseProps<ValueType = any> {
+export interface FormControlBaseProps<ValueType = React.InputHTMLAttributes<HTMLInputElement>['value']> {
+    /** Name of the form field */
+    name?: string;
     /** Initial value */
     defaultValue?: ValueType;
     /** Current value of the component. Creates a controlled component */
     value?: ValueType;
-    /** Called after the value has been changed */
+    /**
+     * Called after the value has been changed
+     * todo Override event as React.ChangeEvent in components where onChange is delegated
+     *      to an underlying <input> element
+     */
     onChange?: (value: ValueType, event: React.SyntheticEvent) => void;
     /** Set the component to be disabled and cannot be entered */
     disabled?: boolean;

package/cjs/Affix/Affix.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
 
 var _utils = require("../utils");
 
@@ -28,7 +28,7 @@ function useOffset(mountRef) {
       setOffset = _useState[1];
 
   var updateOffset = (0, _react.useCallback)(function () {
-    setOffset((0, _domLib.getOffset)(mountRef.current));
+    setOffset((0, _getOffset.default)(mountRef.current));
   }, [mountRef]); // Update after the element size changes
 
   (0, _utils.useElementResize)(function () {
@@ -51,7 +51,7 @@ function useContainerOffset(container) {
 
   (0, _react.useEffect)(function () {
     var node = typeof container === 'function' ? container() : container;
-    setOffset(node ? (0, _domLib.getOffset)(node) : null);
+    setOffset(node ? (0, _getOffset.default)(node) : null);
   }, [container]);
   return offset;
 }

package/cjs/Animation/Collapse.js

@@ -15,7 +15,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getStyle = _interopRequireDefault(require("dom-lib/getStyle"));
+
+var _addStyle = _interopRequireDefault(require("dom-lib/addStyle"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
@@ -45,7 +47,7 @@ var MARGINS = {
 function defaultGetDimensionValue(dimension, elem) {
   var value = (0, _get.default)(elem, "offset" + (0, _capitalize.default)(dimension));
   var margins = MARGINS[dimension];
-  return value + parseInt((0, _domLib.getStyle)(elem, margins[0]), 10) + parseInt((0, _domLib.getStyle)(elem, margins[1]), 10);
+  return value + parseInt((0, _getStyle.default)(elem, margins[0]), 10) + parseInt((0, _getStyle.default)(elem, margins[1]), 10);
 }
 
 function getScrollDimensionValue(elem, dimension) {
@@ -78,21 +80,21 @@ var Collapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var dimension = typeof dimensionProp === 'function' ? dimensionProp() : dimensionProp;
   var handleEnter = (0, _react.useCallback)(function (elem) {
-    (0, _domLib.addStyle)(elem, dimension, 0);
+    (0, _addStyle.default)(elem, dimension, 0);
   }, [dimension]);
   var handleEntering = (0, _react.useCallback)(function (elem) {
-    (0, _domLib.addStyle)(elem, dimension, getScrollDimensionValue(elem, dimension));
+    (0, _addStyle.default)(elem, dimension, getScrollDimensionValue(elem, dimension));
   }, [dimension]);
   var handleEntered = (0, _react.useCallback)(function (elem) {
-    (0, _domLib.addStyle)(elem, dimension, 'auto');
+    (0, _addStyle.default)(elem, dimension, 'auto');
   }, [dimension]);
   var handleExit = (0, _react.useCallback)(function (elem) {
     var value = getDimensionValue ? getDimensionValue(dimension, elem) : 0;
-    (0, _domLib.addStyle)(elem, dimension, value + "px");
+    (0, _addStyle.default)(elem, dimension, value + "px");
   }, [dimension, getDimensionValue]);
   var handleExiting = (0, _react.useCallback)(function (elem) {
     triggerBrowserReflow(elem);
-    (0, _domLib.addStyle)(elem, dimension, 0);
+    (0, _addStyle.default)(elem, dimension, 0);
   }, [dimension]);
   return /*#__PURE__*/_react.default.createElement(_Transition.default, (0, _extends2.default)({}, rest, {
     ref: ref,

package/cjs/Animation/Transition.js

@@ -15,7 +15,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _domLib = require("dom-lib");
+var _getTransitionEnd = _interopRequireDefault(require("dom-lib/getTransitionEnd"));
+
+var _on = _interopRequireDefault(require("dom-lib/on"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -156,7 +158,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           timeout = _this$props.timeout,
           animation = _this$props.animation;
-      this.animationEventListener = (0, _domLib.on)(node, animation ? (0, _utils2.getAnimationEnd)() : (0, _domLib.transition)().end, this.nextCallback);
+      this.animationEventListener = (0, _on.default)(node, animation ? (0, _utils2.getAnimationEnd)() : (0, _getTransitionEnd.default)(), this.nextCallback);
 
       if (timeout !== null) {
         setTimeout(this.nextCallback, timeout);

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -18,9 +18,9 @@ export interface AutoCompleteProps<T = ValueType> extends WithAsProps, FormContr
     /** Called when a option is selected */
     onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent) => void;
     /** Called on focus */
-    onFocus?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onFocus?: React.FocusEventHandler;
     /** Called on blur */
-    onBlur?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    onBlur?: React.FocusEventHandler;
     /** Called on menu focus */
     onMenuFocus?: (focusItemValue: any, event: React.KeyboardEvent) => void;
     /** The callback triggered by keyboard events. */

package/cjs/AutoComplete/AutoComplete.js

@@ -74,7 +74,8 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils3.shouldDisplay)(filterBy, value))) || [];
   var hasItems = items.length > 0;
-  var overlayRef = (0, _react.useRef)(null); // Used to hover the focuse item  when trigger `onKeydown`
+  var overlayRef = (0, _react.useRef)(null);
+  var isMounted = (0, _utils.useIsMounted)(); // Used to hover the focuse item  when trigger `onKeydown`
 
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
     data: datalist,
@@ -134,9 +135,11 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   };
 
   var handleClose = (0, _react.useCallback)(function () {
-    setFocus(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
+    if (isMounted()) {
+      setFocus(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+  }, [isMounted, onClose]);
   var handleOpen = (0, _react.useCallback)(function () {
     setFocus(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();

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/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>;