@kdcloudjs/kdesign 1.3.2 → 1.3.5

package/es/menu/subMenu.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -19,18 +18,20 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import * as React from 'react';
+import React from 'react';
 import { ConfigContext } from '../config-provider';
 import { getCompProps } from '../_utils';
 import { toArray } from '../_utils/react-children';
 import classNames from 'classnames';
-import { isString, getWrapWidth, getItemWidth, renderReactNodeFunction, isElementInViewport, DEFAUTL_PADDING } from './util';
+import { isString, getItemWidth, renderReactNodeFunction, isElementInViewport, DEFAUTL_PADDING } from './util';
 import { useOnClickOutside } from '../_utils/hooks';
 import { Icon } from '../index';
+import usePopper from '../_utils/usePopper';
 import devWarning from '../_utils/devwarning';
+import { MENU_ITEM_CONTAINER_NAME } from './menuItem';
 
 var SubMenu = function SubMenu(props) {
-  var _classNames2;
+  var _classNames2, _classNames3, _context4;
 
   var _React$useContext = React.useContext(ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -40,6 +41,7 @@ var SubMenu = function SubMenu(props) {
 
   var _a = getCompProps('MenuSubMenu', userDefaultProps, props),
       customPrefixcls = _a.prefixCls,
+      theme = _a.theme,
       mode = _a.mode,
       title = _a.title,
       icon = _a.icon,
@@ -57,8 +59,9 @@ var SubMenu = function SubMenu(props) {
       handleOnOpenChange = _a.handleOnOpenChange,
       _a$paddingLeft = _a.paddingLeft,
       paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
-      restProps = __rest(_a, ["prefixCls", "mode", "title", "icon", "disabled", "children", "collapsed", "keyValue", "selectedKey", "openKeys", "triggerSubMenuAction", "forceSubMenuRender", "inlineIndent", "className", "style", "handleOnOpenChange", "paddingLeft"]); // 初始化level
+      restProps = __rest(_a, ["prefixCls", "theme", "mode", "title", "icon", "disabled", "children", "collapsed", "keyValue", "selectedKey", "openKeys", "triggerSubMenuAction", "forceSubMenuRender", "inlineIndent", "className", "style", "handleOnOpenChange", "paddingLeft"]);
 
+  var isVertical = mode === 'vertical'; // 初始化level
 
   if (!restProps.level) {
     restProps.level = 1;
@@ -74,19 +77,13 @@ var SubMenu = function SubMenu(props) {
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-submenu', customPrefixcls);
   var subMenuRef = React.useRef(null);
   var subMenuWrapperRef = React.useRef(null);
+  var subMenuVerticalRef = React.useRef(null);
+  var subMenuWrapperVerticalRef = React.useRef(null);
 
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isVisible = _React$useState2[0],
-      setIsVisible = _React$useState2[1];
+  var visible = Array.isArray(openKeys) && _includesInstanceProperty(openKeys).call(openKeys, keyValue);
 
   React.useEffect(function () {
-    if (openKeys.length > 0) {
-      setIsVisible(_includesInstanceProperty(openKeys).call(openKeys, keyValue));
-    }
-  }, [keyValue]);
-  React.useEffect(function () {
-    if (!isVisible) return;
+    if (!visible || isVertical) return;
     var subMenuWrapperEle = subMenuWrapperRef.current;
     var subMenuEle = subMenuRef.current;
 
@@ -134,15 +131,15 @@ var SubMenu = function SubMenu(props) {
     if (mode === 'inline') {
       var height = ((_a = subMenuWrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) || 0;
       return {
-        height: isVisible && !collapsed ? "".concat(height, "px") : '0px',
+        height: visible && !collapsed ? "".concat(height, "px") : '0px',
         overflow: 'hidden',
-        opacity: isVisible && !collapsed ? 1 : 0,
+        opacity: visible && !collapsed ? 1 : 0,
         transition: 'all 0.2s cubic-bezier(0,.4,.4,1)'
       };
     }
 
     var style = {
-      visibility: forceSubMenuRender && !isVisible ? 'visible' : 'hidden'
+      visibility: forceSubMenuRender && !visible ? 'visible' : 'hidden'
     };
 
     if (restProps.subMenuMode === 'horizontal') {
@@ -171,28 +168,34 @@ var SubMenu = function SubMenu(props) {
       paddingLeft: "".concat(popupOffsetPosition[0], "px"),
       paddingTop: "".concat(popupOffsetPosition[1], "px")
     });
-  }, [subMenuRef, restProps.popupOffset, forceSubMenuRender, isVisible, mode, restProps.subMenuMode]);
+  }, [subMenuRef, restProps.popupOffset, forceSubMenuRender, visible, mode, restProps.subMenuMode]);
+
+  var handleVisibleChange = function handleVisibleChange(status) {
+    var clean = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    handleOnOpenChange(keyValue, status, clean);
+  };
 
   var closeSubMenu = function closeSubMenu() {
-    setIsVisible(false);
-    handleOnOpenChange(keyValue);
+    handleVisibleChange(false, true);
   }; // 点击区域外的地方关闭
 
 
-  useOnClickOutside([subMenuRef], function () {
-    if (triggerSubMenuAction === 'click' && mode === 'vertical') {
+  useOnClickOutside([subMenuVerticalRef, subMenuWrapperVerticalRef], function (e) {
+    var _a;
+
+    var className = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className) || '';
+
+    if (!_includesInstanceProperty(className).call(className, MENU_ITEM_CONTAINER_NAME)) {
       closeSubMenu();
     }
-  }); // 缩略模式自动关闭子菜单
-
-  if (triggerSubMenuAction === 'click' && mode === 'vertical' && collapsed) {
-    closeSubMenu();
-  }
+  }); // // 缩略模式自动关闭子菜单
+  // if (triggerSubMenuAction === 'click' && mode === 'vertical' && collapsed) {
+  //   closeSubMenu()
+  // }
 
   var handleMouseEvent = function handleMouseEvent(status) {
     if (disabled || triggerSubMenuAction === 'click') return;
-    handleOnOpenChange(keyValue);
-    setIsVisible(status);
+    handleVisibleChange(status);
   };
 
   var handleOnMouseEnter = function handleOnMouseEnter() {
@@ -209,7 +212,7 @@ var SubMenu = function SubMenu(props) {
     // 保存路径
     info.keyPath = _concatInstanceProperty(_context = info.keyPath).call(_context, [keyValue]);
 
-    if (triggerSubMenuAction === 'click' && mode === 'vertical') {
+    if (triggerSubMenuAction === 'click' && isVertical) {
       closeSubMenu();
     }
 
@@ -217,11 +220,9 @@ var SubMenu = function SubMenu(props) {
   }; // 子菜单展开收缩
 
 
-  var handleOnClickSubMenu = function handleOnClickSubMenu(e) {
+  var handleOnClickSubMenu = function handleOnClickSubMenu() {
     if (disabled || triggerSubMenuAction === 'hover') return;
-    e.stopPropagation();
-    handleOnOpenChange(keyValue);
-    setIsVisible(!isVisible);
+    handleVisibleChange(!visible);
   };
 
   var renderItemTitle = function renderItemTitle() {
@@ -242,86 +243,12 @@ var SubMenu = function SubMenu(props) {
     if (mode !== 'inline' || collapsed) return null;
     return /*#__PURE__*/React.createElement(Icon, {
       type: "arrow-down",
-      className: classNames("".concat(prefixCls, "-arrow"), _defineProperty({}, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-arrow-")).call(_context2, isVisible ? 'up' : 'down'), true))
+      className: classNames("".concat(prefixCls, "-arrow"), _defineProperty({}, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-arrow-")).call(_context2, visible ? 'up' : 'down'), true))
     });
   };
 
-  var renderSubMenu = function renderSubMenu() {
-    var _context3;
-
-    var style = getCurrentStyle(); // 展开收缩动画。针对二级三级菜单目前使用单一的样式去区分了
-
-    var motionClassName = {};
-
-    if (mode !== 'inline') {
-      var prefixClsMotion = "".concat(prefixCls, "-sub");
-
-      if (isVisible) {
-        motionClassName["".concat(prefixClsMotion, "-second")] = restProps.level === 1;
-        motionClassName["".concat(prefixClsMotion, "-third")] = restProps.level === 2;
-      } else {
-        motionClassName["".concat(prefixClsMotion, "-hide")] = true;
-      }
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      style: style,
-      ref: subMenuWrapperRef
-    }, /*#__PURE__*/React.createElement("ul", {
-      className: classNames("".concat(prefixCls, "-sub"), restProps.popupClassName, motionClassName)
-    }, _mapInstanceProperty(_context3 = toArray(children)).call(_context3, function (item, index) {
-      var key = item.key || index;
-      return /*#__PURE__*/React.cloneElement(item, {
-        key: key,
-        level: restProps.level + 1,
-        keyValue: key,
-        collapsed: collapsed,
-        mode: mode,
-        selectedKey: selectedKey,
-        openKeys: openKeys,
-        forceSubMenuRender: forceSubMenuRender,
-        triggerSubMenuAction: triggerSubMenuAction,
-        handleOnOpenChange: handleOnOpenChange,
-        handleOnClick: handleOnClick,
-        inlineIndent: inlineIndent,
-        paddingLeft: curPaddingLeft
-      });
-    })));
-  };
-
-  var renderThridMenu = function renderThridMenu() {
-    var _context4;
-
-    var style = getCurrentStyle();
-    return /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames("".concat(prefixCls, "-thrid")),
-      onClick: function onClick(e) {
-        e.stopPropagation();
-      },
-      style: {
-        width: getWrapWidth(children)
-      }
-    }, _mapInstanceProperty(_context4 = toArray(children)).call(_context4, function (item, i) {
-      return /*#__PURE__*/React.cloneElement(item, {
-        level: restProps.level + 1,
-        subMenuMode: restProps.subMenuMode,
-        keyValue: item.key || i,
-        collapsed: collapsed,
-        mode: mode,
-        selectedKey: selectedKey,
-        openKeys: openKeys,
-        forceSubMenuRender: forceSubMenuRender,
-        triggerSubMenuAction: triggerSubMenuAction,
-        handleOnOpenChange: handleOnOpenChange,
-        handleOnClick: handleOnClick
-      });
-    })));
-  };
-
   if (restProps.subMenuMode === 'horizontal' && restProps.level > 1 && children) {
-    var _context5;
+    var _context3;
 
     var width = getItemWidth(children);
     return /*#__PURE__*/React.createElement("div", {
@@ -333,7 +260,7 @@ var SubMenu = function SubMenu(props) {
       className: classNames("".concat(prefixCls, "-thrid-title"))
     }, /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("ul", {
       className: classNames("".concat(prefixCls, "-thrid-list"), restProps.popupClassName)
-    }, _mapInstanceProperty(_context5 = toArray(children)).call(_context5, function (item, i) {
+    }, _mapInstanceProperty(_context3 = toArray(children)).call(_context3, function (item, i) {
       return /*#__PURE__*/React.cloneElement(item, {
         level: restProps.level + 1,
         subMenuMode: restProps.subMenuMode,
@@ -358,19 +285,99 @@ var SubMenu = function SubMenu(props) {
   var titleStyle = {
     paddingRight: "".concat(curPaddingRight, "px"),
     paddingLeft: "".concat(curPaddingLeft, "px")
-  };
-  return /*#__PURE__*/React.createElement("li", _extends({
-    ref: subMenuRef,
-    className: classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-hover"), !disabled && isVisible), _classNames2)),
+  }; // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  var verticalView = usePopper( /*#__PURE__*/React.createElement("li", _extends({
+    className: classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "light", theme === 'light'), _defineProperty(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-hover"), !disabled && visible), _defineProperty(_classNames2, "".concat(prefixCls, "-active"), Array.isArray(openKeys) && _includesInstanceProperty(openKeys).call(openKeys, keyValue)), _classNames2)),
+    ref: subMenuVerticalRef,
     key: keyValue
-  }, mouseEvent, {
-    style: style
+  }, {
+    onMouseLeave: handleOnMouseLeave,
+    onMouseEnter: handleOnMouseEnter,
+    onClick: handleOnClickSubMenu
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(prefixCls, "-title")),
     style: titleStyle
   }, icon && /*#__PURE__*/React.cloneElement(renderReactNodeFunction(icon), {
     className: classNames("".concat(prefixCls, "-icon"))
-  }), renderItemTitle(), renderItemArrow()), restProps.subMenuMode === 'horizontal' ? renderThridMenu() : renderSubMenu());
+  }), renderItemTitle(), renderItemArrow())), /*#__PURE__*/React.createElement("div", {
+    ref: subMenuWrapperVerticalRef,
+    onMouseLeave: function onMouseLeave() {
+      handleOnMouseLeave();
+    },
+    onMouseEnter: function onMouseEnter() {
+      handleOnMouseEnter();
+    }
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames("".concat(prefixCls, "-sub"), restProps.popupClassName, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-sub-second"), restProps.level === 1), _defineProperty(_classNames3, "".concat(prefixCls, "-sub-third"), restProps.level === 2), _classNames3))
+  }, _mapInstanceProperty(_context4 = toArray(children)).call(_context4, function (item, index) {
+    var key = item.key || index;
+    return /*#__PURE__*/React.cloneElement(item, {
+      key: key,
+      level: restProps.level + 1,
+      keyValue: key,
+      collapsed: collapsed,
+      mode: mode,
+      theme: theme,
+      selectedKey: selectedKey,
+      openKeys: openKeys,
+      forceSubMenuRender: forceSubMenuRender,
+      triggerSubMenuAction: triggerSubMenuAction,
+      handleOnOpenChange: handleOnOpenChange,
+      handleOnClick: handleOnClick,
+      inlineIndent: inlineIndent,
+      paddingLeft: curPaddingLeft
+    });
+  }))), {
+    arrow: false,
+    placement: 'rightTop',
+    gap: 0,
+    visible: isVertical ? visible : false,
+    disabled: isVertical ? undefined : true,
+    prefixCls: 'kd-menu-popper',
+    popperClassName: theme === 'light' ? 'light' : ''
+  });
+
+  if (isVertical) {
+    return verticalView;
+  } else {
+    var _classNames4, _context5;
+
+    return /*#__PURE__*/React.createElement("li", _extends({
+      ref: subMenuRef,
+      className: classNames(prefixCls, className, (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames4, "".concat(prefixCls, "-disabled"), disabled), _classNames4)),
+      key: keyValue
+    }, mouseEvent, {
+      style: style
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefixCls, "-title")),
+      style: titleStyle
+    }, icon && /*#__PURE__*/React.cloneElement(renderReactNodeFunction(icon), {
+      className: classNames("".concat(prefixCls, "-icon"))
+    }), renderItemTitle(), renderItemArrow()), /*#__PURE__*/React.createElement("div", {
+      style: getCurrentStyle(),
+      ref: subMenuWrapperRef
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: classNames("".concat(prefixCls, "-sub"), restProps.popupClassName)
+    }, _mapInstanceProperty(_context5 = toArray(children)).call(_context5, function (item, index) {
+      var key = item.key || index;
+      return /*#__PURE__*/React.cloneElement(item, {
+        key: key,
+        level: restProps.level + 1,
+        keyValue: key,
+        collapsed: collapsed,
+        mode: mode,
+        selectedKey: selectedKey,
+        openKeys: openKeys,
+        forceSubMenuRender: forceSubMenuRender,
+        triggerSubMenuAction: triggerSubMenuAction,
+        handleOnOpenChange: handleOnOpenChange,
+        handleOnClick: handleOnClick,
+        inlineIndent: inlineIndent,
+        paddingLeft: curPaddingLeft
+      });
+    }))));
+  }
 };
 
 SubMenu.displayName = 'SubMenu';

package/es/radio/radio.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IRadioProps } from './interface';
 declare const Radio: React.ForwardRefExoticComponent<IRadioProps & React.RefAttributes<unknown>>;
 export default Radio;

package/es/radio/radio.js

@@ -16,7 +16,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
@@ -85,22 +85,29 @@ var InternalRadio = function InternalRadio(props, ref) {
 
   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 handleRepeatClick = function handleRepeatClick(e) {
-    var element = e.target;
-
-    if (element.tagName !== 'INPUT') {
-      e.stopPropagation();
-    }
-  };
-
+  useEffect(function () {
+    var handleRepeatClick = function handleRepeatClick(e) {
+      var element = e.target;
+
+      if (element.tagName !== 'INPUT') {
+        e.stopPropagation();
+      }
+    };
+
+    var radioRef = mergedRef;
+    radioRef.current.addEventListener('click', handleRepeatClick);
+    return function () {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      radioRef.current.removeEventListener('click', handleRepeatClick);
+    };
+  }, []);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line
     React.createElement("label", {
       className: classString,
       style: style,
-      ref: mergedRef,
-      onClick: handleRepeatClick
+      ref: mergedRef
     }, /*#__PURE__*/React.createElement("input", _extends({
       type: "radio",
       className: "".concat(radioPrefixCls, "-input")

package/es/select/select.js

@@ -67,7 +67,6 @@ var InternalSelect = function InternalSelect(props, ref) {
       setInitValue = _useMergedState2[1];
 
   var realChildren = Array.isArray(options) ? options : toArray(children); // options配置项和默认children
-  // console.log('real', realChildren)
 
   var innerRef = React.useRef();
   var selectRef = ref || innerRef;
@@ -251,6 +250,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         return (child === null || child === void 0 ? void 0 : child.value) === key;
       }
     })) || {};
+    var optionsObj = obj.props ? obj.props : obj || {};
 
     if (value !== undefined) {
       // onChange && onChange(labelInValue ? { value: key, label } : key)
@@ -271,13 +271,13 @@ var InternalSelect = function InternalSelect(props, ref) {
           _spliceInstanceProperty(optsArr).call(optsArr, idx, 1);
         } else {
           valArr.push(key);
-          optsArr.push({
+          optsArr.push(_extends(_extends({}, optionsObj), {
             value: key,
             label: obj.props ? (_a = obj.props) === null || _a === void 0 ? void 0 : _a.children : obj.label || key
-          });
+          }));
         }
 
-        onChange && onChange(labelInValue ? optsArr : valArr);
+        onChange && onChange(labelInValue ? optsArr : valArr, optsArr);
 
         if (!isSelected) {
           onDeselect && onDeselect(key); // 下拉项取消选中时调用，参数为选中项的value,多选模式下生效
@@ -287,7 +287,10 @@ var InternalSelect = function InternalSelect(props, ref) {
         onChange && onChange(labelInValue ? {
           value: key,
           label: label
-        } : key);
+        } : key, _extends(_extends({}, optionsObj), {
+          value: key,
+          label: label
+        }));
       }
 
       onSelect && onSelect(key);
@@ -303,7 +306,10 @@ var InternalSelect = function InternalSelect(props, ref) {
       onChange && onChange(labelInValue ? {
         value: key,
         label: label
-      } : key);
+      } : key, _extends(_extends({}, optionsObj), {
+        value: key,
+        label: label
+      }));
     } else {
       var _multipleRef$current2 = multipleRef.current,
           _selectedVal = _multipleRef$current2.selectedVal,
@@ -318,15 +324,15 @@ var InternalSelect = function InternalSelect(props, ref) {
       } else {
         _selectedVal.push(key);
 
-        _selectMulOpts.push({
+        _selectMulOpts.push(_extends(_extends({}, optionsObj), {
           value: key,
           label: obj.props ? (_c = obj.props) === null || _c === void 0 ? void 0 : _c.children : obj.label || key
-        });
+        }));
       } // setInitValue([...selectedVal])
 
 
       setMulOptions(_toConsumableArray(_selectMulOpts));
-      onChange && onChange(labelInValue ? _selectMulOpts : _selectedVal);
+      onChange && onChange(labelInValue ? _selectMulOpts : _selectedVal, _selectMulOpts);
 
       if (!isSelected) {
         onDeselect && onDeselect(key); // 下拉项取消选中时调用，参数为选中项的value,多选模式下生效
@@ -347,9 +353,9 @@ var InternalSelect = function InternalSelect(props, ref) {
 
     if ((realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) !== selectedVal.length) {
       _mapInstanceProperty(realChildren).call(realChildren, function (child) {
-        var _child$props = child.props,
-            value = _child$props.value,
-            children = _child$props.children;
+        var _ref = child.props || child,
+            value = _ref.value,
+            children = _ref.children;
 
         if (!_includesInstanceProperty(selectedVal).call(selectedVal, value)) {
           selectedVal.push(value);
@@ -362,12 +368,12 @@ var InternalSelect = function InternalSelect(props, ref) {
 
       setMulOptions(_toConsumableArray(selectMulOpts));
     } else {
-      multipleRef.current.selectedVal = [];
-      multipleRef.current.selectMulOpts = [];
+      multipleRef.current.selectedVal = selectedVal = [];
+      multipleRef.current.selectMulOpts = selectMulOpts = [];
       setMulOptions([]);
     }
 
-    onChange && onChange(labelInValue ? selectMulOpts : selectedVal);
+    onChange && onChange(labelInValue ? selectMulOpts : selectedVal, selectMulOpts);
   }; // 筛选内容 ---可以优化，抽成hook
 
 
@@ -428,7 +434,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     _spliceInstanceProperty(selectMulOpts).call(selectMulOpts, idx, 1);
 
     setMulOptions(_toConsumableArray(selectMulOpts));
-    onChange && onChange(labelInValue ? selectMulOpts : selectedVal);
+    onChange && onChange(labelInValue ? selectMulOpts : selectedVal, selectMulOpts);
     e.stopPropagation();
   }; // 渲染后缀图标
 
@@ -492,8 +498,15 @@ var InternalSelect = function InternalSelect(props, ref) {
     return (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) === 0 && /*#__PURE__*/React.createElement("div", {
       className: emptyListCls
     }, emptyContent);
-  }; // 渲染下拉列表框
+  };
+
+  var isShowSearch = useCallback(function () {
+    if (isMultiple) {
+      return showSearch !== null && showSearch !== void 0 ? showSearch : true;
+    }
 
+    return showSearch !== null && showSearch !== void 0 ? showSearch : false;
+  }, [showSearch, isMultiple]); // 渲染下拉列表框
 
   var renderContent = function renderContent() {
     var _a;
@@ -530,7 +543,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: dropDownCls,
       style: dropDownStyle,
       ref: dropDownRef
-    }, (showSearch || isMultiple) && /*#__PURE__*/React.createElement("div", {
+    }, isShowSearch() && /*#__PURE__*/React.createElement("div", {
       className: searchCls
     }, /*#__PURE__*/React.createElement(Input, {
       ref: searchRef,
@@ -652,8 +665,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     var _a;
 
     if (selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) {
-      var _ref = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
-          width = _ref.width;
+      var _ref2 = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+          width = _ref2.width;
 
       return {
         width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || (width > 75 ? width : 75),

package/es/style/core/reset.less

@@ -194,10 +194,10 @@ template {
 /**
  * Reset scrollbar style
  */
-::-webkit-scrollbar {
-  width: 10px !important;
-  height: 10px !important;
-}
+// ::-webkit-scrollbar {
+//   width: 10px !important;
+//   height: 10px !important;
+// }
 
 ::-webkit-scrollbar-button {
   width: 0;

package/es/style/index.css

@@ -1779,10 +1779,6 @@ template {
 /**
  * Reset scrollbar style
  */
-::-webkit-scrollbar {
-  width: 10px !important;
-  height: 10px !important;
-}
 ::-webkit-scrollbar-button {
   width: 0;
   height: 0;

package/es/table/feature/useRangeSelection.d.ts

@@ -0,0 +1,3 @@
+import { TableRangeSelection, TablePipeline } from '../interface';
+declare function useRangeSelection(pipeline: TablePipeline, rangeSelection?: TableRangeSelection): void;
+export default useRangeSelection;

package/es/table/feature/useRangeSelection.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { features } from '@kdcloudjs/table';
+
+function useRangeSelection(pipeline, rangeSelection) {
+  if (rangeSelection) {
+    pipeline.use(features.rangeSelection(_extends({}, rangeSelection)));
+  }
+}
+
+export default useRangeSelection;

package/es/table/interface.d.ts

@@ -1,6 +1,16 @@
+/// <reference types="react" />
 import { TableProps as BaseTableProps, TablePipeline as TP, ArtColumnStaticPart } from '@kdcloudjs/table';
-import { SortFeatureOptions, RowDetailFeatureOptions, FilterFeatureOptions, TreeModeFeatureOptions, ColumnDragOptions, ColumnResizeOptions, ContextMenuFeatureOptions } from '@kdcloudjs/table/es/table/pipeline/features';
-export interface TableProps extends BaseTableProps {
+import { SortFeatureOptions, RowDetailFeatureOptions, FilterFeatureOptions, TreeModeFeatureOptions, ColumnDragOptions, ColumnResizeOptions, ContextMenuFeatureOptions, RangeSelectionFeatureOptions } from '@kdcloudjs/table/es/table/pipeline/features';
+declare type TablePropsOfComponents = Pick<BaseTableProps, 'components'> & {
+    components?: {
+        /** 复选框 */
+        Checkbox?: React.ComponentType;
+        /** 单选框 */
+        Radio?: React.ComponentType;
+    };
+};
+declare type TablePropsOfExtend = Omit<BaseTableProps, 'components'>;
+export interface TableProps extends TablePropsOfExtend, TablePropsOfComponents {
     rowSelection?: TableRowSelection;
     prefixCls?: string;
     rowDetail?: TableRowDetail;
@@ -11,6 +21,7 @@ export interface TableProps extends BaseTableProps {
     columnDrag?: boolean | ColumnDragOptions;
     columnResize?: boolean | ColumnResizeOptions;
     contextMenu?: IContextMenu;
+    rangeSelection?: TableRangeSelection;
 }
 export declare type RowSelectionType = 'checkbox' | 'radio';
 export declare type RowSelectionFixed = 'start' | 'end';
@@ -32,3 +43,5 @@ export declare type TableSort = SortFeatureOptions;
 export declare type TableTreeMode = TreeModeFeatureOptions;
 export declare type TablePipeline = TP;
 export declare type IContextMenu = boolean | ContextMenuFeatureOptions;
+export declare type TableRangeSelection = RangeSelectionFeatureOptions;
+export {};