@kdcloudjs/kdesign 1.6.19 → 1.6.20

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/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/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/input-number/inputNumber.js

@@ -39,6 +39,8 @@ var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
 
 var _big = _interopRequireDefault(require("big.js"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -85,7 +87,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;
 
@@ -372,7 +375,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
-    className: inputPrefixCls
+    className: (0, _classnames.default)(inputPrefixCls, className)
   }));
 };
 

package/lib/select/select.js

@@ -440,8 +440,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) {
-      (0, _map.default)(realChildren).call(realChildren, function (child) {
+    if ((filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) !== selectedVal.length) {
+      (0, _map.default)(filledOptions).call(filledOptions, function (child) {
         var _ref = child.props || child,
             value = _ref.value;
 
@@ -454,6 +454,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         }
       });
       setMulOptions((0, _toConsumableArray2.default)(selectMulOpts));
+      setSearchValue('');
     } else {
       multipleRef.current.selectedVal = selectedVal = [];
       multipleRef.current.selectMulOpts = selectMulOpts = [];
@@ -566,10 +567,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     return (filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) === 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: emptyListCls
     }, emptyContent);
-  }; // const isShowSearch = useCallback(() => {
-  //   return !showSearch ? false : !!searchValue
-  // }, [showSearch, searchValue])
-
+  };
 
   var isShowSearch = (0, _react.useMemo)(function () {
     return (0, _isBoolean.default)(showSearch) ? showSearch : isMultiple;
@@ -600,8 +598,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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: dropDownCls,
       style: dropDownStyle,

package/lib/stepper/stepper.js

@@ -248,6 +248,7 @@ var InternalStepper = function InternalStepper(props, ref) {
 
   return /*#__PURE__*/_react.default.createElement(_inputNumber.default, (0, _extends2.default)({}, (0, _omit.omit)(inputNumberProps, ['step', 'type', 'stepBtnClassName', 'value', 'defaultValue']), {
     ref: inputNumberRef,
+    className: "".concat(inputPrefixCls, "-stepper"),
     stepperrref: stepperrref,
     value: value,
     prefix: getStepPrefix(),

package/lib/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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.6.19",
+  "version": "1.6.20",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [