@kdcloudjs/kdesign 1.3.2 → 1.3.3

package/es/button/group.js

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

package/es/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/es/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/es/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/es/checkbox/checkbox.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
@@ -39,11 +39,12 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
     return isBoolean(checked) ? checked : defaultChecked;
   };
 
-  var _React$useState = React.useState(getChecked()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selected = _React$useState2[0],
-      setSelected = _React$useState2[1];
+  var _useState = useState(getChecked()),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
 
+  var labelRef = useRef(null);
   devWarning(CheckboxTypes.indexOf(checkboxType) === -1, 'checkbox', "cannot found checkbox type '".concat(checkboxType, "'"));
   devWarning(CheckboxSizes.indexOf(size) === -1, 'checkbox', "cannot found size type '".concat(size, "'"));
   var checkboxPrefixCls = getPrefixCls(prefixCls, 'checkbox', customPrefixcls);
@@ -70,14 +71,21 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   useEffect(function () {
     isBoolean(checked) && checked !== selected && setSelected(checked);
   }, [checked, selected]);
+  useEffect(function () {
+    var handleRepeatClick = function handleRepeatClick(e) {
+      var element = e.target;
 
-  var handleRepeatClick = function handleRepeatClick(e) {
-    var element = e.target;
+      if (element.tagName !== 'INPUT') {
+        e.stopPropagation();
+      }
+    };
 
-    if (element.tagName !== 'INPUT') {
-      e.stopPropagation();
-    }
-  };
+    labelRef.current.addEventListener('click', handleRepeatClick);
+    return function () {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      labelRef.current.removeEventListener('click', handleRepeatClick);
+    };
+  }, []);
 
   var getDefaultCheckbox = function getDefaultCheckbox() {
     var _context19, _context20;
@@ -88,7 +96,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       React.createElement("label", {
         className: getRootClassName,
         style: style,
-        onClick: handleRepeatClick
+        ref: labelRef
       }, /*#__PURE__*/React.createElement("span", {
         className: checkedWrapperClassName
       }, selected && /*#__PURE__*/React.createElement("span", {

package/es/config-provider/compDefaultProps.d.ts

@@ -132,7 +132,6 @@ declare const compDefaultProps: {
         mode: string;
         defaultOpen: boolean;
         showArrow: boolean;
-        showSearch: boolean;
     };
     Image: {
         preview: boolean;

package/es/config-provider/compDefaultProps.js

@@ -137,8 +137,7 @@ var compDefaultProps = {
     borderType: 'underline',
     mode: 'single',
     defaultOpen: false,
-    showArrow: true,
-    showSearch: false
+    showArrow: true
   },
   Image: {
     preview: true

package/es/menu/menu.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { MenuMode, MenuTheme, TriggerSubMenuAction, SubMenuChangeEventHandler } from './interface';
 import MenuItem from './menuItem';
 import SubMenu from './subMenu';

package/es/menu/menu.js

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -19,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import { toArray } from '../_utils/react-children';
 import { ConfigContext } from '../config-provider';
 import { getCompProps } from '../_utils';
@@ -32,6 +33,8 @@ var isFunction = function isFunction(fn) {
   return fn && typeof fn === 'function';
 };
 
+var openSubMenuSet = new _Set();
+
 var Menu = function Menu(props) {
   var _context2, _classNames;
 
@@ -42,6 +45,9 @@ var Menu = function Menu(props) {
       pkgPrefixCls = _React$useContext.prefixCls,
       userDefaultProps = _React$useContext.compDefaultProps;
 
+  var userSelectedKey = props.selectedKey,
+      userOpenKeys = props.openKeys;
+
   var _b = getCompProps('Menu', userDefaultProps, props),
       customPrefixcls = _b.prefixCls,
       mode = _b.mode,
@@ -57,20 +63,35 @@ var Menu = function Menu(props) {
       restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed"]);
 
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu', customPrefixcls);
-  devWarning(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
-  var defaultSelectedKey = ('selectedKey' in restProps ? restProps.selectedKey : restProps.defaultSelectedKey) || '';
-  var defaultOpenKeys = ('openKeys' in restProps ? restProps.openKeys : restProps.defaultOpenKeys) || []; // const [collapsed, setCollapsed] = React.useState<boolean | undefined>(restProps.collapsed)
+  devWarning(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'")); // const [collapsed, setCollapsed] = React.useState<boolean | undefined>(restProps.collapsed)
 
-  var _React$useState = React.useState(defaultSelectedKey),
+  var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       selectedKey = _React$useState2[0],
       setSelectedKey = _React$useState2[1];
 
-  var _React$useState3 = React.useState(defaultOpenKeys),
+  var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       openKeys = _React$useState4[0],
-      setOpenKeys = _React$useState4[1]; // triggerSubMenuAction内嵌模式固定为click，即该值设置只对垂直模式有效
+      setOpenKeys = _React$useState4[1];
 
+  useEffect(function () {
+    if (userSelectedKey !== undefined) {
+      setSelectedKey(userSelectedKey);
+    }
+  }, [userSelectedKey]);
+  useEffect(function () {
+    if (userOpenKeys !== undefined) {
+      setOpenKeys(userOpenKeys);
+    }
+  }, [userOpenKeys]);
+  useEffect(function () {
+    if (Array.isArray(userOpenKeys)) {
+      userOpenKeys.forEach(function (d) {
+        openSubMenuSet.add(d);
+      });
+    }
+  }, []); // triggerSubMenuAction内嵌模式固定为click，即该值设置只对垂直模式有效
 
   if (mode === 'inline') {
     restProps.triggerSubMenuAction = 'click';
@@ -80,7 +101,9 @@ var Menu = function Menu(props) {
 
 
   var handleOnClick = function handleOnClick(info) {
-    setSelectedKey(info.key);
+    if (userSelectedKey === undefined) {
+      setSelectedKey(info.key);
+    }
 
     if (mode !== 'inline' && openKeys.length > 0) {
       setOpenKeys([]);
@@ -102,18 +125,24 @@ var Menu = function Menu(props) {
   }; // 子菜单展开关闭的回调
 
 
-  var handleOnOpenChange = function handleOnOpenChange(openKey) {
-    var index = openKeys.indexOf(openKey);
+  var handleOnOpenChange = function handleOnOpenChange(openKey, isAdd) {
+    var clean = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
-    if (index > -1) {
-      _spliceInstanceProperty(openKeys).call(openKeys, index, 1);
-
-      setOpenKeys(openKeys);
+    if (clean) {
+      openSubMenuSet.clear();
     } else {
-      setOpenKeys(_concatInstanceProperty(openKeys).call(openKeys, openKey));
+      if (isAdd) {
+        openSubMenuSet.add(openKey);
+      } else {
+        openSubMenuSet.delete(openKey);
+      }
+    }
+
+    if (userOpenKeys === undefined) {
+      setOpenKeys(_toConsumableArray(openSubMenuSet));
     }
 
-    onOpenChange && onOpenChange(openKey);
+    onOpenChange && onOpenChange(_toConsumableArray(openSubMenuSet));
   };
 
   var renderMenu = function renderMenu() {
@@ -129,11 +158,14 @@ var Menu = function Menu(props) {
         mode: mode,
         openKeys: openKeys,
         selectedKey: selectedKey,
+        theme: theme,
         triggerSubMenuAction: restProps.triggerSubMenuAction,
         forceSubMenuRender: forceSubMenuRender,
         handleOnOpenChange: handleOnOpenChange,
         handleOnClick: handleOnClick,
-        inlineIndent: inlineIndent
+        inlineIndent: inlineIndent,
+        userOpenKeys: userOpenKeys,
+        userSelectedKey: userSelectedKey
       });
     }));
   };

package/es/menu/menuItem.d.ts

@@ -6,5 +6,6 @@ export interface MenuItemProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
     style?: React.CSSProperties;
 }
+export declare const MENU_ITEM_CONTAINER_NAME = "menu-item-content-container";
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<unknown>>;
 export default MenuItem;

package/es/menu/menuItem.js

@@ -21,14 +21,7 @@ import { getCompProps } from '../_utils';
 import classNames from 'classnames';
 import { renderReactNodeFunction, DEFAUTL_PADDING } from './util';
 import devWarning from '../_utils/devwarning';
-
-var renderItemChildren = function renderItemChildren(children) {
-  if (typeof children === 'string') {
-    return /*#__PURE__*/React.createElement("span", null, children);
-  }
-
-  return renderReactNodeFunction(children);
-};
+export var MENU_ITEM_CONTAINER_NAME = 'menu-item-content-container';
 
 var InternalMenuItem = function InternalMenuItem(props, ref) {
   var _classNames;
@@ -63,9 +56,20 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-item', customPrefixcls);
   var menuItemRef = ref || /*#__PURE__*/React.createRef();
 
+  var renderItemChildren = function renderItemChildren(children) {
+    if (typeof children === 'string') {
+      return /*#__PURE__*/React.createElement("span", {
+        className: MENU_ITEM_CONTAINER_NAME
+      }, children);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: MENU_ITEM_CONTAINER_NAME
+    }, typeof children === 'function' ? children() : children);
+  };
+
   var preventClick = function preventClick() {
-    if (disabled || mode === 'inline') return true;
-    return false;
+    return !!(disabled || mode === 'inline');
   };
 
   var handleOnMouseEnter = function handleOnMouseEnter(e) {