@kdcloudjs/kdesign 1.6.19 → 1.6.21

package/es/button/group.d.ts

@@ -1,4 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
+import { PopperProps } from '../_utils/usePopper';
 import { ButtonType, ButtonSize } from './button';
 export declare const ButtonGroupTypes: ["basic", "similar"];
 export declare type ButtonGroupType = typeof ButtonGroupTypes[number];
@@ -6,7 +7,7 @@ export interface OverlayType {
     value?: string;
     label?: React.ReactNode;
 }
-export interface ButtonGroupProps {
+export interface ButtonGroupProps extends PopperProps {
     buttonType?: ButtonType;
     children?: ReactNode;
     className?: string;

package/es/checkbox/checkbox.js

@@ -87,7 +87,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   var innerIconClassName = classNames(_defineProperty({}, _concatInstanceProperty(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, mergedCheckboxType, "-inner"), true));
   var handleChange = useCallback(function (e) {
     onChange && onChange(e);
-    (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange) && (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange(value, e.target.checked));
+    (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange) && (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange(value, e.target.checked, e));
 
     if (!(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.isControlled)) {
       setSelected(e.target.checked);

package/es/checkbox/group.d.ts

@@ -10,7 +10,7 @@ export interface CheckboxGroupContext {
     groupValue?: Array<CheckboxValueType>;
     checkboxType?: CheckboxType;
     disabled?: boolean;
-    onCheckboxGroupChange?: (checkedValue: CheckboxValueType, isChecked: boolean) => void;
+    onCheckboxGroupChange?: (checkedValue: CheckboxValueType, isChecked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const GroupContext: React.Context<CheckboxGroupContext | null>;
 export interface CheckboxGroupProps {

package/es/checkbox/group.js

@@ -66,7 +66,7 @@ var CheckboxGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return innerValue.current.indexOf(targetValue) > -1 ? innerValue.current : _concatInstanceProperty(_context2 = innerValue.current).call(_context2, targetValue);
   };
 
-  var onCheckboxChange = function onCheckboxChange(checkedValue, isChecked) {
+  var onCheckboxChange = function onCheckboxChange(checkedValue, isChecked, e) {
     var newVal = [];
 
     if (isChecked) {
@@ -79,7 +79,7 @@ var CheckboxGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
       innerValue.current = newVal;
     }
 
-    onChange && onChange(newVal);
+    onChange && onChange(e, newVal);
   };
 
   var context = {
@@ -88,8 +88,8 @@ var CheckboxGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     name: name,
     isControlled: isControlled,
     checkboxType: checkboxType,
-    onCheckboxGroupChange: function onCheckboxGroupChange(checkedValue, isChecked) {
-      onCheckboxChange(checkedValue, isChecked);
+    onCheckboxGroupChange: function onCheckboxGroupChange(checkedValue, isChecked, e) {
+      onCheckboxChange(checkedValue, isChecked, e);
     }
   };
 

package/es/input-number/inputNumber.js

@@ -25,6 +25,7 @@ import { serialization } from '../_utils/numberUtil';
 import { formatEditNumber, formatNumber } from '../_utils/formatUtil';
 import devWarning from '../_utils/devwarning';
 import Big from 'big.js';
+import classNames from 'classnames';
 
 var InternalInputNumber = function InternalInputNumber(props, ref) {
   var _useContext = useContext(ConfigContext),
@@ -55,7 +56,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
       prefix = inputNumberProps.prefix,
       suffix = inputNumberProps.suffix,
       formatter = inputNumberProps.formatter,
-      others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix", "formatter"]);
+      className = inputNumberProps.className,
+      others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix", "formatter", "className"]);
 
   var initVal = value === undefined ? defaultValue : value;
 
@@ -342,7 +344,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
-    className: inputPrefixCls
+    className: classNames(inputPrefixCls, className)
   }));
 };
 

package/es/menu/style/index.css

@@ -104,6 +104,20 @@
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
+.menu-hidden {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+  -webkit-transition: opacity, visibility;
+  transition: opacity, visibility;
+  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
 .menu-dark-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
@@ -520,9 +534,10 @@
 .kd-menu-popper.hidden {
   opacity: 0;
   visibility: hidden;
-  display: none;
   -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
           animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
   -webkit-transition: opacity, visibility;
   transition: opacity, visibility;
   -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
@@ -562,6 +577,8 @@
   visibility: hidden;
   -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
           animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
   -webkit-transition: opacity, visibility;
   transition: opacity, visibility;
   -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);

package/es/menu/style/index.less

@@ -187,13 +187,7 @@
   }
 
   &.hidden {
-    opacity: 0;
-    visibility: hidden;
-    display: none;
-    animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
-    transition: opacity, visibility;
-    transition-duration: calc(@menu-motion-duration - 0.1s);
-    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+    .menu-hidden()
   }
 
   .@{submenu-prefix-cls} {
@@ -223,12 +217,7 @@
       }
 
       &-hide {
-        opacity: 0;
-        visibility: hidden;
-        animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
-        transition: opacity, visibility;
-        transition-duration: calc(@menu-motion-duration - 0.1s);
-        transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+        .menu-hidden()
       }
     }
   }

package/es/menu/style/mixin.less

@@ -78,6 +78,15 @@
   }
 }
 
+.menu-hidden {
+  opacity: 0;
+  visibility: hidden;
+  animation: kdZoomTopLeftOut calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+  animation-delay: 0.1s;
+  transition: opacity, visibility;
+  transition-duration: calc(@menu-motion-duration - 0.1s);
+  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
 
 .menu-dark-hover {
   background-color: @menu-sub-color-background;

package/es/radio/group.js

@@ -22,23 +22,22 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 
   React.useEffect(function () {
-    if (props.value) {
+    if (props.value !== undefined) {
       setValue(props.value);
     }
   }, [props.value]);
 
-  var onRadioChange = function onRadioChange(ev) {
+  var onRadioChange = function onRadioChange(ev, checkedValue) {
     var lastValue = value;
-    var val = ev.target.value;
 
     if (!('value' in props)) {
-      setValue(val);
+      setValue(checkedValue);
     }
 
     var onChange = props.onChange;
 
-    if (onChange && val !== lastValue) {
-      onChange(ev);
+    if (onChange && checkedValue !== lastValue) {
+      onChange(ev, checkedValue);
     }
   };
 

package/es/radio/interface.d.ts

@@ -30,7 +30,7 @@ export interface IRadioGroupProps {
     value?: any;
     className?: string;
     style?: React.CSSProperties;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: RadioValueType) => void;
     size?: SizeType;
     name?: string;
     children?: React.ReactNode;
@@ -40,7 +40,7 @@ export interface IRadioGroupProps {
     optionType?: RadioGroupOptionType;
 }
 export interface IRadioGroupContextProps {
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>, value: RadioValueType) => void;
     value: any;
     disabled?: boolean;
     name?: string;

package/es/radio/radio.js

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 
@@ -19,9 +19,12 @@ var __rest = this && this.__rest || function (s, e) {
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import isBoolean from 'lodash/isBoolean';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import RadioGroupContext from './context';
+import devWarning from '../_utils/devwarning';
 
 var InternalRadio = function InternalRadio(props, ref) {
   var _classNames;
@@ -42,14 +45,17 @@ var InternalRadio = function InternalRadio(props, ref) {
       children = _a.children,
       className = _a.className,
       radioType = _a.radioType,
+      value = _a.value,
+      disabled = _a.disabled,
       defaultChecked = _a.defaultChecked,
       customPrefixcls = _a.prefixCls,
-      restProps = __rest(_a, ["style", "checked", "children", "className", "radioType", "defaultChecked", "prefixCls"]); // 属性需要合并一遍用户定义的默认属性
+      restProps = __rest(_a, ["style", "checked", "children", "className", "radioType", "value", "disabled", "defaultChecked", "prefixCls"]); // 属性需要合并一遍用户定义的默认属性
 
 
-  var getChecked = function getChecked() {
-    return isBoolean(checked) ? checked : defaultChecked;
-  };
+  devWarning(!(isNumber(value) || isString(value)) && value !== '', 'radio', 'radio `value` type must string or number ');
+  devWarning(value === '', 'radio', 'radio value type is not empty string ');
+  var mergedDisabled = (context === null || context === void 0 ? void 0 : context.disabled) || restProps.disabled;
+  var initValue = context ? value === context.value : isBoolean(checked) ? checked : defaultChecked;
 
   var getPrefix = function getPrefix(radioType) {
     return "radio".concat(radioType === 'square' ? "-".concat(radioType) : '');
@@ -57,16 +63,15 @@ var InternalRadio = function InternalRadio(props, ref) {
 
   var radioPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, getPrefix(radioType), customPrefixcls); // 样式前缀
 
-  var _React$useState = React.useState(getChecked()),
+  var _React$useState = React.useState(initValue),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isChecked = _React$useState2[0],
       setIsChecked = _React$useState2[1];
 
   React.useEffect(function () {
-    checked !== undefined && setIsChecked(checked);
-  }, [checked]);
-
-  var radioProps = _extends({}, restProps);
+    var checkedValue = context ? value === context.value : isBoolean(checked) ? checked : defaultChecked;
+    setIsChecked(checkedValue);
+  }, [checked, defaultChecked, context === null || context === void 0 ? void 0 : context.value]);
 
   var onChange = function onChange(e) {
     setIsChecked(e.target.checked);
@@ -76,19 +81,11 @@ var InternalRadio = function InternalRadio(props, ref) {
     }
 
     if (context === null || context === void 0 ? void 0 : context.onChange) {
-      context.onChange(e);
+      context.onChange(e, value);
     }
   };
 
-  radioProps.onChange = onChange;
-
-  if (context) {
-    radioProps.name = context.name;
-    radioProps.checked = String(props.value) === String(context.value);
-    radioProps.disabled = props.disabled || context.disabled;
-  }
-
-  var classString = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(radioPrefixCls), true), _defineProperty(_classNames, "".concat(radioPrefixCls, "-disabled"), radioProps.disabled), _defineProperty(_classNames, "".concat(radioPrefixCls, "-checked"), context ? radioProps.checked : isChecked), _classNames), className); // 单选包裹元素class名称
+  var classString = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(radioPrefixCls), true), _defineProperty(_classNames, "".concat(radioPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(radioPrefixCls, "-checked"), isChecked), _classNames), className); // 单选包裹元素class名称
 
   useEffect(function () {
     var _a;
@@ -119,8 +116,13 @@ var InternalRadio = function InternalRadio(props, ref) {
       ref: mergedRef
     }, /*#__PURE__*/React.createElement("input", _extends({
       type: "radio",
-      className: "".concat(radioPrefixCls, "-input")
-    }, radioProps)), children !== undefined ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(radioPrefixCls, "-input"),
+      checked: isChecked,
+      onChange: onChange,
+      value: value,
+      name: context === null || context === void 0 ? void 0 : context.name,
+      disabled: mergedDisabled
+    }, restProps)), children !== undefined ? /*#__PURE__*/React.createElement("span", {
       className: "".concat(radioPrefixCls, "-text")
     }, children) : null)
   );

package/es/select/select.js

@@ -410,8 +410,8 @@ var InternalSelect = function InternalSelect(props, ref) {
         selectedVal = _multipleRef$current3.selectedVal,
         selectMulOpts = _multipleRef$current3.selectMulOpts;
 
-    if ((realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) !== selectedVal.length) {
-      _mapInstanceProperty(realChildren).call(realChildren, function (child) {
+    if ((filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) !== selectedVal.length) {
+      _mapInstanceProperty(filledOptions).call(filledOptions, function (child) {
         var _ref = child.props || child,
             value = _ref.value;
 
@@ -425,6 +425,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       });
 
       setMulOptions(_toConsumableArray(selectMulOpts));
+      setSearchValue('');
     } else {
       multipleRef.current.selectedVal = selectedVal = [];
       multipleRef.current.selectMulOpts = selectMulOpts = [];
@@ -540,10 +541,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     return (filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) === 0 && /*#__PURE__*/React.createElement("div", {
       className: emptyListCls
     }, emptyContent);
-  }; // const isShowSearch = useCallback(() => {
-  //   return !showSearch ? false : !!searchValue
-  // }, [showSearch, searchValue])
-
+  };
 
   var isShowSearch = useMemo(function () {
     return isBoolean(showSearch) ? showSearch : isMultiple;
@@ -575,8 +573,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       height: '30px',
       background: 'none'
     };
-    var indeterminate = mulOptions.length > 0 && mulOptions.length < realChildren.length;
-    var checked = mulOptions.length === realChildren.length;
+    var indeterminate = mulOptions.length > 0 && mulOptions.length < filledOptions.length;
+    var checked = mulOptions.length === filledOptions.length;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: dropDownCls,
       style: dropDownStyle,

package/es/stepper/stepper.js

@@ -213,6 +213,7 @@ var InternalStepper = function InternalStepper(props, ref) {
 
   return /*#__PURE__*/React.createElement(InputNumber, _extends({}, omit(inputNumberProps, ['step', 'type', 'stepBtnClassName', 'value', 'defaultValue']), {
     ref: inputNumberRef,
+    className: "".concat(inputPrefixCls, "-stepper"),
     stepperrref: stepperrref,
     value: value,
     prefix: getStepPrefix(),

package/es/stepper/style/index.css

@@ -101,22 +101,22 @@
     普通组件内部自身层级应设置在0-100间
 */
 /* -----------  zIndex  ——————---- end */
-.kd-inputNumber {
+.kd-inputNumber-stepper {
   width: 100px;
-  height: var(--kd-c-stepper-input-middle-sizing-height, 28px);
+  --kd-c-input-sizing-height-middle: 28px;
   --kd-c-input-wrapper-padding-left: 9px;
   --kd-c-input-padding-left: 0;
 }
-.kd-inputNumber input {
+.kd-inputNumber-stepper input {
   text-align: center;
   color: var(--kd-c-stepper-input-color, var(--kd-g-color-text-primary, #212121));
   margin: 0 4px;
   font-size: var(--kd-c-stepper-input-font-size, 12px);
 }
-.kd-inputNumber-icon {
+.kd-inputNumber-stepper-icon {
   font-size: 14px;
 }
-.kd-inputNumber-baseStep {
+.kd-inputNumber-stepper-baseStep {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -131,65 +131,65 @@
   height: 100%;
   cursor: pointer;
 }
-.kd-inputNumber-baseStep-small {
+.kd-inputNumber-stepper-baseStep-small {
   width: var(--kd-c-stepper-input-small-sizing-height, 20px);
 }
-.kd-inputNumber-baseStep-middle {
+.kd-inputNumber-stepper-baseStep-middle {
   width: var(--kd-c-stepper-input-middle-sizing-height, 28px);
 }
-.kd-inputNumber-baseStep-large {
+.kd-inputNumber-stepper-baseStep-large {
   width: var(--kd-c-stepper-input-large-sizing-height, 36px);
 }
-.kd-inputNumber-baseStep .kd-inputNumber-icon {
+.kd-inputNumber-stepper-baseStep .kd-inputNumber-stepper-icon {
   color: var(--kd-c-stepper-icon-color, var(--kd-g-color-text-secondary, #666));
   -webkit-transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
   transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
   font-size: 16px;
 }
-.kd-inputNumber-baseStep .kd-inputNumber-icon:hover {
+.kd-inputNumber-stepper-baseStep .kd-inputNumber-stepper-icon:hover {
   color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-inputNumber-baseStep:hover:not(.kd-inputNumber-baseStep-disabled) .kd-inputNumber-icon {
+.kd-inputNumber-stepper-baseStep:hover:not(.kd-inputNumber-stepper-baseStep-disabled) .kd-inputNumber-stepper-icon {
   color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-inputNumber-baseStep-disabled {
+.kd-inputNumber-stepper-baseStep-disabled {
   cursor: not-allowed;
   color: var(--kd-c-stepper-icon-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-inputNumber-baseStep-disabled .kd-inputNumber-icon {
+.kd-inputNumber-stepper-baseStep-disabled .kd-inputNumber-stepper-icon {
   color: unset !important;
 }
-.kd-inputNumber-baseStep-decrease {
+.kd-inputNumber-stepper-baseStep-decrease {
   border-right: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
 }
-.kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-small,
-.kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-small {
+.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-baseStep-small,
+.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-embedStep-small {
   margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-middle,
-.kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-middle {
+.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-baseStep-middle,
+.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-embedStep-middle {
   margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-large,
-.kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-large {
+.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-baseStep-large,
+.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-embedStep-large {
   margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-baseStep-increase {
+.kd-inputNumber-stepper-baseStep-increase {
   border-left: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
 }
-.kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-small,
-.kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-small {
+.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-baseStep-small,
+.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-embedStep-small {
   margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-middle,
-.kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-middle {
+.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-baseStep-middle,
+.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-embedStep-middle {
   margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-large,
-.kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-large {
+.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-baseStep-large,
+.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-embedStep-large {
   margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-embedStep {
+.kd-inputNumber-stepper-embedStep {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -207,19 +207,19 @@
   border-left: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
   border: none;
 }
-.kd-inputNumber-embedStep.kd-inputNumber-baseStep-small,
-.kd-inputNumber-embedStep.kd-inputNumber-embedStep-small {
+.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-baseStep-small,
+.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-embedStep-small {
   margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-embedStep.kd-inputNumber-baseStep-middle,
-.kd-inputNumber-embedStep.kd-inputNumber-embedStep-middle {
+.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-baseStep-middle,
+.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-embedStep-middle {
   margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-embedStep.kd-inputNumber-baseStep-large,
-.kd-inputNumber-embedStep.kd-inputNumber-embedStep-large {
+.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-baseStep-large,
+.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-embedStep-large {
   margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
 }
-.kd-inputNumber-embedStep span {
+.kd-inputNumber-stepper-embedStep span {
   height: 50%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -235,20 +235,20 @@
   cursor: pointer;
   font-size: 12px;
 }
-.kd-inputNumber-embedStep span .kd-inputNumber-icon {
+.kd-inputNumber-stepper-embedStep span .kd-inputNumber-stepper-icon {
   -webkit-transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
   transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
 }
-.kd-inputNumber-embedStep span:hover .kd-inputNumber-icon {
+.kd-inputNumber-stepper-embedStep span:hover .kd-inputNumber-stepper-icon {
   color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-inputNumber-embedStep span:last-child {
+.kd-inputNumber-stepper-embedStep span:last-child {
   border-bottom: none;
 }
-.kd-inputNumber-embedStep-disabled {
+.kd-inputNumber-stepper-embedStep-disabled {
   cursor: not-allowed !important;
   color: var(--kd-c-stepper-icon-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-inputNumber-embedStep-disabled .kd-inputNumber-icon {
+.kd-inputNumber-stepper-embedStep-disabled .kd-inputNumber-stepper-icon {
   color: unset !important;
 }

package/es/stepper/style/index.less

@@ -1,12 +1,12 @@
 @import '../../style/themes/index';
 @import './mixin.less';
 
-@inputNumber-prefix-cls: ~'@{kd-prefix}-inputNumber';
+@inputNumber-prefix-cls: ~'@{kd-prefix}-inputNumber-stepper';
 @inputWrapper-prefix-cls: ~'@{kd-prefix}-wrapper';
 .@{inputNumber-prefix-cls} {
   width: 100px;
-  height: @stepper-input-middle-sizing-height;
 
+  --kd-c-input-sizing-height-middle: 28px;
   --kd-c-input-wrapper-padding-left: 9px;
   --kd-c-input-padding-left: 0;
   input {

package/lib/button/group.d.ts

@@ -1,4 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
+import { PopperProps } from '../_utils/usePopper';
 import { ButtonType, ButtonSize } from './button';
 export declare const ButtonGroupTypes: ["basic", "similar"];
 export declare type ButtonGroupType = typeof ButtonGroupTypes[number];
@@ -6,7 +7,7 @@ export interface OverlayType {
     value?: string;
     label?: React.ReactNode;
 }
-export interface ButtonGroupProps {
+export interface ButtonGroupProps extends PopperProps {
     buttonType?: ButtonType;
     children?: ReactNode;
     className?: string;

package/lib/checkbox/checkbox.js

@@ -120,7 +120,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   var innerIconClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, (0, _concat.default)(_context18 = "".concat(checkboxPrefixCls, "-")).call(_context18, mergedCheckboxType, "-inner"), true));
   var handleChange = (0, _react.useCallback)(function (e) {
     onChange && onChange(e);
-    (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange) && (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange(value, e.target.checked));
+    (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange) && (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onCheckboxGroupChange(value, e.target.checked, e));
 
     if (!(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.isControlled)) {
       setSelected(e.target.checked);

package/lib/checkbox/group.d.ts

@@ -10,7 +10,7 @@ export interface CheckboxGroupContext {
     groupValue?: Array<CheckboxValueType>;
     checkboxType?: CheckboxType;
     disabled?: boolean;
-    onCheckboxGroupChange?: (checkedValue: CheckboxValueType, isChecked: boolean) => void;
+    onCheckboxGroupChange?: (checkedValue: CheckboxValueType, isChecked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const GroupContext: React.Context<CheckboxGroupContext | null>;
 export interface CheckboxGroupProps {

package/lib/checkbox/group.js

@@ -105,7 +105,7 @@ var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     return innerValue.current.indexOf(targetValue) > -1 ? innerValue.current : (0, _concat.default)(_context2 = innerValue.current).call(_context2, targetValue);
   };
 
-  var onCheckboxChange = function onCheckboxChange(checkedValue, isChecked) {
+  var onCheckboxChange = function onCheckboxChange(checkedValue, isChecked, e) {
     var newVal = [];
 
     if (isChecked) {
@@ -118,7 +118,7 @@ var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       innerValue.current = newVal;
     }
 
-    onChange && onChange(newVal);
+    onChange && onChange(e, newVal);
   };
 
   var context = {
@@ -127,8 +127,8 @@ var CheckboxGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     name: name,
     isControlled: isControlled,
     checkboxType: checkboxType,
-    onCheckboxGroupChange: function onCheckboxGroupChange(checkedValue, isChecked) {
-      onCheckboxChange(checkedValue, isChecked);
+    onCheckboxGroupChange: function onCheckboxGroupChange(checkedValue, isChecked, e) {
+      onCheckboxChange(checkedValue, isChecked, e);
     }
   };