@kdcloudjs/kdesign 1.3.1 → 1.3.4

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 _classNames3, _classNames4, _context5;
 
   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,7 +59,7 @@ 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"]); // 初始化level
 
 
   if (!restProps.level) {
@@ -74,19 +76,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) return;
     var subMenuWrapperEle = subMenuWrapperRef.current;
     var subMenuEle = subMenuRef.current;
 
@@ -134,15 +130,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,16 +167,24 @@ 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();
     }
   }); // 缩略模式自动关闭子菜单
@@ -191,8 +195,7 @@ var SubMenu = function SubMenu(props) {
 
   var handleMouseEvent = function handleMouseEvent(status) {
     if (disabled || triggerSubMenuAction === 'click') return;
-    handleOnOpenChange(keyValue);
-    setIsVisible(status);
+    handleVisibleChange(status);
   };
 
   var handleOnMouseEnter = function handleOnMouseEnter() {
@@ -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,
@@ -359,18 +286,97 @@ var SubMenu = function SubMenu(props) {
     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)),
-    key: keyValue
-  }, mouseEvent, {
+
+  if (mode !== 'vertical') {
+    var _classNames2, _context4;
+
+    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 && visible), _defineProperty(_classNames2, "".concat(prefixCls, "-active"), Array.isArray(openKeys) && _includesInstanceProperty(openKeys).call(openKeys, keyValue)), _classNames2)),
+      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(_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,
+        selectedKey: selectedKey,
+        openKeys: openKeys,
+        forceSubMenuRender: forceSubMenuRender,
+        triggerSubMenuAction: triggerSubMenuAction,
+        handleOnOpenChange: handleOnOpenChange,
+        handleOnClick: handleOnClick,
+        inlineIndent: inlineIndent,
+        paddingLeft: curPaddingLeft
+      });
+    }))));
+  } // eslint-disable-next-line react-hooks/rules-of-hooks
+
+
+  return usePopper( /*#__PURE__*/React.createElement("li", _extends({
+    className: classNames(prefixCls, className, (_classNames3 = {}, _defineProperty(_classNames3, "light", theme === 'light'), _defineProperty(_classNames3, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames3, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames3, "".concat(prefixCls, "-hover"), !disabled && visible), _defineProperty(_classNames3, "".concat(prefixCls, "-active"), Array.isArray(openKeys) && _includesInstanceProperty(openKeys).call(openKeys, keyValue)), _classNames3)),
+    ref: subMenuVerticalRef,
+    key: keyValue,
     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, (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-sub-second"), restProps.level === 1), _defineProperty(_classNames4, "".concat(prefixCls, "-sub-third"), restProps.level === 2), _classNames4))
+  }, _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,
+      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: visible,
+    prefixCls: 'kd-menu-popper',
+    popperClassName: theme === 'light' ? 'light' : ''
+  });
 };
 
 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

@@ -492,8 +492,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 +537,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,

package/es/style/icon/kdicon.css

@@ -1,9 +1,10 @@
 @font-face {
   font-family: "kdicon";
-  src: url("kdicon.woff?t=1649311510226") format("woff");
+  src: url("kdicon.woff?t=1654677347390") format("woff");
 }
 .kdicon {
   font-family: 'kdicon' !important;
+  font-size:16px;
   font-style:normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -62,6 +63,7 @@
 .kdicon-copy:before { content: "\e678"; }
 .kdicon-counterclockwise:before { content: "\e6e5"; }
 .kdicon-customize:before { content: "\e707"; }
+.kdicon-dashboard:before { content: "\e71c"; }
 .kdicon-date-selection:before { content: "\e70f"; }
 .kdicon-date:before { content: "\e6eb"; }
 .kdicon-delete-indentation:before { content: "\e697"; }

package/lib/button/group.js

@@ -146,7 +146,8 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
 
   var popperProps = (0, _extends2.default)((0, _extends2.default)({
     placement: 'bottomLeft',
-    trigger: 'click'
+    trigger: 'click',
+    gap: 0
   }, buttonGoupProps), {
     prefixCls: btnGroupPrefixCls,
     defaultVisible: optionShow,

package/lib/button/style/index.css

@@ -354,35 +354,36 @@
 .kd-btn-group-basic-icon {
   margin-left: 4px;
 }
-.kd-btn-group-trigger .kd-btn-primary {
-  background: var(--kd-c-button-group-trigger-color-background, #4367c1);
+.kd-btn-group-similar .kd-btn-group-trigger .kd-btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
 }
-.kd-btn-group-trigger .kd-btn-primary:hover {
-  background: var(--kd-c-button-group-trigger-color-background-hover, #4c74da);
-  border-color: var(--kd-c-button-group-trigger-color-background-hover, #4c74da);
+.kd-btn-group-similar .kd-btn-group-trigger .kd-btn-primary {
+  background: var(--kd-c-button-group-trigger-color-background, var(--kd-g-color-theme-7, #375cca));
 }
-.kd-btn-group-trigger .kd-btn-primary:active {
-  background: var(--kd-c-button-group-trigger-color-background-active, #3B5AA9);
+.kd-btn-group-similar .kd-btn-group-trigger .kd-btn-primary:hover {
+  background: var(--kd-c-button-group-trigger-color-background-hover, var(--kd-g-color-theme-6, #5582f3));
+  border-color: var(--kd-c-button-group-trigger-color-background-hover, var(--kd-g-color-theme-6, #5582f3));
 }
-.kd-btn-group-trigger .kd-btn-primary:disabled {
-  background: var(--kd-c-button-group-trigger-color-background-disabled, #95a4c8) !important;
+.kd-btn-group-similar .kd-btn-group-trigger .kd-btn-primary:active {
+  background: var(--kd-c-button-group-trigger-color-background-active, var(--kd-g-color-theme-8, #1f3ba1));
 }
-.kd-btn-group-trigger .kd-btn {
-  margin-left: -1px;
+.kd-btn-group-similar .kd-btn-group-trigger .kd-btn-primary:disabled {
+  background: var(--kd-c-button-group-trigger-color-background-disabled, var(--kd-g-color-theme-5, #87adff)) !important;
+}
+.kd-btn-group-similar > .kd-btn:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.kd-btn-group-similar > .kd-btn:first-child:hover {
+  z-index: 1;
 }
 .kd-btn-group .kd-btn-size-small,
 .kd-btn-group .kd-btn-size-middle,
 .kd-btn-group .kd-btn-size-large {
   min-width: unset;
 }
-.kd-btn-group .kd-btn:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.kd-btn-group .kd-btn:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
 .kd-btn-group .kd-dropdown-menu {
   padding: 0;
 }

package/lib/button/style/index.less

@@ -259,25 +259,37 @@
     }
   }
 
-  &-trigger {
-    .@{btn-prefix-cls}-primary {
-      background: @btn-group-trigger-color-background;
-      &:hover {
-        background: @btn-group-trigger-color-background-hover;
-        border-color: @btn-group-trigger-color-background-hover;
-      }
-
-      &:active {
-        background: @btn-group-trigger-color-background-active;
-      }
-
-      &:disabled {
-        background: @btn-group-trigger-color-background-disabled !important;
+  &-similar {
+    .@{btn-prefix-cls}-group-trigger {
+      .@{btn-prefix-cls} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: -1px;
+        &-primary {
+          background: @btn-group-trigger-color-background;
+          &:hover {
+            background: @btn-group-trigger-color-background-hover;
+            border-color: @btn-group-trigger-color-background-hover;
+          }
+  
+          &:active {
+            background: @btn-group-trigger-color-background-active;
+          }
+  
+          &:disabled {
+            background: @btn-group-trigger-color-background-disabled !important;
+          }
+        }
       }
     }
-
-    .@{btn-prefix-cls} {
-      margin-left: -1px;
+    &>.@{btn-prefix-cls} {
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        &:hover {
+          z-index: 1;
+        }
+      }
     }
   }
 
@@ -287,16 +299,6 @@
     &-size-large {
       min-width: unset;
     }
-
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
   }
 
   .@{kd-prefix}-dropdown {

package/lib/button/style/token.less

@@ -61,10 +61,10 @@
 @btn-group-dropdown-item-border-color: var(~'@{button-custom-prefix}-group-dropdown-item-border-color', #E5E5E5); // 集合按钮 下拉边框颜色
 @btn-group-dropdown-item-color-background-hover: var(~'@{button-custom-prefix}-group-dropdown-item-color-background-hover', #F5F5F5); // 集合按钮 下拉hover背景颜色
 @btn-group-dropdown-color-background: var(~'@{button-custom-prefix}-group-dropdown-color-background', #fff); // 集合按钮 下拉菜单背景颜色
-@btn-group-trigger-color-background: var(~'@{button-custom-prefix}-group-trigger-color-background', #4367c1);
-@btn-group-trigger-color-background-hover: var(~'@{button-custom-prefix}-group-trigger-color-background-hover', #4c74da);
-@btn-group-trigger-color-background-active: var(~'@{button-custom-prefix}-group-trigger-color-background-active', #3B5AA9);
-@btn-group-trigger-color-background-disabled: var(~'@{button-custom-prefix}-group-trigger-color-background-disabled', #95a4c8);
+@btn-group-trigger-color-background: var(~'@{button-custom-prefix}-group-trigger-color-background', @color-theme-7);
+@btn-group-trigger-color-background-hover: var(~'@{button-custom-prefix}-group-trigger-color-background-hover', @color-theme-6);
+@btn-group-trigger-color-background-active: var(~'@{button-custom-prefix}-group-trigger-color-background-active', @color-theme-8);
+@btn-group-trigger-color-background-disabled: var(~'@{button-custom-prefix}-group-trigger-color-background-disabled', @color-theme-5);
 
 // font
 @btn-g-font-weight: var(~'@{button-custom-prefix}-font-weight', @font-weight-light);

package/lib/cascader/cascader.d.ts

@@ -14,8 +14,8 @@ declare type FieldNames = {
     value: string;
     children: string;
 };
-export declare const PopupPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
-export declare type PopupPlacementType = typeof PopupPlacement[number];
+export declare const CascaderPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+export declare type CascaderPlacementType = typeof CascaderPlacement[number];
 export declare type CascaderValueType = Array<string | number>;
 export declare type CascaderExpandTrigger = 'click' | 'hover';
 export interface CascaderProps extends PopperProps {
@@ -29,8 +29,10 @@ export interface CascaderProps extends PopperProps {
     allowClear?: boolean;
     placeholder?: string;
     popupVisible?: boolean;
+    popperVisible?: boolean;
     fieldNames?: FieldNames;
     popupClassName?: string;
+    popperClassName?: string;
     changeOnSelect?: boolean;
     notFoundContent?: string;
     value?: CascaderValueType;
@@ -40,10 +42,12 @@ export interface CascaderProps extends PopperProps {
     expandIcon?: React.ReactNode;
     defaultPopupVisible?: boolean;
     defaultValue?: CascaderValueType;
-    popupPlacement?: PopupPlacementType;
+    popupPlacement?: CascaderPlacementType;
+    popperPlacement?: CascaderPlacementType;
     options?: Array<CascaderOptionType>;
     expandTrigger?: CascaderExpandTrigger;
     onPopupVisibleChange?: (visible: boolean) => void;
+    onPopperVisibleChange?: (visible: boolean) => void;
     loadData?: (selectedOptions: CascaderOptionType[]) => void;
     dropdownRender?: (menus: React.ReactNode) => React.ReactNode;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;