rsuite 5.55.1 → 5.56.0

package/cjs/Checkbox/Checkbox.d.ts

@@ -1,43 +1,85 @@
 import React from 'react';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
 export declare type ValueType = string | number;
-export interface CheckboxProps<V = ValueType> extends WithAsProps {
-    /** HTML title */
-    title?: string;
-    /** Inline layout */
-    inline?: boolean;
-    /** A checkbox can appear disabled and be unable to change states */
+export interface CheckboxProps<V = ValueType> extends WithAsProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * The color of the checkbox when checked or indeterminate
+     *
+     * @version 5.56.0
+     */
+    color?: TypeAttributes.Color;
+    /**
+     * Whether to show checkbox
+     *
+     * @private Used in MultiCascader
+     */
+    checkable?: boolean;
+    /**
+     * A checkbox can appear disabled and be unable to change states
+     */
     disabled?: boolean;
-    /** Make the control readonly */
+    /**
+     * Make the control readonly
+     */
     readOnly?: boolean;
-    /** Render the control as plain text */
+    /**
+     * Render the control as plain text
+     */
     plaintext?: boolean;
-    /** Whether or not checkbox is checked. */
+    /**
+     * Whether or not checkbox is checked.
+     */
     checked?: boolean;
-    /** The initial value of checked. */
+    /**
+     * The initial value of checked.
+     */
     defaultChecked?: boolean;
-    /** Whether or not checkbox is indeterminate. */
+    /**
+     * Whether or not checkbox is indeterminate.
+     */
     indeterminate?: boolean;
-    /** Attributes applied to the input element. */
+    /**
+     * Attributes applied to the input element.
+     */
     inputProps?: React.HTMLAttributes<HTMLInputElement>;
-    /** Pass a ref to the input element. */
+    /**
+     * Pass a ref to the input element.
+     */
     inputRef?: React.Ref<any>;
-    /** The HTML input value. */
+    /**
+     * Inline layout
+     *
+     * @private Used in CheckboxGroup
+     */
+    inline?: boolean;
+    /**
+     * The HTML input value.
+     */
     value?: V;
-    /** A checkbox can receive focus. */
-    tabIndex?: number;
-    /** Whether to show checkbox */
-    checkable?: boolean;
-    /** Used for the name of the form */
+    /**
+     * Used for the name of the form
+     */
     name?: string;
-    /** Called when the user attempts to change the checked state. */
+    /**
+     * Whether the label is clickable
+     *
+     * @private Used in MultiCascader
+     */
+    labelClickable?: boolean;
+    /**
+     * Called when the user attempts to change the checked state.
+     */
     onChange?: (value: V | undefined, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Called when the checkbox or label is clicked. */
+    /**
+     * Called when the checkbox or label is clicked.
+     */
     onClick?: (event: React.SyntheticEvent) => void;
-    /** Called when the checkbox is clicked. */
+    /**
+     * Called when the checkbox is clicked.
+     *
+     * @private Used in MultiCascader
+     */
     onCheckboxClick?: (event: React.SyntheticEvent) => void;
-    /** Called when the user presses down a key. */
-    onKeyDown?: (event: React.KeyboardEvent) => void;
 }
 /**
  * The Checkbox component is used for selecting multiple options from a set.

package/cjs/Checkbox/Checkbox.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _CheckboxGroup = require("../CheckboxGroup");
 var _propTypes2 = require("../internals/propTypes");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * The Checkbox component is used for selecting multiple options from a set.
  * @see https://rsuitejs.com/components/checkbox
@@ -36,12 +36,15 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     classPrefix = _props$classPrefix === void 0 ? 'checkbox' : _props$classPrefix,
     _props$checkable = props.checkable,
     checkable = _props$checkable === void 0 ? true : _props$checkable,
+    color = props.color,
     _props$defaultChecked = props.defaultChecked,
     defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
     title = props.title,
     inputRef = props.inputRef,
     inputProps = props.inputProps,
     indeterminate = props.indeterminate,
+    _props$labelClickable = props.labelClickable,
+    labelClickable = _props$labelClickable === void 0 ? true : _props$labelClickable,
     _props$tabIndex = props.tabIndex,
     tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
     _props$disabled = props.disabled,
@@ -58,7 +61,7 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClick = props.onClick,
     onCheckboxClick = props.onCheckboxClick,
     onChange = props.onChange,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "checked", "className", "children", "classPrefix", "checkable", "defaultChecked", "title", "inputRef", "inputProps", "indeterminate", "tabIndex", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onClick", "onCheckboxClick", "onChange"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "checked", "className", "children", "classPrefix", "checkable", "color", "defaultChecked", "title", "inputRef", "inputProps", "indeterminate", "labelClickable", "tabIndex", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onClick", "onCheckboxClick", "onChange"]);
   var _useControlled = (0, _utils.useControlled)(controlledChecked, defaultChecked),
     selfChecked = _useControlled[0],
     setSelfChecked = _useControlled[1],
@@ -78,7 +81,7 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var classes = merge(className, withClassPrefix({
+  var classes = merge(className, withClassPrefix(color, {
     inline: inline,
     indeterminate: indeterminate,
     disabled: disabled,
@@ -93,7 +96,8 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // In uncontrolled situations, use defaultChecked instead of checked
     htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;
   }
-  var handleChange = (0, _react.useCallback)(function (event) {
+  var checkboxRef = (0, _react.useRef)(null);
+  var handleChange = (0, _utils.useEventCallback)(function (event) {
     var nextChecked = event.target.checked;
     if (disabled || readOnly) {
       return;
@@ -101,30 +105,34 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSelfChecked(nextChecked);
     onChange === null || onChange === void 0 ? void 0 : onChange(value, nextChecked, event);
     onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, nextChecked, event);
-  }, [disabled, readOnly, setSelfChecked, onChange, value, onGroupChange]);
+  });
+  var handleLabelClick = (0, _utils.useEventCallback)(function (event) {
+    // Prevent check when label is not clickable
+    if (!labelClickable && event.target !== checkboxRef.current) {
+      event.preventDefault();
+    }
+  });
+  var labelId = (0, _utils.useUniqueId)('label-');
   if (plaintext) {
     return checked ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
       ref: ref,
       className: classes
     }), children) : null;
   }
-  var input = /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["wrapper"]))),
-    onClick: onCheckboxClick,
-    "aria-disabled": disabled
+  var control = /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["control"])))
   }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, inputProps, {
+    "aria-disabled": disabled,
+    "aria-checked": indeterminate ? 'mixed' : checked,
+    "aria-labelledby": labelId,
     name: name,
     value: value,
     type: "checkbox",
-    ref: inputRef,
+    ref: (0, _utils.mergeRefs)(checkboxRef, inputRef),
     tabIndex: tabIndex,
     readOnly: readOnly,
     disabled: disabled,
-    "aria-disabled": disabled,
-    "aria-checked": indeterminate ? 'mixed' : checked,
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    },
+    onClick: onCheckboxClick,
     onChange: handleChange
   })), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["inner"]))),
@@ -138,28 +146,30 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["checker"])))
   }, /*#__PURE__*/_react.default.createElement("label", {
-    title: title
-  }, checkable ? input : null, children)));
+    title: title,
+    onClick: handleLabelClick
+  }, checkable ? control : null, /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
+    id: labelId
+  }, children))));
 });
 Checkbox.displayName = 'Checkbox';
 Checkbox.propTypes = {
   as: _propTypes.default.elementType,
-  title: _propTypes.default.string,
+  checked: _propTypes.default.bool,
+  checkable: _propTypes.default.bool,
   className: _propTypes.default.string,
-  inline: _propTypes.default.bool,
+  children: _propTypes.default.node,
+  classPrefix: _propTypes.default.string,
   disabled: _propTypes.default.bool,
-  checked: _propTypes.default.bool,
   defaultChecked: _propTypes.default.bool,
+  inline: _propTypes.default.bool,
   indeterminate: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  onClick: _propTypes.default.func,
   inputProps: _propTypes.default.any,
   inputRef: _propTypes2.refType,
   value: _propTypes.default.any,
-  children: _propTypes.default.node,
-  classPrefix: _propTypes.default.string,
-  tabIndex: _propTypes.default.number,
-  checkable: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onClick: _propTypes.default.func,
   onCheckboxClick: _propTypes.default.func
 };
 var _default = Checkbox;

package/cjs/InputPicker/InputPicker.js

@@ -124,7 +124,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     trigger = _useContext.trigger,
     disabledOptions = _useContext.disabledOptions,
     onTagRemove = _useContext.onTagRemove,
-    renderMenuItemCheckbox = _useContext.renderMenuItemCheckbox;
+    renderCheckbox = _useContext.renderCheckbox;
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
@@ -579,7 +579,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       listItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
       listItemAs: multi ? _Picker.ListCheckItem : _Picker.ListItem,
       listItemProps: {
-        renderMenuItemCheckbox: renderMenuItemCheckbox
+        renderCheckbox: renderCheckbox
       },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,

package/cjs/InputPicker/InputPickerContext.d.ts

@@ -20,7 +20,7 @@ export interface InputPickerContextProps extends TagOnlyProps {
      */
     disabledOptions?: boolean;
     /** Custom render checkbox on menu item */
-    renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
+    renderCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
 declare const InputPickerContext: React.Context<InputPickerContextProps>;
 export default InputPickerContext;

package/cjs/MultiCascader/TreeView.js

@@ -125,7 +125,8 @@ var TreeView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onCheck: function onCheck(_value, event, checked) {
         return _onCheck === null || _onCheck === void 0 ? void 0 : _onCheck(node, event, checked);
       },
-      checkable: !uncheckable
+      checkable: !uncheckable,
+      labelClickable: false
     }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/_react.default.createElement(Icon, {
       className: prefix('caret'),
       spin: node.loading

package/cjs/Radio/Radio.d.ts

@@ -1,32 +1,58 @@
 import React from 'react';
-import { WithAsProps } from '../@types/common';
+import { WithAsProps, TypeAttributes } from '../@types/common';
 export declare type ValueType = string | number;
 export interface RadioProps<T = ValueType> extends WithAsProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /** HTML title */
-    title?: string;
-    /** The disable of component */
+    /**
+     * The color of the radio when checked
+     *
+     * @version 5.56.0
+     */
+    color?: TypeAttributes.Color;
+    /**
+     * The disable of component
+     */
     disabled?: boolean;
-    /** Make the control readonly */
+    /**
+     * Make the control readonly
+     */
     readOnly?: boolean;
-    /** Render the control as plain text */
+    /**
+     * Render the control as plain text
+     */
     plaintext?: boolean;
-    /** Specifies whether the radio is selected */
+    /**
+     * Specifies whether the radio is selected
+     */
     checked?: boolean;
-    /** Specifies the initial state: whether or not the radio is selected */
+    /**
+     * Specifies the initial state: whether or not the radio is selected
+     */
     defaultChecked?: boolean;
-    /** Attributes applied to the input element. */
+    /**
+     * Attributes applied to the input element
+     */
     inputProps?: React.HTMLAttributes<HTMLInputElement>;
-    /** Pass a ref to the input element */
+    /**
+     * Pass a ref to the input element
+     */
     inputRef?: React.Ref<HTMLInputElement>;
-    /** Value, corresponding to the value of the Radiogroup, to determine whether the */
+    /**
+     * Value, corresponding to the value of the Radiogroup, to determine whether the
+     */
     value?: T;
-    /** Name to use for form */
+    /**
+     * Name to use for form
+     */
     name?: string;
-    /** Inline layout */
+    /**
+     * Inline layout.
+     *
+     * @private Used in RadioGroup
+     */
     inline?: boolean;
-    /** Primary content */
-    children?: React.ReactNode;
-    /** Callback function with value changed */
+    /**
+     * Callback function with value changed
+     */
     onChange?: (value: T | undefined, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**

package/cjs/Radio/Radio.js

@@ -1,10 +1,11 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 exports.default = void 0;
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
@@ -12,26 +13,28 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioGroup = require("../RadioGroup/RadioGroup");
 var _utils = require("../utils");
 var _propTypes2 = require("../internals/propTypes");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * The `Radio` component is a simple radio button.
  * @see https://rsuitejs.com/components/radio
  */
 var Radio = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useContext = (0, _react.useContext)(_RadioGroup.RadioContext),
-    groupValue = _useContext.value,
-    controlled = _useContext.controlled,
-    inlineContext = _useContext.inline,
-    nameContext = _useContext.name,
-    disabledContext = _useContext.disabled,
-    readOnlyContext = _useContext.readOnly,
-    plaintextContext = _useContext.plaintext,
-    onGroupChange = _useContext.onChange;
+  var radioContext = (0, _react.useContext)(_RadioGroup.RadioContext);
+  var _ref = radioContext !== null && radioContext !== void 0 ? radioContext : {},
+    groupValue = _ref.value,
+    inlineContext = _ref.inline,
+    nameContext = _ref.name,
+    disabledContext = _ref.disabled,
+    readOnlyContext = _ref.readOnly,
+    plaintextContext = _ref.plaintext,
+    onGroupChange = _ref.onChange;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     title = props.title,
     className = props.className,
     children = props.children,
     checkedProp = props.checked,
+    color = props.color,
     defaultChecked = props.defaultChecked,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'radio' : _props$classPrefix,
@@ -52,15 +55,16 @@ var Radio = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value = props.value,
     onChange = props.onChange,
     onClick = props.onClick,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "title", "className", "children", "checked", "defaultChecked", "classPrefix", "tabIndex", "inputRef", "inputProps", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onChange", "onClick"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "title", "className", "children", "checked", "color", "defaultChecked", "classPrefix", "tabIndex", "inputRef", "inputProps", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onChange", "onClick"]);
   var _useControlled = (0, _utils.useControlled)(typeof groupValue !== 'undefined' ? groupValue === value : checkedProp, defaultChecked || false),
     checked = _useControlled[0],
-    setChecked = _useControlled[1];
+    setChecked = _useControlled[1],
+    selfControlled = _useControlled[2];
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
-  var classes = merge(className, withClassPrefix({
+  var classes = merge(className, withClassPrefix(color, {
     inline: inline,
     disabled: disabled,
     checked: checked
@@ -68,59 +72,62 @@ var Radio = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(rest),
     htmlInputProps = _partitionHTMLProps[0],
     restProps = _partitionHTMLProps[1];
-  var handleChange = (0, _react.useCallback)(function (event) {
+  var handleChange = (0, _utils.useEventCallback)(function (event) {
     if (disabled || readOnly) {
       return;
     }
     setChecked(true);
     onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, event);
     onChange === null || onChange === void 0 ? void 0 : onChange(value, true, event);
-  }, [disabled, onChange, onGroupChange, readOnly, setChecked, value]);
+  });
+  var controlled = radioContext ? true : selfControlled;
   if (typeof controlled !== 'undefined') {
     // In uncontrolled situations, use defaultChecked instead of checked
     htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;
   }
-  var input = /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix('wrapper')
+  var labelId = (0, _utils.useUniqueId)('label-');
+  if (plaintext) {
+    return checked ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
+      ref: ref,
+      className: classes
+    }), children) : null;
+  }
+  var control = /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["control"])))
   }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, inputProps, {
+    "aria-labelledby": labelId,
+    "aria-checked": checked,
+    "aria-disabled": disabled,
     ref: inputRef,
     type: "radio",
     name: name,
     value: value,
     tabIndex: tabIndex,
+    readOnly: readOnly,
     disabled: disabled,
-    onChange: handleChange,
-    onClick: (0, _react.useCallback)(function (event) {
-      return event.stopPropagation();
-    }, [])
+    onChange: handleChange
   })), /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix('inner'),
+    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["inner"]))),
     "aria-hidden": true
   }));
-  if (plaintext) {
-    return checked ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
-      ref: ref,
-      className: classes
-    }), children) : null;
-  }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
     ref: ref,
     onClick: onClick,
-    className: classes,
-    "aria-checked": checked,
-    "aria-disabled": disabled
+    className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('checker')
+    className: prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["checker"])))
   }, children ? /*#__PURE__*/_react.default.createElement("label", {
     title: title
-  }, input, children) : input));
+  }, control, /*#__PURE__*/_react.default.createElement("span", {
+    className: prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
+    id: labelId
+  }, children)) : control));
 });
 Radio.displayName = 'Radio';
 Radio.propTypes = {
   id: _propTypes.default.string,
   name: _propTypes.default.string,
   inline: _propTypes.default.bool,
-  title: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   checked: _propTypes.default.bool,
   defaultChecked: _propTypes.default.bool,
@@ -130,9 +137,7 @@ Radio.propTypes = {
   classPrefix: _propTypes.default.string,
   value: _propTypes.default.any,
   inputRef: _propTypes2.refType,
-  onChange: _propTypes.default.func,
-  onClick: _propTypes.default.func,
-  tabIndex: _propTypes.default.number
+  onChange: _propTypes.default.func
 };
 var _default = Radio;
 exports.default = _default;

package/cjs/RadioGroup/RadioGroup.d.ts

@@ -21,7 +21,7 @@ export interface RadioGroupProps<T = ValueType> extends WithAsProps, FormControl
     /** Primary content */
     children?: React.ReactNode;
 }
-export declare const RadioContext: React.Context<RadioContextProps>;
+export declare const RadioContext: React.Context<RadioContextProps | undefined>;
 /**
  * The `RadioGroup` component is used to group a collection of `Radio` components.
  * @see https://rsuitejs.com/components/radio/#radio-group

package/cjs/RadioGroup/RadioGroup.js

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _propTypes2 = require("../internals/propTypes");
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
-var RadioContext = /*#__PURE__*/_react.default.createContext({});
+var RadioContext = /*#__PURE__*/_react.default.createContext(void 0);
 
 /**
  * The `RadioGroup` component is used to group a collection of `Radio` components.
@@ -47,10 +47,10 @@ var RadioGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
-  var handleChange = (0, _react.useCallback)(function (nextValue, event) {
+  var handleChange = (0, _utils.useEventCallback)(function (nextValue, event) {
     setValue(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue !== null && nextValue !== void 0 ? nextValue : '', event);
-  }, [onChange, setValue]);
+  });
   var contextValue = (0, _react.useMemo)(function () {
     return {
       inline: inline,

package/cjs/TagPicker/index.js

@@ -29,7 +29,7 @@ var TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       trigger: trigger,
       tagProps: tagProps,
       onTagRemove: onTagRemove,
-      renderMenuItemCheckbox: renderMenuItemCheckbox
+      renderCheckbox: renderMenuItemCheckbox
     };
   }, [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);
   return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {

package/cjs/internals/Picker/ListCheckItem.d.ts

@@ -1,23 +1,14 @@
 import React from 'react';
 import { CheckboxProps } from '../../Checkbox';
 import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
-export interface ListCheckItemProps extends WithAsProps {
+export interface ListCheckItemProps extends WithAsProps, Omit<CheckboxProps, 'onSelect'> {
     active?: boolean;
     checkboxAs?: React.ElementType | string;
-    classPrefix?: string;
-    disabled?: boolean;
-    checkable?: boolean;
-    indeterminate?: boolean;
-    value?: string | number;
     focus?: boolean;
-    title?: string;
-    className?: string;
-    children?: React.ReactNode;
     onSelect?: (value: any, event: React.SyntheticEvent, checked: boolean) => void;
     onCheck?: (value: any, event: React.SyntheticEvent, checked: boolean) => void;
     onSelectItem?: (value: any, event: React.SyntheticEvent, checked: boolean) => void;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
+    renderCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
 declare const ListCheckItem: RsRefForwardingComponent<'div', ListCheckItemProps>;
 export default ListCheckItem;

package/cjs/internals/Picker/ListCheckItem.js

@@ -29,12 +29,13 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     children = props.children,
     className = props.className,
     indeterminate = props.indeterminate,
+    labelClickable = props.labelClickable,
     onKeyDown = props.onKeyDown,
     onSelect = props.onSelect,
     onCheck = props.onCheck,
     onSelectItem = props.onSelectItem,
-    renderMenuItemCheckbox = props.renderMenuItemCheckbox,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "onKeyDown", "onSelect", "onCheck", "onSelectItem", "renderMenuItemCheckbox"]);
+    renderCheckbox = props.renderCheckbox,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "labelClickable", "onKeyDown", "onSelect", "onCheck", "onSelectItem", "renderCheckbox"]);
   var handleChange = (0, _utils.useEventCallback)(function (value, checked, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);
   });
@@ -58,13 +59,14 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     focus: focus
   });
   var checkboxProps = {
-    value: value,
-    disabled: disabled,
-    indeterminate: indeterminate,
     checkable: checkable,
     children: children,
     checked: active,
     className: checkboxItemClasses,
+    disabled: disabled,
+    value: value,
+    indeterminate: indeterminate,
+    labelClickable: labelClickable,
     onKeyDown: disabled ? undefined : onKeyDown,
     onChange: handleChange,
     onClick: handleSelectItem,
@@ -80,7 +82,7 @@ var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     ref: ref,
     className: merge(className, rootPrefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["picker-list-item"])))),
     tabIndex: -1
-  }), renderMenuItemCheckbox ? renderMenuItemCheckbox(checkboxProps) : /*#__PURE__*/_react.default.createElement(CheckboxItem, (0, _extends2.default)({
+  }), renderCheckbox ? renderCheckbox(checkboxProps) : /*#__PURE__*/_react.default.createElement(CheckboxItem, (0, _extends2.default)({
     role: "checkbox"
   }, checkboxProps)));
 });