rsuite 5.55.0 → 5.56.0

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

@@ -2,10 +2,10 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject, _templateObject2, _templateObject3;
-import React, { useContext, useCallback, useMemo } from 'react';
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import React, { useContext, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useControlled, partitionHTMLProps, useClassNames } from '../utils';
+import { useControlled, partitionHTMLProps, useClassNames, useEventCallback, useUniqueId, mergeRefs } from '../utils';
 import { CheckboxGroupContext } from '../CheckboxGroup';
 import { refType } from '../internals/propTypes';
 /**
@@ -30,12 +30,15 @@ var Checkbox = /*#__PURE__*/React.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,
@@ -52,7 +55,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick = props.onClick,
     onCheckboxClick = props.onCheckboxClick,
     onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "checked", "className", "children", "classPrefix", "checkable", "defaultChecked", "title", "inputRef", "inputProps", "indeterminate", "tabIndex", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onClick", "onCheckboxClick", "onChange"]);
+    rest = _objectWithoutPropertiesLoose(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 = useControlled(controlledChecked, defaultChecked),
     selfChecked = _useControlled[0],
     setSelfChecked = _useControlled[1],
@@ -72,7 +75,7 @@ var Checkbox = /*#__PURE__*/React.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,
@@ -87,7 +90,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // In uncontrolled situations, use defaultChecked instead of checked
     htmlInputProps[controlled ? 'checked' : 'defaultChecked'] = checked;
   }
-  var handleChange = useCallback(function (event) {
+  var checkboxRef = useRef(null);
+  var handleChange = useEventCallback(function (event) {
     var nextChecked = event.target.checked;
     if (disabled || readOnly) {
       return;
@@ -95,30 +99,34 @@ var Checkbox = /*#__PURE__*/React.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 = useEventCallback(function (event) {
+    // Prevent check when label is not clickable
+    if (!labelClickable && event.target !== checkboxRef.current) {
+      event.preventDefault();
+    }
+  });
+  var labelId = useUniqueId('label-');
   if (plaintext) {
     return checked ? /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
       ref: ref,
       className: classes
     }), children) : null;
   }
-  var input = /*#__PURE__*/React.createElement("span", {
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["wrapper"]))),
-    onClick: onCheckboxClick,
-    "aria-disabled": disabled
+  var control = /*#__PURE__*/React.createElement("span", {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["control"])))
   }, /*#__PURE__*/React.createElement("input", _extends({}, htmlInputProps, inputProps, {
+    "aria-disabled": disabled,
+    "aria-checked": indeterminate ? 'mixed' : checked,
+    "aria-labelledby": labelId,
     name: name,
     value: value,
     type: "checkbox",
-    ref: inputRef,
+    ref: 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.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["inner"]))),
@@ -132,28 +140,30 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["checker"])))
   }, /*#__PURE__*/React.createElement("label", {
-    title: title
-  }, checkable ? input : null, children)));
+    title: title,
+    onClick: handleLabelClick
+  }, checkable ? control : null, /*#__PURE__*/React.createElement("span", {
+    className: prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["label"]))),
+    id: labelId
+  }, children))));
 });
 Checkbox.displayName = 'Checkbox';
 Checkbox.propTypes = {
   as: PropTypes.elementType,
-  title: PropTypes.string,
+  checked: PropTypes.bool,
+  checkable: PropTypes.bool,
   className: PropTypes.string,
-  inline: PropTypes.bool,
+  children: PropTypes.node,
+  classPrefix: PropTypes.string,
   disabled: PropTypes.bool,
-  checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
+  inline: PropTypes.bool,
   indeterminate: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
   inputProps: PropTypes.any,
   inputRef: refType,
   value: PropTypes.any,
-  children: PropTypes.node,
-  classPrefix: PropTypes.string,
-  tabIndex: PropTypes.number,
-  checkable: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
   onCheckboxClick: PropTypes.func
 };
 export default Checkbox;

package/esm/DatePicker/DatePicker.js

@@ -413,7 +413,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = merge(menuClassName, className);
+    var classes = merge(menuClassName, className, prefix('popup-date'));
     var styles = _extends({}, menuStyle, {
       left: left,
       top: top

package/esm/DateRangePicker/DateRangePicker.js

@@ -553,7 +553,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = merge(className, menuClassName, prefix('daterange-menu'));
+    var classes = merge(className, menuClassName, prefix('popup-daterange'));
     var panelClasses = prefix('daterange-panel', {
       'daterange-panel-show-one-calendar': showOneCalendar
     });

package/esm/InputPicker/InputPicker.js

@@ -118,7 +118,7 @@ var InputPicker = /*#__PURE__*/React.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`');
   }
@@ -573,7 +573,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       listItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
       listItemAs: multi ? ListCheckItem : ListItem,
       listItemProps: {
-        renderMenuItemCheckbox: renderMenuItemCheckbox
+        renderCheckbox: renderCheckbox
       },
       activeItemValues: multi ? value : [value],
       focusItemValue: focusItemValue,

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

@@ -120,7 +120,8 @@ var TreeView = /*#__PURE__*/React.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.createElement(Icon, {
       className: prefix('caret'),
       spin: node.loading

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

@@ -1,31 +1,34 @@
 'use client';
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useContext } from 'react';
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { RadioContext } from '../RadioGroup/RadioGroup';
-import { useClassNames, useControlled, partitionHTMLProps } from '../utils';
+import { useClassNames, useControlled, useEventCallback, useUniqueId, partitionHTMLProps } from '../utils';
 import { refType } from '../internals/propTypes';
 /**
  * The `Radio` component is a simple radio button.
  * @see https://rsuitejs.com/components/radio
  */
 var Radio = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useContext = useContext(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 = useContext(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,
@@ -46,15 +49,16 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value = props.value,
     onChange = props.onChange,
     onClick = props.onClick,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "title", "className", "children", "checked", "defaultChecked", "classPrefix", "tabIndex", "inputRef", "inputProps", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onChange", "onClick"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "title", "className", "children", "checked", "color", "defaultChecked", "classPrefix", "tabIndex", "inputRef", "inputProps", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onChange", "onClick"]);
   var _useControlled = useControlled(typeof groupValue !== 'undefined' ? groupValue === value : checkedProp, defaultChecked || false),
     checked = _useControlled[0],
-    setChecked = _useControlled[1];
+    setChecked = _useControlled[1],
+    selfControlled = _useControlled[2];
   var _useClassNames = 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
@@ -62,59 +66,62 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _partitionHTMLProps = partitionHTMLProps(rest),
     htmlInputProps = _partitionHTMLProps[0],
     restProps = _partitionHTMLProps[1];
-  var handleChange = useCallback(function (event) {
+  var handleChange = 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.createElement("span", {
-    className: prefix('wrapper')
+  var labelId = useUniqueId('label-');
+  if (plaintext) {
+    return checked ? /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
+      ref: ref,
+      className: classes
+    }), children) : null;
+  }
+  var control = /*#__PURE__*/React.createElement("span", {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["control"])))
   }, /*#__PURE__*/React.createElement("input", _extends({}, 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: useCallback(function (event) {
-      return event.stopPropagation();
-    }, [])
+    onChange: handleChange
   })), /*#__PURE__*/React.createElement("span", {
-    className: prefix('inner'),
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["inner"]))),
     "aria-hidden": true
   }));
-  if (plaintext) {
-    return checked ? /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
-      ref: ref,
-      className: classes
-    }), children) : null;
-  }
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
     ref: ref,
     onClick: onClick,
-    className: classes,
-    "aria-checked": checked,
-    "aria-disabled": disabled
+    className: classes
   }), /*#__PURE__*/React.createElement("div", {
-    className: prefix('checker')
+    className: prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["checker"])))
   }, children ? /*#__PURE__*/React.createElement("label", {
     title: title
-  }, input, children) : input));
+  }, control, /*#__PURE__*/React.createElement("span", {
+    className: prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["label"]))),
+    id: labelId
+  }, children)) : control));
 });
 Radio.displayName = 'Radio';
 Radio.propTypes = {
   id: PropTypes.string,
   name: PropTypes.string,
   inline: PropTypes.bool,
-  title: PropTypes.string,
   disabled: PropTypes.bool,
   checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
@@ -124,8 +131,6 @@ Radio.propTypes = {
   classPrefix: PropTypes.string,
   value: PropTypes.any,
   inputRef: refType,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  tabIndex: PropTypes.number
+  onChange: PropTypes.func
 };
 export default Radio;

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

@@ -1,12 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useControlled } from '../utils';
+import { useClassNames, useControlled, useEventCallback } from '../utils';
 import { oneOf } from '../internals/propTypes';
 import Plaintext from '../internals/Plaintext';
-export var RadioContext = /*#__PURE__*/React.createContext({});
+export var RadioContext = /*#__PURE__*/React.createContext(void 0);
 
 /**
  * The `RadioGroup` component is used to group a collection of `Radio` components.
@@ -40,10 +40,10 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
-  var handleChange = useCallback(function (nextValue, event) {
+  var handleChange = 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 = useMemo(function () {
     return {
       inline: inline,

package/esm/TagPicker/index.js

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

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