@kdcloudjs/kdesign 1.3.4 → 1.3.7

package/es/_utils/usePopper.d.ts

@@ -15,6 +15,7 @@ export interface PopperProps {
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
     defaultVisible?: boolean;
+    autoPlacement?: boolean;
     popperClassName?: string;
     placement?: PlacementType;
     popperStyle?: React.CSSProperties;

package/es/_utils/usePopper.js

@@ -150,6 +150,8 @@ function usePopper(locatorElement, popperElement, props) {
       mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0.1 : _props$mouseLeaveDela,
       _props$defaultVisible = props.defaultVisible,
       defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
+      _props$autoPlacement = props.autoPlacement,
+      autoPlacement = _props$autoPlacement === void 0 ? true : _props$autoPlacement,
       _props$getTriggerElem = props.getTriggerElement,
       getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
     return locatorNode;
@@ -287,36 +289,38 @@ function usePopper(locatorElement, popperElement, props) {
       var currentPos = trigger === 'contextMenu' ? mousePos : locatorPos;
       var _currentPlacement = placement;
 
-      if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
-        _currentPlacement = _currentPlacement.replace('top', 'bottom');
-      }
+      if (autoPlacement) {
+        if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
+          _currentPlacement = _currentPlacement.replace('top', 'bottom');
+        }
 
-      if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
-        _currentPlacement = _currentPlacement.replace('bottom', 'top');
-      }
+        if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
+          _currentPlacement = _currentPlacement.replace('bottom', 'top');
+        }
 
-      if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
-        _currentPlacement = _currentPlacement.replace('Left', 'Right');
-      }
+        if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
+          _currentPlacement = _currentPlacement.replace('Left', 'Right');
+        }
 
-      if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
-        _currentPlacement = _currentPlacement.replace('Right', 'Left');
-      }
+        if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
+          _currentPlacement = _currentPlacement.replace('Right', 'Left');
+        }
 
-      if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
-        _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
-      }
+        if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
+          _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
+        }
 
-      if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
-        _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
-      }
+        if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
+          _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
+        }
 
-      if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
-        _currentPlacement = _currentPlacement.replace('left', 'right');
-      }
+        if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
+          _currentPlacement = _currentPlacement.replace('left', 'right');
+        }
 
-      if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
-        _currentPlacement = _currentPlacement.replace('right', 'left');
+        if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
+          _currentPlacement = _currentPlacement.replace('right', 'left');
+        }
       }
 
       var leftLeft = currentPos.left - popperWidth - gap;
@@ -429,7 +433,7 @@ function usePopper(locatorElement, popperElement, props) {
       setArrowPos(_arrowPos);
       setCurrentPlacement(_currentPlacement);
     }
-  }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth]);
+  }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
   useEffect(function () {
     if (canAlign) {
       alignPopper();
@@ -444,7 +448,7 @@ function usePopper(locatorElement, popperElement, props) {
 
   var popperContainerStyle = _extends(_extends(_extends({
     position: 'absolute'
-  }, popperStyle), align), arrow ? arrowStyle : {});
+  }, align), arrow ? arrowStyle : {}), popperStyle);
 
   var popperProps = {
     ref: popperRef,

package/es/anchor/anchor.js

@@ -320,7 +320,9 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     !isLocked && setOptionShow(visible);
   };
 
-  var popperProps = _extends(_extends({}, anchorProps), {
+  var popperProps = _extends(_extends({
+    autoPlacement: false
+  }, anchorProps), {
     prefixCls: anchorPrefixCls,
     defaultVisible: optionShow,
     visible: optionShow,
@@ -328,6 +330,22 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     onVisibleChange: handleVisibleChange
   });
 
+  var fixedRef = React.useRef(null);
+
+  if (type === 'advanced' && isLocked) {
+    if (fixedRef.current) {
+      var _fixedRef$current$get = fixedRef.current.getBoundingClientRect(),
+          left = _fixedRef$current$get.left,
+          top = _fixedRef$current$get.top;
+
+      popperProps.popperStyle = {
+        position: 'fixed',
+        left: left,
+        top: top
+      };
+    }
+  }
+
   var addChildrenProps = function addChildrenProps(linksChildren) {
     var _context4;
 
@@ -456,6 +474,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       type: "lock-solid"
     });
     return /*#__PURE__*/React.createElement("div", {
+      ref: fixedRef,
       className: anchorAdvancedClass,
       style: dropdownStyle
     }, lockedIcon !== false && /*#__PURE__*/React.createElement("span", {

package/es/base-data/style/index.css

@@ -222,6 +222,7 @@
 }
 .kd-baseData-dropdown-options {
   height: var(--kd-c-base-data-dropdown-options-sizing-height, 32px);
+  cursor: pointer;
 }
 .kd-baseData-dropdown-options:hover {
   background: var(--kd-c-base-data-color-background-hover, var(--kd-g-color-hover, #f5f5f5));

package/es/base-data/style/index.less

@@ -115,6 +115,7 @@
 
     &-options {
       height: @base-data-dropdown-options-height;
+      cursor: pointer;
 
       &:hover {
         background: @base-data-hover-bg;

package/es/button/style/index.css

@@ -241,6 +241,15 @@
 .kd-btn-size-small.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-small, 14px);
   padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-btn-size-small .kd-btn-group-basic-icon {
   font-size: var(--kd-c-button-icon-font-size-small, 14px);
@@ -255,6 +264,15 @@
 .kd-btn-size-middle.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-middle, 16px);
   padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-btn-size-middle .kd-btn-group-basic-icon {
   font-size: var(--kd-c-button-icon-font-size-middle, 16px);
@@ -269,6 +287,15 @@
 .kd-btn-size-large.kd-btn-icon-only {
   font-size: var(--kd-c-button-icon-font-size-large, 18px);
   padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-btn-size-large .kd-btn-group-basic-icon {
   font-size: var(--kd-c-button-icon-font-size-large, 18px);
@@ -337,6 +364,15 @@
 }
 .kd-btn-loading {
   cursor: default;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-btn-block {
   width: 100%;

package/es/button/style/index.less

@@ -114,6 +114,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-small-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -127,6 +130,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-middle-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -140,6 +146,9 @@
     &.@{btn-prefix-cls}-icon-only {
       font-size: @btn-icon-large-font-size;
       padding: 0 @btn-icon-padding-horizontal;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .@{btn-prefix-cls}-group-basic-icon {
@@ -234,6 +243,9 @@
   // 加载中按钮
   &-loading {
     cursor: default;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
   // 按钮开启块化撑满父元素
   &-block {
@@ -271,11 +283,11 @@
             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;
           }

package/es/checkbox/checkbox.js

@@ -72,6 +72,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
     isBoolean(checked) && checked !== selected && setSelected(checked);
   }, [checked, selected]);
   useEffect(function () {
+    var _a;
+
     var handleRepeatClick = function handleRepeatClick(e) {
       var element = e.target;
 
@@ -80,10 +82,12 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       }
     };
 
-    labelRef.current.addEventListener('click', handleRepeatClick);
+    (_a = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', handleRepeatClick);
     return function () {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      labelRef.current.removeEventListener('click', handleRepeatClick);
+      var _a; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+      (_a = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', handleRepeatClick);
     };
   }, []);
 

package/es/form/Field.js

@@ -98,7 +98,8 @@ var Field = function Field(props) {
       getInternalHooks = fieldContext.getInternalHooks,
       vertical = fieldContext.vertical,
       getDefaultValue = fieldContext.getDefaultValue,
-      local = fieldContext.local;
+      local = fieldContext.local,
+      formDisabled = fieldContext.disabled;
 
   var _getInternalHooks = getInternalHooks(INTERNAL_HOOK_KEY),
       registerField = _getInternalHooks.registerField,
@@ -264,17 +265,17 @@ var Field = function Field(props) {
         chDisabled = _ch$props.disabled,
         chDefaultValue = _ch$props.defaultValue;
 
-    var onChange = function onChange(evt) {
+    var onChange = function onChange() {
       if (chValue === undefined) {
-        setFieldValue(getInputValueFormProp(evt));
+        setFieldValue(getInputValueFormProp(arguments.length <= 0 ? undefined : arguments[0]));
       }
 
       if (typeof faChange === 'function') {
-        faChange(evt);
+        faChange.apply(void 0, arguments);
       }
 
       if (typeof chChange === 'function') {
-        chChange(evt);
+        chChange.apply(void 0, arguments);
       }
     };
 
@@ -292,7 +293,7 @@ var Field = function Field(props) {
     return _extends(_extends({}, rest), (_extends3 = {
       onChange: onChange,
       defaultValue: defaultValue
-    }, _defineProperty(_extends3, innerValuePropName, fieldValue), _defineProperty(_extends3, "disabled", chDisabled || faDisabled), _extends3));
+    }, _defineProperty(_extends3, innerValuePropName, fieldValue), _defineProperty(_extends3, "disabled", chDisabled !== undefined ? chDisabled : faDisabled !== undefined ? faDisabled : formDisabled), _extends3));
   };
 
   return /*#__PURE__*/React.createElement("div", {

package/es/form/Form.d.ts

@@ -4,6 +4,7 @@ declare type BaseFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'on
 export interface FormProps<Values = any> extends BaseFormProps {
     children?: React.ReactNode;
     defaultValues?: Store;
+    disabled?: boolean;
     className?: string;
     form?: FormInstance<Values>;
     labelAlign?: LabelAlign;

package/es/form/Form.js

@@ -52,7 +52,8 @@ var Form = function Form(props, ref) {
       onFinish = formProps.onFinish,
       onFinishFailed = formProps.onFinishFailed,
       onValuesChange = formProps.onValuesChange,
-      restProps = __rest(formProps, ["children", "defaultValues", "className", "form", "labelAlign", "labelWidth", "layout", "name", "prefixCls", "wrapperWidth", "onFinish", "onFinishFailed", "onValuesChange"]);
+      disabled = formProps.disabled,
+      restProps = __rest(formProps, ["children", "defaultValues", "className", "form", "labelAlign", "labelWidth", "layout", "name", "prefixCls", "wrapperWidth", "onFinish", "onFinishFailed", "onValuesChange", "disabled"]);
 
   var formPrefixCls = getPrefixCls(prefixCls, 'form', customizePrefixCls);
   var formClassName = classnames((_classnames = {}, _defineProperty(_classnames, "".concat(formPrefixCls), true), _defineProperty(_classnames, _concatInstanceProperty(_context = "".concat(formPrefixCls, "-")).call(_context, layout), true), _classnames), className);
@@ -90,6 +91,7 @@ var Form = function Form(props, ref) {
       labelWidth: labelWidth,
       wrapperWidth: wrapperWidth,
       local: formLang,
+      disabled: disabled,
       vertical: layout === 'vertical'
     });
   }, [formInstance, labelAlign, labelWidth, wrapperWidth, layout, formLang]);

package/es/form/interface.d.ts

@@ -34,6 +34,7 @@ export interface InternalFormInstance extends FormInstance {
     labelAlign?: LabelAlign;
     wrapperWidth?: string | number;
     vertical?: boolean;
+    disabled?: boolean;
     local?: InnerLocale;
     getInternalHooks: (key: string) => InternalHooks | null;
 }

package/es/menu/menu.js

@@ -75,31 +75,32 @@ var Menu = function Menu(props) {
       openKeys = _React$useState4[0],
       setOpenKeys = _React$useState4[1];
 
+  if (mode === 'inline') {
+    restProps.triggerSubMenuAction = 'click';
+  }
+
+  useEffect(function () {
+    setOpenKeys([]);
+    setSelectedKey('');
+    openSubMenuSet.clear();
+  }, [mode]);
   useEffect(function () {
     if (userSelectedKey !== undefined) {
       setSelectedKey(userSelectedKey);
     }
   }, [userSelectedKey]);
   useEffect(function () {
-    if (userOpenKeys !== undefined) {
+    if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
       setOpenKeys(userOpenKeys);
-    }
-  }, [userOpenKeys]);
-  useEffect(function () {
-    if (Array.isArray(userOpenKeys)) {
+      openSubMenuSet.clear();
       userOpenKeys.forEach(function (d) {
         openSubMenuSet.add(d);
       });
     }
-  }, []); // triggerSubMenuAction内嵌模式固定为click，即该值设置只对垂直模式有效
-
-  if (mode === 'inline') {
-    restProps.triggerSubMenuAction = 'click';
-  } // React.useEffect(() => {
+  }, [userOpenKeys]); // React.useEffect(() => {
   //   setCollapsed(restProps.collapsed)
   // }, [restProps.collapsed])
 
-
   var handleOnClick = function handleOnClick(info) {
     if (userSelectedKey === undefined) {
       setSelectedKey(info.key);

package/es/menu/subMenu.js

@@ -31,7 +31,7 @@ import devWarning from '../_utils/devwarning';
 import { MENU_ITEM_CONTAINER_NAME } from './menuItem';
 
 var SubMenu = function SubMenu(props) {
-  var _classNames3, _classNames4, _context5;
+  var _classNames2, _classNames3, _context4;
 
   var _React$useContext = React.useContext(ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -59,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", "theme", "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;
@@ -82,7 +83,7 @@ var SubMenu = function SubMenu(props) {
   var visible = Array.isArray(openKeys) && _includesInstanceProperty(openKeys).call(openKeys, keyValue);
 
   React.useEffect(function () {
-    if (!visible) return;
+    if (!visible || isVertical) return;
     var subMenuWrapperEle = subMenuWrapperRef.current;
     var subMenuEle = subMenuRef.current;
 
@@ -187,11 +188,10 @@ var SubMenu = function SubMenu(props) {
     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;
@@ -212,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();
     }
 
@@ -285,53 +285,12 @@ var SubMenu = function SubMenu(props) {
   var titleStyle = {
     paddingRight: "".concat(curPaddingRight, "px"),
     paddingLeft: "".concat(curPaddingLeft, "px")
-  };
-
-  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
+  }; // 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)),
+  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,
-    style: style
+    key: keyValue
   }, {
     onMouseLeave: handleOnMouseLeave,
     onMouseEnter: handleOnMouseEnter,
@@ -350,8 +309,8 @@ var SubMenu = function SubMenu(props) {
       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) {
+    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,
@@ -373,10 +332,52 @@ var SubMenu = function SubMenu(props) {
     arrow: false,
     placement: 'rightTop',
     gap: 0,
-    visible: visible,
+    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.js

@@ -86,6 +86,8 @@ 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名称
 
   useEffect(function () {
+    var _a;
+
     var handleRepeatClick = function handleRepeatClick(e) {
       var element = e.target;
 
@@ -95,10 +97,12 @@ var InternalRadio = function InternalRadio(props, ref) {
     };
 
     var radioRef = mergedRef;
-    radioRef.current.addEventListener('click', handleRepeatClick);
+    (_a = radioRef === null || radioRef === void 0 ? void 0 : radioRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', handleRepeatClick);
     return function () {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      radioRef.current.removeEventListener('click', handleRepeatClick);
+      var _a; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+      (_a = radioRef === null || radioRef === void 0 ? void 0 : radioRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', handleRepeatClick);
     };
   }, []);
   return (